glints-aries 4.0.225 → 4.0.227

package/es/@next/Modal/Modal.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["isOpen", "header", "headerDescription", "children", "secondaryAction", "primaryAction", "customActions", "showBackButton", "showCloseButton", "showHeaderBorder", "closeOnClickOutside", "onClose", "onBack"];
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Button, PrimaryButton } from '../Button';
 import { ButtonGroup } from '../ButtonGroup';
 import { Icon } from '../Icon';
@@ -25,6 +25,15 @@ export var Modal = /*#__PURE__*/React.forwardRef(function Modal(_ref, ref) {
     onClose = _ref.onClose,
     onBack = _ref.onBack,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  useEffect(function () {
+    if (isOpen) {
+      if (typeof window != 'undefined' && window.document) {
+        document.body.style.overflow = 'hidden';
+      }
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+  }, [isOpen]);
   if (!isOpen) {
     return null;
   }

package/es/@next/Modal/Modal.stories.d.ts

@@ -3,5 +3,7 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Interactive: any;
 export declare const WithLargeContent: any;
+export declare const WithOverflowContent: any;
+export declare const WithLockedScrollableBackdrop: any;
 export declare const WithSpinner: any;
 export declare const WithCustomActions: any;

package/es/@next/Modal/ModalStyle.js

@@ -10,7 +10,7 @@ export var StyledModalWrapper = styled.div.withConfig({
 export var StyledModalContainer = styled.div.withConfig({
   displayName: "ModalStyle__StyledModalContainer",
   componentId: "sc-1694up4-1"
-})(["position:relative;background:", ";display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:0;box-shadow:0px 26px 80px rgba(0,0,0,0.2),0px 0px 1px rgba(0,0,0,0.2);border-radius:", ";min-width:320px;width:fit-content;max-width:calc(100vw - 32px);"], Neutral.B100, borderRadius8);
+})(["position:relative;background:", ";display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:0;box-shadow:0px 26px 80px rgba(0,0,0,0.2),0px 0px 1px rgba(0,0,0,0.2);border-radius:", ";min-width:320px;width:fit-content;max-width:calc(100vw - 32px);height:fit-content;max-height:calc(100vh - 96px);"], Neutral.B100, borderRadius8);
 export var StyledModalHeader = styled.div.withConfig({
   displayName: "ModalStyle__StyledModalHeader",
   componentId: "sc-1694up4-2"
@@ -18,7 +18,7 @@ export var StyledModalHeader = styled.div.withConfig({
 export var StyledModalContent = styled.div.withConfig({
   displayName: "ModalStyle__StyledModalContent",
   componentId: "sc-1694up4-3"
-})(["min-height:24px;color:#202223;width:fit-content;padding:20px;@media (max-width:", "){padding:20px ", ";}"], Breakpoints.large, space16);
+})(["min-height:24px;color:#202223;width:fit-content;padding:20px;overflow:auto;@media (max-width:", "){padding:20px ", ";}"], Breakpoints.large, space16);
 export var StyledModalActions = styled.div.withConfig({
   displayName: "ModalStyle__StyledModalActions",
   componentId: "sc-1694up4-4"

package/es/@next/Modal/ModalWithProvider.stories.d.ts

@@ -2,3 +2,4 @@ import { Meta } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Interactive: any;
+export declare const WithLockedScrollableBackdrop: any;

package/lib/@next/Modal/Modal.js

@@ -5,7 +5,7 @@ exports.__esModule = true;
 exports.Modal = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _Button = require("../Button");
 var _ButtonGroup = require("../ButtonGroup");
 var _Icon = require("../Icon");
@@ -13,6 +13,8 @@ var _Portal = require("../Portal/Portal");
 var _Typography = require("../Typography");
 var _ModalStyle = require("./ModalStyle");
 var _excluded = ["isOpen", "header", "headerDescription", "children", "secondaryAction", "primaryAction", "customActions", "showBackButton", "showCloseButton", "showHeaderBorder", "closeOnClickOutside", "onClose", "onBack"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var Modal = /*#__PURE__*/_react["default"].forwardRef(function Modal(_ref, ref) {
   var isOpen = _ref.isOpen,
     header = _ref.header,
@@ -30,6 +32,15 @@ var Modal = /*#__PURE__*/_react["default"].forwardRef(function Modal(_ref, ref)
     onClose = _ref.onClose,
     onBack = _ref.onBack,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  (0, _react.useEffect)(function () {
+    if (isOpen) {
+      if (typeof window != 'undefined' && window.document) {
+        document.body.style.overflow = 'hidden';
+      }
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+  }, [isOpen]);
   if (!isOpen) {
     return null;
   }

package/lib/@next/Modal/Modal.stories.d.ts

@@ -3,5 +3,7 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Interactive: any;
 export declare const WithLargeContent: any;
+export declare const WithOverflowContent: any;
+export declare const WithLockedScrollableBackdrop: any;
 export declare const WithSpinner: any;
 export declare const WithCustomActions: any;

package/lib/@next/Modal/ModalStyle.js

@@ -18,7 +18,7 @@ exports.StyledModalWrapper = StyledModalWrapper;
 var StyledModalContainer = _styledComponents["default"].div.withConfig({
   displayName: "ModalStyle__StyledModalContainer",
   componentId: "sc-1694up4-1"
-})(["position:relative;background:", ";display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:0;box-shadow:0px 26px 80px rgba(0,0,0,0.2),0px 0px 1px rgba(0,0,0,0.2);border-radius:", ";min-width:320px;width:fit-content;max-width:calc(100vw - 32px);"], _colors.Neutral.B100, _borderRadius.borderRadius8);
+})(["position:relative;background:", ";display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:0;box-shadow:0px 26px 80px rgba(0,0,0,0.2),0px 0px 1px rgba(0,0,0,0.2);border-radius:", ";min-width:320px;width:fit-content;max-width:calc(100vw - 32px);height:fit-content;max-height:calc(100vh - 96px);"], _colors.Neutral.B100, _borderRadius.borderRadius8);
 exports.StyledModalContainer = StyledModalContainer;
 var StyledModalHeader = _styledComponents["default"].div.withConfig({
   displayName: "ModalStyle__StyledModalHeader",
@@ -28,7 +28,7 @@ exports.StyledModalHeader = StyledModalHeader;
 var StyledModalContent = _styledComponents["default"].div.withConfig({
   displayName: "ModalStyle__StyledModalContent",
   componentId: "sc-1694up4-3"
-})(["min-height:24px;color:#202223;width:fit-content;padding:20px;@media (max-width:", "){padding:20px ", ";}"], Breakpoints.large, _spacing.space16);
+})(["min-height:24px;color:#202223;width:fit-content;padding:20px;overflow:auto;@media (max-width:", "){padding:20px ", ";}"], Breakpoints.large, _spacing.space16);
 exports.StyledModalContent = StyledModalContent;
 var StyledModalActions = _styledComponents["default"].div.withConfig({
   displayName: "ModalStyle__StyledModalActions",

package/lib/@next/Modal/ModalWithProvider.stories.d.ts

@@ -2,3 +2,4 @@ import { Meta } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Interactive: any;
+export declare const WithLockedScrollableBackdrop: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glints-aries",
-  "version": "4.0.225",
+  "version": "4.0.227",
   "description": "Glints ui-kit for frontend",
   "main": "./lib/index.js",
   "module": "./es/index.js",