@megafon/ui-core 9.2.2 → 9.4.0

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

@@ -5,11 +5,15 @@ import { cnCreate, breakpoints } from '@megafon/ui-helpers';
 import throttle from 'lodash.throttle';
 import ReactModal from 'react-modal';
 import THROTTLE_TIME from "../../constants/throttleTime";
+import { useEvent } from "../../hooks/useEvent";
 import usePrevious from "../../hooks/usePrevious";
 import useResolution from "../../hooks/useResolution";
+import useVisualViewport from "../../hooks/useVisualViewport";
+import { isIOS } from "../../utils/browser";
 import ModalDesktop from "./_ModalDesktop/ModalDesktop";
 import ModalMobile from "./_ModalMobile/ModalMobile";
-import { changeBodyPadding, getCorrectMaxHeight } from "./utils/utils";
+import usePreventScroll from "./utils/usePreventScroll";
+import { changeBodyStyles, getCorrectMaxHeight } from "./utils/utils";
 import "./Modal.css";
 var MOBILE_BIG_START = breakpoints.MOBILE_BIG_START;
 var HEIGHT_TRANSITION_PROPERTY = 'height';
@@ -29,7 +33,6 @@ export var MODAL_TRANSITIONS_STEPS_ENUM;
   MODAL_TRANSITIONS_STEPS_ENUM["MOVE_END_STEP"] = "move-end-step";
   MODAL_TRANSITIONS_STEPS_ENUM["END_STEP"] = "end-step";
 })(MODAL_TRANSITIONS_STEPS_ENUM || (MODAL_TRANSITIONS_STEPS_ENUM = {}));
-var bodyCn = cnCreate('mfui-9-modal-open-body');
 var cn = cnCreate('mfui-9-modal');
 var Modal = function Modal(_ref) {
   var className = _ref.className,
@@ -98,6 +101,18 @@ var Modal = function Modal(_ref) {
   var resizeObserver = React.useRef(null);
   var _useResolution = useResolution(),
     isMobile = _useResolution.isMobile;
+  var _useVisualViewport = useVisualViewport({
+      enabled: isOpened && isIOS(),
+      onChange: function onChange(metrics) {
+        document.documentElement.style.setProperty('--keyboard-offset', "".concat(metrics.keyboardOffset, "px"));
+        document.documentElement.style.setProperty('--viewport-height', "".concat(metrics.viewportHeight, "px"));
+      }
+    }),
+    isKeyboardOpen = _useVisualViewport.isKeyboardOpen,
+    viewportHeight = _useVisualViewport.viewportHeight;
+  usePreventScroll({
+    isDisabled: !isOpened
+  });
   var isFullScreenView = mobileView === 'fullScreen' && isMobile;
   var isBottomView = mobileView === 'bottom' && isMobile;
   var isBottomTransitionIn = transitionStep !== MODAL_TRANSITIONS_STEPS_ENUM.END_STEP && transitionStep !== MODAL_TRANSITIONS_STEPS_ENUM.MOVE_END_STEP;
@@ -122,7 +137,7 @@ var Modal = function Modal(_ref) {
     overlayRef.current = node;
     getModalOverlayRef === null || getModalOverlayRef === void 0 ? void 0 : getModalOverlayRef(node);
   };
-  var handleSetScrollContentMaxHeight = React.useCallback(function () {
+  var handleSetScrollContentMaxHeight = useEvent(function () {
     var correctMaxHeight = getCorrectMaxHeight({
       refs: {
         overlayNode: overlayRef.current,
@@ -133,11 +148,12 @@ var Modal = function Modal(_ref) {
       props: {
         isStickyFooter: isStickyFooter,
         isBottomView: isBottomView,
-        isStickyHeader: isStickyHeader
+        isStickyHeader: isStickyHeader,
+        availableHeight: isBottomView && isIOS() && viewportHeight ? viewportHeight : undefined
       }
     });
     setScrollMaxHeight(correctMaxHeight);
-  }, [isStickyFooter, isBottomView, isStickyHeader]);
+  });
   var handleSetContainerWrapHeight = React.useCallback(function () {
     var containerInnerNode = containerInnerRef.current;
     if (!containerInnerNode) {
@@ -164,9 +180,13 @@ var Modal = function Modal(_ref) {
     handleSetScrollContentMaxHeight();
   }, [isEnabledNativeScroll, handleSetScrollContentMaxHeight]);
   var handleAfterOpen = function handleAfterOpen() {
+    changeBodyStyles(true);
     handleSetStyles();
     onAfterModalOpen === null || onAfterModalOpen === void 0 ? void 0 : onAfterModalOpen();
   };
+  var handleAfterClose = function handleAfterClose() {
+    changeBodyStyles(false);
+  };
   var handlePopupClose = function handlePopupClose() {
     setTransitionStep(MODAL_TRANSITIONS_STEPS_ENUM.END_STEP);
   };
@@ -183,7 +203,6 @@ var Modal = function Modal(_ref) {
   };
   React.useEffect(function () {
     setIsPopupOpened(isOpened);
-    changeBodyPadding(isOpened);
     if (!isOpened) {
       setContainerWrapHeight(undefined);
     }
@@ -235,6 +254,12 @@ var Modal = function Modal(_ref) {
     }
     handleSetScrollContentMaxHeight();
   }, [isMobile, isChangeMobileView, handleSetScrollContentMaxHeight]);
+  React.useEffect(function () {
+    if (!isOpened || !isMobile || !isBottomView || !isIOS()) {
+      return;
+    }
+    handleSetScrollContentMaxHeight();
+  }, [isOpened, isMobile, isBottomView, viewportHeight, handleSetScrollContentMaxHeight]);
   React.useEffect(function () {
     if (isEnabledNativeScroll || !(isRecalculateHeight && (isHeaderPropsDiff || isFooterPropsDiff))) {
       return;
@@ -243,14 +268,19 @@ var Modal = function Modal(_ref) {
   }, [isEnabledNativeScroll, isFooterPropsDiff, isRecalculateHeight, isHeaderPropsDiff, handleSetScrollContentMaxHeight]);
   React.useEffect(function () {
     return function () {
-      setIsPopupOpened(false);
-      document.body.style.paddingRight = '';
       if (!containerInnerRef.current || !resizeObserver.current) {
         return;
       }
       resizeObserver.current.unobserve(containerInnerRef.current);
     };
   }, []);
+  React.useEffect(function () {
+    return function () {
+      if (isOpened) {
+        changeBodyStyles(false);
+      }
+    };
+  }, [isOpened]);
   var contextProps = {
     classes: classes,
     dataAttrs: dataAttrs,
@@ -290,6 +320,7 @@ var Modal = function Modal(_ref) {
       return /*#__PURE__*/React.createElement(ModalDesktop, contextProps, children);
     }
     return /*#__PURE__*/React.createElement(ModalMobile, _extends({}, contextProps, {
+      isKeyboardOpen: isKeyboardOpen,
       isSwipeDisabled: isSwipeDisabled,
       isFullView: isFullScreenView,
       onChangeTransitionStep: handleChangeTransitionStep,
@@ -305,7 +336,7 @@ var Modal = function Modal(_ref) {
       'native-scroll': isEnabledNativeScroll
     }, [className]),
     overlayClassName: cn('overlay', classes === null || classes === void 0 ? void 0 : classes.overlay),
-    bodyOpenClassName: bodyCn('', classes === null || classes === void 0 ? void 0 : classes.bodyOpen),
+    bodyOpenClassName: classes === null || classes === void 0 ? void 0 : classes.bodyOpen,
     isOpen: isPopupOpened,
     ariaHideApp: hideAriaApp,
     contentLabel: contentLabel,
@@ -313,7 +344,8 @@ var Modal = function Modal(_ref) {
     contentRef: getModalContentRef,
     overlayRef: handleGetModalOverlayRef,
     onRequestClose: handlePopupClose,
-    onAfterOpen: handleAfterOpen
+    onAfterOpen: handleAfterOpen,
+    onAfterClose: handleAfterClose
   }, renderContent());
 };
 export default Modal;

package/dist/es/components/Modal/_ModalMobile/ModalMobile.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-mobile{width:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__container-wrap{display:block;height:calc(var(--vh)*100 - 72px);width:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__container-inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__container-body{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow-y:auto}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__children{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__children-content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__scroll-content,.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__scroll-init,.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__scroll-root{height:100%}.mfui-9-modal-mobile__container-wrap{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;position:fixed;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-animation:show-popup-from-bottom .3s linear;animation:show-popup-from-bottom .3s linear;height:auto;justify-content:flex-end;max-height:100%;overflow:hidden;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.mfui-9-modal-mobile__container-wrap:before{content:"";display:block;-ms-flex-item-align:end;align-self:flex-end;background-color:var(--spbSky2);border-radius:10px;height:6px;margin:0 auto 8px;width:40px}.mfui-9-modal-mobile__container-wrap_move{-webkit-transition:none;transition:none}.mfui-9-modal-mobile__container-wrap_transition-end{-webkit-animation:hide-popup-to-bottom .2s linear forwards;animation:hide-popup-to-bottom .2s linear forwards}.mfui-9-modal-mobile__container-inner{-webkit-box-flex:0;-ms-flex-positive:0;border-top-left-radius:32px;border-top-right-radius:32px;flex-grow:0;height:auto;overflow:hidden}@-webkit-keyframes show-popup-from-bottom{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes show-popup-from-bottom{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes hide-popup-to-bottom{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes hide-popup-to-bottom{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-mobile{--top-offset:72px;width:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__container-wrap{display:block;height:calc(var(--vh, 1vh)*100 - var(--top-offset));width:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__container-inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__container-body{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow-y:auto}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__children{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__children-content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__scroll-content,.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__scroll-init,.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__scroll-root{height:100%}.mfui-9-modal-mobile__container-wrap{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;position:fixed;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-animation:show-popup-from-bottom .3s linear;animation:show-popup-from-bottom .3s linear;height:auto;justify-content:flex-end;max-height:100%;overflow:hidden;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.mfui-9-modal-mobile__container-wrap:before{content:"";display:block;-ms-flex-item-align:end;align-self:flex-end;background-color:var(--spbSky2);border-radius:10px;height:6px;margin:0 auto 8px;width:40px}.mfui-9-modal-mobile__container-wrap_move{-webkit-transition:none;transition:none}.mfui-9-modal-mobile__container-wrap_transition-end{-webkit-animation:hide-popup-to-bottom .2s linear forwards;animation:hide-popup-to-bottom .2s linear forwards}.mfui-9-modal-mobile__container-inner{-webkit-box-flex:0;-ms-flex-positive:0;border-top-left-radius:32px;border-top-right-radius:32px;flex-grow:0;height:auto;overflow:hidden}.mfui-9-modal-mobile_ios.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__container-wrap,.mfui-9-modal-mobile_ios.mfui-9-modal-mobile_keyboard-open .mfui-9-modal-mobile__container-wrap{bottom:var(--keyboard-offset,0);height:calc(var(--viewport-height) - var(--top-offset))}.mfui-9-modal-mobile_ios.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__container-wrap:after,.mfui-9-modal-mobile_ios.mfui-9-modal-mobile_keyboard-open .mfui-9-modal-mobile__container-wrap:after{background-color:var(--background);bottom:auto;content:"";display:block;height:200%;left:0;position:fixed;right:0;top:var(--viewport-height)}@-webkit-keyframes show-popup-from-bottom{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes show-popup-from-bottom{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes hide-popup-to-bottom{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes hide-popup-to-bottom{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}

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

@@ -8,6 +8,7 @@ export interface IModalMobileProps extends ModalContextPropsType {
     children?: React.ReactNode;
     onChangeTransitionStep: (value: MODAL_TRANSITIONS_STEPS_ENUM) => void;
     onChangeContainerWrapTransform: (value: string) => void;
+    isKeyboardOpen: boolean;
 }
 declare const ModalMobile: React.FC<IModalMobileProps>;
 export default ModalMobile;

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

@@ -12,6 +12,7 @@ var __rest = this && this.__rest || function (s, e) {
 };
 import * as React from 'react';
 import { cnCreate } from '@megafon/ui-helpers';
+import { isIOS } from "../../../utils/browser";
 import ModalContent from "../_ModalContent/ModalContent";
 import { MODAL_TRANSITIONS_STEPS_ENUM } from "../Modal";
 import "./ModalMobile.css";
@@ -34,19 +35,21 @@ var ModalMobile = function ModalMobile(_a) {
     scrollContent = _f.scrollContent,
     restClassesScrollBar = __rest(_f, ["root", "init", "scrollContent"]),
     restScrollBarParams = __rest(_d, ["classes"]),
-    isSwipeDisabled = _a.isSwipeDisabled,
     _a$isFullView = _a.isFullView,
     isFullView = _a$isFullView === void 0 ? true : _a$isFullView,
     children = _a.children,
     onChangeTransitionStep = _a.onChangeTransitionStep,
     onChangeContainerWrapTransform = _a.onChangeContainerWrapTransform,
-    restProps = __rest(_a, ["classes", "scrollBarParams", "isSwipeDisabled", "isFullView", "children", "onChangeTransitionStep", "onChangeContainerWrapTransform"]);
+    isKeyboardOpen = _a.isKeyboardOpen,
+    restProps = __rest(_a, ["classes", "scrollBarParams", "isFullView", "children", "onChangeTransitionStep", "onChangeContainerWrapTransform", "isKeyboardOpen"]);
   var _restProps$refs = restProps.refs,
     containerWrapRef = _restProps$refs.containerWrapRef,
     containerInnerRef = _restProps$refs.containerInnerRef,
     scrollBarScrollableRef = _restProps$refs.scrollBarScrollableRef,
     isTransitionMoveStep = restProps.isTransitionMoveStep,
-    isTransitionEndStep = restProps.isTransitionEndStep;
+    isTransitionEndStep = restProps.isTransitionEndStep,
+    isSwipeDisabledProps = restProps.isSwipeDisabled;
+  var isSwipeDisabled = isKeyboardOpen && isIOS() || isSwipeDisabledProps;
   var _React$useState = React.useState(null),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     initialTouchPosition = _React$useState2[0],
@@ -118,7 +121,9 @@ var ModalMobile = function ModalMobile(_a) {
   }, [handleWindowTouchEnd, handleWindowTouchMove, isSwipeDisabled]);
   return /*#__PURE__*/React.createElement("div", {
     className: cn({
-      'full-view': isFullView
+      'full-view': isFullView,
+      ios: isIOS(),
+      'keyboard-open': isKeyboardOpen
     })
   }, /*#__PURE__*/React.createElement(ModalContent, _extends({}, restProps, {
     classes: _extends(_extends({}, restClasses), {

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

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;
+interface PreventScrollOptions {
+    /** Whether the scroll lock is disabled. */
+    isDisabled?: boolean;
+    focusCallback?: () => void;
+}
+export declare function isScrollable(node: Element): boolean;
+export declare function getScrollParent(node: Element): Element;
+/**
+ * Prevents scrolling on the document body on mount, and
+ * restores it on unmount. Also ensures that content does not
+ * shift due to the scrollbars disappearing.
+ */
+declare function usePreventScroll(options?: PreventScrollOptions): void;
+export declare function isInput(target: Element): boolean;
+export default usePreventScroll;

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

@@ -0,0 +1,252 @@
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.regexp.test.js";
+import "core-js/modules/es.set.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+// This code comes from https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/usePreventScroll.ts
+/* eslint-disable */
+import { useEffect, useLayoutEffect } from 'react';
+import { isIOS } from "../../../utils/browser";
+var KEYBOARD_BUFFER = 24;
+export var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+function chain() {
+  for (var _len = arguments.length, callbacks = new Array(_len), _key = 0; _key < _len; _key++) {
+    callbacks[_key] = arguments[_key];
+  }
+  return function () {
+    for (var _i = 0, _callbacks = callbacks; _i < _callbacks.length; _i++) {
+      var callback = _callbacks[_i];
+      if (typeof callback === 'function') {
+        callback.apply(void 0, arguments);
+      }
+    }
+  };
+}
+// @ts-ignore
+var visualViewport = typeof document !== 'undefined' && window.visualViewport;
+export function isScrollable(node) {
+  var style = window.getComputedStyle(node);
+  return /(auto|scroll)/.test(style.overflow + style.overflowX + style.overflowY);
+}
+export function getScrollParent(node) {
+  if (isScrollable(node)) {
+    node = node.parentElement;
+  }
+  while (node && !isScrollable(node)) {
+    node = node.parentElement;
+  }
+  return node || document.scrollingElement || document.documentElement;
+}
+// HTML input types that do not cause the software keyboard to appear.
+var nonTextInputTypes = new Set(['checkbox', 'radio', 'range', 'color', 'file', 'image', 'button', 'submit', 'reset']);
+// The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position
+var preventScrollCount = 0;
+var restore;
+/**
+ * Prevents scrolling on the document body on mount, and
+ * restores it on unmount. Also ensures that content does not
+ * shift due to the scrollbars disappearing.
+ */
+function usePreventScroll() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var isDisabled = options.isDisabled;
+  useIsomorphicLayoutEffect(function () {
+    if (isDisabled) {
+      return;
+    }
+    preventScrollCount++;
+    if (preventScrollCount === 1) {
+      if (isIOS()) {
+        restore = preventScrollMobileSafari();
+      }
+    }
+    return function () {
+      preventScrollCount--;
+      if (preventScrollCount === 0) {
+        restore === null || restore === void 0 ? void 0 : restore();
+      }
+    };
+  }, [isDisabled]);
+}
+// Mobile Safari is a whole different beast. Even with overflow: hidden,
+// it still scrolls the page in many situations:
+//
+// 1. When the bottom toolbar and address bar are collapsed, page scrolling is always allowed.
+// 2. When the keyboard is visible, the viewport does not resize. Instead, the keyboard covers part of
+//    it, so it becomes scrollable.
+// 3. When tapping on an input, the page always scrolls so that the input is centered in the visual viewport.
+//    This may cause even fixed position elements to scroll off the screen.
+// 4. When using the next/previous buttons in the keyboard to navigate between inputs, the whole page always
+//    scrolls, even if the input is inside a nested scrollable element that could be scrolled instead.
+//
+// In order to work around these cases, and prevent scrolling without jankiness, we do a few things:
+//
+// 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling
+//    on the window.
+// 2. Prevent default on `touchmove` events inside a scrollable element when the scroll position is at the
+//    top or bottom. This avoids the whole page scrolling instead, but does prevent overscrolling.
+// 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.
+// 4. When focusing an input, apply a transform to trick Safari into thinking the input is at the top
+//    of the page, which prevents it from scrolling the page. After the input is focused, scroll the element
+//    into view ourselves, without scrolling the whole page.
+// 5. Offset the body by the scroll position using a negative margin and scroll to the top. This should appear the
+//    same visually, but makes the actual scroll position always zero. This is required to make all of the
+//    above work or Safari will still try to scroll the page when focusing an input.
+// 6. As a last resort, handle window scroll events, and scroll back to the top. This can happen when attempting
+//    to navigate to an input with the next/previous buttons that's outside a modal.
+function preventScrollMobileSafari() {
+  var scrollable;
+  var lastY = 0;
+  var onTouchStart = function onTouchStart(e) {
+    // Store the nearest scrollable parent element from the element that the user touched.
+    scrollable = getScrollParent(e.target);
+    if (scrollable === document.documentElement && scrollable === document.body) {
+      return;
+    }
+    lastY = e.changedTouches[0].pageY;
+  };
+  var onTouchMove = function onTouchMove(e) {
+    // Prevent scrolling the window.
+    if (!scrollable || scrollable === document.documentElement || scrollable === document.body) {
+      e.preventDefault();
+      return;
+    }
+    // Prevent scrolling up when at the top and scrolling down when at the bottom
+    // of a nested scrollable area, otherwise mobile Safari will start scrolling
+    // the window instead. Unfortunately, this disables bounce scrolling when at
+    // the top but it's the best we can do.
+    var y = e.changedTouches[0].pageY;
+    var _scrollable = scrollable,
+      scrollTop = _scrollable.scrollTop;
+    var bottom = scrollable.scrollHeight - scrollable.clientHeight;
+    if (bottom === 0) {
+      return;
+    }
+    if (scrollTop <= 0 && y > lastY || scrollTop >= bottom && y < lastY) {
+      e.preventDefault();
+    }
+    lastY = y;
+  };
+  var onTouchEnd = function onTouchEnd(e) {
+    var target = e.target;
+    // Apply this change if we're not already focused on the target element
+    if (isInput(target) && target !== document.activeElement) {
+      e.preventDefault();
+      // Apply a transform to trick Safari into thinking the input is at the top of the page
+      // so it doesn't try to scroll it into view. When tapping on an input, this needs to
+      // be done before the "focus" event, so we have to focus the element ourselves.
+      target.style.transform = 'translateY(-2000px)';
+      target.focus();
+      requestAnimationFrame(function () {
+        target.style.transform = '';
+      });
+    }
+  };
+  var onFocus = function onFocus(e) {
+    var target = e.target;
+    if (isInput(target)) {
+      // Transform also needs to be applied in the focus event in cases where focus moves
+      // other than tapping on an input directly, e.g. the next/previous buttons in the
+      // software keyboard. In these cases, it seems applying the transform in the focus event
+      // is good enough, whereas when tapping an input, it must be done before the focus event. 🤷‍♂️
+      target.style.transform = 'translateY(-2000px)';
+      requestAnimationFrame(function () {
+        target.style.transform = '';
+        // This will have prevented the browser from scrolling the focused element into view,
+        // so we need to do this ourselves in a way that doesn't cause the whole page to scroll.
+        if (visualViewport) {
+          if (visualViewport.height < window.innerHeight) {
+            // If the keyboard is already visible, do this after one additional frame
+            // to wait for the transform to be removed.
+            requestAnimationFrame(function () {
+              scrollIntoView(target);
+            });
+          } else {
+            // Otherwise, wait for the visual viewport to resize before scrolling so we can
+            // measure the correct position to scroll to.
+            visualViewport.addEventListener('resize', function () {
+              return scrollIntoView(target);
+            }, {
+              once: true
+            });
+          }
+        }
+      });
+    }
+  };
+  var onWindowScroll = function onWindowScroll() {
+    // Last resort. If the window scrolled, scroll it back to the top.
+    // It should always be at the top because the body will have a negative margin (see below).
+    window.scrollTo(0, 0);
+  };
+  // Record the original scroll position so we can restore it.
+  // Then apply a negative margin to the body to offset it by the scroll position. This will
+  // enable us to scroll the window to the top, which is required for the rest of this to work.
+  var scrollX = window.pageXOffset;
+  var scrollY = window.pageYOffset;
+  var restoreStyles = chain(setStyle(document.documentElement, 'paddingRight', "".concat(window.innerWidth - document.documentElement.clientWidth, "px")));
+  // Scroll to the top. The negative margin on the body will make this appear the same.
+  window.scrollTo(0, 0);
+  var removeEvents = chain(addEvent(document, 'touchstart', onTouchStart, {
+    passive: false,
+    capture: true
+  }), addEvent(document, 'touchmove', onTouchMove, {
+    passive: false,
+    capture: true
+  }), addEvent(document, 'touchend', onTouchEnd, {
+    passive: false,
+    capture: true
+  }), addEvent(document, 'focus', onFocus, true), addEvent(window, 'scroll', onWindowScroll));
+  return function () {
+    // Restore styles and scroll the page back to where it was.
+    restoreStyles();
+    removeEvents();
+    window.scrollTo(scrollX, scrollY);
+  };
+}
+// Sets a CSS property on an element, and returns a function to revert it to the previous value.
+function setStyle(element, style, value) {
+  // https://github.com/microsoft/TypeScript/issues/17827#issuecomment-391663310
+  // @ts-ignore
+  var cur = element.style[style];
+  // @ts-ignore
+  element.style[style] = value;
+  return function () {
+    // @ts-ignore
+    element.style[style] = cur;
+  };
+}
+// Adds an event listener to an element, and returns a function to remove it.
+function addEvent(target, event, handler, options) {
+  // @ts-ignore
+  target.addEventListener(event, handler, options);
+  return function () {
+    // @ts-ignore
+    target.removeEventListener(event, handler, options);
+  };
+}
+function scrollIntoView(target) {
+  var root = document.scrollingElement || document.documentElement;
+  while (target && target !== root) {
+    // Find the parent scrollable element and adjust the scroll position if the target is not already in view.
+    var scrollable = getScrollParent(target);
+    if (scrollable !== document.documentElement && scrollable !== document.body && scrollable !== target) {
+      var scrollableTop = scrollable.getBoundingClientRect().top;
+      var targetTop = target.getBoundingClientRect().top;
+      var targetBottom = target.getBoundingClientRect().bottom;
+      // Buffer is needed for some edge cases
+      var keyboardHeight = scrollable.getBoundingClientRect().bottom + KEYBOARD_BUFFER;
+      if (targetBottom > keyboardHeight) {
+        scrollable.scrollTop += targetTop - scrollableTop;
+      }
+    }
+    // @ts-ignore
+    target = scrollable.parentElement;
+  }
+}
+export function isInput(target) {
+  return target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type) || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable;
+}
+export default usePreventScroll;

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

@@ -10,9 +10,10 @@ type CorrectMaxHeightArgsType = {
         isStickyFooter?: boolean;
         isBottomView?: boolean;
         isStickyHeader?: boolean;
+        availableHeight?: number;
     };
 };
 export declare const getCorrectMaxHeight: ({ refs, props }: CorrectMaxHeightArgsType) => number;
-export declare const changeBodyPadding: (isOpened: boolean) => void;
+export declare const changeBodyStyles: (isOpened: boolean) => void;
 declare const _default: null;
 export default _default;

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

@@ -31,8 +31,9 @@ export var getCorrectMaxHeight = function getCorrectMaxHeight(_ref) {
     props = _ref.props;
   var isStickyFooter = props.isStickyFooter,
     isStickyHeader = props.isStickyHeader,
-    isBottomView = props.isBottomView;
-  var windowHeight = window.innerHeight;
+    isBottomView = props.isBottomView,
+    availableHeight = props.availableHeight;
+  var windowHeight = availableHeight !== null && availableHeight !== void 0 ? availableHeight : window.innerHeight;
   var windowWidth = window.innerWidth;
   var isMobile = windowWidth < breakpoints.MOBILE_BIG_START;
   var _getAdditionalSize = getAdditionalSize(refs),
@@ -48,15 +49,19 @@ export var getCorrectMaxHeight = function getCorrectMaxHeight(_ref) {
   var correctMaxHeight = isStickyFooter ? maxHeightResize - popupFooterHeight : maxHeightResize;
   return correctMaxHeight;
 };
-export var changeBodyPadding = function changeBodyPadding(isOpened) {
+export var changeBodyStyles = function changeBodyStyles(isOpened) {
   var windowWidth = window.innerWidth;
   var documentClientWidth = document.documentElement.clientWidth;
   var scrollBarWidth = windowWidth - documentClientWidth;
   var bodyEl = document.body;
   if (!isOpened) {
     bodyEl.style.paddingRight = '';
+    bodyEl.style.height = '';
+    bodyEl.style.overflow = '';
     return;
   }
+  bodyEl.style.height = '100%';
+  bodyEl.style.overflow = 'hidden';
   if (scrollBarWidth === 0) {
     return;
   }

package/dist/es/components/MultipleSelect/MultipleSelect.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-9-multiple-select{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);font-family:inherit;font-size:15px;line-height:24px;position:relative;width:100%}.mfui-9-multiple-select__control{background-color:var(--base);border:1px solid var(--spbSky2);border-radius:16px;display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px;height:auto;min-height:60px;outline:none;padding:13px 15px;position:relative;-webkit-transition:border-color .3s;transition:border-color .3s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.mfui-9-multiple-select__control:hover{border-color:var(--content)}.mfui-9-multiple-select__input-container{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:8px;overflow:hidden;width:100%}.mfui-9-multiple-select__arrow-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:pointer;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;outline:none;padding:0;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:8px;justify-content:center;width:32px}.mfui-9-multiple-select__arrow-button:disabled{color:inherit;cursor:auto}.mfui-9-multiple-select__arrow-button:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-multiple-select__arrow-button:focus{outline:none}.mfui-9-multiple-select__arrow-icon{height:auto;width:100%;fill:var(--spbSky2)}.mfui-9-multiple-select__control_active .mfui-9-multiple-select__arrow-icon{-webkit-transition-duration:.6s;transition-duration:.6s;-webkit-transition-property:color,-webkit-transform;transition-property:color,-webkit-transform;transition-property:transform,color;transition-property:transform,color,-webkit-transform;fill:var(--content)}.mfui-9-multiple-select__input{display:block;position:relative;z-index:1;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;caret-color:var(--brandGreen);color:var(--content);flex-shrink:1;font-family:inherit;font-size:100%;line-height:24px;opacity:1;outline:none;overflow:auto;padding:0;resize:none;width:100px}.mfui-9-multiple-select__input::-webkit-input-placeholder{color:var(--spbSky3)}.mfui-9-multiple-select__input::-moz-placeholder{color:var(--spbSky3)}.mfui-9-multiple-select__input:-ms-input-placeholder{color:var(--spbSky3)}.mfui-9-multiple-select__input::-ms-input-placeholder{color:var(--spbSky3)}.mfui-9-multiple-select__input::placeholder{color:var(--spbSky3)}.mfui-9-multiple-select__tag{display:-webkit-box;display:-ms-flexbox;display:flex;gap:2px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--spbSky0);border:none;border-radius:8px;height:32px;max-width:100%;padding:4px 6px 4px 12px}.mfui-9-multiple-select__tag-title{display:block;font-size:15px;font-weight:400;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-9-multiple-select__tag-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:pointer;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;outline:none;padding:0;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);border-radius:8px;height:20px;min-width:20px;width:20px}.mfui-9-multiple-select__tag-button:disabled{color:inherit;cursor:auto}.mfui-9-multiple-select__tag-button:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-multiple-select__tag-button:focus{outline:none}.mfui-9-multiple-select__tag-button-icon{-webkit-transition:fill .3s;transition:fill .3s;fill:var(--spbSky3)}.mfui-9-multiple-select__tag-button:hover .mfui-9-multiple-select__tag-button-icon{fill:var(--content)}.mfui-9-multiple-select__notice-text{color:var(--spbSky3);font-size:12px;font-weight:400;line-height:18px;margin-top:8px}.mfui-9-multiple-select_open .mfui-9-multiple-select__control{border-color:var(--content)}.mfui-9-multiple-select_open .mfui-9-multiple-select__arrow-icon{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.mfui-9-multiple-select_disabled{pointer-events:none}.mfui-9-multiple-select_disabled .mfui-9-multiple-select__control{background-color:var(--spbSky0)}.mfui-9-multiple-select_disabled .mfui-9-multiple-select__input:not([placeholder]){width:0}.mfui-9-multiple-select_disabled .mfui-9-multiple-select__tag{background-color:var(--spbSky1)}.mfui-9-multiple-select_disabled .mfui-9-multiple-select__arrow-icon,.mfui-9-multiple-select_disabled .mfui-9-multiple-select__tag-button-icon{fill:var(--spbSky2)}

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

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import './MultipleSelect.scss';
+export type ItemValueType = number | string | undefined;
+export type ItemType = {
+    /** Заголовок элемента */
+    title: string;
+    /** Уникальный идентификатор элемента */
+    value: ItemValueType;
+};
+export interface IMultipleSelectProps {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Элементы выпадающего списка */
+    items: ItemType[];
+    /** Список выбранных элементов */
+    selectedItems?: ItemType[];
+    /** Ограничение количества выбранных элементов */
+    selectLimit?: number;
+    /** Текст внутри поля по умолчанию */
+    placeholder?: string;
+    /** Максимальное вводимое количество символов */
+    maxLength?: number;
+    /** Текст при отсутствии результатов поиска */
+    notFoundText?: string;
+    /** Дополнительный текст под полем */
+    noticeText?: string;
+    /** Отключенное состояние */
+    disabled?: boolean;
+    /** Пользовательская функция поиска */
+    customSearchFilter?: (item: ItemType, searchQuery: string) => boolean;
+    /** Обработчик выбора элемента селекта */
+    onSelect?: (items: ItemType[]) => void;
+    /** Обработчик выхода из фокуса */
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /** Обработчик входа в фокус */
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /** Обработчик изменения поля при поиске */
+    onSearch?: (query: string) => void;
+    /** Использование функции debounce для onSearch */
+    searchDelay?: number;
+    /** Переводит компонент в контролируемое состояние */
+    isControlled?: boolean;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        input?: string;
+        list?: string;
+        listItem?: string;
+        tag?: string;
+        tagButton?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        input?: Record<string, string>;
+        list?: Record<string, string>;
+        listItem?: Record<string, string>;
+        tag?: Record<string, string>;
+        tagButton?: Record<string, string>;
+    };
+}
+declare const MultipleSelect: React.FC<IMultipleSelectProps>;
+export default MultipleSelect;