@megafon/ui-core 9.3.0 → 9.4.0

package/dist/es/utils/is.js

@@ -0,0 +1,70 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+import "core-js/modules/es.array.is-array.js";
+import "core-js/modules/es.date.to-string.js";
+import "core-js/modules/es.number.constructor.js";
+import "core-js/modules/es.number.is-finite.js";
+import "core-js/modules/es.number.is-nan.js";
+import "core-js/modules/es.object.keys.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.regexp.to-string.js";
+export function isNumber(value) {
+  return typeof value === 'number';
+}
+export function isInteger(v) {
+  var value = Number(v);
+  return typeof value === 'number' && !Number.isNaN(value) && Number.isFinite(value) && Math.floor(value) === value;
+}
+export function isArray(value) {
+  return Array.isArray(value);
+}
+export function isEmptyArray(value) {
+  return isArray(value) && value.length === 0;
+}
+export function isFunction(value) {
+  return typeof value === 'function';
+}
+export function isDefined(value) {
+  return typeof value !== 'undefined' && value !== undefined;
+}
+export function isUndefined(value) {
+  return typeof value === 'undefined' || value === undefined;
+}
+export function isObject(value) {
+  var type = _typeof(value);
+  return value != null && (type === 'object' || type === 'function') && !isArray(value);
+}
+export function isEmptyObject(value) {
+  return isObject(value) && Object.keys(value).length === 0;
+}
+export function isNull(value) {
+  return value === null;
+}
+export function isString(value) {
+  return Object.prototype.toString.call(value) === '[object String]';
+}
+export function isCssVar(value) {
+  return /^var\(--.+\)$/.test(value);
+}
+export function isEmpty(value) {
+  if (isArray(value)) {
+    return isEmptyArray(value);
+  }
+  if (isObject(value)) {
+    return isEmptyObject(value);
+  }
+  if (value == null || value === '') {
+    return true;
+  }
+  return false;
+}
+export var isBoolean = function isBoolean(value) {
+  return typeof value === 'boolean';
+};
+export var isTruthy = function isTruthy(value) {
+  return Boolean(value);
+};
+export var isHTMLElement = function isHTMLElement(value) {
+  return value instanceof HTMLElement;
+};

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

@@ -12,10 +12,14 @@ 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 _useEvent = require("../../hooks/useEvent");
 var _usePrevious = _interopRequireDefault(require("../../hooks/usePrevious"));
 var _useResolution2 = _interopRequireDefault(require("../../hooks/useResolution"));
+var _useVisualViewport2 = _interopRequireDefault(require("../../hooks/useVisualViewport"));
+var _browser = require("../../utils/browser");
 var _ModalDesktop = _interopRequireDefault(require("./_ModalDesktop/ModalDesktop"));
 var _ModalMobile = _interopRequireDefault(require("./_ModalMobile/ModalMobile"));
+var _usePreventScroll = _interopRequireDefault(require("./utils/usePreventScroll"));
 var _utils = require("./utils/utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -106,6 +110,18 @@ var Modal = function Modal(_ref) {
   var resizeObserver = React.useRef(null);
   var _useResolution = (0, _useResolution2["default"])(),
     isMobile = _useResolution.isMobile;
+  var _useVisualViewport = (0, _useVisualViewport2["default"])({
+      enabled: isOpened && (0, _browser.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;
+  (0, _usePreventScroll["default"])({
+    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;
@@ -130,7 +146,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 = (0, _useEvent.useEvent)(function () {
     var correctMaxHeight = (0, _utils.getCorrectMaxHeight)({
       refs: {
         overlayNode: overlayRef.current,
@@ -141,11 +157,12 @@ var Modal = function Modal(_ref) {
       props: {
         isStickyFooter: isStickyFooter,
         isBottomView: isBottomView,
-        isStickyHeader: isStickyHeader
+        isStickyHeader: isStickyHeader,
+        availableHeight: isBottomView && (0, _browser.isIOS)() && viewportHeight ? viewportHeight : undefined
       }
     });
     setScrollMaxHeight(correctMaxHeight);
-  }, [isStickyFooter, isBottomView, isStickyHeader]);
+  });
   var handleSetContainerWrapHeight = React.useCallback(function () {
     var containerInnerNode = containerInnerRef.current;
     if (!containerInnerNode) {
@@ -246,6 +263,12 @@ var Modal = function Modal(_ref) {
     }
     handleSetScrollContentMaxHeight();
   }, [isMobile, isChangeMobileView, handleSetScrollContentMaxHeight]);
+  React.useEffect(function () {
+    if (!isOpened || !isMobile || !isBottomView || !(0, _browser.isIOS)()) {
+      return;
+    }
+    handleSetScrollContentMaxHeight();
+  }, [isOpened, isMobile, isBottomView, viewportHeight, handleSetScrollContentMaxHeight]);
   React.useEffect(function () {
     if (isEnabledNativeScroll || !(isRecalculateHeight && (isHeaderPropsDiff || isFooterPropsDiff))) {
       return;
@@ -306,6 +329,7 @@ var Modal = function Modal(_ref) {
       return /*#__PURE__*/React.createElement(_ModalDesktop["default"], contextProps, children);
     }
     return /*#__PURE__*/React.createElement(_ModalMobile["default"], (0, _extends2["default"])({}, contextProps, {
+      isKeyboardOpen: isKeyboardOpen,
       isSwipeDisabled: isSwipeDisabled,
       isFullView: isFullScreenView,
       onChangeTransitionStep: handleChangeTransitionStep,

package/dist/lib/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/lib/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/lib/components/Modal/_ModalMobile/ModalMobile.js

@@ -11,6 +11,7 @@ require("core-js/modules/es.symbol.js");
 require("core-js/modules/es.array.index-of.js");
 var React = _interopRequireWildcard(require("react"));
 var _uiHelpers = require("@megafon/ui-helpers");
+var _browser = require("../../../utils/browser");
 var _ModalContent = _interopRequireDefault(require("../_ModalContent/ModalContent"));
 var _Modal = require("../Modal");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -43,19 +44,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 && (0, _browser.isIOS)() || isSwipeDisabledProps;
   var _React$useState = React.useState(null),
     _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
     initialTouchPosition = _React$useState2[0],
@@ -127,7 +130,9 @@ var ModalMobile = function ModalMobile(_a) {
   }, [handleWindowTouchEnd, handleWindowTouchMove, isSwipeDisabled]);
   return /*#__PURE__*/React.createElement("div", {
     className: cn({
-      'full-view': isFullView
+      'full-view': isFullView,
+      ios: (0, _browser.isIOS)(),
+      'keyboard-open': isKeyboardOpen
     })
   }, /*#__PURE__*/React.createElement(_ModalContent["default"], (0, _extends2["default"])({}, restProps, {
     classes: (0, _extends2["default"])((0, _extends2["default"])({}, restClasses), {

package/dist/lib/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/lib/components/Modal/utils/usePreventScroll.js

@@ -0,0 +1,263 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+exports.getScrollParent = getScrollParent;
+exports.isInput = isInput;
+exports.isScrollable = isScrollable;
+exports.useIsomorphicLayoutEffect = void 0;
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.regexp.test.js");
+require("core-js/modules/es.set.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = require("react");
+var _browser = require("../../../utils/browser");
+// This code comes from https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/usePreventScroll.ts
+/* eslint-disable */
+
+var KEYBOARD_BUFFER = 24;
+var useIsomorphicLayoutEffect = exports.useIsomorphicLayoutEffect = typeof window !== 'undefined' ? _react.useLayoutEffect : _react.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;
+function isScrollable(node) {
+  var style = window.getComputedStyle(node);
+  return /(auto|scroll)/.test(style.overflow + style.overflowX + style.overflowY);
+}
+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 ((0, _browser.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;
+  }
+}
+function isInput(target) {
+  return target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type) || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable;
+}
+var _default = exports["default"] = usePreventScroll;

package/dist/lib/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/lib/components/Modal/utils/utils.js

@@ -37,8 +37,9 @@ var getCorrectMaxHeight = exports.getCorrectMaxHeight = function getCorrectMaxHe
     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 < _uiHelpers.breakpoints.MOBILE_BIG_START;
   var _getAdditionalSize = getAdditionalSize(refs),

package/dist/lib/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/lib/hooks/useEvent.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEvent = void 0;
+var _react = require("react");
+var _useLatest = require("./useLatest");
+var useEvent = exports.useEvent = function useEvent(fn) {
+  var ref = (0, _useLatest.useLatest)(fn);
+  return (0, _react.useMemo)(function () {
+    return function () {
+      var current = ref.current;
+      return current.apply(void 0, arguments);
+    };
+  }, [ref]);
+};

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

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

package/dist/lib/hooks/useLatest.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLatest = void 0;
+var _react = require("react");
+var useLatest = exports.useLatest = function useLatest(value) {
+  var valueRef = (0, _react.useRef)(value);
+  (0, _react.useInsertionEffect)(function () {
+    valueRef.current = value;
+  }, [value]);
+  return valueRef;
+};

package/dist/lib/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/lib/hooks/useVisualViewport.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _useEvent = require("./useEvent");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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 = (0, _react.useState)(function () {
+      return getMetrics();
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    metrics = _useState2[0],
+    setMetrics = _useState2[1];
+  var onChangeMetrics = (0, _useEvent.useEvent)(onChange);
+  (0, _react.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;
+}
+var _default = exports["default"] = useVisualViewport;

package/dist/lib/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';