@carbon/react 1.9.0 → 1.10.0-rc.0

package/es/components/ComposedModal/ComposedModal.js

@@ -5,627 +5,222 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty, objectWithoutProperties as _objectWithoutProperties, extends as _extends, inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, assertThisInitialized as _assertThisInitialized, createClass as _createClass, typeof as _typeof } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { Component } from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends, slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import Button from '../Button/Button.js';
-import ButtonSet from '../ButtonSet/ButtonSet.js';
+import { ModalHeader } from './ModalHeader.js';
+import { ModalFooter } from './ModalFooter.js';
 import cx from 'classnames';
-import { Close } from '@carbon/icons-react';
 import toggleClass from '../../tools/toggleClass.js';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy.js';
 import wrapFocus from '../../internal/wrapFocus.js';
-import { PrefixContext, usePrefix } from '../../internal/usePrefix.js';
+import { usePrefix } from '../../internal/usePrefix.js';
 
-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.forwardRef(function ModalBody(_ref, ref) {
+  var _cx;
 
-var ComposedModal = /*#__PURE__*/function (_Component) {
-  _inherits(ComposedModal, _Component);
-
-  var _super = _createSuper(ComposedModal);
-
-  function ComposedModal() {
-    var _this;
-
-    _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));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {});
-
-    _defineProperty(_assertThisInitialized(_this), "outerModal", /*#__PURE__*/React__default.createRef());
-
-    _defineProperty(_assertThisInitialized(_this), "innerModal", /*#__PURE__*/React__default.createRef());
-
-    _defineProperty(_assertThisInitialized(_this), "button", /*#__PURE__*/React__default.createRef());
-
-    _defineProperty(_assertThisInitialized(_this), "startSentinel", /*#__PURE__*/React__default.createRef());
-
-    _defineProperty(_assertThisInitialized(_this), "endSentinel", /*#__PURE__*/React__default.createRef());
-
-    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (evt) {
-      // Esc key
-      if (evt.which === 27) {
-        _this.closeModal(evt);
-      }
-
-      _this.props.onKeyDown(evt);
-    });
-
-    _defineProperty(_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);
-      }
-    });
-
-    _defineProperty(_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({
-          bodyNode: bodyNode,
-          startSentinelNode: startSentinelNode,
-          endSentinelNode: endSentinelNode,
-          currentActiveNode: currentActiveNode,
-          oldActiveNode: oldActiveNode,
-          selectorsFloatingMenus: selectorsFloatingMenus
-        });
-      }
-    });
-
-    _defineProperty(_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();
-        }
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleTransitionEnd", function (evt) {
-      if (_this.outerModal.current.offsetWidth && _this.outerModal.current.offsetHeight && _this.beingOpen) {
-        _this.focusButton(evt.currentTarget);
-
-        _this.beingOpen = false;
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "closeModal", function (evt) {
-      var onClose = _this.props.onClose;
-
-      if (!onClose || onClose(evt) !== false) {
-        _this.setState({
-          open: false
-        });
-      }
-    });
-
-    return _this;
-  }
-
-  _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(document.body, "".concat(this.context, "--body--with-modal-open"), this.state.open);
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      toggleClass(document.body, "".concat(this.context, "--body--with-modal-open"), false);
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      toggleClass(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 = _objectWithoutProperties(_this$props2, _excluded);
-
-      var modalClass = cx((_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--modal"), true), _defineProperty(_classNames, 'is-visible', open), _defineProperty(_classNames, className, className), _defineProperty(_classNames, "".concat(prefix, "--modal--danger"), danger), _classNames));
-      var containerClass = cx((_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--modal-container"), true), _defineProperty(_classNames2, "".concat(prefix, "--modal-container--").concat(size), size), _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.Children.toArray(children).map(function (child) {
-        switch (child.type) {
-          case React__default.createElement(ModalHeader).type:
-            generatedAriaLabel = child.props.label;
-            return /*#__PURE__*/React__default.cloneElement(child, {
-              closeModal: _this2.closeModal
-            });
-
-          case React__default.createElement(ModalFooter).type:
-            return /*#__PURE__*/React__default.cloneElement(child, {
-              closeModal: _this2.closeModal,
-              inputref: _this2.button
-            });
-
-          default:
-            return child;
-        }
-      });
-      return /*#__PURE__*/React__default.createElement("div", _extends({}, other, {
-        role: "presentation",
-        ref: function ref(node) {
-          if (node) {
-            _this2.outerModal.current = node;
-
-            if (typeof forwardedRef === 'function') {
-              forwardedRef(node);
-            } else if (_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.createElement("span", {
-        ref: this.startSentinel,
-        tabIndex: "0",
-        role: "link",
-        className: "".concat(prefix, "--visually-hidden")
-      }, "Focus sentinel"), /*#__PURE__*/React__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.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;
-}(Component);
-
-_defineProperty(ComposedModal, "contextType", PrefixContext);
-
-_defineProperty(ComposedModal, "defaultProps", {
-  onKeyDown: function onKeyDown() {},
-  selectorPrimaryFocus: '[data-modal-primary-focus]'
-});
-
-_defineProperty(ComposedModal, "propTypes", (_defineProperty2 = {}, _defineProperty(_defineProperty2, 'aria-label', PropTypes.string), _defineProperty(_defineProperty2, 'aria-labelledby', PropTypes.string), _defineProperty(_defineProperty2, "children", PropTypes.node), _defineProperty(_defineProperty2, "className", PropTypes.string), _defineProperty(_defineProperty2, "containerClassName", PropTypes.string), _defineProperty(_defineProperty2, "danger", PropTypes.bool), _defineProperty(_defineProperty2, "onClose", PropTypes.func), _defineProperty(_defineProperty2, "onKeyDown", PropTypes.func), _defineProperty(_defineProperty2, "open", PropTypes.bool), _defineProperty(_defineProperty2, "preventCloseOnClickOutside", PropTypes.bool), _defineProperty(_defineProperty2, "selectorPrimaryFocus", PropTypes.string), _defineProperty(_defineProperty2, "selectorsFloatingMenus", PropTypes.arrayOf(PropTypes.string)), _defineProperty(_defineProperty2, "size", PropTypes.oneOf(['xs', 'sm', 'md', 'lg'])), _defineProperty2));
-var ModalHeader = /*#__PURE__*/function (_Component2) {
-  _inherits(ModalHeader, _Component2);
-
-  var _super2 = _createSuper(ModalHeader);
-
-  function ModalHeader() {
-    var _this3;
-
-    _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));
-
-    _defineProperty(_assertThisInitialized(_this3), "handleCloseButtonClick", function (evt) {
-      _this3.props.closeModal(evt);
-
-      _this3.props.buttonOnClick();
-    });
-
-    return _this3;
-  }
-
-  _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 = _objectWithoutProperties(_this$props3, _excluded2);
-
-      var prefix = this.context;
-      var headerClass = cx((_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefix, "--modal-header"), true), _defineProperty(_classNames3, className, className), _classNames3));
-      var labelClass = cx((_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefix, "--modal-header__label ").concat(prefix, "--type-delta"), true), _defineProperty(_classNames4, labelClassName, labelClassName), _classNames4));
-      var titleClass = cx((_classNames5 = {}, _defineProperty(_classNames5, "".concat(prefix, "--modal-header__heading ").concat(prefix, "--type-beta"), true), _defineProperty(_classNames5, titleClassName, titleClassName), _classNames5));
-      var closeClass = cx((_classNames6 = {}, _defineProperty(_classNames6, "".concat(prefix, "--modal-close"), true), _defineProperty(_classNames6, closeClassName, closeClassName), _classNames6));
-      var closeIconClass = cx((_classNames7 = {}, _defineProperty(_classNames7, "".concat(prefix, "--modal-close__icon"), true), _defineProperty(_classNames7, closeIconClassName, closeIconClassName), _classNames7));
-      return /*#__PURE__*/React__default.createElement("div", _extends({
-        className: headerClass
-      }, other, {
-        ref: forwardedRef
-      }), label && /*#__PURE__*/React__default.createElement("h2", {
-        className: labelClass
-      }, label), title && /*#__PURE__*/React__default.createElement("h3", {
-        className: titleClass
-      }, title), children, /*#__PURE__*/React__default.createElement("button", {
-        onClick: this.handleCloseButtonClick,
-        className: closeClass,
-        title: iconDescription,
-        "aria-label": iconDescription,
-        type: "button"
-      }, /*#__PURE__*/React__default.createElement(Close, {
-        size: 20,
-        className: closeIconClass
-      })));
-    }
-  }]);
-
-  return ModalHeader;
-}(Component);
-
-_defineProperty(ModalHeader, "propTypes", {
-  /**
-   * Provide an optional function to be called when the close button is
-   * clicked
-   */
-  buttonOnClick: PropTypes.func,
-
-  /**
-   * Specify the content to be placed in the ModalHeader
-   */
-  children: PropTypes.node,
-
-  /**
-   * Specify an optional className to be applied to the modal header
-   */
-  className: PropTypes.string,
-
-  /**
-   * Specify an optional className to be applied to the modal close node
-   */
-  closeClassName: PropTypes.string,
-
-  /**
-   * Specify an optional className to be applied to the modal close icon node
-   */
-  closeIconClassName: PropTypes.string,
-
-  /**
-   * Provide an optional function to be called when the modal is closed
-   */
-  closeModal: PropTypes.func,
-
-  /**
-   * Specify a description for the close icon that can be read by screen
-   * readers
-   */
-  iconDescription: PropTypes.string,
-
-  /**
-   * Specify an optional label to be displayed
-   */
-  label: PropTypes.node,
-
-  /**
-   * Specify an optional className to be applied to the modal header label
-   */
-  labelClassName: PropTypes.string,
-
-  /**
-   * Specify an optional title to be displayed
-   */
-  title: PropTypes.node,
-
-  /**
-   * Specify an optional className to be applied to the modal heading
-   */
-  titleClassName: PropTypes.string
-});
-
-_defineProperty(ModalHeader, "contextType", PrefixContext);
-
-_defineProperty(ModalHeader, "defaultProps", {
-  iconDescription: 'Close',
-  buttonOnClick: function buttonOnClick() {}
-});
-
-var ModalBody = /*#__PURE__*/React__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 = _objectWithoutProperties(props, _excluded3);
+  var customClassName = _ref.className,
+      children = _ref.children,
+      hasForm = _ref.hasForm,
+      hasScrollingContent = _ref.hasScrollingContent,
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
-  var contentClass = cx((_classNames8 = {}, _defineProperty(_classNames8, "".concat(prefix, "--modal-content"), true), _defineProperty(_classNames8, "".concat(prefix, "--modal-content--with-form"), hasForm), _defineProperty(_classNames8, "".concat(prefix, "--modal-scroll-content"), hasScrollingContent), _defineProperty(_classNames8, className, className), _classNames8));
+  var contentClass = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--modal-content"), true), _defineProperty(_cx, "".concat(prefix, "--modal-content--with-form"), hasForm), _defineProperty(_cx, "".concat(prefix, "--modal-scroll-content"), hasScrollingContent), _defineProperty(_cx, customClassName, customClassName), _cx));
   var hasScrollingContentProps = hasScrollingContent ? {
     tabIndex: 0,
     role: 'region'
   } : {};
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", _extends({
     className: contentClass
-  }, hasScrollingContentProps, other, {
+  }, hasScrollingContentProps, rest, {
     ref: ref
   }), children), hasScrollingContent && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--modal-content--overflow-indicator")
   }));
 });
 ModalBody.propTypes = (_ModalBody$propTypes = {}, _defineProperty(_ModalBody$propTypes, 'aria-label', requiredIfGivenPropIsTruthy('hasScrollingContent', PropTypes.string)), _defineProperty(_ModalBody$propTypes, "children", PropTypes.node), _defineProperty(_ModalBody$propTypes, "className", PropTypes.string), _defineProperty(_ModalBody$propTypes, "hasForm", PropTypes.bool), _defineProperty(_ModalBody$propTypes, "hasScrollingContent", PropTypes.bool), _ModalBody$propTypes);
-var ModalFooter = /*#__PURE__*/function (_Component3) {
-  _inherits(ModalFooter, _Component3);
-
-  var _super3 = _createSuper(ModalFooter);
-
-  function ModalFooter() {
-    var _this4;
+var ComposedModal = /*#__PURE__*/React__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 = _objectWithoutProperties(_ref2, _excluded2);
 
-    _classCallCheck(this, ModalFooter);
-
-    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-      args[_key3] = arguments[_key3];
-    }
+  var prefix = usePrefix();
 
-    _this4 = _super3.call.apply(_super3, [this].concat(args));
+  var _useState = useState(open),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setisOpen = _useState2[1];
 
-    _defineProperty(_assertThisInitialized(_this4), "handleRequestClose", function (evt) {
-      _this4.props.closeModal(evt);
+  var _useState3 = useState(open),
+      _useState4 = _slicedToArray(_useState3, 2),
+      prevOpen = _useState4[0],
+      setPrevOpen = _useState4[1];
 
-      _this4.props.onRequestClose(evt);
-    });
+  var innerModal = useRef();
+  var button = useRef();
+  var startSentinel = useRef();
+  var endSentinel = useRef();
 
-    return _this4;
+  if (open !== prevOpen) {
+    setisOpen(open);
+    setPrevOpen(open);
   }
 
-  _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 = _objectWithoutProperties(_this$props4, _excluded4);
-
-      var prefix = this.context;
-      var footerClass = cx((_classNames9 = {}, _defineProperty(_classNames9, "".concat(prefix, "--modal-footer"), true), _defineProperty(_classNames9, className, className), _defineProperty(_classNames9, "".concat(prefix, "--modal-footer--three-button"), Array.isArray(secondaryButtons) && secondaryButtons.length === 2), _classNames9));
-      var primaryClass = cx(_defineProperty({}, primaryClassName, primaryClassName));
-      var secondaryClass = cx(_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.createElement(Button, {
-              key: "".concat(buttonText, "-").concat(i),
-              className: secondaryClass,
-              kind: "secondary",
-              onClick: onButtonClick || _this5.handleRequestClose
-            }, buttonText);
-          });
-        }
-
-        if (secondaryButtonText) {
-          return /*#__PURE__*/React__default.createElement(Button, {
-            className: secondaryClass,
-            onClick: _this5.handleRequestClose,
-            kind: "secondary"
-          }, secondaryButtonText);
-        }
-
-        return null;
-      };
-
-      return /*#__PURE__*/React__default.createElement(ButtonSet, _extends({
-        className: footerClass
-      }, other, {
-        ref: forwardedRef
-      }), /*#__PURE__*/React__default.createElement(SecondaryButtonSet, null), primaryButtonText && /*#__PURE__*/React__default.createElement(Button, {
-        onClick: onRequestSubmit,
-        className: primaryClass,
-        disabled: primaryButtonDisabled,
-        kind: danger ? 'danger' : 'primary',
-        ref: inputref
-      }, primaryButtonText), children);
+  function handleKeyDown(evt) {
+    // Esc key
+    if (evt.which === 27) {
+      closeModal(evt);
     }
-  }]);
-
-  return ModalFooter;
-}(Component);
-
-_defineProperty(ModalFooter, "propTypes", {
-  /**
-   * Pass in content that will be rendered in the Modal Footer
-   */
-  children: PropTypes.node,
 
-  /**
-   * Specify a custom className to be applied to the Modal Footer container
-   */
-  className: PropTypes.string,
+    onKeyDown(evt);
+  }
 
-  /**
-   * Specify an optional function that is called whenever the modal is closed
-   */
-  closeModal: PropTypes.func,
+  function handleClick(evt) {
+    if (!innerModal.current.contains(evt.target) && preventCloseOnClickOutside) {
+      return;
+    }
 
-  /**
-   * 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.bool,
+    if (innerModal.current && !innerModal.current.contains(evt.target)) {
+      closeModal(evt);
+    }
+  }
 
-  /**
-   * The `ref` callback for the primary button.
-   */
-  inputref: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any
-  })]),
+  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({
+        bodyNode: bodyNode,
+        startSentinelNode: startSentinelNode,
+        endSentinelNode: endSentinelNode,
+        currentActiveNode: currentActiveNode,
+        oldActiveNode: oldActiveNode,
+        selectorsFloatingMenus: selectorsFloatingMenus
+      });
+    }
+  }
 
-  /**
-   * Specify an optional function for when the modal is requesting to be
-   * closed
-   */
-  onRequestClose: PropTypes.func,
+  function closeModal(evt) {
+    if (!onClose || onClose(evt) !== false) {
+      setisOpen(false);
+    }
+  }
 
-  /**
-   * Specify an optional function for when the modal is requesting to be
-   * submitted
-   */
-  onRequestSubmit: PropTypes.func,
+  var modalClass = cx((_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--modal"), true), _defineProperty(_cx2, 'is-visible', isOpen), _defineProperty(_cx2, customClassName, customClassName), _defineProperty(_cx2, "".concat(prefix, "--modal--danger"), danger), _cx2));
+  var containerClass = cx((_cx3 = {}, _defineProperty(_cx3, "".concat(prefix, "--modal-container"), true), _defineProperty(_cx3, "".concat(prefix, "--modal-container--").concat(size), size), _defineProperty(_cx3, containerClassName, containerClassName), _cx3)); // Generate aria-label based on Modal Header label if one is not provided (L253)
 
-  /**
-   * Specify whether the primary button should be disabled
-   */
-  primaryButtonDisabled: PropTypes.bool,
+  var generatedAriaLabel;
+  var childrenWithProps = React__default.Children.toArray(children).map(function (child) {
+    switch (child.type) {
+      case React__default.createElement(ModalHeader).type:
+        generatedAriaLabel = child.props.label;
+        return /*#__PURE__*/React__default.cloneElement(child, {
+          closeModal: closeModal
+        });
 
-  /**
-   * Specify the text for the primary button
-   */
-  primaryButtonText: PropTypes.string,
+      case React__default.createElement(ModalFooter).type:
+        return /*#__PURE__*/React__default.cloneElement(child, {
+          closeModal: closeModal,
+          inputref: button
+        });
 
-  /**
-   * Specify a custom className to be applied to the primary button
-   */
-  primaryClassName: PropTypes.string,
+      default:
+        return child;
+    }
+  });
+  useEffect(function () {
+    if (prevOpen !== isOpen) {
+      toggleClass(document.body, "".concat(prefix, "--body--with-modal-open"), isOpen);
+    }
+  });
+  useEffect(function () {
+    return function () {
+      return toggleClass(document.body, "".concat(prefix, "--body--with-modal-open"), false);
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(function () {
+    toggleClass(document.body, "".concat(prefix, "--body--with-modal-open"), open);
+  }, [open, prefix]);
+  useEffect(function () {
+    var focusButton = function focusButton(focusContainerElement) {
+      if (focusContainerElement) {
+        var primaryFocusElement = focusContainerElement.querySelector(selectorPrimaryFocus);
 
-  /**
-   * Specify the text for the secondary button
-   */
-  secondaryButtonText: PropTypes.string,
+        if (primaryFocusElement) {
+          primaryFocusElement.focus();
+          return;
+        }
 
-  /**
-   * 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"));
+        if (button.current) {
+          button.current.focus();
+        }
       }
+    };
 
-      var shape = {
-        buttonText: PropTypes.node,
-        onClick: PropTypes.func
-      };
-      props[propName].forEach(function (secondaryButton) {
-        PropTypes.checkPropTypes(shape, secondaryButton, propName, componentName);
-      });
+    if (!open) {
+      return;
     }
 
-    return null;
-  },
-
-  /**
-   * Specify a custom className to be applied to the secondary button
-   */
-  secondaryClassName: PropTypes.string
-});
-
-_defineProperty(ModalFooter, "defaultProps", {
-  onRequestClose: function onRequestClose() {},
-  onRequestSubmit: function onRequestSubmit() {}
+    if (innerModal.current) {
+      focusButton(innerModal.current);
+    }
+  }, [open, selectorPrimaryFocus]);
+  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+    role: "presentation",
+    ref: ref,
+    "aria-hidden": !open,
+    onBlur: handleBlur,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    className: modalClass,
+    tabIndex: "-1"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: containerClass,
+    role: "dialog",
+    "aria-modal": "true",
+    "aria-label": ariaLabel ? ariaLabel : generatedAriaLabel,
+    "aria-labelledby": ariaLabelledBy
+  }, /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    ref: startSentinel,
+    className: "".concat(prefix, "--visually-hidden")
+  }, "Focus sentinel"), /*#__PURE__*/React__default.createElement("div", {
+    ref: innerModal,
+    className: "".concat(prefix, "--modal-container-body")
+  }, childrenWithProps), /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    ref: endSentinel,
+    className: "".concat(prefix, "--visually-hidden")
+  }, "Focus sentinel")));
 });
+ComposedModal.propTypes = (_ComposedModal$propTy = {}, _defineProperty(_ComposedModal$propTy, 'aria-label', PropTypes.string), _defineProperty(_ComposedModal$propTy, 'aria-labelledby', PropTypes.string), _defineProperty(_ComposedModal$propTy, "children", PropTypes.node), _defineProperty(_ComposedModal$propTy, "className", PropTypes.string), _defineProperty(_ComposedModal$propTy, "containerClassName", PropTypes.string), _defineProperty(_ComposedModal$propTy, "danger", PropTypes.bool), _defineProperty(_ComposedModal$propTy, "onClose", PropTypes.func), _defineProperty(_ComposedModal$propTy, "onKeyDown", PropTypes.func), _defineProperty(_ComposedModal$propTy, "open", PropTypes.bool), _defineProperty(_ComposedModal$propTy, "preventCloseOnClickOutside", PropTypes.bool), _defineProperty(_ComposedModal$propTy, "selectorPrimaryFocus", PropTypes.string), _defineProperty(_ComposedModal$propTy, "selectorsFloatingMenus", PropTypes.arrayOf(PropTypes.string)), _defineProperty(_ComposedModal$propTy, "size", PropTypes.oneOf(['xs', 'sm', 'md', 'lg'])), _ComposedModal$propTy);
+ComposedModal.defaultProps = {
+  onKeyDown: function onKeyDown() {},
+  selectorPrimaryFocus: '[data-modal-primary-focus]'
+};
+var ComposedModal$1 = ComposedModal;
 
-_defineProperty(ModalFooter, "contextType", PrefixContext);
-
-export { ModalBody, ModalFooter, ModalHeader, ComposedModal as default };
+export { ModalBody, ComposedModal$1 as default };