@alfalab/core-components 48.25.0 → 48.25.1-beta.0

package/universal-modal/cssm/desktop/components/center-modal/{styles/index.module.css → index.module.css}

@@ -29,11 +29,10 @@
     /* scroll */
 } .component {
     min-width: 500px;
-    width: 500px;
     min-height: 264px;
-    height: 100%;
     border-radius: var(--border-radius-24);
     overflow-x: hidden;
+    margin: unset;
 
     /*
         Применяем аппаратное ускорение с помощью will-change и backface-visibility
@@ -43,12 +42,12 @@
     backface-visibility: hidden
 } .component.overlayHidden {
         box-shadow: var(--shadow-m);
-    } .component .container {
-        height: 100%;
-    } .verticalTop {
-    margin-top: 0;
-} .verticalBottom {
-    margin-bottom: 0;
+    } .wrapperJustifyStart {
+    justify-content: start;
+} .wrapperJustifyCenter {
+    justify-content: center;
+} .wrapperJustifyEnd {
+    justify-content: end;
 } /* prettier-ignore */ .marginTop-0 {
         margin-top: 0px;
     } .marginTop-1 {

package/universal-modal/cssm/desktop/components/modal-content/modal-content.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { BaseModalProps } from "../../../../../base-modal";
+import { UniversalModalDesktopProps } from "../../types/props";
+type Props = Pick<BaseModalProps, 'children'> & Pick<UniversalModalDesktopProps, 'height' | 'scrollableContainerRef'> & {
+    wheelDeltaY: number;
+};
+declare const ModalContent: FC<Props>;
+export { ModalContent };

package/universal-modal/cssm/desktop/components/modal-content/modal-content.js

@@ -0,0 +1,48 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var mergeRefs = require('react-merge-refs');
+var cn = require('classnames');
+var coreComponentsScrollbar = require('../../../../../scrollbar/cssm');
+var desktop_hooks_useModalHighlighted = require('../../hooks/use-modal-highlighted.js');
+var desktop_hooks_useOutsideScroll = require('../../hooks/use-outside-scroll.js');
+var desktop_hooks_useSetScrollbarHeight = require('../../hooks/use-set-scrollbar-height.js');
+var desktop_utils_setFooterAndHeaderRefs = require('../../utils/set-footer-and-header-refs.js');
+var styles = require('./modal-content.module.css');
+
+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 styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var ModalContent = function (props) {
+    var _a;
+    var children = props.children, wheelDeltaY = props.wheelDeltaY, 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 = desktop_hooks_useModalHighlighted.useModalHighlighted({ scrollbarContentNodeRef: scrollbarContentNodeRef, scrollableNodeRef: scrollableNodeRef }).handleScroll;
+    desktop_hooks_useOutsideScroll.useOutsideScroll({ scrollableNodeRef: scrollableNodeRef, wheelDeltaY: wheelDeltaY });
+    var enhancedChildren = desktop_utils_setFooterAndHeaderRefs.setFooterAndHeaderRefs({
+        children: children,
+        headerElementRef: headerElementRef,
+        footerElementRef: footerElementRef,
+    }).enhancedChildren;
+    desktop_hooks_useSetScrollbarHeight.useSetScrollbarHeight({ scrollbarRef: scrollbarRef, verticalBarRef: verticalBarRef, headerElementRef: headerElementRef, footerElementRef: footerElementRef });
+    return (React__default.default.createElement(coreComponentsScrollbar.Scrollbar, { className: styles__default.default.scrollable, ref: scrollbarRef, verticalBarRef: verticalBarRef, scrollableNodeProps: {
+            ref: mergeRefs__default.default([scrollableNodeRef, scrollableContainerRef]),
+            className: styles__default.default.scrollableNode,
+        }, contentNodeProps: {
+            ref: scrollbarContentNodeRef,
+            className: cn__default.default(styles__default.default.contentNode, (_a = {},
+                _a[styles__default.default.hugContent] = height === 'hugContent',
+                _a)),
+        }, onContentScroll: handleScroll }, enhancedChildren));
+};
+
+exports.ModalContent = ModalContent;

package/universal-modal/cssm/desktop/components/{base-universal-modal-content/base-universal-modal-content.module.css → modal-content/modal-content.module.css}

@@ -20,15 +20,15 @@
     /* stylelint-disable-next-line length-zero-no-unit */
 } :root {
 } /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ :root {
-} /* сбрасывает синюю подсветку при нажатии */ .scrollbarWrapper.scrollbarWrapper {
+} /* сбрасывает синюю подсветку при нажатии */ .scrollable {
     height: 100%
-} .scrollbarWrapper.scrollbarWrapper .verticalBarContainer {
-        box-sizing: border-box;
-    } .scrollbarWrapper.scrollbarWrapper .scrollContentWrapper {
+} .scrollable .scrollableNode {
         display: flex;
         flex-direction: column
-    } .scrollbarWrapper.scrollbarWrapper .scrollContentWrapper .scrollbarContainer {
+    } .scrollable .scrollableNode .contentNode {
             display: flex;
-            flex-direction: column;
-            flex: 1;
-        }
+
+            flex-direction: column
+        } .scrollable .scrollableNode .contentNode:not(.hugContent) {
+                flex: 1 1 auto;
+            }

package/universal-modal/cssm/desktop/components/side-modal/get-default-transition-props.d.ts

@@ -1,7 +1,7 @@
-import { ModalBySideProps } from "../../types/props";
+import { UniversalModalDesktopProps } from "../../types/props";
 type Params = {
-    horizontalAlign: ModalBySideProps['horizontalAlign'];
-    margin: ModalBySideProps['margin'];
+    horizontalAlign: UniversalModalDesktopProps['horizontalAlign'];
+    margin: UniversalModalDesktopProps['margin'];
 };
 declare const getDefaultTransitionProps: (params: Params) => {
     timeout: number;

package/universal-modal/cssm/desktop/components/side-modal/get-default-transition-props.js

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var cn = require('classnames');
-var transitions = require('./styles/transitions/transitions.module.css');
+var transitions = require('./transitions/transitions.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/universal-modal/cssm/desktop/components/side-modal/{styles/index.module.css → index.module.css}

@@ -37,7 +37,6 @@
 } .component {
     min-width: 500px;
     min-height: 264px;
-    height: 100%;
     border-radius: var(--border-radius-24);
     overflow-x: hidden;
     margin: unset;
@@ -50,8 +49,6 @@
     backface-visibility: hidden
 } .component.overlayHidden {
         box-shadow: var(--shadow-m);
-    } .component .container {
-        height: 100%;
     } /* prettier-ignore */ .marginTop-0 {
         margin-top: 0px;
     } .marginTop-1 {

package/universal-modal/cssm/desktop/components/side-modal/side-modal.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-declare const SideModal: React.ForwardRefExoticComponent<import("../../types/props").BaseUniversalModalProps & Pick<import("../../../../../base-modal").BaseModalProps, "children" | "className" | "open" | "dataTestId" | "backdropProps" | "wrapperClassName" | "transitionProps" | "onUnmount"> & React.RefAttributes<HTMLDivElement>>;
+declare const SideModal: React.ForwardRefExoticComponent<import("../../types/props").BaseUniversalModalProps & Pick<import("../../../../../base-modal").BaseModalProps, "open"> & Partial<Pick<import("../../../../../base-modal").BaseModalProps, "children" | "className" | "dataTestId" | "backdropProps" | "wrapperClassName" | "transitionProps" | "onUnmount">> & {
+    scrollableContainerRef?: React.RefObject<HTMLDivElement> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 export { SideModal };

package/universal-modal/cssm/desktop/components/side-modal/side-modal.js

@@ -4,14 +4,15 @@ var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsBaseModal = require('../../../../../base-modal/cssm');
-var desktop_hooks_useModalHeight = require('../../hooks/useModalHeight.js');
 var desktop_hooks_useModalWheel = require('../../hooks/useModalWheel.js');
-var desktop_hooks_useModalWidth = require('../../hooks/useModalWidth.js');
 var desktop_utils_getFullSizeModalTransitions = require('../../utils/get-full-size-modal-transitions.js');
-var desktop_utils_getMargins = require('../../utils/get-margins.js');
-var desktop_components_baseUniversalModalContent_baseUniversalModalContent = require('../base-universal-modal-content/base-universal-modal-content.js');
+var desktop_utils_getHeightStyle = require('../../utils/get-height-style.js');
+var desktop_utils_getMarginStyles = require('../../utils/get-margin-styles.js');
+var desktop_utils_getMaxHeightStyle = require('../../utils/get-max-height-style.js');
+var desktop_utils_getWidthStyle = require('../../utils/get-width-style.js');
+var desktop_components_modalContent_modalContent = require('../modal-content/modal-content.js');
 var desktop_components_sideModal_getDefaultTransitionProps = require('./get-default-transition-props.js');
-var styles = require('./styles/index.module.css');
+var styles = require('./index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -21,28 +22,25 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var SideModal = React.forwardRef(function (props, ref) {
     var _a, _b;
-    var _c = props.width, width = _c === void 0 ? 500 : _c, _d = props.height, height = _d === void 0 ? 'fullHeight' : _d, _e = props.horizontalAlign, horizontalAlign = _e === void 0 ? 'center' : _e, _f = props.verticalAlign, verticalAlign = _f === void 0 ? 'center' : _f, _g = props.overlay, overlay = _g === void 0 ? true : _g, open = props.open, dataTestId = props.dataTestId, className = props.className, children = props.children, margin = props.margin, onClose = props.onClose, restProps = tslib.__rest(props, ["width", "height", "horizontalAlign", "verticalAlign", "overlay", "open", "dataTestId", "className", "children", "margin", "onClose"]);
+    var _c = props.width, width = _c === void 0 ? 500 : _c, _d = props.height, height = _d === void 0 ? 'fullHeight' : _d, _e = props.horizontalAlign, horizontalAlign = _e === void 0 ? 'center' : _e, _f = props.verticalAlign, verticalAlign = _f === void 0 ? 'center' : _f, _g = props.overlay, overlay = _g === void 0 ? true : _g, open = props.open, dataTestId = props.dataTestId, className = props.className, children = props.children, margin = props.margin, scrollableContainerRef = props.scrollableContainerRef, onClose = props.onClose, restProps = tslib.__rest(props, ["width", "height", "horizontalAlign", "verticalAlign", "overlay", "open", "dataTestId", "className", "children", "margin", "scrollableContainerRef", "onClose"]);
     var componentRef = React.useRef(null);
     var contentRef = React.useRef(null);
-    desktop_hooks_useModalWidth.useModalWidth(width, open, componentRef);
-    desktop_hooks_useModalHeight.useModalHeight(height, open, componentRef);
     var _h = desktop_hooks_useModalWheel.useModalWheel(overlay), wheelDeltaY = _h.wheelDeltaY, handleWheel = _h.handleWheel;
-    var isHorizontalStart = horizontalAlign === 'start';
-    var isHorizontalEnd = horizontalAlign === 'end';
-    var isVerticalCenter = verticalAlign === 'center';
-    var isVerticalBottom = verticalAlign === 'bottom';
     var _j = desktop_utils_getFullSizeModalTransitions.getFullSizeModalTransitions({ verticalAlign: verticalAlign, width: width, height: height }), isFullSizeModal = _j.isFullSizeModal, fullSizeModalContentTransitions = _j.componentTransitions, fullSizeModalBackdropTransitions = _j.backdropTransitions;
     return (React__default.default.createElement(coreComponentsBaseModal.BaseModal, tslib.__assign({}, restProps, { open: open, dataTestId: dataTestId, ref: ref, componentRef: componentRef, contentElementRef: contentRef, scrollHandler: 'content', disableBlockingScroll: !overlay, wrapperClassName: cn__default.default(styles__default.default.wrapper, (_a = {},
-            _a[styles__default.default.wrapperAlignStart] = isHorizontalStart,
-            _a[styles__default.default.wrapperAlignEnd] = isHorizontalEnd,
-            _a[styles__default.default.wrapperJustifyCenter] = isVerticalCenter,
-            _a[styles__default.default.wrapperJustifyEnd] = isVerticalBottom,
-            _a)), className: cn__default.default(styles__default.default.component, className, tslib.__assign((_b = {}, _b[styles__default.default.overlayHidden] = !overlay, _b), desktop_utils_getMargins.getMargins({ styles: styles__default.default, margin: margin }))), contentClassName: styles__default.default.content, transitionProps: tslib.__assign(tslib.__assign(tslib.__assign({}, desktop_components_sideModal_getDefaultTransitionProps.getDefaultTransitionProps({
+            _a[styles__default.default.wrapperAlignStart] = horizontalAlign === 'start',
+            _a[styles__default.default.wrapperAlignEnd] = horizontalAlign === 'end',
+            _a[styles__default.default.wrapperJustifyCenter] = verticalAlign === 'center',
+            _a[styles__default.default.wrapperJustifyEnd] = verticalAlign === 'bottom',
+            _a)), className: cn__default.default(styles__default.default.component, className, tslib.__assign((_b = {}, _b[styles__default.default.overlayHidden] = !overlay, _b), desktop_utils_getMarginStyles.getMarginStyles({ styles: styles__default.default, margin: margin }))), contentClassName: styles__default.default.content, transitionProps: tslib.__assign(tslib.__assign(tslib.__assign({}, desktop_components_sideModal_getDefaultTransitionProps.getDefaultTransitionProps({
             horizontalAlign: horizontalAlign,
             margin: margin,
-        })), (isFullSizeModal && fullSizeModalContentTransitions)), restProps.transitionProps), backdropProps: tslib.__assign(tslib.__assign({ transparent: !overlay }, (isFullSizeModal && fullSizeModalBackdropTransitions)), restProps.backdropProps), onWheel: handleWheel, onClose: onClose }),
-        React__default.default.createElement("div", { className: styles__default.default.container },
-            React__default.default.createElement(desktop_components_baseUniversalModalContent_baseUniversalModalContent.BaseUniversalModalContent, { wheelDeltaY: wheelDeltaY }, children))));
+        })), (isFullSizeModal && fullSizeModalContentTransitions)), restProps.transitionProps), backdropProps: tslib.__assign(tslib.__assign({ transparent: !overlay }, (isFullSizeModal && fullSizeModalBackdropTransitions)), restProps.backdropProps), componentDivProps: {
+            style: tslib.__assign({ width: desktop_utils_getWidthStyle.getWidthStyle(width, margin), height: desktop_utils_getHeightStyle.getHeightStyle(height, margin) }, (height === 'hugContent' && {
+                maxHeight: desktop_utils_getMaxHeightStyle.getMaxHeightStyle(margin),
+            })),
+        }, onWheel: handleWheel, onClose: onClose }),
+        React__default.default.createElement(desktop_components_modalContent_modalContent.ModalContent, { height: height, wheelDeltaY: wheelDeltaY, scrollableContainerRef: scrollableContainerRef }, children)));
 });
 
 exports.SideModal = SideModal;

package/universal-modal/cssm/desktop/components/side-modal/{styles/side-modal.module.css → side-modal.module.css}

@@ -37,7 +37,6 @@
 } .component {
     min-width: 500px;
     min-height: 264px;
-    height: 100%;
     border-radius: var(--border-radius-24);
     overflow-x: hidden;
     margin: unset;
@@ -50,6 +49,4 @@
     backface-visibility: hidden
 } .component.overlayHidden {
         box-shadow: var(--shadow-m);
-    } .component .container {
-        height: 100%;
     }

package/universal-modal/cssm/desktop/hooks/use-modal-highlighted.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from 'react';
+type Params = {
+    scrollbarContentNodeRef: RefObject<HTMLDivElement>;
+    scrollableNodeRef: RefObject<HTMLDivElement>;
+};
+/**
+ * Расчет overlap состояния
+ * Этот функционал есть в base-modal, но так как в desktop версии используется кастомный scroll необходимо обрабатывать это в ручную
+ */
+declare const useModalHighlighted: (params: Params) => {
+    handleScroll: (e: Event) => void;
+};
+export { useModalHighlighted };

package/universal-modal/cssm/desktop/hooks/use-modal-highlighted.js

@@ -0,0 +1,54 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var context_universalModalContext = require('../../context/universal-modal-context.js');
+
+/**
+ * Расчет overlap состояния
+ * Этот функционал есть в base-modal, но так как в desktop версии используется кастомный scroll необходимо обрабатывать это в ручную
+ */
+var useModalHighlighted = function (params) {
+    var scrollbarContentNodeRef = params.scrollbarContentNodeRef, scrollableNodeRef = params.scrollableNodeRef;
+    var _a = React.useContext(context_universalModalContext.UniversalModalContext), setModalHeaderHighlighted = _a.setModalHeaderHighlighted, setModalFooterHighlighted = _a.setModalFooterHighlighted;
+    var handleScroll = function (e) {
+        var target = e.target;
+        var scrollTop = target.scrollTop, scrollHeight = target.scrollHeight, clientHeight = target.clientHeight;
+        var isElementFullScrolled = scrollHeight - scrollTop === clientHeight;
+        if (setModalHeaderHighlighted) {
+            setModalHeaderHighlighted(scrollTop > 0);
+        }
+        if (setModalFooterHighlighted) {
+            setModalFooterHighlighted(!isElementFullScrolled);
+        }
+    };
+    // Очищаем overlap значения в контексте
+    React.useEffect(function () { return function () {
+        if (setModalHeaderHighlighted) {
+            setModalHeaderHighlighted(false);
+        }
+        if (setModalFooterHighlighted) {
+            setModalFooterHighlighted(false);
+        }
+    }; }, [setModalHeaderHighlighted, setModalFooterHighlighted]);
+    // Расчет overlap футера при resize событии
+    React.useEffect(function () {
+        var resizeObserver = new ResizeObserver(function () {
+            var _a, _b;
+            var contentHeight = ((_a = scrollbarContentNodeRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0;
+            var wrapperHeight = ((_b = scrollableNodeRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0;
+            if (setModalFooterHighlighted) {
+                setModalFooterHighlighted(contentHeight > wrapperHeight);
+            }
+        });
+        if (scrollbarContentNodeRef.current) {
+            resizeObserver.observe(scrollbarContentNodeRef.current);
+        }
+        return function () {
+            resizeObserver.disconnect();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [setModalFooterHighlighted]);
+    return { handleScroll: handleScroll };
+};
+
+exports.useModalHighlighted = useModalHighlighted;

package/universal-modal/cssm/desktop/hooks/use-outside-scroll.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+type Params = {
+    scrollableNodeRef: RefObject<HTMLDivElement>;
+    wheelDeltaY: number;
+};
+/** Изменение позиции скролла */
+declare const useOutsideScroll: (params: Params) => void;
+export { useOutsideScroll };

package/universal-modal/cssm/desktop/hooks/use-outside-scroll.js

@@ -0,0 +1,18 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+/** Изменение позиции скролла */
+var useOutsideScroll = function (params) {
+    var scrollableNodeRef = params.scrollableNodeRef, wheelDeltaY = params.wheelDeltaY;
+    React.useEffect(function () {
+        if (scrollableNodeRef.current) {
+            scrollableNodeRef.current.scrollBy({
+                top: wheelDeltaY,
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [wheelDeltaY]);
+};
+
+exports.useOutsideScroll = useOutsideScroll;

package/universal-modal/cssm/desktop/hooks/use-set-scrollbar-height.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from 'react';
+type Params = {
+    scrollbarRef: RefObject<HTMLDivElement>;
+    verticalBarRef: RefObject<HTMLDivElement>;
+    headerElementRef: RefObject<HTMLDivElement>;
+    footerElementRef: RefObject<HTMLDivElement>;
+};
+/** Устанавливает размер полосы прокрутки в зависимости от наличия хедера и футера */
+declare const useSetScrollbarHeight: (params: Params) => void;
+export { useSetScrollbarHeight };

package/universal-modal/cssm/desktop/hooks/use-set-scrollbar-height.js

@@ -0,0 +1,44 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var desktop_constants_index = require('../constants/index.js');
+
+/** Устанавливает размер полосы прокрутки в зависимости от наличия хедера и футера */
+var useSetScrollbarHeight = function (params) {
+    var scrollbarRef = params.scrollbarRef, verticalBarRef = params.verticalBarRef, headerElementRef = params.headerElementRef, footerElementRef = params.footerElementRef;
+    React.useEffect(function () {
+        var _a, _b;
+        if (scrollbarRef.current) {
+            var verticalBar = verticalBarRef.current;
+            if (verticalBar) {
+                var headerHeight = ((_a = headerElementRef === null || headerElementRef === void 0 ? void 0 : headerElementRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
+                var footerHeight = ((_b = footerElementRef === null || footerElementRef === void 0 ? void 0 : footerElementRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
+                var topGap = void 0;
+                var topOffset = void 0;
+                var bottomGap = void 0;
+                if (headerHeight) {
+                    // если есть header уменьшаем размер скролла на величину хедера и добавляем отступ сверху
+                    topGap = headerHeight;
+                    topOffset = headerHeight;
+                }
+                else {
+                    // иначе уменьшаем размер скролла и увеличиваем отступ на величину скругления
+                    topGap = desktop_constants_index.SCROLLBAR_DEFAULT_GAP;
+                    topOffset = desktop_constants_index.SCROLLBAR_DEFAULT_GAP;
+                }
+                if (footerHeight) {
+                    // если есть footer уменьшаем размер скролла на величину футера
+                    bottomGap = footerHeight;
+                }
+                else {
+                    // иначе уменьшаем размер на величину скругления
+                    bottomGap = desktop_constants_index.SCROLLBAR_DEFAULT_GAP;
+                }
+                verticalBar.style.height = "calc(100% - ".concat(topGap, "px - ").concat(bottomGap, "px)");
+                verticalBar.style.top = "".concat(topOffset, "px");
+            }
+        }
+    });
+};
+
+exports.useSetScrollbarHeight = useSetScrollbarHeight;

package/universal-modal/cssm/desktop/index.js

@@ -12,7 +12,7 @@ require('../../../base-modal/cssm');
 require('../components/header/base-header/index.module.css');
 require('../components/header/mobile/mobile.module.css');
 var components_footer_desktop_Component_desktop = require('../components/footer/desktop/Component.desktop.js');
-require('../components/footer/base-footer/index.module.css');
+require('../components/footer/base-footer/base-footer.js');
 require('../components/footer/mobile/layout.mobile.module.css');
 require('../components/footer/mobile/mobile.module.css');
 var components_content_desktop_Component_desktop = require('../components/content/desktop/Component.desktop.js');

package/universal-modal/cssm/desktop/types/props.d.ts

@@ -1,3 +1,4 @@
+import { RefObject } from 'react';
 import { BaseModalProps } from "../../../../base-modal";
 import { TMargin } from "../../typings/margin-type";
 type BaseUniversalModalProps = {
@@ -21,10 +22,11 @@ type BaseUniversalModalProps = {
     /**
      * Высота модального окна
      * fullHeight - высота модального окна подстроится под viewport
+     * hugContent - высота модального окна зафиксируется под размер содержимого
      * minHeight - 264
      * @default fullHeight
      */
-    height?: number | 'fullHeight';
+    height?: number | 'fullHeight' | 'hugContent';
     /**
      * Наличие оверлея
      * @default true
@@ -39,7 +41,10 @@ type BaseUniversalModalProps = {
      */
     onClose?: () => void;
 };
-type UniversalModalDesktopProps = BaseUniversalModalProps & Pick<BaseModalProps, 'children' | 'dataTestId' | 'open' | 'className' | 'wrapperClassName' | 'onUnmount' | 'transitionProps' | 'backdropProps'>;
-type ModalBySideProps = UniversalModalDesktopProps;
-type ModalByCenterProps = UniversalModalDesktopProps;
-export { BaseUniversalModalProps, UniversalModalDesktopProps, ModalBySideProps, ModalByCenterProps };
+type UniversalModalDesktopProps = BaseUniversalModalProps & Pick<BaseModalProps, 'open'> & Partial<Pick<BaseModalProps, 'children' | 'dataTestId' | 'className' | 'wrapperClassName' | 'onUnmount' | 'transitionProps' | 'backdropProps'>> & {
+    /**
+     * Реф контейнера на котором происходит scroll
+     */
+    scrollableContainerRef?: RefObject<HTMLDivElement>;
+};
+export { BaseUniversalModalProps, UniversalModalDesktopProps };

package/universal-modal/cssm/desktop/utils/check-header-and-footer.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+declare const checkHeaderAndFooter: (children: ReactNode) => {
+    hasHeader: boolean;
+    hasFooter: boolean;
+};
+export { checkHeaderAndFooter };

package/universal-modal/cssm/desktop/utils/check-header-and-footer.js

@@ -0,0 +1,22 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+var checkHeaderAndFooter = function (children) {
+    var hasHeader = false;
+    var hasFooter = false;
+    React.Children.forEach(children, function (child) {
+        if (React.isValidElement(child)) {
+            var displayName = child.type.displayName;
+            if (displayName === 'HeaderDesktop') {
+                hasHeader = true;
+            }
+            if (displayName === 'FooterDesktop') {
+                hasFooter = true;
+            }
+        }
+    });
+    return { hasHeader: hasHeader, hasFooter: hasFooter };
+};
+
+exports.checkHeaderAndFooter = checkHeaderAndFooter;

package/universal-modal/cssm/desktop/utils/get-height-style.d.ts

@@ -0,0 +1,3 @@
+import { UniversalModalDesktopProps } from "../types/props";
+declare const getHeightStyle: (height: Exclude<UniversalModalDesktopProps['height'], undefined>, margin: UniversalModalDesktopProps['margin']) => string;
+export { getHeightStyle };

package/universal-modal/cssm/desktop/utils/get-height-style.js

@@ -0,0 +1,18 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var coreComponentsShared = require('../../../../shared/cssm');
+
+var getHeightStyle = function (height, margin) {
+    var viewportHeight = 0;
+    if (coreComponentsShared.isClient()) {
+        viewportHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
+    }
+    if (height > viewportHeight || height === 'fullHeight') {
+        var marginTop = (margin && coreComponentsShared.hasOwnProperty(margin, 'top') && margin.top) || 0;
+        var marginBottom = (margin && coreComponentsShared.hasOwnProperty(margin, 'bottom') && margin.bottom) || 0;
+        return "calc(100% - ".concat(marginTop, "px - ").concat(marginBottom, "px)");
+    }
+    return "".concat(height, "px");
+};
+
+exports.getHeightStyle = getHeightStyle;

package/universal-modal/{desktop/utils/get-margins.d.ts → cssm/desktop/utils/get-margin-styles.d.ts}

@@ -3,5 +3,5 @@ type Params = {
     styles: Record<string, string>;
     margin: UniversalModalDesktopProps['margin'];
 };
-declare const getMargins: (params: Params) => Record<string, boolean>;
-export { getMargins };
+declare const getMarginStyles: (params: Params) => Record<string, boolean>;
+export { getMarginStyles };

package/universal-modal/cssm/desktop/utils/get-margin-styles.js

@@ -0,0 +1,19 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var coreComponentsShared = require('../../../../shared/cssm');
+
+var getMarginStyles = function (params) {
+    var _a;
+    var margin = params.margin, styles = params.styles;
+    if (margin) {
+        return _a = {},
+            _a[styles["marginTop-".concat(margin.top)]] = coreComponentsShared.hasOwnProperty(margin, 'top'),
+            _a[styles["marginRight-".concat(margin.right)]] = coreComponentsShared.hasOwnProperty(margin, 'right'),
+            _a[styles["marginBottom-".concat(margin.bottom)]] = coreComponentsShared.hasOwnProperty(margin, 'bottom'),
+            _a[styles["marginLeft-".concat(margin.left)]] = coreComponentsShared.hasOwnProperty(margin, 'left'),
+            _a;
+    }
+    return {};
+};
+
+exports.getMarginStyles = getMarginStyles;

package/universal-modal/cssm/desktop/utils/get-max-height-style.d.ts

@@ -0,0 +1,3 @@
+import { UniversalModalDesktopProps } from "../types/props";
+declare const getMaxHeightStyle: (margin: UniversalModalDesktopProps['margin']) => string;
+export { getMaxHeightStyle };

package/universal-modal/cssm/desktop/utils/get-max-height-style.js

@@ -0,0 +1,11 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var coreComponentsShared = require('../../../../shared/cssm');
+
+var getMaxHeightStyle = function (margin) {
+    var marginTop = (margin && coreComponentsShared.hasOwnProperty(margin, 'top') && margin.top) || 0;
+    var marginBottom = (margin && coreComponentsShared.hasOwnProperty(margin, 'bottom') && margin.bottom) || 0;
+    return "calc(100% - ".concat(marginTop, "px - ").concat(marginBottom, "px)");
+};
+
+exports.getMaxHeightStyle = getMaxHeightStyle;

package/universal-modal/cssm/desktop/utils/get-width-style.d.ts

@@ -0,0 +1,3 @@
+import { UniversalModalDesktopProps } from "../types/props";
+declare const getWidthStyle: (width: Exclude<UniversalModalDesktopProps['width'], undefined>, margin: UniversalModalDesktopProps['margin']) => string;
+export { getWidthStyle };

package/universal-modal/cssm/desktop/utils/get-width-style.js

@@ -0,0 +1,18 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var coreComponentsShared = require('../../../../shared/cssm');
+
+var getWidthStyle = function (width, margin) {
+    var viewportWidth = 0;
+    if (coreComponentsShared.isClient()) {
+        viewportWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+    }
+    if (width > viewportWidth || width === 'fullWidth') {
+        var marginLeft = (margin && coreComponentsShared.hasOwnProperty(margin, 'left') && margin.left) || 0;
+        var marginRight = (margin && coreComponentsShared.hasOwnProperty(margin, 'right') && margin.right) || 0;
+        return "calc(100% - ".concat(marginLeft, "px - ").concat(marginRight, "px)");
+    }
+    return "".concat(width, "px");
+};
+
+exports.getWidthStyle = getWidthStyle;

package/universal-modal/cssm/desktop/utils/set-footer-and-header-refs.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ReactElement, ReactNode, RefObject } from 'react';
+type Params = {
+    children: ReactNode;
+    headerElementRef: RefObject<HTMLDivElement>;
+    footerElementRef: RefObject<HTMLDivElement>;
+};
+/** Устанавливает рефы в хедер и футер если они переданы в модалку (необходимы для дальнейшего расчета высоты кастомного скроллбара) */
+declare const setFooterAndHeaderRefs: (params: Params) => {
+    enhancedChildren: (string | number | ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactFragment)[] | null | undefined;
+};
+export { setFooterAndHeaderRefs };

package/universal-modal/cssm/desktop/utils/set-footer-and-header-refs.js

@@ -0,0 +1,31 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var mergeRefs = require('react-merge-refs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
+
+/** Устанавливает рефы в хедер и футер если они переданы в модалку (необходимы для дальнейшего расчета высоты кастомного скроллбара) */
+var setFooterAndHeaderRefs = function (params) {
+    var children = params.children, headerElementRef = params.headerElementRef, footerElementRef = params.footerElementRef;
+    var enhancedChildren = React.Children.map(children, function (child) {
+        if (!React.isValidElement(child)) {
+            return child;
+        }
+        var displayName = child.type.displayName;
+        if (displayName === 'HeaderDesktop') {
+            var existingRef = child;
+            return React.cloneElement(child, { ref: mergeRefs__default.default([existingRef.ref, headerElementRef]) });
+        }
+        if (displayName === 'FooterDesktop') {
+            var existingRef = child;
+            return React.cloneElement(child, { ref: mergeRefs__default.default([existingRef.ref, footerElementRef]) });
+        }
+        return child;
+    });
+    return { enhancedChildren: enhancedChildren };
+};
+
+exports.setFooterAndHeaderRefs = setFooterAndHeaderRefs;