@megafon/ui-core 7.8.0 → 7.9.0

package/dist/es/components/Modal/Modal.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { IScrollBarProps } from '../ScrollBar/ScrollBar';
 import './Modal.scss';
 export declare enum MODAL_MOBILE_VIEWS_ENUM {
-    FULL_SCREEN = "full-screen",
+    FULL_SCREEN = "fullScreen",// use camelCase for simple using in props from backend
     BOTTOM = "bottom"
 }
 export declare enum MODAL_TRANSITIONS_STEPS_ENUM {
@@ -20,6 +20,7 @@ export type ModalClassesType = {
     containerInner?: string;
     containerBody?: string;
     header?: string;
+    headerBackButton?: string;
     headerCloseButton?: string;
     titleArea?: string;
     title?: string;
@@ -88,6 +89,8 @@ export interface IModalProps {
     isDisabledBackgroundClick?: boolean;
     /** Восстанавливает фокус на элементе, который был сфокусирован до открытия модального окна */
     isReturnFocusAfterClose?: boolean;
+    /** Пересчитывать максимальную высоту скролла */
+    isRecalculateHeight?: boolean;
     /** Должен ли root-элемент приложения быть скрыт */
     hideAriaApp?: boolean;
     /** Устанавливает aria-label */

package/dist/es/components/Modal/Modal.js

@@ -5,6 +5,7 @@ import { cnCreate, breakpoints } from '@megafon/ui-helpers';
 import throttle from 'lodash.throttle';
 import ReactModal from 'react-modal';
 import THROTTLE_TIME from "../../constants/throttleTime";
+import usePrevious from "../../hooks/usePrevious";
 import useResolution from "../../hooks/useResolution";
 import ModalDesktop from "./_ModalDesktop/ModalDesktop";
 import ModalMobileBottom from "./_ModalMobileBottom/ModalMobileBottom";
@@ -15,7 +16,7 @@ var MOBILE_BIG_START = breakpoints.MOBILE_BIG_START;
 var HEIGHT_TRANSITION_PROPERTY = 'height';
 export var MODAL_MOBILE_VIEWS_ENUM;
 (function (MODAL_MOBILE_VIEWS_ENUM) {
-  MODAL_MOBILE_VIEWS_ENUM["FULL_SCREEN"] = "full-screen";
+  MODAL_MOBILE_VIEWS_ENUM["FULL_SCREEN"] = "fullScreen";
   MODAL_MOBILE_VIEWS_ENUM["BOTTOM"] = "bottom";
 })(MODAL_MOBILE_VIEWS_ENUM || (MODAL_MOBILE_VIEWS_ENUM = {}));
 export var MODAL_TRANSITIONS_STEPS_ENUM;
@@ -40,6 +41,7 @@ var Modal = function Modal(_ref) {
     isEnabledNativeScroll = _ref.isEnabledNativeScroll,
     isSwipeDisabled = _ref.isSwipeDisabled,
     isDisabledBackgroundClick = _ref.isDisabledBackgroundClick,
+    isRecalculateHeight = _ref.isRecalculateHeight,
     _ref$hideAriaApp = _ref.hideAriaApp,
     hideAriaApp = _ref$hideAriaApp === void 0 ? false : _ref$hideAriaApp,
     contentLabel = _ref.contentLabel,
@@ -85,6 +87,7 @@ var Modal = function Modal(_ref) {
   var containerWrapRef = React.useRef(null);
   var containerInnerRef = React.useRef(null);
   var containerBodyRef = React.useRef(null);
+  var scrollBarScrollableRef = React.useRef(null);
   var resizeObserver = React.useRef(null);
   var _useResolution = useResolution(),
     isMobile = _useResolution.isMobile;
@@ -93,6 +96,15 @@ var Modal = function Modal(_ref) {
   var isBottomTransitionIn = transitionStep !== MODAL_TRANSITIONS_STEPS_ENUM.END_STEP && transitionStep !== MODAL_TRANSITIONS_STEPS_ENUM.MOVE_END_STEP;
   var isTransitionMoveStep = transitionStep === MODAL_TRANSITIONS_STEPS_ENUM.MOVE_STEP;
   var isTransitionEndStep = transitionStep === MODAL_TRANSITIONS_STEPS_ENUM.END_STEP;
+  var prevMobileView = usePrevious(mobileView);
+  var isChangeMobileView = mobileView !== prevMobileView;
+  var prevHeaderProps = usePrevious(headerProps);
+  var prevFooterProps = usePrevious(footerProps);
+  var isHeaderPropsDiff = headerProps !== prevHeaderProps;
+  var isFooterPropsDiff = footerProps !== prevFooterProps;
+  var handleGetScrollBarScrollableRef = function handleGetScrollBarScrollableRef(node) {
+    scrollBarScrollableRef.current = node;
+  };
   var handleChangeTransitionStep = function handleChangeTransitionStep(value) {
     setTransitionStep(value);
   };
@@ -201,6 +213,18 @@ var Modal = function Modal(_ref) {
       window.removeEventListener('resize', handleThrottleResize);
     };
   }, [isEnabledNativeScroll, handleSetScrollContentMaxHeight]);
+  React.useEffect(function () {
+    if (!isMobile || !isChangeMobileView) {
+      return;
+    }
+    handleSetScrollContentMaxHeight();
+  }, [isMobile, isChangeMobileView, handleSetScrollContentMaxHeight]);
+  React.useEffect(function () {
+    if (isEnabledNativeScroll || !(isRecalculateHeight && (isHeaderPropsDiff || isFooterPropsDiff))) {
+      return;
+    }
+    handleSetScrollContentMaxHeight();
+  }, [isEnabledNativeScroll, isFooterPropsDiff, isRecalculateHeight, isHeaderPropsDiff, handleSetScrollContentMaxHeight]);
   React.useEffect(function () {
     return function () {
       setIsPopupOpened(false);
@@ -215,7 +239,8 @@ var Modal = function Modal(_ref) {
     classes: classes,
     dataAttrs: dataAttrs,
     scrollBarParams: _extends(_extends({}, scrollBarParams), {
-      maxHeight: scrollMaxHeight
+      maxHeight: scrollMaxHeight,
+      getScrollable: handleGetScrollBarScrollableRef
     }),
     headerProps: headerProps,
     footerProps: footerProps,
@@ -225,7 +250,8 @@ var Modal = function Modal(_ref) {
       footerRef: footerRef,
       containerWrapRef: containerWrapRef,
       containerInnerRef: containerInnerRef,
-      containerBodyRef: containerBodyRef
+      containerBodyRef: containerBodyRef,
+      scrollBarScrollableRef: scrollBarScrollableRef
     },
     isEnabledNativeScroll: isEnabledNativeScroll,
     isDisabledBackgroundClick: isDisabledBackgroundClick,

package/dist/es/components/Modal/_ModalContent/ModalContent.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-modal-content__container-wrap{-webkit-animation:show-popup .3s ease-out;animation:show-popup .3s ease-out;position:relative;width:100%}@media screen and (min-width:768px){.mfui-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-modal-content__container-inner{background-color:var(--background);font-family:inherit;width:100%}.mfui-modal-content__header{position:relative}.mfui-modal-content__header_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:52px}@media screen and (min-width:768px){.mfui-modal-content__header-main{min-height:64px}}.mfui-modal-content__header-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:12px;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background:transparent;border:none;cursor:pointer;height:32px;justify-content:center;outline:none;width:32px}@media screen and (min-width:768px){.mfui-modal-content__header-button{height:40px;width:40px}}.mfui-modal-content__header-button_back{left:16px}.mfui-modal-content__header-button_close{right:16px}.mfui-modal-content__header-button_shadow{background:var(--base);border-radius:50%;-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-button svg{fill:var(--content)}.mfui-modal-content__title-area{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 48px;padding:12px}@media screen and (min-width:768px){.mfui-modal-content__title-area{margin:0 56px;padding:16px}}.mfui-modal-content__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px;text-align:center}@media screen and (min-width:1280px){.mfui-modal-content__title{font-size:20px;line-height:28px}}@media screen and (min-width:768px){.mfui-modal-content__title{font-size:20px;font-weight:500;letter-spacing:.5px;line-height:28px}}.mfui-modal-content__header-additional{-webkit-box-sizing:border-box;box-sizing:border-box;padding:8px 16px;text-align:center}@media screen and (min-width:768px){.mfui-modal-content__header-additional{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-bottom:24px;padding-right:6px}@media screen and (min-width:768px){.mfui-modal-content__container-body{padding-bottom:32px;padding-right:12px}}.mfui-modal-content__children{-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px;padding-right:4px;padding-top:24px}@media screen and (min-width:768px){.mfui-modal-content__children{padding-left:32px;padding-right:14px}}.mfui-modal-content__footer{padding-left:16px;padding-right:16px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-bottom:24px;margin-left:-16px;margin-right:-16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-left:-32px;margin-right:-32px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-main{min-height:40px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-button{top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__title-area{padding-bottom:4px;padding-top:4px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__container-body{padding-bottom:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__container-wrap_out-side-buttons .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__children,.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__container-body{padding:0}.mfui-modal-content__container-wrap_transition-end{-webkit-animation:hide-popup .2s ease-in;animation:hide-popup .2s ease-in}@-webkit-keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}@keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}
+h1,h2,h3,h4,h5{margin:0}.mfui-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-modal-content__container-wrap{-webkit-animation:show-popup .3s ease-out;animation:show-popup .3s ease-out;position:relative;width:100%}@media screen and (min-width:768px){.mfui-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-modal-content__container-inner{background-color:var(--background);font-family:inherit;width:100%}.mfui-modal-content__header{position:relative}.mfui-modal-content__header_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:52px}@media screen and (min-width:768px){.mfui-modal-content__header-main{min-height:64px}}.mfui-modal-content__header-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:12px;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background:transparent;border:none;cursor:pointer;height:32px;justify-content:center;outline:none;width:32px}@media screen and (min-width:768px){.mfui-modal-content__header-button{height:40px;width:40px}}.mfui-modal-content__header-button_back{left:16px}.mfui-modal-content__header-button_close{right:16px}.mfui-modal-content__header-button_shadow{background:var(--base);border-radius:50%;-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-button svg{fill:var(--content)}.mfui-modal-content__title-area{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 48px;padding:12px}@media screen and (min-width:768px){.mfui-modal-content__title-area{margin:0 56px;padding:16px}}.mfui-modal-content__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px;text-align:center}@media screen and (min-width:1280px){.mfui-modal-content__title{font-size:20px;line-height:28px}}@media screen and (min-width:768px){.mfui-modal-content__title{font-size:20px;font-weight:500;letter-spacing:.5px;line-height:28px}}.mfui-modal-content__header-additional{-webkit-box-sizing:border-box;box-sizing:border-box;padding:8px 16px;text-align:center}@media screen and (min-width:768px){.mfui-modal-content__header-additional{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-bottom:24px;padding-right:6px}@media screen and (min-width:768px){.mfui-modal-content__container-body{padding-bottom:32px;padding-right:12px}}.mfui-modal-content__children{-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px;padding-right:4px;padding-top:24px}@media screen and (min-width:768px){.mfui-modal-content__children{padding-left:32px;padding-right:14px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-bottom:24px;margin-left:-16px;margin-right:-16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-left:-32px;margin-right:-32px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-main{min-height:40px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-button{top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__title-area{padding-bottom:4px;padding-top:4px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__container-body{padding-bottom:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer{padding-left:16px;padding-right:16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__container-wrap_out-side-buttons .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__children,.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__container-body{padding:0}.mfui-modal-content__container-wrap_transition-end{-webkit-animation:hide-popup .2s ease-in;animation:hide-popup .2s ease-in}@-webkit-keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}@keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}

package/dist/es/components/Modal/_ModalContent/ModalContent.js

@@ -94,7 +94,7 @@ var ModalContent = function ModalContent(_ref) {
     className: cn('header-button', {
       back: true,
       shadow: hasHeaderButtonsShadow
-    }),
+    }, classes === null || classes === void 0 ? void 0 : classes.headerBackButton),
     type: "button",
     onClick: onBackButtonClick
   }), isSmallIcon ? /*#__PURE__*/React.createElement(ArrowLeft24, null) : /*#__PURE__*/React.createElement(ArrowLeft32, null));

package/dist/es/components/Modal/_ModalMobileBottom/ModalMobileBottom.js

@@ -31,6 +31,7 @@ var ModalMobileBottom = function ModalMobileBottom(_a) {
   var _restProps$refs = restProps.refs,
     containerWrapRef = _restProps$refs.containerWrapRef,
     containerInnerRef = _restProps$refs.containerInnerRef,
+    scrollBarScrollableRef = _restProps$refs.scrollBarScrollableRef,
     isTransitionMoveStep = restProps.isTransitionMoveStep,
     isTransitionEndStep = restProps.isTransitionEndStep;
   var _React$useState = React.useState(null),
@@ -51,9 +52,11 @@ var ModalMobileBottom = function ModalMobileBottom(_a) {
       window.cancelAnimationFrame(animationFrameId.current);
     }
     var containerWrapNode = containerWrapRef.current;
+    var scrollableNode = scrollBarScrollableRef.current;
     animationFrameId.current = window.requestAnimationFrame(function () {
       onChangeTransitionStep(MODAL_TRANSITIONS_STEPS_ENUM.MOVE_STEP);
-      if (!containerWrapNode || e.target !== containerWrapNode) {
+      var isScrollTop = ((scrollableNode === null || scrollableNode === void 0 ? void 0 : scrollableNode.scrollTop) || 0) === 0;
+      if (!containerWrapNode || !isScrollTop) {
         return;
       }
       if (!initialContainerWrapHeight) {
@@ -74,11 +77,13 @@ var ModalMobileBottom = function ModalMobileBottom(_a) {
       onChangeContainerWrapTransform("translateY(".concat(positionsDiffAbs, "px)"));
       animationFrameId.current = 0;
     });
-  }, [containerWrapRef, initialContainerWrapHeight, initialTouchPosition, onChangeContainerWrapTransform, onChangeTransitionStep]);
+  }, [containerWrapRef, scrollBarScrollableRef, initialContainerWrapHeight, initialTouchPosition, onChangeContainerWrapTransform, onChangeTransitionStep]);
   var handleWindowTouchEnd = React.useCallback(function (e) {
     var _a;
     var containerWrapNode = containerWrapRef.current;
-    if (!containerWrapNode || !isTransitionMoveStep || e.target !== containerWrapNode) {
+    var scrollableNode = scrollBarScrollableRef.current;
+    var isScrollTop = ((scrollableNode === null || scrollableNode === void 0 ? void 0 : scrollableNode.scrollTop) || 0) === 0;
+    if (!containerWrapNode || !isTransitionMoveStep || !isScrollTop) {
       return;
     }
     window.cancelAnimationFrame(animationFrameId.current);
@@ -87,7 +92,7 @@ var ModalMobileBottom = function ModalMobileBottom(_a) {
     setInitialTouchPosition(null);
     onChangeContainerWrapTransform(isMoreHalfClosed ? 'translateY(100%)' : 'none');
     onChangeTransitionStep(isMoreHalfClosed ? MODAL_TRANSITIONS_STEPS_ENUM.MOVE_END_STEP : MODAL_TRANSITIONS_STEPS_ENUM.INITIAL_STEP);
-  }, [containerWrapRef, isTransitionMoveStep, offsetHeightCenter, onChangeContainerWrapTransform, onChangeTransitionStep]);
+  }, [containerWrapRef, scrollBarScrollableRef, isTransitionMoveStep, offsetHeightCenter, onChangeContainerWrapTransform, onChangeTransitionStep]);
   React.useEffect(function () {
     if (isSwipeDisabled) {
       return undefined;

package/dist/es/components/Modal/mocks.js

@@ -8,6 +8,7 @@ var mockModalContextProps = {
     containerInner: 'containerInner-class',
     containerBody: 'containerBody-class',
     header: 'header-class',
+    headerBackButton: 'headerBackButton-class',
     headerCloseButton: 'headerCloseButton-class',
     titleArea: 'titleArea-class',
     title: 'title-class',
@@ -62,6 +63,9 @@ var mockModalContextProps = {
     },
     containerBodyRef: {
       current: null
+    },
+    scrollBarScrollableRef: {
+      current: null
     }
   },
   isMobile: false,

package/dist/es/components/Modal/types.d.ts

@@ -11,6 +11,7 @@ type ModalContextPropsType = ModalComponentPropsType & {
         containerWrapRef: RefType;
         containerInnerRef: RefType;
         containerBodyRef: RefType;
+        scrollBarScrollableRef: React.MutableRefObject<HTMLElement | null>;
     };
     isMobile: boolean;
     isTransitionMoveStep: boolean;

package/dist/es/components/ScrollBar/ScrollBar.d.ts

@@ -30,6 +30,8 @@ export interface IScrollBarProps {
     showAlways?: boolean;
     /** Ref обработчик */
     getScrollBar?: (node: HTMLElement) => void;
+    /** Ref обработчик для Scrollable element */
+    getScrollable?: (node: HTMLElement) => void;
     children?: React.ReactNode;
 }
 declare const ScrollBar: React.FC<IScrollBarProps>;

package/dist/es/components/ScrollBar/ScrollBar.js

@@ -17,12 +17,14 @@ var ScrollBar = function ScrollBar(_ref) {
     hideMobile = _ref.hideMobile,
     showAlways = _ref.showAlways,
     getScrollBar = _ref.getScrollBar,
+    getScrollable = _ref.getScrollable,
     children = _ref.children;
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isInitialHide = _React$useState2[0],
     setIsInitialHide = _React$useState2[1];
   var scrollBarInitNode = React.useRef(null);
+  var scrollableNode = React.useRef(null);
   var resizeObserver = React.useRef(null);
   function handleGetScrollBarRef(node) {
     if (!node) {
@@ -32,6 +34,10 @@ var ScrollBar = function ScrollBar(_ref) {
     scrollBarInitNode.current = scrollInitEl;
     getScrollBar === null || getScrollBar === void 0 ? void 0 : getScrollBar(scrollInitEl);
   }
+  function handleGetScrollableRef(node) {
+    scrollableNode.current = node;
+    getScrollable === null || getScrollable === void 0 ? void 0 : getScrollable(node);
+  }
   var handleSetInitialHide = React.useCallback(function () {
     if (!scrollBarInitNode.current || !maxHeight) {
       setIsInitialHide(false);
@@ -57,7 +63,7 @@ var ScrollBar = function ScrollBar(_ref) {
       }
     };
   }, [handleSetInitialHide, maxHeight]);
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       'initial-hide': isInitialHide,
       'hide-all': hideAll,
@@ -67,7 +73,7 @@ var ScrollBar = function ScrollBar(_ref) {
       'hide-mobile': hideMobile,
       'show-always': showAlways
     }, [classes === null || classes === void 0 ? void 0 : classes.root])
-  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(SimpleBar, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.init), {
+  }), /*#__PURE__*/React.createElement(SimpleBar, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.init), {
     className: cn('init', [classes === null || classes === void 0 ? void 0 : classes.init]),
     classNames: {
       track: cn('scroll-track'),
@@ -80,7 +86,10 @@ var ScrollBar = function ScrollBar(_ref) {
       maxHeight: "".concat(maxHeight, "px")
     },
     forceVisible: "y",
-    ref: handleGetScrollBarRef
+    ref: handleGetScrollBarRef,
+    scrollableNodeProps: {
+      ref: handleGetScrollableRef
+    }
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('children-wrap', [classes === null || classes === void 0 ? void 0 : classes.childrenWrap])
   }, children)));

package/dist/lib/components/Modal/Modal.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { IScrollBarProps } from '../ScrollBar/ScrollBar';
 import './Modal.scss';
 export declare enum MODAL_MOBILE_VIEWS_ENUM {
-    FULL_SCREEN = "full-screen",
+    FULL_SCREEN = "fullScreen",// use camelCase for simple using in props from backend
     BOTTOM = "bottom"
 }
 export declare enum MODAL_TRANSITIONS_STEPS_ENUM {
@@ -20,6 +20,7 @@ export type ModalClassesType = {
     containerInner?: string;
     containerBody?: string;
     header?: string;
+    headerBackButton?: string;
     headerCloseButton?: string;
     titleArea?: string;
     title?: string;
@@ -88,6 +89,8 @@ export interface IModalProps {
     isDisabledBackgroundClick?: boolean;
     /** Восстанавливает фокус на элементе, который был сфокусирован до открытия модального окна */
     isReturnFocusAfterClose?: boolean;
+    /** Пересчитывать максимальную высоту скролла */
+    isRecalculateHeight?: boolean;
     /** Должен ли root-элемент приложения быть скрыт */
     hideAriaApp?: boolean;
     /** Устанавливает aria-label */

package/dist/lib/components/Modal/Modal.js

@@ -12,6 +12,7 @@ var _uiHelpers = require("@megafon/ui-helpers");
 var _lodash = _interopRequireDefault(require("lodash.throttle"));
 var _reactModal = _interopRequireDefault(require("react-modal"));
 var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime"));
+var _usePrevious = _interopRequireDefault(require("../../hooks/usePrevious"));
 var _useResolution2 = _interopRequireDefault(require("../../hooks/useResolution"));
 var _ModalDesktop = _interopRequireDefault(require("./_ModalDesktop/ModalDesktop"));
 var _ModalMobileBottom = _interopRequireDefault(require("./_ModalMobileBottom/ModalMobileBottom"));
@@ -24,7 +25,7 @@ var MOBILE_BIG_START = _uiHelpers.breakpoints.MOBILE_BIG_START;
 var HEIGHT_TRANSITION_PROPERTY = 'height';
 var MODAL_MOBILE_VIEWS_ENUM;
 (function (MODAL_MOBILE_VIEWS_ENUM) {
-  MODAL_MOBILE_VIEWS_ENUM["FULL_SCREEN"] = "full-screen";
+  MODAL_MOBILE_VIEWS_ENUM["FULL_SCREEN"] = "fullScreen";
   MODAL_MOBILE_VIEWS_ENUM["BOTTOM"] = "bottom";
 })(MODAL_MOBILE_VIEWS_ENUM || (exports.MODAL_MOBILE_VIEWS_ENUM = MODAL_MOBILE_VIEWS_ENUM = {}));
 var MODAL_TRANSITIONS_STEPS_ENUM;
@@ -49,6 +50,7 @@ var Modal = function Modal(_ref) {
     isEnabledNativeScroll = _ref.isEnabledNativeScroll,
     isSwipeDisabled = _ref.isSwipeDisabled,
     isDisabledBackgroundClick = _ref.isDisabledBackgroundClick,
+    isRecalculateHeight = _ref.isRecalculateHeight,
     _ref$hideAriaApp = _ref.hideAriaApp,
     hideAriaApp = _ref$hideAriaApp === void 0 ? false : _ref$hideAriaApp,
     contentLabel = _ref.contentLabel,
@@ -94,6 +96,7 @@ var Modal = function Modal(_ref) {
   var containerWrapRef = React.useRef(null);
   var containerInnerRef = React.useRef(null);
   var containerBodyRef = React.useRef(null);
+  var scrollBarScrollableRef = React.useRef(null);
   var resizeObserver = React.useRef(null);
   var _useResolution = (0, _useResolution2["default"])(),
     isMobile = _useResolution.isMobile;
@@ -102,6 +105,15 @@ var Modal = function Modal(_ref) {
   var isBottomTransitionIn = transitionStep !== MODAL_TRANSITIONS_STEPS_ENUM.END_STEP && transitionStep !== MODAL_TRANSITIONS_STEPS_ENUM.MOVE_END_STEP;
   var isTransitionMoveStep = transitionStep === MODAL_TRANSITIONS_STEPS_ENUM.MOVE_STEP;
   var isTransitionEndStep = transitionStep === MODAL_TRANSITIONS_STEPS_ENUM.END_STEP;
+  var prevMobileView = (0, _usePrevious["default"])(mobileView);
+  var isChangeMobileView = mobileView !== prevMobileView;
+  var prevHeaderProps = (0, _usePrevious["default"])(headerProps);
+  var prevFooterProps = (0, _usePrevious["default"])(footerProps);
+  var isHeaderPropsDiff = headerProps !== prevHeaderProps;
+  var isFooterPropsDiff = footerProps !== prevFooterProps;
+  var handleGetScrollBarScrollableRef = function handleGetScrollBarScrollableRef(node) {
+    scrollBarScrollableRef.current = node;
+  };
   var handleChangeTransitionStep = function handleChangeTransitionStep(value) {
     setTransitionStep(value);
   };
@@ -210,6 +222,18 @@ var Modal = function Modal(_ref) {
       window.removeEventListener('resize', handleThrottleResize);
     };
   }, [isEnabledNativeScroll, handleSetScrollContentMaxHeight]);
+  React.useEffect(function () {
+    if (!isMobile || !isChangeMobileView) {
+      return;
+    }
+    handleSetScrollContentMaxHeight();
+  }, [isMobile, isChangeMobileView, handleSetScrollContentMaxHeight]);
+  React.useEffect(function () {
+    if (isEnabledNativeScroll || !(isRecalculateHeight && (isHeaderPropsDiff || isFooterPropsDiff))) {
+      return;
+    }
+    handleSetScrollContentMaxHeight();
+  }, [isEnabledNativeScroll, isFooterPropsDiff, isRecalculateHeight, isHeaderPropsDiff, handleSetScrollContentMaxHeight]);
   React.useEffect(function () {
     return function () {
       setIsPopupOpened(false);
@@ -224,7 +248,8 @@ var Modal = function Modal(_ref) {
     classes: classes,
     dataAttrs: dataAttrs,
     scrollBarParams: (0, _extends2["default"])((0, _extends2["default"])({}, scrollBarParams), {
-      maxHeight: scrollMaxHeight
+      maxHeight: scrollMaxHeight,
+      getScrollable: handleGetScrollBarScrollableRef
     }),
     headerProps: headerProps,
     footerProps: footerProps,
@@ -234,7 +259,8 @@ var Modal = function Modal(_ref) {
       footerRef: footerRef,
       containerWrapRef: containerWrapRef,
       containerInnerRef: containerInnerRef,
-      containerBodyRef: containerBodyRef
+      containerBodyRef: containerBodyRef,
+      scrollBarScrollableRef: scrollBarScrollableRef
     },
     isEnabledNativeScroll: isEnabledNativeScroll,
     isDisabledBackgroundClick: isDisabledBackgroundClick,

package/dist/lib/components/Modal/_ModalContent/ModalContent.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-modal-content__container-wrap{-webkit-animation:show-popup .3s ease-out;animation:show-popup .3s ease-out;position:relative;width:100%}@media screen and (min-width:768px){.mfui-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-modal-content__container-inner{background-color:var(--background);font-family:inherit;width:100%}.mfui-modal-content__header{position:relative}.mfui-modal-content__header_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:52px}@media screen and (min-width:768px){.mfui-modal-content__header-main{min-height:64px}}.mfui-modal-content__header-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:12px;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background:transparent;border:none;cursor:pointer;height:32px;justify-content:center;outline:none;width:32px}@media screen and (min-width:768px){.mfui-modal-content__header-button{height:40px;width:40px}}.mfui-modal-content__header-button_back{left:16px}.mfui-modal-content__header-button_close{right:16px}.mfui-modal-content__header-button_shadow{background:var(--base);border-radius:50%;-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-button svg{fill:var(--content)}.mfui-modal-content__title-area{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 48px;padding:12px}@media screen and (min-width:768px){.mfui-modal-content__title-area{margin:0 56px;padding:16px}}.mfui-modal-content__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px;text-align:center}@media screen and (min-width:1280px){.mfui-modal-content__title{font-size:20px;line-height:28px}}@media screen and (min-width:768px){.mfui-modal-content__title{font-size:20px;font-weight:500;letter-spacing:.5px;line-height:28px}}.mfui-modal-content__header-additional{-webkit-box-sizing:border-box;box-sizing:border-box;padding:8px 16px;text-align:center}@media screen and (min-width:768px){.mfui-modal-content__header-additional{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-bottom:24px;padding-right:6px}@media screen and (min-width:768px){.mfui-modal-content__container-body{padding-bottom:32px;padding-right:12px}}.mfui-modal-content__children{-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px;padding-right:4px;padding-top:24px}@media screen and (min-width:768px){.mfui-modal-content__children{padding-left:32px;padding-right:14px}}.mfui-modal-content__footer{padding-left:16px;padding-right:16px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-bottom:24px;margin-left:-16px;margin-right:-16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-left:-32px;margin-right:-32px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-main{min-height:40px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-button{top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__title-area{padding-bottom:4px;padding-top:4px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__container-body{padding-bottom:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__container-wrap_out-side-buttons .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__children,.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__container-body{padding:0}.mfui-modal-content__container-wrap_transition-end{-webkit-animation:hide-popup .2s ease-in;animation:hide-popup .2s ease-in}@-webkit-keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}@keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}
+h1,h2,h3,h4,h5{margin:0}.mfui-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-modal-content__container-wrap{-webkit-animation:show-popup .3s ease-out;animation:show-popup .3s ease-out;position:relative;width:100%}@media screen and (min-width:768px){.mfui-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-modal-content__container-inner{background-color:var(--background);font-family:inherit;width:100%}.mfui-modal-content__header{position:relative}.mfui-modal-content__header_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:52px}@media screen and (min-width:768px){.mfui-modal-content__header-main{min-height:64px}}.mfui-modal-content__header-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:12px;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background:transparent;border:none;cursor:pointer;height:32px;justify-content:center;outline:none;width:32px}@media screen and (min-width:768px){.mfui-modal-content__header-button{height:40px;width:40px}}.mfui-modal-content__header-button_back{left:16px}.mfui-modal-content__header-button_close{right:16px}.mfui-modal-content__header-button_shadow{background:var(--base);border-radius:50%;-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-button svg{fill:var(--content)}.mfui-modal-content__title-area{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 48px;padding:12px}@media screen and (min-width:768px){.mfui-modal-content__title-area{margin:0 56px;padding:16px}}.mfui-modal-content__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px;text-align:center}@media screen and (min-width:1280px){.mfui-modal-content__title{font-size:20px;line-height:28px}}@media screen and (min-width:768px){.mfui-modal-content__title{font-size:20px;font-weight:500;letter-spacing:.5px;line-height:28px}}.mfui-modal-content__header-additional{-webkit-box-sizing:border-box;box-sizing:border-box;padding:8px 16px;text-align:center}@media screen and (min-width:768px){.mfui-modal-content__header-additional{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-bottom:24px;padding-right:6px}@media screen and (min-width:768px){.mfui-modal-content__container-body{padding-bottom:32px;padding-right:12px}}.mfui-modal-content__children{-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px;padding-right:4px;padding-top:24px}@media screen and (min-width:768px){.mfui-modal-content__children{padding-left:32px;padding-right:14px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-bottom:24px;margin-left:-16px;margin-right:-16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-left:-32px;margin-right:-32px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-main{min-height:40px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-button{top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__title-area{padding-bottom:4px;padding-top:4px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__container-body{padding-bottom:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer{padding-left:16px;padding-right:16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__container-wrap_out-side-buttons .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__children,.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__container-body{padding:0}.mfui-modal-content__container-wrap_transition-end{-webkit-animation:hide-popup .2s ease-in;animation:hide-popup .2s ease-in}@-webkit-keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}@keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}

package/dist/lib/components/Modal/_ModalContent/ModalContent.js

@@ -103,7 +103,7 @@ var ModalContent = function ModalContent(_ref) {
     className: cn('header-button', {
       back: true,
       shadow: hasHeaderButtonsShadow
-    }),
+    }, classes === null || classes === void 0 ? void 0 : classes.headerBackButton),
     type: "button",
     onClick: onBackButtonClick
   }), isSmallIcon ? /*#__PURE__*/React.createElement(ArrowLeft24, null) : /*#__PURE__*/React.createElement(ArrowLeft32, null));

package/dist/lib/components/Modal/_ModalMobileBottom/ModalMobileBottom.js

@@ -40,6 +40,7 @@ var ModalMobileBottom = function ModalMobileBottom(_a) {
   var _restProps$refs = restProps.refs,
     containerWrapRef = _restProps$refs.containerWrapRef,
     containerInnerRef = _restProps$refs.containerInnerRef,
+    scrollBarScrollableRef = _restProps$refs.scrollBarScrollableRef,
     isTransitionMoveStep = restProps.isTransitionMoveStep,
     isTransitionEndStep = restProps.isTransitionEndStep;
   var _React$useState = React.useState(null),
@@ -60,9 +61,11 @@ var ModalMobileBottom = function ModalMobileBottom(_a) {
       window.cancelAnimationFrame(animationFrameId.current);
     }
     var containerWrapNode = containerWrapRef.current;
+    var scrollableNode = scrollBarScrollableRef.current;
     animationFrameId.current = window.requestAnimationFrame(function () {
       onChangeTransitionStep(_Modal.MODAL_TRANSITIONS_STEPS_ENUM.MOVE_STEP);
-      if (!containerWrapNode || e.target !== containerWrapNode) {
+      var isScrollTop = ((scrollableNode === null || scrollableNode === void 0 ? void 0 : scrollableNode.scrollTop) || 0) === 0;
+      if (!containerWrapNode || !isScrollTop) {
         return;
       }
       if (!initialContainerWrapHeight) {
@@ -83,11 +86,13 @@ var ModalMobileBottom = function ModalMobileBottom(_a) {
       onChangeContainerWrapTransform("translateY(".concat(positionsDiffAbs, "px)"));
       animationFrameId.current = 0;
     });
-  }, [containerWrapRef, initialContainerWrapHeight, initialTouchPosition, onChangeContainerWrapTransform, onChangeTransitionStep]);
+  }, [containerWrapRef, scrollBarScrollableRef, initialContainerWrapHeight, initialTouchPosition, onChangeContainerWrapTransform, onChangeTransitionStep]);
   var handleWindowTouchEnd = React.useCallback(function (e) {
     var _a;
     var containerWrapNode = containerWrapRef.current;
-    if (!containerWrapNode || !isTransitionMoveStep || e.target !== containerWrapNode) {
+    var scrollableNode = scrollBarScrollableRef.current;
+    var isScrollTop = ((scrollableNode === null || scrollableNode === void 0 ? void 0 : scrollableNode.scrollTop) || 0) === 0;
+    if (!containerWrapNode || !isTransitionMoveStep || !isScrollTop) {
       return;
     }
     window.cancelAnimationFrame(animationFrameId.current);
@@ -96,7 +101,7 @@ var ModalMobileBottom = function ModalMobileBottom(_a) {
     setInitialTouchPosition(null);
     onChangeContainerWrapTransform(isMoreHalfClosed ? 'translateY(100%)' : 'none');
     onChangeTransitionStep(isMoreHalfClosed ? _Modal.MODAL_TRANSITIONS_STEPS_ENUM.MOVE_END_STEP : _Modal.MODAL_TRANSITIONS_STEPS_ENUM.INITIAL_STEP);
-  }, [containerWrapRef, isTransitionMoveStep, offsetHeightCenter, onChangeContainerWrapTransform, onChangeTransitionStep]);
+  }, [containerWrapRef, scrollBarScrollableRef, isTransitionMoveStep, offsetHeightCenter, onChangeContainerWrapTransform, onChangeTransitionStep]);
   React.useEffect(function () {
     if (isSwipeDisabled) {
       return undefined;

package/dist/lib/components/Modal/mocks.js

@@ -14,6 +14,7 @@ var mockModalContextProps = {
     containerInner: 'containerInner-class',
     containerBody: 'containerBody-class',
     header: 'header-class',
+    headerBackButton: 'headerBackButton-class',
     headerCloseButton: 'headerCloseButton-class',
     titleArea: 'titleArea-class',
     title: 'title-class',
@@ -68,6 +69,9 @@ var mockModalContextProps = {
     },
     containerBodyRef: {
       current: null
+    },
+    scrollBarScrollableRef: {
+      current: null
     }
   },
   isMobile: false,

package/dist/lib/components/Modal/types.d.ts

@@ -11,6 +11,7 @@ type ModalContextPropsType = ModalComponentPropsType & {
         containerWrapRef: RefType;
         containerInnerRef: RefType;
         containerBodyRef: RefType;
+        scrollBarScrollableRef: React.MutableRefObject<HTMLElement | null>;
     };
     isMobile: boolean;
     isTransitionMoveStep: boolean;

package/dist/lib/components/ScrollBar/ScrollBar.d.ts

@@ -30,6 +30,8 @@ export interface IScrollBarProps {
     showAlways?: boolean;
     /** Ref обработчик */
     getScrollBar?: (node: HTMLElement) => void;
+    /** Ref обработчик для Scrollable element */
+    getScrollable?: (node: HTMLElement) => void;
     children?: React.ReactNode;
 }
 declare const ScrollBar: React.FC<IScrollBarProps>;

package/dist/lib/components/ScrollBar/ScrollBar.js

@@ -25,12 +25,14 @@ var ScrollBar = function ScrollBar(_ref) {
     hideMobile = _ref.hideMobile,
     showAlways = _ref.showAlways,
     getScrollBar = _ref.getScrollBar,
+    getScrollable = _ref.getScrollable,
     children = _ref.children;
   var _React$useState = React.useState(false),
     _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
     isInitialHide = _React$useState2[0],
     setIsInitialHide = _React$useState2[1];
   var scrollBarInitNode = React.useRef(null);
+  var scrollableNode = React.useRef(null);
   var resizeObserver = React.useRef(null);
   function handleGetScrollBarRef(node) {
     if (!node) {
@@ -40,6 +42,10 @@ var ScrollBar = function ScrollBar(_ref) {
     scrollBarInitNode.current = scrollInitEl;
     getScrollBar === null || getScrollBar === void 0 ? void 0 : getScrollBar(scrollInitEl);
   }
+  function handleGetScrollableRef(node) {
+    scrollableNode.current = node;
+    getScrollable === null || getScrollable === void 0 ? void 0 : getScrollable(node);
+  }
   var handleSetInitialHide = React.useCallback(function () {
     if (!scrollBarInitNode.current || !maxHeight) {
       setIsInitialHide(false);
@@ -65,7 +71,7 @@ var ScrollBar = function ScrollBar(_ref) {
       }
     };
   }, [handleSetInitialHide, maxHeight]);
-  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       'initial-hide': isInitialHide,
       'hide-all': hideAll,
@@ -75,7 +81,7 @@ var ScrollBar = function ScrollBar(_ref) {
       'hide-mobile': hideMobile,
       'show-always': showAlways
     }, [classes === null || classes === void 0 ? void 0 : classes.root])
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(_simplebarReact["default"], (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.init), {
+  }), /*#__PURE__*/React.createElement(_simplebarReact["default"], (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.init), {
     className: cn('init', [classes === null || classes === void 0 ? void 0 : classes.init]),
     classNames: {
       track: cn('scroll-track'),
@@ -88,7 +94,10 @@ var ScrollBar = function ScrollBar(_ref) {
       maxHeight: "".concat(maxHeight, "px")
     },
     forceVisible: "y",
-    ref: handleGetScrollBarRef
+    ref: handleGetScrollBarRef,
+    scrollableNodeProps: {
+      ref: handleGetScrollableRef
+    }
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('children-wrap', [classes === null || classes === void 0 ? void 0 : classes.childrenWrap])
   }, children)));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@megafon/ui-core",
-    "version": "7.8.0",
+    "version": "7.9.0",
     "files": [
         "dist",
         "styles"
@@ -50,7 +50,7 @@
         "@babel/preset-env": "^7.8.6",
         "@babel/preset-react": "^7.8.3",
         "@babel/preset-typescript": "^7.8.3",
-        "@megafon/ui-icons": "^3.5.0",
+        "@megafon/ui-icons": "^3.5.1",
         "@svgr/core": "^2.4.1",
         "@testing-library/jest-dom": "^6.5.0",
         "@testing-library/react": "^16.0.1",
@@ -89,7 +89,7 @@
         "@datepicker-react/hooks": "^2.7.0",
         "@dnd-kit/core": "^6.1.0",
         "@dnd-kit/sortable": "^8.0.0",
-        "@megafon/ui-helpers": "^3.1.1",
+        "@megafon/ui-helpers": "^3.1.2",
         "@mona-health/react-input-mask": "^3.0.3",
         "@popperjs/core": "^2.11.8",
         "core-js": "^3.6.4",
@@ -104,5 +104,5 @@
         "simplebar-react": "^3.2.5",
         "swiper": "^11.1.1"
     },
-    "gitHead": "adbb57b018314be1e716b9f09fe226e66107d198"
+    "gitHead": "a981889514af3bc91afd05caf40ffe989995abcf"
 }