@carbon/react 1.9.0 → 1.10.0-rc.0

package/lib/components/ComposedModal/ComposedModal.js

@@ -12,10 +12,9 @@ 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 ModalHeader = require('./ModalHeader.js');
+var ModalFooter = require('./ModalFooter.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');
@@ -27,618 +26,212 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _defineProperty2, _ModalBody$propTypes;
+var _ModalBody$propTypes, _ComposedModal$propTy;
 
-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 _excluded = ["className", "children", "hasForm", "hasScrollingContent"],
+    _excluded2 = ["aria-labelledby", "aria-label", "children", "className", "containerClassName", "danger", "onClose", "onKeyDown", "open", "preventCloseOnClickOutside", "selectorPrimaryFocus", "selectorsFloatingMenus", "size"];
+var ModalBody = /*#__PURE__*/React__default["default"].forwardRef(function ModalBody(_ref, ref) {
+  var _cx;
 
-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,
-        tabIndex: "-1"
-      }), /*#__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 customClassName = _ref.className,
+      children = _ref.children,
+      hasForm = _ref.hasForm,
+      hasScrollingContent = _ref.hasScrollingContent,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   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 contentClass = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--modal-content"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--modal-content--with-form"), hasForm), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--modal-scroll-content"), hasScrollingContent), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, customClassName), _cx));
   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, {
+  }, hasScrollingContentProps, rest, {
     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 ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function ComposedModal(_ref2, ref) {
+  var _cx2, _cx3;
+
+  var ariaLabelledBy = _ref2['aria-labelledby'],
+      ariaLabel = _ref2['aria-label'],
+      children = _ref2.children,
+      customClassName = _ref2.className,
+      containerClassName = _ref2.containerClassName,
+      danger = _ref2.danger,
+      onClose = _ref2.onClose,
+      onKeyDown = _ref2.onKeyDown,
+      open = _ref2.open,
+      preventCloseOnClickOutside = _ref2.preventCloseOnClickOutside,
+      selectorPrimaryFocus = _ref2.selectorPrimaryFocus,
+      selectorsFloatingMenus = _ref2.selectorsFloatingMenus,
+      size = _ref2.size,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
 
-  var _super3 = _rollupPluginBabelHelpers.createSuper(ModalFooter);
+  var prefix = usePrefix.usePrefix();
+
+  var _useState = React.useState(open),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setisOpen = _useState2[1];
 
-  function ModalFooter() {
-    var _this4;
+  var _useState3 = React.useState(open),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      prevOpen = _useState4[0],
+      setPrevOpen = _useState4[1];
 
-    _rollupPluginBabelHelpers.classCallCheck(this, ModalFooter);
+  var innerModal = React.useRef();
+  var button = React.useRef();
+  var startSentinel = React.useRef();
+  var endSentinel = React.useRef();
+
+  if (open !== prevOpen) {
+    setisOpen(open);
+    setPrevOpen(open);
+  }
 
-    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-      args[_key3] = arguments[_key3];
+  function handleKeyDown(evt) {
+    // Esc key
+    if (evt.which === 27) {
+      closeModal(evt);
     }
 
-    _this4 = _super3.call.apply(_super3, [this].concat(args));
+    onKeyDown(evt);
+  }
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this4), "handleRequestClose", function (evt) {
-      _this4.props.closeModal(evt);
+  function handleClick(evt) {
+    if (!innerModal.current.contains(evt.target) && preventCloseOnClickOutside) {
+      return;
+    }
 
-      _this4.props.onRequestClose(evt);
-    });
+    if (innerModal.current && !innerModal.current.contains(evt.target)) {
+      closeModal(evt);
+    }
+  }
 
-    return _this4;
+  function handleBlur(_ref3) {
+    var oldActiveNode = _ref3.target,
+        currentActiveNode = _ref3.relatedTarget;
+
+    if (open && currentActiveNode && oldActiveNode) {
+      var bodyNode = innerModal.current;
+      var startSentinelNode = startSentinel.current;
+      var endSentinelNode = endSentinel.current;
+      wrapFocus["default"]({
+        bodyNode: bodyNode,
+        startSentinelNode: startSentinelNode,
+        endSentinelNode: endSentinelNode,
+        currentActiveNode: currentActiveNode,
+        oldActiveNode: oldActiveNode,
+        selectorsFloatingMenus: selectorsFloatingMenus
+      });
+    }
   }
 
-  _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);
-          });
-        }
+  function closeModal(evt) {
+    if (!onClose || onClose(evt) !== false) {
+      setisOpen(false);
+    }
+  }
 
-        if (secondaryButtonText) {
-          return /*#__PURE__*/React__default["default"].createElement(Button["default"], {
-            className: secondaryClass,
-            onClick: _this5.handleRequestClose,
-            kind: "secondary"
-          }, secondaryButtonText);
-        }
+  var modalClass = cx__default["default"]((_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--modal"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, 'is-visible', isOpen), _rollupPluginBabelHelpers.defineProperty(_cx2, customClassName, customClassName), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--modal--danger"), danger), _cx2));
+  var containerClass = cx__default["default"]((_cx3 = {}, _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--modal-container"), true), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--modal-container--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_cx3, containerClassName, containerClassName), _cx3)); // Generate aria-label based on Modal Header label if one is not provided (L253)
 
-        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 generatedAriaLabel;
+  var childrenWithProps = React__default["default"].Children.toArray(children).map(function (child) {
+    switch (child.type) {
+      case React__default["default"].createElement(ModalHeader.ModalHeader).type:
+        generatedAriaLabel = child.props.label;
+        return /*#__PURE__*/React__default["default"].cloneElement(child, {
+          closeModal: closeModal
+        });
 
-      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);
-      });
+      case React__default["default"].createElement(ModalFooter.ModalFooter).type:
+        return /*#__PURE__*/React__default["default"].cloneElement(child, {
+          closeModal: closeModal,
+          inputref: button
+        });
+
+      default:
+        return child;
+    }
+  });
+  React.useEffect(function () {
+    if (prevOpen !== isOpen) {
+      toggleClass["default"](document.body, "".concat(prefix, "--body--with-modal-open"), isOpen);
     }
+  });
+  React.useEffect(function () {
+    return function () {
+      return toggleClass["default"](document.body, "".concat(prefix, "--body--with-modal-open"), false);
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  React.useEffect(function () {
+    toggleClass["default"](document.body, "".concat(prefix, "--body--with-modal-open"), open);
+  }, [open, prefix]);
+  React.useEffect(function () {
+    var focusButton = function focusButton(focusContainerElement) {
+      if (focusContainerElement) {
+        var primaryFocusElement = focusContainerElement.querySelector(selectorPrimaryFocus);
 
-    return null;
-  },
+        if (primaryFocusElement) {
+          primaryFocusElement.focus();
+          return;
+        }
 
-  /**
-   * Specify a custom className to be applied to the secondary button
-   */
-  secondaryClassName: PropTypes__default["default"].string
-});
+        if (button.current) {
+          button.current.focus();
+        }
+      }
+    };
 
-_rollupPluginBabelHelpers.defineProperty(ModalFooter, "defaultProps", {
-  onRequestClose: function onRequestClose() {},
-  onRequestSubmit: function onRequestSubmit() {}
-});
+    if (!open) {
+      return;
+    }
 
-_rollupPluginBabelHelpers.defineProperty(ModalFooter, "contextType", usePrefix.PrefixContext);
+    if (innerModal.current) {
+      focusButton(innerModal.current);
+    }
+  }, [open, selectorPrimaryFocus]);
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    role: "presentation",
+    ref: ref,
+    "aria-hidden": !open,
+    onBlur: handleBlur,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    className: modalClass,
+    tabIndex: "-1"
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: containerClass,
+    role: "dialog",
+    "aria-modal": "true",
+    "aria-label": ariaLabel ? ariaLabel : generatedAriaLabel,
+    "aria-labelledby": ariaLabelledBy
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
+    type: "button",
+    ref: startSentinel,
+    className: "".concat(prefix, "--visually-hidden")
+  }, "Focus sentinel"), /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: innerModal,
+    className: "".concat(prefix, "--modal-container-body")
+  }, childrenWithProps), /*#__PURE__*/React__default["default"].createElement("button", {
+    type: "button",
+    ref: endSentinel,
+    className: "".concat(prefix, "--visually-hidden")
+  }, "Focus sentinel")));
+});
+ComposedModal.propTypes = (_ComposedModal$propTy = {}, _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, 'aria-labelledby', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "containerClassName", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "danger", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "onClose", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "onKeyDown", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "open", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "preventCloseOnClickOutside", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "selectorPrimaryFocus", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "selectorsFloatingMenus", PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "size", PropTypes__default["default"].oneOf(['xs', 'sm', 'md', 'lg'])), _ComposedModal$propTy);
+ComposedModal.defaultProps = {
+  onKeyDown: function onKeyDown() {},
+  selectorPrimaryFocus: '[data-modal-primary-focus]'
+};
+var ComposedModal$1 = ComposedModal;
 
 exports.ModalBody = ModalBody;
-exports.ModalFooter = ModalFooter;
-exports.ModalHeader = ModalHeader;
-exports["default"] = ComposedModal;
+exports["default"] = ComposedModal$1;