@instructure/ui-modal 10.19.0 → 10.19.1-snapshot-0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.19.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.19.0...v10.19.1-snapshot-0) (2025-06-05)
+
+
+### Bug Fixes
+
+* **ui-modal:** save modal from unnecessary rerender ([a473127](https://github.com/instructure/instructure-ui/commit/a473127b2049b02e5463b71c84a0b803fd9d40d4))
+
+
+
+
+
 # [10.19.0](https://github.com/instructure/instructure-ui/compare/v10.18.1...v10.19.0) (2025-06-03)
 
 **Note:** Version bump only for package @instructure/ui-modal

package/es/Modal/ModalBody/styles.js

@@ -42,10 +42,13 @@ const generateStyle = (componentTheme, props) => {
       label: 'modalBody',
       boxSizing: 'border-box',
       flex: '1 1 auto',
-      overflowY: 'auto',
       '&:focus': {
         outline: 'none'
       },
+      // ModalBody is set to scrollable above 20rem height
+      '@media (min-height: 20rem)': {
+        overflowY: 'auto'
+      },
       ...backgroundStyle
     }
   };

package/es/Modal/ModalHeader/props.js

@@ -26,8 +26,7 @@ import PropTypes from 'prop-types';
 const propTypes = {
   children: PropTypes.node,
   variant: PropTypes.oneOf(['default', 'inverse']),
-  spacing: PropTypes.oneOf(['default', 'compact']),
-  smallViewPort: PropTypes.bool
+  spacing: PropTypes.oneOf(['default', 'compact'])
 };
 const allowedProps = ['children', 'variant', 'spacing'];
 export { propTypes, allowedProps };

package/es/Modal/ModalHeader/styles.js

@@ -34,8 +34,7 @@
  */
 const generateStyle = (componentTheme, props, state) => {
   const variant = props.variant,
-    spacing = props.spacing,
-    smallViewPort = props.smallViewPort;
+    spacing = props.spacing;
   const withCloseButton = state.withCloseButton;
   const sizeVariants = {
     default: {
@@ -64,11 +63,12 @@ const generateStyle = (componentTheme, props, state) => {
       borderBottomWidth: '0.0625rem',
       borderBottomStyle: 'solid',
       borderBottomColor: componentTheme.borderColor,
-      ...(smallViewPort ? {
-        position: 'relative'
-      } : {}),
       ...sizeVariants[spacing],
-      ...inverseStyle
+      ...inverseStyle,
+      // Position is set to relative for small viewports to ensure proper close button positioning during scrolling
+      '@media (max-height: 20rem)': {
+        position: 'relative'
+      }
     }
   };
 };

package/es/Modal/index.js

@@ -29,7 +29,6 @@ import { Children, Component, isValidElement } from 'react';
 import { passthroughProps, safeCloneElement } from '@instructure/ui-react-utils';
 import { createChainedFunction } from '@instructure/ui-utils';
 import { testable } from '@instructure/ui-testable';
-import { canUseDOM } from '@instructure/ui-dom-utils';
 import { Transition } from '@instructure/ui-motion';
 import { Portal } from '@instructure/ui-portal';
 import { Dialog } from '@instructure/ui-dialog';
@@ -77,17 +76,6 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
         this.props.contentRef(el);
       }
     };
-    this.getWindowHeightInRem = () => {
-      var _getComputedStyle;
-      if (!canUseDOM) {
-        return Infinity;
-      }
-      const rootFontSize = parseFloat(((_getComputedStyle = getComputedStyle(document.documentElement)) === null || _getComputedStyle === void 0 ? void 0 : _getComputedStyle.fontSize) || '16');
-      if (isNaN(rootFontSize) || rootFontSize <= 0) {
-        return Infinity;
-      }
-      return window.innerHeight / rootFontSize;
-    };
     this.state = {
       transitioning: false,
       open: (_props$open = props.open) !== null && _props$open !== void 0 ? _props$open : false,
@@ -132,55 +120,28 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
     const _this$props3 = this.props,
       children = _this$props3.children,
       variant = _this$props3.variant,
-      overflow = _this$props3.overflow;
-
-    // header should be non-sticky for small viewport height (ca. 320px)
-    if (this.getWindowHeightInRem() <= 20) {
-      return this.renderForSmallViewportHeight();
-    }
-    return Children.map(children, child => {
-      if (!child) return; // ignore null, falsy children
-      return this.cloneChildWithProps(child, variant, overflow);
-    });
-  }
-  renderForSmallViewportHeight() {
-    const _this$props4 = this.props,
-      children = _this$props4.children,
-      variant = _this$props4.variant,
-      overflow = _this$props4.overflow,
-      styles = _this$props4.styles;
-    const headerAndBody = [];
+      overflow = _this$props3.overflow,
+      styles = _this$props3.styles;
     const childrenArray = Children.toArray(children);
-
-    // Separate header and body elements
-    const filteredChildren = childrenArray.filter(child => {
+    const headerAndBody = [];
+    const others = [];
+    childrenArray.forEach(child => {
       if (/*#__PURE__*/isValidElement(child)) {
         if (child.type === Modal.Header || child.type === Modal.Body) {
-          if (child.type === Modal.Header) {
-            const headerWithProp = safeCloneElement(child, {
-              smallViewPort: true
-            });
-            headerAndBody.push(headerWithProp);
-          } else {
-            headerAndBody.push(child);
-          }
-          return false;
+          headerAndBody.push(this.cloneChildWithProps(child, variant, overflow));
+        } else {
+          others.push(this.cloneChildWithProps(child, variant, overflow));
         }
       }
-      return true;
     });
 
-    // Adds the <div> to the beginning of the filteredChildren array
-    if (headerAndBody.length > 0) {
-      filteredChildren.unshift(_jsx("div", {
-        css: styles === null || styles === void 0 ? void 0 : styles.joinedHeaderAndBody,
-        children: headerAndBody
-      }));
-    }
-    return Children.map(filteredChildren, child => {
-      if (!child) return; // ignore null, falsy children
-      return this.cloneChildWithProps(child, variant, overflow);
-    });
+    // Putting ModalHeader and ModalBody into the same container, so they can be styled together;
+    // this is needed to apply a media query breakpoint
+    const wrappedHeaderAndBody = headerAndBody.length > 0 ? _jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.joinedHeaderAndBody,
+      children: headerAndBody
+    }) : null;
+    return [...(wrappedHeaderAndBody ? [wrappedHeaderAndBody] : []), ...others];
   }
   cloneChildWithProps(child, variant, overflow) {
     if (/*#__PURE__*/isValidElement(child)) {
@@ -194,16 +155,16 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
     }
   }
   renderDialog(props) {
-    const _this$props5 = this.props,
-      onDismiss = _this$props5.onDismiss,
-      label = _this$props5.label,
-      shouldCloseOnDocumentClick = _this$props5.shouldCloseOnDocumentClick,
-      shouldReturnFocus = _this$props5.shouldReturnFocus,
-      liveRegion = _this$props5.liveRegion,
-      size = _this$props5.size,
-      constrain = _this$props5.constrain,
-      as = _this$props5.as,
-      styles = _this$props5.styles;
+    const _this$props4 = this.props,
+      onDismiss = _this$props4.onDismiss,
+      label = _this$props4.label,
+      shouldCloseOnDocumentClick = _this$props4.shouldCloseOnDocumentClick,
+      shouldReturnFocus = _this$props4.shouldReturnFocus,
+      liveRegion = _this$props4.liveRegion,
+      size = _this$props4.size,
+      constrain = _this$props4.constrain,
+      as = _this$props4.as,
+      styles = _this$props4.styles;
     const isFullScreen = size === 'fullscreen';
     const dialog = _jsx(Dialog, {
       ...passthroughProps(props),
@@ -235,22 +196,22 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
   }
   render() {
     var _this$props$styles;
-    const _this$props6 = this.props,
-      open = _this$props6.open,
-      onOpen = _this$props6.onOpen,
-      onClose = _this$props6.onClose,
-      mountNode = _this$props6.mountNode,
-      insertAt = _this$props6.insertAt,
-      transition = _this$props6.transition,
-      onEnter = _this$props6.onEnter,
-      onEntering = _this$props6.onEntering,
-      onEntered = _this$props6.onEntered,
-      onExit = _this$props6.onExit,
-      onExiting = _this$props6.onExiting,
-      onExited = _this$props6.onExited,
-      constrain = _this$props6.constrain,
-      overflow = _this$props6.overflow,
-      passthroughProps = _objectWithoutProperties(_this$props6, _excluded);
+    const _this$props5 = this.props,
+      open = _this$props5.open,
+      onOpen = _this$props5.onOpen,
+      onClose = _this$props5.onClose,
+      mountNode = _this$props5.mountNode,
+      insertAt = _this$props5.insertAt,
+      transition = _this$props5.transition,
+      onEnter = _this$props5.onEnter,
+      onEntering = _this$props5.onEntering,
+      onEntered = _this$props5.onEntered,
+      onExit = _this$props5.onExit,
+      onExiting = _this$props5.onExiting,
+      onExited = _this$props5.onExited,
+      constrain = _this$props5.constrain,
+      overflow = _this$props5.overflow,
+      passthroughProps = _objectWithoutProperties(_this$props5, _excluded);
     const portalIsOpen = this.state.open || this.state.transitioning;
     return _jsx(Portal, {
       mountNode: mountNode,

package/es/Modal/styles.js

@@ -101,7 +101,14 @@ const generateStyle = (componentTheme, props) => {
     },
     joinedHeaderAndBody: {
       borderRadius: componentTheme.borderRadius,
-      overflowY: 'scroll'
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden',
+      // ModalHeader and ModalBody is set to scrollable above 20rem height instead of just the ModalBody
+      '@media (max-height: 20rem)': {
+        overflowY: 'auto',
+        maxHeight: '20rem'
+      }
     }
   };
 };

package/lib/Modal/ModalBody/styles.js

@@ -48,10 +48,13 @@ const generateStyle = (componentTheme, props) => {
       label: 'modalBody',
       boxSizing: 'border-box',
       flex: '1 1 auto',
-      overflowY: 'auto',
       '&:focus': {
         outline: 'none'
       },
+      // ModalBody is set to scrollable above 20rem height
+      '@media (min-height: 20rem)': {
+        overflowY: 'auto'
+      },
       ...backgroundStyle
     }
   };

package/lib/Modal/ModalHeader/props.js

@@ -33,7 +33,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 const propTypes = exports.propTypes = {
   children: _propTypes.default.node,
   variant: _propTypes.default.oneOf(['default', 'inverse']),
-  spacing: _propTypes.default.oneOf(['default', 'compact']),
-  smallViewPort: _propTypes.default.bool
+  spacing: _propTypes.default.oneOf(['default', 'compact'])
 };
 const allowedProps = exports.allowedProps = ['children', 'variant', 'spacing'];

package/lib/Modal/ModalHeader/styles.js

@@ -40,8 +40,7 @@ exports.default = void 0;
  */
 const generateStyle = (componentTheme, props, state) => {
   const variant = props.variant,
-    spacing = props.spacing,
-    smallViewPort = props.smallViewPort;
+    spacing = props.spacing;
   const withCloseButton = state.withCloseButton;
   const sizeVariants = {
     default: {
@@ -70,11 +69,12 @@ const generateStyle = (componentTheme, props, state) => {
       borderBottomWidth: '0.0625rem',
       borderBottomStyle: 'solid',
       borderBottomColor: componentTheme.borderColor,
-      ...(smallViewPort ? {
-        position: 'relative'
-      } : {}),
       ...sizeVariants[spacing],
-      ...inverseStyle
+      ...inverseStyle,
+      // Position is set to relative for small viewports to ensure proper close button positioning during scrolling
+      '@media (max-height: 20rem)': {
+        position: 'relative'
+      }
     }
   };
 };

package/lib/Modal/index.js

@@ -30,7 +30,6 @@ var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProp
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
 var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
 var _testable = require("@instructure/ui-testable/lib/testable.js");
-var _canUseDOM = require("@instructure/ui-dom-utils/lib/canUseDOM.js");
 var _Transition = require("@instructure/ui-motion/lib/Transition");
 var _Portal = require("@instructure/ui-portal/lib/Portal");
 var _Dialog = require("@instructure/ui-dialog/lib/Dialog");
@@ -103,17 +102,6 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _th
         this.props.contentRef(el);
       }
     };
-    this.getWindowHeightInRem = () => {
-      var _getComputedStyle;
-      if (!_canUseDOM.canUseDOM) {
-        return Infinity;
-      }
-      const rootFontSize = parseFloat(((_getComputedStyle = getComputedStyle(document.documentElement)) === null || _getComputedStyle === void 0 ? void 0 : _getComputedStyle.fontSize) || '16');
-      if (isNaN(rootFontSize) || rootFontSize <= 0) {
-        return Infinity;
-      }
-      return window.innerHeight / rootFontSize;
-    };
     this.state = {
       transitioning: false,
       open: (_props$open = props.open) !== null && _props$open !== void 0 ? _props$open : false,
@@ -158,55 +146,28 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _th
     const _this$props3 = this.props,
       children = _this$props3.children,
       variant = _this$props3.variant,
-      overflow = _this$props3.overflow;
-
-    // header should be non-sticky for small viewport height (ca. 320px)
-    if (this.getWindowHeightInRem() <= 20) {
-      return this.renderForSmallViewportHeight();
-    }
-    return _react.Children.map(children, child => {
-      if (!child) return; // ignore null, falsy children
-      return this.cloneChildWithProps(child, variant, overflow);
-    });
-  }
-  renderForSmallViewportHeight() {
-    const _this$props4 = this.props,
-      children = _this$props4.children,
-      variant = _this$props4.variant,
-      overflow = _this$props4.overflow,
-      styles = _this$props4.styles;
-    const headerAndBody = [];
+      overflow = _this$props3.overflow,
+      styles = _this$props3.styles;
     const childrenArray = _react.Children.toArray(children);
-
-    // Separate header and body elements
-    const filteredChildren = childrenArray.filter(child => {
+    const headerAndBody = [];
+    const others = [];
+    childrenArray.forEach(child => {
       if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
         if (child.type === Modal.Header || child.type === Modal.Body) {
-          if (child.type === Modal.Header) {
-            const headerWithProp = (0, _safeCloneElement.safeCloneElement)(child, {
-              smallViewPort: true
-            });
-            headerAndBody.push(headerWithProp);
-          } else {
-            headerAndBody.push(child);
-          }
-          return false;
+          headerAndBody.push(this.cloneChildWithProps(child, variant, overflow));
+        } else {
+          others.push(this.cloneChildWithProps(child, variant, overflow));
         }
       }
-      return true;
     });
 
-    // Adds the <div> to the beginning of the filteredChildren array
-    if (headerAndBody.length > 0) {
-      filteredChildren.unshift((0, _jsxRuntime.jsx)("div", {
-        css: styles === null || styles === void 0 ? void 0 : styles.joinedHeaderAndBody,
-        children: headerAndBody
-      }));
-    }
-    return _react.Children.map(filteredChildren, child => {
-      if (!child) return; // ignore null, falsy children
-      return this.cloneChildWithProps(child, variant, overflow);
-    });
+    // Putting ModalHeader and ModalBody into the same container, so they can be styled together;
+    // this is needed to apply a media query breakpoint
+    const wrappedHeaderAndBody = headerAndBody.length > 0 ? (0, _jsxRuntime.jsx)("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.joinedHeaderAndBody,
+      children: headerAndBody
+    }) : null;
+    return [...(wrappedHeaderAndBody ? [wrappedHeaderAndBody] : []), ...others];
   }
   cloneChildWithProps(child, variant, overflow) {
     if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
@@ -220,16 +181,16 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _th
     }
   }
   renderDialog(props) {
-    const _this$props5 = this.props,
-      onDismiss = _this$props5.onDismiss,
-      label = _this$props5.label,
-      shouldCloseOnDocumentClick = _this$props5.shouldCloseOnDocumentClick,
-      shouldReturnFocus = _this$props5.shouldReturnFocus,
-      liveRegion = _this$props5.liveRegion,
-      size = _this$props5.size,
-      constrain = _this$props5.constrain,
-      as = _this$props5.as,
-      styles = _this$props5.styles;
+    const _this$props4 = this.props,
+      onDismiss = _this$props4.onDismiss,
+      label = _this$props4.label,
+      shouldCloseOnDocumentClick = _this$props4.shouldCloseOnDocumentClick,
+      shouldReturnFocus = _this$props4.shouldReturnFocus,
+      liveRegion = _this$props4.liveRegion,
+      size = _this$props4.size,
+      constrain = _this$props4.constrain,
+      as = _this$props4.as,
+      styles = _this$props4.styles;
     const isFullScreen = size === 'fullscreen';
     const dialog = (0, _jsxRuntime.jsx)(_Dialog.Dialog, {
       ...(0, _passthroughProps.passthroughProps)(props),
@@ -261,22 +222,22 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _th
   }
   render() {
     var _this$props$styles;
-    const _this$props6 = this.props,
-      open = _this$props6.open,
-      onOpen = _this$props6.onOpen,
-      onClose = _this$props6.onClose,
-      mountNode = _this$props6.mountNode,
-      insertAt = _this$props6.insertAt,
-      transition = _this$props6.transition,
-      onEnter = _this$props6.onEnter,
-      onEntering = _this$props6.onEntering,
-      onEntered = _this$props6.onEntered,
-      onExit = _this$props6.onExit,
-      onExiting = _this$props6.onExiting,
-      onExited = _this$props6.onExited,
-      constrain = _this$props6.constrain,
-      overflow = _this$props6.overflow,
-      passthroughProps = (0, _objectWithoutProperties2.default)(_this$props6, _excluded);
+    const _this$props5 = this.props,
+      open = _this$props5.open,
+      onOpen = _this$props5.onOpen,
+      onClose = _this$props5.onClose,
+      mountNode = _this$props5.mountNode,
+      insertAt = _this$props5.insertAt,
+      transition = _this$props5.transition,
+      onEnter = _this$props5.onEnter,
+      onEntering = _this$props5.onEntering,
+      onEntered = _this$props5.onEntered,
+      onExit = _this$props5.onExit,
+      onExiting = _this$props5.onExiting,
+      onExited = _this$props5.onExited,
+      constrain = _this$props5.constrain,
+      overflow = _this$props5.overflow,
+      passthroughProps = (0, _objectWithoutProperties2.default)(_this$props5, _excluded);
     const portalIsOpen = this.state.open || this.state.transitioning;
     return (0, _jsxRuntime.jsx)(_Portal.Portal, {
       mountNode: mountNode,

package/lib/Modal/styles.js

@@ -107,7 +107,14 @@ const generateStyle = (componentTheme, props) => {
     },
     joinedHeaderAndBody: {
       borderRadius: componentTheme.borderRadius,
-      overflowY: 'scroll'
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden',
+      // ModalHeader and ModalBody is set to scrollable above 20rem height instead of just the ModalBody
+      '@media (max-height: 20rem)': {
+        overflowY: 'auto',
+        maxHeight: '20rem'
+      }
     }
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-modal",
-  "version": "10.19.0",
+  "version": "10.19.1-snapshot-0",
   "description": "A component for displaying content in a dialog overlay",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,30 +24,30 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/console": "10.19.0",
-    "@instructure/emotion": "10.19.0",
-    "@instructure/shared-types": "10.19.0",
-    "@instructure/ui-buttons": "10.19.0",
-    "@instructure/ui-dialog": "10.19.0",
-    "@instructure/ui-dom-utils": "10.19.0",
-    "@instructure/ui-motion": "10.19.0",
-    "@instructure/ui-overlays": "10.19.0",
-    "@instructure/ui-portal": "10.19.0",
-    "@instructure/ui-prop-types": "10.19.0",
-    "@instructure/ui-react-utils": "10.19.0",
-    "@instructure/ui-testable": "10.19.0",
-    "@instructure/ui-utils": "10.19.0",
-    "@instructure/ui-view": "10.19.0",
+    "@instructure/console": "10.19.1-snapshot-0",
+    "@instructure/emotion": "10.19.1-snapshot-0",
+    "@instructure/shared-types": "10.19.1-snapshot-0",
+    "@instructure/ui-buttons": "10.19.1-snapshot-0",
+    "@instructure/ui-dialog": "10.19.1-snapshot-0",
+    "@instructure/ui-dom-utils": "10.19.1-snapshot-0",
+    "@instructure/ui-motion": "10.19.1-snapshot-0",
+    "@instructure/ui-overlays": "10.19.1-snapshot-0",
+    "@instructure/ui-portal": "10.19.1-snapshot-0",
+    "@instructure/ui-prop-types": "10.19.1-snapshot-0",
+    "@instructure/ui-react-utils": "10.19.1-snapshot-0",
+    "@instructure/ui-testable": "10.19.1-snapshot-0",
+    "@instructure/ui-utils": "10.19.1-snapshot-0",
+    "@instructure/ui-view": "10.19.1-snapshot-0",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {
     "react": ">=16.14 <=18"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.19.0",
-    "@instructure/ui-color-utils": "10.19.0",
-    "@instructure/ui-position": "10.19.0",
-    "@instructure/ui-themes": "10.19.0",
+    "@instructure/ui-babel-preset": "10.19.1-snapshot-0",
+    "@instructure/ui-color-utils": "10.19.1-snapshot-0",
+    "@instructure/ui-position": "10.19.1-snapshot-0",
+    "@instructure/ui-themes": "10.19.1-snapshot-0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",

package/src/Modal/ModalBody/styles.ts

@@ -53,10 +53,13 @@ const generateStyle = (
       label: 'modalBody',
       boxSizing: 'border-box',
       flex: '1 1 auto',
-      overflowY: 'auto',
       '&:focus': {
         outline: 'none'
       },
+      // ModalBody is set to scrollable above 20rem height
+      '@media (min-height: 20rem)': {
+        overflowY: 'auto'
+      },
       ...backgroundStyle
     }
   }

package/src/Modal/ModalHeader/props.ts

@@ -36,7 +36,6 @@ type ModalHeaderOwnProps = {
   children?: React.ReactNode
   variant?: 'default' | 'inverse'
   spacing?: 'default' | 'compact'
-  smallViewPort?: boolean
 }
 
 type ModalHeaderStyleProps = {
@@ -56,8 +55,7 @@ type ModalHeaderStyle = ComponentStyle<'modalHeader'>
 const propTypes: PropValidators<PropKeys> = {
   children: PropTypes.node,
   variant: PropTypes.oneOf(['default', 'inverse']),
-  spacing: PropTypes.oneOf(['default', 'compact']),
-  smallViewPort: PropTypes.bool
+  spacing: PropTypes.oneOf(['default', 'compact'])
 }
 
 const allowedProps: AllowedPropKeys = ['children', 'variant', 'spacing']

package/src/Modal/ModalHeader/styles.ts

@@ -44,7 +44,7 @@ const generateStyle = (
   props: ModalHeaderProps,
   state: ModalHeaderStyleProps
 ): ModalHeaderStyle => {
-  const { variant, spacing, smallViewPort } = props
+  const { variant, spacing } = props
   const { withCloseButton } = state
 
   const sizeVariants = {
@@ -83,9 +83,13 @@ const generateStyle = (
       borderBottomWidth: '0.0625rem',
       borderBottomStyle: 'solid',
       borderBottomColor: componentTheme.borderColor,
-      ...(smallViewPort ? { position: 'relative' } : {}),
       ...sizeVariants[spacing!],
-      ...inverseStyle
+      ...inverseStyle,
+
+      // Position is set to relative for small viewports to ensure proper close button positioning during scrolling
+      '@media (max-height: 20rem)': {
+        position: 'relative'
+      }
     }
   }
 }