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

package/lib/Modal/v1/index.js

@@ -0,0 +1,285 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Modal = void 0;
+Object.defineProperty(exports, "ModalBody", {
+  enumerable: true,
+  get: function () {
+    return _ModalBody.ModalBody;
+  }
+});
+Object.defineProperty(exports, "ModalFooter", {
+  enumerable: true,
+  get: function () {
+    return _ModalFooter.ModalFooter;
+  }
+});
+Object.defineProperty(exports, "ModalHeader", {
+  enumerable: true,
+  get: function () {
+    return _ModalHeader.ModalHeader;
+  }
+});
+exports.default = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
+var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
+var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.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");
+var _v11_ = require("@instructure/ui-overlays/v11_6");
+var _ModalHeader = require("./ModalHeader");
+var _ModalBody = require("./ModalBody");
+var _ModalFooter = require("./ModalFooter");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _theme = _interopRequireDefault(require("./theme"));
+var _props = require("./props");
+var _ModalContext = _interopRequireDefault(require("./ModalContext"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+const _excluded = ["open", "onOpen", "onClose", "mountNode", "insertAt", "transition", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "constrain", "overflow"];
+var _dec, _class, _Modal;
+/*
+ * 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.
+ */
+/**
+---
+category: components
+tags: overlay, portal, dialog
+---
+**/
+let Modal = exports.Modal = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_Modal = class Modal extends _react.Component {
+  constructor(props) {
+    var _props$open;
+    super(props);
+    this._DOMNode = null;
+    this._content = null;
+    this.ref = null;
+    this.handleRef = el => {
+      this.ref = el;
+    };
+    this.updateHeight = () => {
+      this.setState({
+        windowHeight: window.innerHeight
+      });
+    };
+    this.handlePortalOpen = DOMNode => {
+      this.DOMNode = DOMNode;
+    };
+    this.handleTransitionComplete = () => {
+      this.setState({
+        transitioning: false
+      });
+    };
+    this.contentRef = el => {
+      this._content = el;
+      if (typeof this.props.contentRef === 'function') {
+        this.props.contentRef(el);
+      }
+    };
+    this.state = {
+      transitioning: false,
+      open: (_props$open = props.open) !== null && _props$open !== void 0 ? _props$open : false,
+      windowHeight: 99999,
+      bodyScrollAriaLabel: void 0
+    };
+  }
+  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);
+    window.addEventListener('resize', this.updateHeight);
+  }
+  componentDidUpdate(prevProps) {
+    var _this$props$makeStyle2, _this$props2;
+    if (this.props.open !== prevProps.open) {
+      this.setState({
+        transitioning: true,
+        open: !!this.props.open
+      });
+    }
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.updateHeight);
+  }
+  get defaultFocusElement() {
+    return this.props.defaultFocusElement;
+  }
+  get DOMNode() {
+    return this._DOMNode;
+  }
+  set DOMNode(el) {
+    this._DOMNode = el;
+  }
+  get maskPlacement() {
+    if (this.props.overflow === 'fit') {
+      return 'stretch';
+    } else {
+      return 'center';
+    }
+  }
+  renderChildren() {
+    const _this$props3 = this.props,
+      children = _this$props3.children,
+      variant = _this$props3.variant,
+      overflow = _this$props3.overflow,
+      styles = _this$props3.styles;
+    const childrenArray = _react.Children.toArray(children);
+    const headerAndBody = [];
+    const others = [];
+    childrenArray.forEach(child => {
+      if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
+        if (child.type === Modal.Header || child.type === Modal.Body) {
+          headerAndBody.push(this.cloneChildWithProps(child, variant, overflow));
+        } else {
+          others.push(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
+    }, "header-and-body") : null;
+    return [...(wrappedHeaderAndBody ? [wrappedHeaderAndBody] : []), ...others];
+  }
+  cloneChildWithProps(child, variant, overflow) {
+    if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
+      var _child$props;
+      return (0, _safeCloneElement.safeCloneElement)(child, {
+        variant: variant,
+        overflow: (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.overflow) || overflow
+      });
+    } else {
+      return child;
+    }
+  }
+  renderDialog(props) {
+    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),
+      as: as,
+      open: true,
+      label: label,
+      defaultFocusElement: this.defaultFocusElement,
+      shouldCloseOnDocumentClick: shouldCloseOnDocumentClick,
+      shouldCloseOnEscape: true,
+      shouldContainFocus: true,
+      shouldReturnFocus: shouldReturnFocus,
+      liveRegion: liveRegion,
+      onDismiss: onDismiss,
+      css: styles === null || styles === void 0 ? void 0 : styles.modal,
+      ref: this.contentRef
+      // aria-modal="true" see VO bug https://bugs.webkit.org/show_bug.cgi?id=174667
+      ,
+      children: this.renderChildren()
+    });
+    return (0, _jsxRuntime.jsx)(_v11_.Mask, {
+      placement: this.maskPlacement,
+      fullscreen: constrain === 'window',
+      themeOverride: isFullScreen ? {
+        borderRadius: '0em',
+        borderWidth: '0em'
+      } : {},
+      children: dialog
+    });
+  }
+  render() {
+    var _this$props$styles;
+    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,
+      insertAt: insertAt,
+      open: portalIsOpen,
+      onOpen: this.handlePortalOpen,
+      "data-cid": "Modal",
+      children: (0, _jsxRuntime.jsx)(_Transition.Transition, {
+        in: open,
+        transitionOnMount: true,
+        type: transition,
+        onEnter: onEnter,
+        onEntering: onEntering,
+        onEntered: (0, _createChainedFunction.createChainedFunction)(this.handleTransitionComplete, onEntered, onOpen),
+        onExit: onExit,
+        onExiting: onExiting,
+        onExited: (0, _createChainedFunction.createChainedFunction)(this.handleTransitionComplete, onExited, onClose),
+        children: (0, _jsxRuntime.jsx)(_ModalContext.default.Provider, {
+          value: {
+            bodyScrollAriaLabel: this.state.bodyScrollAriaLabel,
+            setBodyScrollAriaLabel: txt => this.setState({
+              bodyScrollAriaLabel: txt
+            })
+          },
+          children: constrain === 'parent' ? (0, _jsxRuntime.jsx)("span", {
+            css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.constrainContext,
+            children: this.renderDialog(passthroughProps)
+          }) : this.renderDialog(passthroughProps)
+        })
+      })
+    });
+  }
+}, _Modal.displayName = "Modal", _Modal.componentId = 'Modal', _Modal.allowedProps = _props.allowedProps, _Modal.defaultProps = {
+  open: false,
+  size: 'auto',
+  variant: 'default',
+  transition: 'fade',
+  insertAt: 'bottom',
+  shouldCloseOnDocumentClick: true,
+  shouldReturnFocus: true,
+  constrain: 'window',
+  overflow: 'scroll'
+}, _Modal.Header = _ModalHeader.ModalHeader, _Modal.Body = _ModalBody.ModalBody, _Modal.Footer = _ModalFooter.ModalFooter, _Modal)) || _class);
+var _default = exports.default = Modal;

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

@@ -0,0 +1,137 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ModalBody = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _latest = require("@instructure/ui-view/latest");
+var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _getCSSStyleDeclaration = require("@instructure/ui-dom-utils/lib/getCSSStyleDeclaration.js");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _props = require("./props");
+var _ModalContext = _interopRequireDefault(require("../ModalContext"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+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.
+ */
+/**
+---
+parent: Modal
+id: Modal.Body
+---
+**/
+let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyle)(_styles.default, 'ModalBody'), _dec(_class = (_ModalBody = class ModalBody extends _react.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 && (0, _getCSSStyleDeclaration.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 = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
+    const passthroughProps = _latest.View.omitViewProps((0, _omitProps.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 (0, _jsxRuntime.jsx)(_ModalContext.default.Consumer, {
+      children: value => {
+        var _this$props$styles;
+        return (0, _jsxRuntime.jsx)(_latest.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 = _props.allowedProps, _ModalBody.defaultProps = {
+  padding: 'medium',
+  as: 'div',
+  variant: 'default'
+}, _ModalBody)) || _class);
+var _default = exports.default = ModalBody;

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * 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 = exports.allowedProps = ['children', 'padding', 'elementRef', 'as', 'variant', 'overflow', 'spacing'];

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

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * 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
+    }
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/Modal/v2/ModalContext.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ModalContext = void 0;
+var _react = require("react");
+/*
+ * 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.
+ */
+
+/**
+ * React context created by the `Modal` component
+ * @private
+ */
+const ModalContext = exports.ModalContext = /*#__PURE__*/(0, _react.createContext)({
+  bodyScrollAriaLabel: void 0
+});
+var _default = exports.default = ModalContext;

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

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ModalFooter = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+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.
+ */
+/**
+---
+parent: Modal
+id: Modal.Footer
+---
+**/
+let ModalFooter = exports.ModalFooter = (_dec = (0, _emotion.withStyle)(_styles.default, 'ModalFooter'), _dec(_class = (_ModalFooter = class ModalFooter extends _react.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 = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
+    return (0, _jsxRuntime.jsx)("div", {
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalFooter,
+      ...(0, _passthroughProps.passthroughProps)(rest),
+      ref: this.handleRef,
+      "data-cid": "ModalFooter",
+      children: children
+    });
+  }
+}, _ModalFooter.displayName = "ModalFooter", _ModalFooter.componentId = 'Modal.Footer', _ModalFooter.allowedProps = _props.allowedProps, _ModalFooter.defaultProps = {
+  variant: 'default'
+}, _ModalFooter)) || _class);
+var _default = exports.default = ModalFooter;

package/lib/Modal/v2/ModalFooter/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * 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 = exports.allowedProps = ['children', 'variant', 'spacing'];