@megafon/ui-core 9.3.0 → 9.4.0

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

@@ -5,10 +5,14 @@ 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 usePreventScroll from "./utils/usePreventScroll";
 import { changeBodyStyles, getCorrectMaxHeight } from "./utils/utils";
 import "./Modal.css";
 var MOBILE_BIG_START = breakpoints.MOBILE_BIG_START;
@@ -97,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;
@@ -121,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,
@@ -132,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) {
@@ -237,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;
@@ -297,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,

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,6 +10,7 @@ type CorrectMaxHeightArgsType = {
         isStickyFooter?: boolean;
         isBottomView?: boolean;
         isStickyHeader?: boolean;
+        availableHeight?: number;
     };
 };
 export declare const getCorrectMaxHeight: ({ refs, props }: CorrectMaxHeightArgsType) => number;

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),

package/dist/es/hooks/useEvent.d.ts

@@ -0,0 +1,3 @@
+type Fn<ARGS extends unknown[], R> = (...args: ARGS) => R;
+export declare const useEvent: <A extends unknown[], R>(fn: Fn<A, R>) => Fn<A, R>;
+export {};

package/dist/es/hooks/useEvent.js

@@ -0,0 +1,11 @@
+import { useMemo } from 'react';
+import { useLatest } from "./useLatest";
+export var useEvent = function useEvent(fn) {
+  var ref = useLatest(fn);
+  return useMemo(function () {
+    return function () {
+      var current = ref.current;
+      return current.apply(void 0, arguments);
+    };
+  }, [ref]);
+};

package/dist/es/hooks/useLatest.d.ts

@@ -0,0 +1,2 @@
+import type { RefObject } from 'react';
+export declare const useLatest: <T>(value: T) => RefObject<T>;

package/dist/es/hooks/useLatest.js

@@ -0,0 +1,8 @@
+import { useInsertionEffect, useRef } from 'react';
+export var useLatest = function useLatest(value) {
+  var valueRef = useRef(value);
+  useInsertionEffect(function () {
+    valueRef.current = value;
+  }, [value]);
+  return valueRef;
+};

package/dist/es/hooks/useVisualViewport.d.ts

@@ -0,0 +1,10 @@
+type Metrics = {
+    keyboardOffset: number;
+    viewportHeight: number;
+    isKeyboardOpen: boolean;
+};
+declare function useVisualViewport({ enabled, onChange, }: {
+    enabled?: boolean;
+    onChange: (metrics: Metrics) => void;
+}): Metrics;
+export default useVisualViewport;

package/dist/es/hooks/useVisualViewport.js

@@ -0,0 +1,55 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useEffect, useState } from 'react';
+import { useEvent } from "./useEvent";
+var getDefaultMetrics = function getDefaultMetrics() {
+  return {
+    keyboardOffset: 0,
+    viewportHeight: window.innerHeight,
+    isKeyboardOpen: false
+  };
+};
+var getMetrics = function getMetrics() {
+  var viewport = window.visualViewport;
+  if (!viewport) {
+    return getDefaultMetrics();
+  }
+  var keyboardOffset = Math.max(0, window.innerHeight - viewport.height - viewport.offsetTop);
+  var isKeyboardOpen = viewport.height < window.innerHeight && window.innerHeight - viewport.height > 150;
+  return {
+    keyboardOffset: keyboardOffset,
+    viewportHeight: viewport.height,
+    isKeyboardOpen: isKeyboardOpen
+  };
+};
+function useVisualViewport(_ref) {
+  var _ref$enabled = _ref.enabled,
+    enabled = _ref$enabled === void 0 ? true : _ref$enabled,
+    onChange = _ref.onChange;
+  var _useState = useState(function () {
+      return getMetrics();
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    metrics = _useState2[0],
+    setMetrics = _useState2[1];
+  var onChangeMetrics = useEvent(onChange);
+  useEffect(function () {
+    if (!enabled) {
+      return undefined;
+    }
+    var updateMetrics = function updateMetrics() {
+      var currentMetrics = getMetrics();
+      setMetrics(currentMetrics);
+      onChangeMetrics(currentMetrics);
+    };
+    updateMetrics();
+    var viewport = window.visualViewport;
+    viewport === null || viewport === void 0 ? void 0 : viewport.addEventListener('resize', updateMetrics);
+    viewport === null || viewport === void 0 ? void 0 : viewport.addEventListener('scroll', updateMetrics);
+    return function () {
+      viewport === null || viewport === void 0 ? void 0 : viewport.removeEventListener('resize', updateMetrics);
+      viewport === null || viewport === void 0 ? void 0 : viewport.removeEventListener('scroll', updateMetrics);
+    };
+  }, [enabled, onChangeMetrics]);
+  return metrics;
+}
+export default useVisualViewport;

package/dist/es/index.d.ts

@@ -89,5 +89,6 @@ export { default as UploadFileItemIcon } from './components/UploadForm/UploadFil
 export { default as useDragAndDrop } from './components/UploadForm/UploadField/components/useDragAndDrop';
 export { default as useGradient } from './components/Carousel/useGradient';
 export { default as usePagination } from './components/Pagination/usePagination';
+export { default as usePreventScroll } from './components/Modal/utils/usePreventScroll';
 export { default as utils } from './components/Modal/utils/utils';
 export { default as ValueField } from './components/ValueField/ValueField';

package/dist/es/index.js

@@ -89,5 +89,6 @@ export { default as UploadFileItemIcon } from "./components/UploadForm/UploadFil
 export { default as useDragAndDrop } from "./components/UploadForm/UploadField/components/useDragAndDrop";
 export { default as useGradient } from "./components/Carousel/useGradient";
 export { default as usePagination } from "./components/Pagination/usePagination";
+export { default as usePreventScroll } from "./components/Modal/utils/usePreventScroll";
 export { default as utils } from "./components/Modal/utils/utils";
 export { default as ValueField } from "./components/ValueField/ValueField";

package/dist/es/utils/browser.d.ts

@@ -0,0 +1,7 @@
+export declare function isMobileFirefox(): boolean | undefined;
+export declare function testPlatform(re: RegExp): boolean | undefined;
+export declare function isMac(): boolean | undefined;
+export declare function isIPhone(): boolean | undefined;
+export declare function isSafari(): boolean | undefined;
+export declare function isIPad(): boolean | undefined;
+export declare function isIOS(): boolean | undefined;

package/dist/es/utils/browser.js

@@ -0,0 +1,30 @@
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.regexp.test.js";
+export function isMobileFirefox() {
+  var _navigator = navigator,
+    userAgent = _navigator.userAgent;
+  return typeof window !== 'undefined' && (/Firefox/.test(userAgent) && /Mobile/.test(userAgent) ||
+  // Android Firefox
+  /FxiOS/.test(userAgent)) // iOS Firefox
+  ;
+}
+export function testPlatform(re) {
+  return typeof window !== 'undefined' && window.navigator != null ? re.test(window.navigator.platform) : undefined;
+}
+export function isMac() {
+  return testPlatform(/^Mac/);
+}
+export function isIPhone() {
+  return testPlatform(/^iPhone/);
+}
+export function isSafari() {
+  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+}
+export function isIPad() {
+  return testPlatform(/^iPad/) ||
+  // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+  isMac() && navigator.maxTouchPoints > 1;
+}
+export function isIOS() {
+  return isIPhone() || isIPad();
+}

package/dist/es/utils/is.d.ts

@@ -0,0 +1,19 @@
+export declare function isNumber(value: unknown): value is number;
+export declare function isInteger(v: unknown): boolean;
+export declare function isArray<T>(value: unknown): value is Array<T>;
+export declare function isEmptyArray(value: unknown): boolean;
+type AnyFunction = (...args: unknown[]) => unknown;
+export declare function isFunction<T extends AnyFunction = AnyFunction>(value: unknown): value is T;
+export declare function isDefined(value: unknown): boolean;
+export declare function isUndefined(value: unknown): value is undefined;
+export declare function isObject(value: unknown): value is Record<string, unknown>;
+export declare function isEmptyObject(value: unknown): boolean;
+export declare function isNull(value: unknown): value is null;
+export declare function isString(value: unknown): value is string;
+export declare function isCssVar(value: string): boolean;
+export declare function isEmpty(value: unknown): boolean;
+export declare const isBoolean: (value: unknown) => value is boolean;
+type Falsy = false | 0 | '' | null | undefined | bigint;
+export declare const isTruthy: <T>(value: T) => value is Exclude<T, Falsy>;
+export declare const isHTMLElement: (value: unknown) => value is HTMLElement;
+export {};