@carbon/react 0.17.0-rc.0 → 1.0.0

package/lib/components/ComposedModal/ComposedModal.js

@@ -0,0 +1,643 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var PropTypes = require('prop-types');
+var Button = require('../Button/Button.js');
+var ButtonSet = require('../ButtonSet/ButtonSet.js');
+var cx = require('classnames');
+var iconsReact = require('@carbon/icons-react');
+var toggleClass = require('../../tools/toggleClass.js');
+var requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropIsTruthy.js');
+var wrapFocus = require('../../internal/wrapFocus.js');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _defineProperty2, _ModalBody$propTypes;
+
+var _excluded = ["aria-labelledby", "aria-label", "className", "containerClassName", "children", "danger", "preventCloseOnClickOutside", "selectorPrimaryFocus", "selectorsFloatingMenus", "size", "forwardedRef"],
+    _excluded2 = ["className", "labelClassName", "titleClassName", "closeClassName", "closeIconClassName", "label", "title", "children", "iconDescription", "closeModal", "buttonOnClick", "preventCloseOnClickOutside", "forwardedRef"],
+    _excluded3 = ["className", "children", "hasForm", "hasScrollingContent", "preventCloseOnClickOutside"],
+    _excluded4 = ["className", "primaryClassName", "secondaryButtons", "secondaryClassName", "secondaryButtonText", "primaryButtonText", "primaryButtonDisabled", "closeModal", "onRequestClose", "onRequestSubmit", "children", "danger", "inputref", "forwardedRef"];
+
+var ComposedModal = /*#__PURE__*/function (_Component) {
+  _rollupPluginBabelHelpers.inherits(ComposedModal, _Component);
+
+  var _super = _rollupPluginBabelHelpers.createSuper(ComposedModal);
+
+  function ComposedModal() {
+    var _this;
+
+    _rollupPluginBabelHelpers.classCallCheck(this, ComposedModal);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "state", {});
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "outerModal", /*#__PURE__*/React__default["default"].createRef());
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "innerModal", /*#__PURE__*/React__default["default"].createRef());
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "button", /*#__PURE__*/React__default["default"].createRef());
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "startSentinel", /*#__PURE__*/React__default["default"].createRef());
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "endSentinel", /*#__PURE__*/React__default["default"].createRef());
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleKeyDown", function (evt) {
+      // Esc key
+      if (evt.which === 27) {
+        _this.closeModal(evt);
+      }
+
+      _this.props.onKeyDown(evt);
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleClick", function (evt) {
+      if (!_this.innerModal.current.contains(evt.target) && _this.props.preventCloseOnClickOutside) {
+        return;
+      }
+
+      if (_this.innerModal.current && !_this.innerModal.current.contains(evt.target)) {
+        _this.closeModal(evt);
+      }
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleBlur", function (_ref) {
+      var oldActiveNode = _ref.target,
+          currentActiveNode = _ref.relatedTarget;
+      var _this$props = _this.props,
+          open = _this$props.open,
+          selectorsFloatingMenus = _this$props.selectorsFloatingMenus;
+
+      if (open && currentActiveNode && oldActiveNode) {
+        var bodyNode = _this.innerModal.current;
+        var startSentinelNode = _this.startSentinel.current;
+        var endSentinelNode = _this.endSentinel.current;
+        wrapFocus["default"]({
+          bodyNode: bodyNode,
+          startSentinelNode: startSentinelNode,
+          endSentinelNode: endSentinelNode,
+          currentActiveNode: currentActiveNode,
+          oldActiveNode: oldActiveNode,
+          selectorsFloatingMenus: selectorsFloatingMenus
+        });
+      }
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "focusButton", function (focusContainerElement) {
+      if (focusContainerElement) {
+        var primaryFocusElement = focusContainerElement.querySelector(_this.props.selectorPrimaryFocus);
+
+        if (primaryFocusElement) {
+          primaryFocusElement.focus();
+          return;
+        }
+
+        if (_this.button.current) {
+          _this.button.current.focus();
+        }
+      }
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleTransitionEnd", function (evt) {
+      if (_this.outerModal.current.offsetWidth && _this.outerModal.current.offsetHeight && _this.beingOpen) {
+        _this.focusButton(evt.currentTarget);
+
+        _this.beingOpen = false;
+      }
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "closeModal", function (evt) {
+      var onClose = _this.props.onClose;
+
+      if (!onClose || onClose(evt) !== false) {
+        _this.setState({
+          open: false
+        });
+      }
+    });
+
+    return _this;
+  }
+
+  _rollupPluginBabelHelpers.createClass(ComposedModal, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      if (!prevState.open && this.state.open) {
+        this.beingOpen = true;
+      } else if (prevState.open && !this.state.open) {
+        this.beingOpen = false;
+      }
+
+      if (prevState.open !== this.state.open) {
+        toggleClass["default"](document.body, "".concat(this.context, "--body--with-modal-open"), this.state.open);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      toggleClass["default"](document.body, "".concat(this.context, "--body--with-modal-open"), false);
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      toggleClass["default"](document.body, "".concat(this.context, "--body--with-modal-open"), this.props.open);
+
+      if (!this.props.open) {
+        return;
+      }
+
+      if (this.innerModal.current) {
+        this.focusButton(this.innerModal.current);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _classNames,
+          _classNames2,
+          _this2 = this;
+
+      var open = this.state.open;
+      var prefix = this.context;
+
+      var _this$props2 = this.props,
+          ariaLabelledBy = _this$props2['aria-labelledby'],
+          ariaLabel = _this$props2['aria-label'],
+          className = _this$props2.className,
+          containerClassName = _this$props2.containerClassName,
+          children = _this$props2.children,
+          danger = _this$props2.danger;
+          _this$props2.preventCloseOnClickOutside;
+          _this$props2.selectorPrimaryFocus;
+          _this$props2.selectorsFloatingMenus;
+          var size = _this$props2.size,
+          forwardedRef = _this$props2.forwardedRef,
+          other = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props2, _excluded);
+
+      var modalClass = cx__default["default"]((_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--modal"), true), _rollupPluginBabelHelpers.defineProperty(_classNames, 'is-visible', open), _rollupPluginBabelHelpers.defineProperty(_classNames, className, className), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--modal--danger"), danger), _classNames));
+      var containerClass = cx__default["default"]((_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--modal-container"), true), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--modal-container--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_classNames2, containerClassName, containerClassName), _classNames2)); // Generate aria-label based on Modal Header label if one is not provided (L253)
+
+      var generatedAriaLabel;
+      var childrenWithProps = React__default["default"].Children.toArray(children).map(function (child) {
+        switch (child.type) {
+          case React__default["default"].createElement(ModalHeader).type:
+            generatedAriaLabel = child.props.label;
+            return /*#__PURE__*/React__default["default"].cloneElement(child, {
+              closeModal: _this2.closeModal
+            });
+
+          case React__default["default"].createElement(ModalFooter).type:
+            return /*#__PURE__*/React__default["default"].cloneElement(child, {
+              closeModal: _this2.closeModal,
+              inputref: _this2.button
+            });
+
+          default:
+            return child;
+        }
+      });
+      return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, other, {
+        role: "presentation",
+        ref: function ref(node) {
+          if (node) {
+            _this2.outerModal.current = node;
+
+            if (typeof forwardedRef === 'function') {
+              forwardedRef(node);
+            } else if (_rollupPluginBabelHelpers["typeof"](forwardedRef) === 'object') {
+              forwardedRef.current = node;
+            }
+          }
+        },
+        onBlur: this.handleBlur,
+        onClick: this.handleClick,
+        onKeyDown: this.handleKeyDown,
+        onTransitionEnd: open ? this.handleTransitionEnd : undefined,
+        className: modalClass
+      }), /*#__PURE__*/React__default["default"].createElement("span", {
+        ref: this.startSentinel,
+        tabIndex: "0",
+        role: "link",
+        className: "".concat(prefix, "--visually-hidden")
+      }, "Focus sentinel"), /*#__PURE__*/React__default["default"].createElement("div", {
+        ref: this.innerModal,
+        className: containerClass,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": ariaLabel ? ariaLabel : generatedAriaLabel,
+        "aria-labelledby": ariaLabelledBy
+      }, childrenWithProps), /*#__PURE__*/React__default["default"].createElement("span", {
+        ref: this.endSentinel,
+        tabIndex: "0",
+        role: "link",
+        className: "".concat(prefix, "--visually-hidden")
+      }, "Focus sentinel"));
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(_ref2, state) {
+      var open = _ref2.open;
+      var prevOpen = state.prevOpen;
+      return prevOpen === open ? null : {
+        open: open,
+        prevOpen: open
+      };
+    }
+  }]);
+
+  return ComposedModal;
+}(React.Component);
+
+_rollupPluginBabelHelpers.defineProperty(ComposedModal, "contextType", usePrefix.PrefixContext);
+
+_rollupPluginBabelHelpers.defineProperty(ComposedModal, "defaultProps", {
+  onKeyDown: function onKeyDown() {},
+  selectorPrimaryFocus: '[data-modal-primary-focus]'
+});
+
+_rollupPluginBabelHelpers.defineProperty(ComposedModal, "propTypes", (_defineProperty2 = {}, _rollupPluginBabelHelpers.defineProperty(_defineProperty2, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, 'aria-labelledby', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "containerClassName", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "danger", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "onClose", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "onKeyDown", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "open", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "preventCloseOnClickOutside", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "selectorPrimaryFocus", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "selectorsFloatingMenus", PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "size", PropTypes__default["default"].oneOf(['xs', 'sm', 'md', 'lg'])), _defineProperty2));
+var ModalHeader = /*#__PURE__*/function (_Component2) {
+  _rollupPluginBabelHelpers.inherits(ModalHeader, _Component2);
+
+  var _super2 = _rollupPluginBabelHelpers.createSuper(ModalHeader);
+
+  function ModalHeader() {
+    var _this3;
+
+    _rollupPluginBabelHelpers.classCallCheck(this, ModalHeader);
+
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    _this3 = _super2.call.apply(_super2, [this].concat(args));
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this3), "handleCloseButtonClick", function (evt) {
+      _this3.props.closeModal(evt);
+
+      _this3.props.buttonOnClick();
+    });
+
+    return _this3;
+  }
+
+  _rollupPluginBabelHelpers.createClass(ModalHeader, [{
+    key: "render",
+    value: function render() {
+      var _classNames3, _classNames4, _classNames5, _classNames6, _classNames7;
+
+      var _this$props3 = this.props,
+          className = _this$props3.className,
+          labelClassName = _this$props3.labelClassName,
+          titleClassName = _this$props3.titleClassName,
+          closeClassName = _this$props3.closeClassName,
+          closeIconClassName = _this$props3.closeIconClassName,
+          label = _this$props3.label,
+          title = _this$props3.title,
+          children = _this$props3.children,
+          iconDescription = _this$props3.iconDescription;
+          _this$props3.closeModal;
+          _this$props3.buttonOnClick;
+          _this$props3.preventCloseOnClickOutside;
+          var forwardedRef = _this$props3.forwardedRef,
+          other = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props3, _excluded2);
+
+      var prefix = this.context;
+      var headerClass = cx__default["default"]((_classNames3 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--modal-header"), true), _rollupPluginBabelHelpers.defineProperty(_classNames3, className, className), _classNames3));
+      var labelClass = cx__default["default"]((_classNames4 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--modal-header__label ").concat(prefix, "--type-delta"), true), _rollupPluginBabelHelpers.defineProperty(_classNames4, labelClassName, labelClassName), _classNames4));
+      var titleClass = cx__default["default"]((_classNames5 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames5, "".concat(prefix, "--modal-header__heading ").concat(prefix, "--type-beta"), true), _rollupPluginBabelHelpers.defineProperty(_classNames5, titleClassName, titleClassName), _classNames5));
+      var closeClass = cx__default["default"]((_classNames6 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames6, "".concat(prefix, "--modal-close"), true), _rollupPluginBabelHelpers.defineProperty(_classNames6, closeClassName, closeClassName), _classNames6));
+      var closeIconClass = cx__default["default"]((_classNames7 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames7, "".concat(prefix, "--modal-close__icon"), true), _rollupPluginBabelHelpers.defineProperty(_classNames7, closeIconClassName, closeIconClassName), _classNames7));
+      return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+        className: headerClass
+      }, other, {
+        ref: forwardedRef
+      }), label && /*#__PURE__*/React__default["default"].createElement("h2", {
+        className: labelClass
+      }, label), title && /*#__PURE__*/React__default["default"].createElement("h3", {
+        className: titleClass
+      }, title), children, /*#__PURE__*/React__default["default"].createElement("button", {
+        onClick: this.handleCloseButtonClick,
+        className: closeClass,
+        title: iconDescription,
+        "aria-label": iconDescription,
+        type: "button"
+      }, /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, {
+        size: 20,
+        className: closeIconClass
+      })));
+    }
+  }]);
+
+  return ModalHeader;
+}(React.Component);
+
+_rollupPluginBabelHelpers.defineProperty(ModalHeader, "propTypes", {
+  /**
+   * Provide an optional function to be called when the close button is
+   * clicked
+   */
+  buttonOnClick: PropTypes__default["default"].func,
+
+  /**
+   * Specify the content to be placed in the ModalHeader
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to be applied to the modal header
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify an optional className to be applied to the modal close node
+   */
+  closeClassName: PropTypes__default["default"].string,
+
+  /**
+   * Specify an optional className to be applied to the modal close icon node
+   */
+  closeIconClassName: PropTypes__default["default"].string,
+
+  /**
+   * Provide an optional function to be called when the modal is closed
+   */
+  closeModal: PropTypes__default["default"].func,
+
+  /**
+   * Specify a description for the close icon that can be read by screen
+   * readers
+   */
+  iconDescription: PropTypes__default["default"].string,
+
+  /**
+   * Specify an optional label to be displayed
+   */
+  label: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to be applied to the modal header label
+   */
+  labelClassName: PropTypes__default["default"].string,
+
+  /**
+   * Specify an optional title to be displayed
+   */
+  title: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to be applied to the modal heading
+   */
+  titleClassName: PropTypes__default["default"].string
+});
+
+_rollupPluginBabelHelpers.defineProperty(ModalHeader, "contextType", usePrefix.PrefixContext);
+
+_rollupPluginBabelHelpers.defineProperty(ModalHeader, "defaultProps", {
+  iconDescription: 'Close',
+  buttonOnClick: function buttonOnClick() {}
+});
+
+var ModalBody = /*#__PURE__*/React__default["default"].forwardRef(function ModalBody(props, ref) {
+  var _classNames8;
+
+  var className = props.className,
+      children = props.children,
+      hasForm = props.hasForm,
+      hasScrollingContent = props.hasScrollingContent;
+      props.preventCloseOnClickOutside;
+      var other = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded3);
+
+  var prefix = usePrefix.usePrefix();
+  var contentClass = cx__default["default"]((_classNames8 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames8, "".concat(prefix, "--modal-content"), true), _rollupPluginBabelHelpers.defineProperty(_classNames8, "".concat(prefix, "--modal-content--with-form"), hasForm), _rollupPluginBabelHelpers.defineProperty(_classNames8, "".concat(prefix, "--modal-scroll-content"), hasScrollingContent), _rollupPluginBabelHelpers.defineProperty(_classNames8, className, className), _classNames8));
+  var hasScrollingContentProps = hasScrollingContent ? {
+    tabIndex: 0,
+    role: 'region'
+  } : {};
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: contentClass
+  }, hasScrollingContentProps, other, {
+    ref: ref
+  }), children), hasScrollingContent && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--modal-content--overflow-indicator")
+  }));
+});
+ModalBody.propTypes = (_ModalBody$propTypes = {}, _rollupPluginBabelHelpers.defineProperty(_ModalBody$propTypes, 'aria-label', requiredIfGivenPropIsTruthy["default"]('hasScrollingContent', PropTypes__default["default"].string)), _rollupPluginBabelHelpers.defineProperty(_ModalBody$propTypes, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_ModalBody$propTypes, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ModalBody$propTypes, "hasForm", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ModalBody$propTypes, "hasScrollingContent", PropTypes__default["default"].bool), _ModalBody$propTypes);
+var ModalFooter = /*#__PURE__*/function (_Component3) {
+  _rollupPluginBabelHelpers.inherits(ModalFooter, _Component3);
+
+  var _super3 = _rollupPluginBabelHelpers.createSuper(ModalFooter);
+
+  function ModalFooter() {
+    var _this4;
+
+    _rollupPluginBabelHelpers.classCallCheck(this, ModalFooter);
+
+    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+      args[_key3] = arguments[_key3];
+    }
+
+    _this4 = _super3.call.apply(_super3, [this].concat(args));
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this4), "handleRequestClose", function (evt) {
+      _this4.props.closeModal(evt);
+
+      _this4.props.onRequestClose(evt);
+    });
+
+    return _this4;
+  }
+
+  _rollupPluginBabelHelpers.createClass(ModalFooter, [{
+    key: "render",
+    value: function render() {
+      var _classNames9,
+          _this5 = this;
+
+      var _this$props4 = this.props,
+          className = _this$props4.className,
+          primaryClassName = _this$props4.primaryClassName,
+          secondaryButtons = _this$props4.secondaryButtons,
+          secondaryClassName = _this$props4.secondaryClassName,
+          secondaryButtonText = _this$props4.secondaryButtonText,
+          primaryButtonText = _this$props4.primaryButtonText,
+          primaryButtonDisabled = _this$props4.primaryButtonDisabled;
+          _this$props4.closeModal;
+          _this$props4.onRequestClose;
+          var onRequestSubmit = _this$props4.onRequestSubmit,
+          children = _this$props4.children,
+          danger = _this$props4.danger,
+          inputref = _this$props4.inputref,
+          forwardedRef = _this$props4.forwardedRef,
+          other = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props4, _excluded4);
+
+      var prefix = this.context;
+      var footerClass = cx__default["default"]((_classNames9 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames9, "".concat(prefix, "--modal-footer"), true), _rollupPluginBabelHelpers.defineProperty(_classNames9, className, className), _rollupPluginBabelHelpers.defineProperty(_classNames9, "".concat(prefix, "--modal-footer--three-button"), Array.isArray(secondaryButtons) && secondaryButtons.length === 2), _classNames9));
+      var primaryClass = cx__default["default"](_rollupPluginBabelHelpers.defineProperty({}, primaryClassName, primaryClassName));
+      var secondaryClass = cx__default["default"](_rollupPluginBabelHelpers.defineProperty({}, secondaryClassName, secondaryClassName));
+
+      var SecondaryButtonSet = function SecondaryButtonSet() {
+        if (Array.isArray(secondaryButtons) && secondaryButtons.length <= 2) {
+          return secondaryButtons.map(function (_ref3, i) {
+            var buttonText = _ref3.buttonText,
+                onButtonClick = _ref3.onClick;
+            return /*#__PURE__*/React__default["default"].createElement(Button["default"], {
+              key: "".concat(buttonText, "-").concat(i),
+              className: secondaryClass,
+              kind: "secondary",
+              onClick: onButtonClick || _this5.handleRequestClose
+            }, buttonText);
+          });
+        }
+
+        if (secondaryButtonText) {
+          return /*#__PURE__*/React__default["default"].createElement(Button["default"], {
+            className: secondaryClass,
+            onClick: _this5.handleRequestClose,
+            kind: "secondary"
+          }, secondaryButtonText);
+        }
+
+        return null;
+      };
+
+      return /*#__PURE__*/React__default["default"].createElement(ButtonSet["default"], _rollupPluginBabelHelpers["extends"]({
+        className: footerClass
+      }, other, {
+        ref: forwardedRef
+      }), /*#__PURE__*/React__default["default"].createElement(SecondaryButtonSet, null), primaryButtonText && /*#__PURE__*/React__default["default"].createElement(Button["default"], {
+        onClick: onRequestSubmit,
+        className: primaryClass,
+        disabled: primaryButtonDisabled,
+        kind: danger ? 'danger' : 'primary',
+        ref: inputref
+      }, primaryButtonText), children);
+    }
+  }]);
+
+  return ModalFooter;
+}(React.Component);
+
+_rollupPluginBabelHelpers.defineProperty(ModalFooter, "propTypes", {
+  /**
+   * Pass in content that will be rendered in the Modal Footer
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify a custom className to be applied to the Modal Footer container
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify an optional function that is called whenever the modal is closed
+   */
+  closeModal: PropTypes__default["default"].func,
+
+  /**
+   * Specify whether the primary button should be replaced with danger button.
+   * Note that this prop is not applied if you render primary/danger button by yourself
+   */
+  danger: PropTypes__default["default"].bool,
+
+  /**
+   * The `ref` callback for the primary button.
+   */
+  inputref: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
+    current: PropTypes__default["default"].any
+  })]),
+
+  /**
+   * Specify an optional function for when the modal is requesting to be
+   * closed
+   */
+  onRequestClose: PropTypes__default["default"].func,
+
+  /**
+   * Specify an optional function for when the modal is requesting to be
+   * submitted
+   */
+  onRequestSubmit: PropTypes__default["default"].func,
+
+  /**
+   * Specify whether the primary button should be disabled
+   */
+  primaryButtonDisabled: PropTypes__default["default"].bool,
+
+  /**
+   * Specify the text for the primary button
+   */
+  primaryButtonText: PropTypes__default["default"].string,
+
+  /**
+   * Specify a custom className to be applied to the primary button
+   */
+  primaryClassName: PropTypes__default["default"].string,
+
+  /**
+   * Specify the text for the secondary button
+   */
+  secondaryButtonText: PropTypes__default["default"].string,
+
+  /**
+   * Specify an array of config objects for secondary buttons
+   * (`Array<{
+   *   buttonText: string,
+   *   onClick: function,
+   * }>`).
+   */
+  secondaryButtons: function secondaryButtons(props, propName, componentName) {
+    if (props.secondaryButtons) {
+      if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) {
+        return new Error("".concat(propName, " needs to be an array of two button config objects"));
+      }
+
+      var shape = {
+        buttonText: PropTypes__default["default"].node,
+        onClick: PropTypes__default["default"].func
+      };
+      props[propName].forEach(function (secondaryButton) {
+        PropTypes__default["default"].checkPropTypes(shape, secondaryButton, propName, componentName);
+      });
+    }
+
+    return null;
+  },
+
+  /**
+   * Specify a custom className to be applied to the secondary button
+   */
+  secondaryClassName: PropTypes__default["default"].string
+});
+
+_rollupPluginBabelHelpers.defineProperty(ModalFooter, "defaultProps", {
+  onRequestClose: function onRequestClose() {},
+  onRequestSubmit: function onRequestSubmit() {}
+});
+
+_rollupPluginBabelHelpers.defineProperty(ModalFooter, "contextType", usePrefix.PrefixContext);
+
+exports.ModalBody = ModalBody;
+exports.ModalFooter = ModalFooter;
+exports.ModalHeader = ModalHeader;
+exports["default"] = ComposedModal;

package/lib/components/ComposedModal/index.js

@@ -0,0 +1,45 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var FeatureFlags = require('@carbon/feature-flags');
+var ModalHeader$1 = require('./next/ModalHeader.js');
+var ModalFooter$1 = require('./next/ModalFooter.js');
+var ComposedModal$1 = require('./next/ComposedModal.js');
+var ComposedModal = require('./ComposedModal.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
+
+var ModalHeader = FeatureFlags__namespace.enabled('enable-v11-release') ? ModalHeader$1.ModalHeader : ComposedModal.ModalHeader;
+var ModalFooter = FeatureFlags__namespace.enabled('enable-v11-release') ? ModalFooter$1.ModalFooter : ComposedModal.ModalFooter;
+FeatureFlags__namespace.enabled('enable-v11-release') ? ComposedModal$1["default"] : ComposedModal["default"];
+
+exports.ModalBody = ComposedModal.ModalBody;
+exports["default"] = ComposedModal["default"];
+exports.ModalFooter = ModalFooter;
+exports.ModalHeader = ModalHeader;