@instructure/ui-modal 11.6.0 → 11.6.1-snapshot-129

package/es/Modal/{ModalHeader → v1/ModalHeader}/index.js

@@ -27,8 +27,8 @@ var _dec, _class, _ModalHeader;
 
 import { Children, Component } from 'react';
 import { matchComponentTypes, passthroughProps } from '@instructure/ui-react-utils';
-import { withStyle } from '@instructure/emotion';
-import { CloseButton } from '@instructure/ui-buttons';
+import { withStyleLegacy as withStyle } from '@instructure/emotion';
+import { CloseButton } from '@instructure/ui-buttons/v11_6';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
 import { allowedProps } from "./props.js";

package/es/Modal/{index.js → v1/index.js}

@@ -31,11 +31,11 @@ import { createChainedFunction } from '@instructure/ui-utils';
 import { Transition } from '@instructure/ui-motion';
 import { Portal } from '@instructure/ui-portal';
 import { Dialog } from '@instructure/ui-dialog';
-import { Mask } from '@instructure/ui-overlays';
+import { Mask } from '@instructure/ui-overlays/v11_6';
 import { ModalHeader } from "./ModalHeader/index.js";
 import { ModalBody } from "./ModalBody/index.js";
 import { ModalFooter } from "./ModalFooter/index.js";
-import { withStyle } from '@instructure/emotion';
+import { withStyleLegacy as withStyle } from '@instructure/emotion';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
 import { allowedProps } from "./props.js";

package/es/Modal/v2/ModalBody/index.js

@@ -0,0 +1,132 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["as", "elementRef", "overflow", "variant", "padding", "spacing", "children"];
+var _dec, _class, _ModalBody;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Component } from 'react';
+import { View } from '@instructure/ui-view/latest';
+import { omitProps } from '@instructure/ui-react-utils';
+import { getCSSStyleDeclaration } from '@instructure/ui-dom-utils';
+import { withStyle } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+import ModalContext from "../ModalContext.js";
+/**
+---
+parent: Modal
+id: Modal.Body
+---
+**/
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+let ModalBody = (_dec = withStyle(generateStyle, 'ModalBody'), _dec(_class = (_ModalBody = class ModalBody extends Component {
+  constructor(props) {
+    super(props);
+    this.ref = null;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+
+    // We detect if -moz- prefixed style is present to identify whether we are in Firefox browser
+    const style = this.ref && getCSSStyleDeclaration(this.ref);
+    const isFirefox = !!(style && Array.prototype.slice.call(style).join('').match(/(?:-moz-)/));
+    if (isFirefox) {
+      this.setState({
+        isFirefox
+      });
+    }
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+  getFinalRef(el) {
+    if (!el) {
+      return void 0;
+    }
+    if (el instanceof Element) {
+      return el;
+    }
+    if (el.ref) {
+      return this.getFinalRef(el.ref);
+    }
+    return void 0;
+  }
+  render() {
+    var _finalRef$scrollHeigh, _finalRef$getBounding, _finalRef$getBounding2;
+    const _this$props3 = this.props,
+      as = _this$props3.as,
+      elementRef = _this$props3.elementRef,
+      overflow = _this$props3.overflow,
+      variant = _this$props3.variant,
+      padding = _this$props3.padding,
+      spacing = _this$props3.spacing,
+      children = _this$props3.children,
+      rest = _objectWithoutProperties(_this$props3, _excluded);
+    const passthroughProps = View.omitViewProps(omitProps(rest, ModalBody.allowedProps), ModalBody);
+    const isFit = overflow === 'fit';
+    // this recursive function is needed because `ref` can be a React component.
+    // TODO rethink, the 'as' prop, likely its not a good idea to allow React
+    // components. See INSTUI-4674
+    const finalRef = this.getFinalRef(this.ref);
+    const hasScrollbar = finalRef && Math.abs(((_finalRef$scrollHeigh = finalRef.scrollHeight) !== null && _finalRef$scrollHeigh !== void 0 ? _finalRef$scrollHeigh : 0) - ((_finalRef$getBounding = (_finalRef$getBounding2 = finalRef.getBoundingClientRect()) === null || _finalRef$getBounding2 === void 0 ? void 0 : _finalRef$getBounding2.height) !== null && _finalRef$getBounding !== void 0 ? _finalRef$getBounding : 0)) > 1;
+    return _jsx(ModalContext.Consumer, {
+      children: value => {
+        var _this$props$styles;
+        return _jsx(View, {
+          ...passthroughProps,
+          display: "block",
+          "data-cid": "ModalBody",
+          width: isFit ? '100%' : void 0,
+          height: isFit ? '100%' : void 0,
+          elementRef: this.handleRef,
+          as: as,
+          css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalBody,
+          padding: spacing ? void 0 : padding
+          // check if there is a scrollbar, if so, the element has to be tabbable
+          ,
+          ...(hasScrollbar ? {
+            tabIndex: 0,
+            'aria-label': value.bodyScrollAriaLabel
+          } : {}),
+          children: children
+        });
+      }
+    });
+  }
+}, _ModalBody.displayName = "ModalBody", _ModalBody.componentId = 'Modal.Body', _ModalBody.allowedProps = allowedProps, _ModalBody.defaultProps = {
+  padding: 'medium',
+  as: 'div',
+  variant: 'default'
+}, _ModalBody)) || _class);
+export default ModalBody;
+export { ModalBody };

package/es/Modal/v2/ModalBody/props.js

@@ -0,0 +1,26 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = ['children', 'padding', 'elementRef', 'as', 'variant', 'overflow', 'spacing'];
+export { allowedProps };

package/es/Modal/v2/ModalBody/styles.js

@@ -0,0 +1,68 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} sharedTokens Shared theme token object
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props) => {
+  const variant = props.variant,
+    spacing = props.spacing;
+  const sizeVariants = {
+    default: {
+      padding: componentTheme.padding
+    },
+    compact: {
+      padding: componentTheme.paddingCompact
+    }
+  };
+  const backgroundStyle = variant === 'inverse' ? {
+    background: componentTheme.inverseBackgroundColor
+  } : {};
+  return {
+    modalBody: {
+      label: 'modalBody',
+      borderRadius: 0,
+      boxSizing: 'border-box',
+      flex: '1 1 auto',
+      '&:focus': {
+        outline: 'none'
+      },
+      // ModalBody is set to scrollable above 20rem height
+      '@media (min-height: 20rem)': {
+        overflowY: 'auto'
+      },
+      ...(spacing ? sizeVariants[spacing] : {}),
+      ...backgroundStyle
+    }
+  };
+};
+export default generateStyle;

package/es/Modal/v2/ModalContext.js

@@ -0,0 +1,34 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { createContext } from 'react';
+/**
+ * React context created by the `Modal` component
+ * @private
+ */
+const ModalContext = /*#__PURE__*/createContext({
+  bodyScrollAriaLabel: void 0
+});
+export default ModalContext;
+export { ModalContext };

package/es/Modal/v2/ModalFooter/index.js

@@ -0,0 +1,73 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["children"];
+var _dec, _class, _ModalFooter;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Component } from 'react';
+import { passthroughProps } from '@instructure/ui-react-utils';
+import { withStyle } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/**
+---
+parent: Modal
+id: Modal.Footer
+---
+**/
+let ModalFooter = (_dec = withStyle(generateStyle, 'ModalFooter'), _dec(_class = (_ModalFooter = class ModalFooter extends Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.handleRef = el => {
+      this.ref = el;
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+  render() {
+    var _this$props$styles;
+    const _this$props3 = this.props,
+      children = _this$props3.children,
+      rest = _objectWithoutProperties(_this$props3, _excluded);
+    return _jsx("div", {
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalFooter,
+      ...passthroughProps(rest),
+      ref: this.handleRef,
+      "data-cid": "ModalFooter",
+      children: children
+    });
+  }
+}, _ModalFooter.displayName = "ModalFooter", _ModalFooter.componentId = 'Modal.Footer', _ModalFooter.allowedProps = allowedProps, _ModalFooter.defaultProps = {
+  variant: 'default'
+}, _ModalFooter)) || _class);
+export default ModalFooter;
+export { ModalFooter };

package/es/{index.js → Modal/v2/ModalFooter/props.js}

@@ -21,4 +21,6 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { Modal, ModalBody, ModalFooter, ModalHeader } from "./Modal/index.js";
+
+const allowedProps = ['children', 'variant', 'spacing'];
+export { allowedProps };

package/es/Modal/v2/ModalFooter/styles.js

@@ -0,0 +1,60 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} sharedTokens Shared theme token object
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props) => {
+  const variant = props.variant,
+    spacing = props.spacing;
+  const backgroundStyle = variant === 'inverse' ? {
+    background: componentTheme.inverseBackgroundColor,
+    borderTop: `${componentTheme.borderWidth} solid ${componentTheme.inverseBorderColor}`
+  } : {
+    background: componentTheme.backgroundColor,
+    borderTop: `${componentTheme.borderWidth} solid ${componentTheme.borderColor}`
+  };
+  return {
+    modalFooter: {
+      label: 'modalFooter',
+      flex: '0 0 auto',
+      boxSizing: 'border-box',
+      padding: spacing === 'compact' ? componentTheme.paddingCompact : componentTheme.padding,
+      borderBottomRightRadius: componentTheme.borderRadius,
+      borderBottomLeftRadius: componentTheme.borderRadius,
+      display: 'flex',
+      justifyContent: 'flex-end',
+      ...backgroundStyle
+    }
+  };
+};
+export default generateStyle;

package/es/Modal/v2/ModalHeader/index.js

@@ -0,0 +1,112 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["children"];
+var _dec, _class, _ModalHeader;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Children, Component } from 'react';
+import { matchComponentTypes, passthroughProps } from '@instructure/ui-react-utils';
+import { withStyle } from '@instructure/emotion';
+import { CloseButton } from '@instructure/ui-buttons/latest';
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+import ModalContext from "../ModalContext.js";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/**
+---
+parent: Modal
+id: Modal.Header
+---
+**/
+let ModalHeader = (_dec = withStyle(generateStyle, 'ModalHeader'), _dec(_class = (_ModalHeader = class ModalHeader extends Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    /**
+     * Gets all text in a DOM subtree, text under <button> nodes is excluded
+     */
+    this.getTextExcludingButtons = root => {
+      const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
+        acceptNode(node) {
+          var _node$parentElement;
+          return (_node$parentElement = node.parentElement) !== null && _node$parentElement !== void 0 && _node$parentElement.closest('button') ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT;
+        }
+      });
+      let text = '';
+      let current;
+      while (current = walker.nextNode()) {
+        text += current.nodeValue;
+      }
+      return text;
+    };
+    this.handleRef = el => {
+      this.ref = el;
+      if (el) {
+        var _this$context$setBody, _this$context;
+        const txt = this.getTextExcludingButtons(el);
+        (_this$context$setBody = (_this$context = this.context).setBodyScrollAriaLabel) === null || _this$context$setBody === void 0 ? void 0 : _this$context$setBody.call(_this$context, txt);
+      }
+    };
+    this.makeStyleProps = () => {
+      return {
+        withCloseButton: this.usesCloseButton
+      };
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
+  }
+  get usesCloseButton() {
+    let hasCloseButton = false;
+    Children.forEach(this.props.children, child => {
+      if (child && matchComponentTypes(child, [CloseButton])) {
+        hasCloseButton = true;
+      }
+    });
+    return hasCloseButton;
+  }
+  render() {
+    var _this$props$styles;
+    const _this$props3 = this.props,
+      children = _this$props3.children,
+      rest = _objectWithoutProperties(_this$props3, _excluded);
+    return _jsx("div", {
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalHeader,
+      ...passthroughProps(rest),
+      ref: this.handleRef,
+      "data-cid": "ModalHeader",
+      children: children
+    });
+  }
+}, _ModalHeader.displayName = "ModalHeader", _ModalHeader.componentId = 'Modal.Header', _ModalHeader.allowedProps = allowedProps, _ModalHeader.defaultProps = {
+  variant: 'default',
+  spacing: 'default'
+}, _ModalHeader.contextType = ModalContext, _ModalHeader)) || _class);
+export default ModalHeader;
+export { ModalHeader };

package/es/Modal/v2/ModalHeader/props.js

@@ -0,0 +1,26 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = ['children', 'variant', 'spacing'];
+export { allowedProps };

package/es/Modal/v2/ModalHeader/styles.js

@@ -0,0 +1,76 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} _sharedTokens Shared theme token object (unused)
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props, _sharedTokens, state) => {
+  const variant = props.variant,
+    spacing = props.spacing;
+  const withCloseButton = state.withCloseButton;
+  const sizeVariants = {
+    default: {
+      padding: componentTheme.padding,
+      paddingInlineStart: componentTheme.padding,
+      paddingInlineEnd: withCloseButton ? `calc(${componentTheme.padding} * 2 + 1em)` : componentTheme.padding
+    },
+    compact: {
+      padding: componentTheme.paddingCompact,
+      paddingInlineStart: componentTheme.paddingCompact,
+      paddingInlineEnd: withCloseButton ? `calc(${componentTheme.paddingCompact} * 2 + 1em)` : componentTheme.paddingCompact
+    }
+  };
+  const inverseStyle = variant === 'inverse' ? {
+    background: componentTheme.inverseBackgroundColor,
+    borderBottomColor: componentTheme.inverseBorderColor
+  } : {};
+  return {
+    modalHeader: {
+      borderTopLeftRadius: 'inherit',
+      borderTopRightRadius: 'inherit',
+      label: 'modalHeader',
+      boxSizing: 'border-box',
+      flex: '0 0 auto',
+      background: componentTheme.backgroundColor,
+      borderBottomWidth: componentTheme.borderWidth,
+      borderBottomStyle: 'solid',
+      borderBottomColor: componentTheme.borderColor,
+      ...sizeVariants[spacing],
+      ...inverseStyle,
+      // Position is set to relative for small viewports to ensure proper close button positioning during scrolling
+      '@media (max-height: 20rem)': {
+        position: 'relative'
+      }
+    }
+  };
+};
+export default generateStyle;