@carbon/react 1.8.0-rc.0 → 1.9.0

package/es/components/ComposedModal/next/ComposedModal.js

@@ -215,7 +215,7 @@ var ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedModa
     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.string), _defineProperty(_ComposedModal$propTy, "size", PropTypes.oneOf(['xs', 'sm', 'md', 'lg'])), _ComposedModal$propTy);
+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]'

package/es/components/Menu/Menu.js

@@ -311,7 +311,7 @@ Menu.propTypes = {
   /**
    * Optionally pass an element the Menu should be appended to as a child. Defaults to document.body.
    */
-  target: PropTypes.element,
+  target: PropTypes.object,
 
   /**
    * Specify the x position where this menu is rendered

package/es/components/Modal/Modal.js

@@ -5,311 +5,242 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass, objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { Component } from 'react';
+import React__default, { useRef, useEffect } from 'react';
 import cx from 'classnames';
 import { Close } from '@carbon/icons-react';
 import toggleClass from '../../tools/toggleClass.js';
 import Button from '../Button/Button.js';
 import ButtonSet from '../ButtonSet/ButtonSet.js';
-import deprecate from '../../prop-types/deprecate.js';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy.js';
 import wrapFocus, { elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
-import { PrefixContext } from '../../internal/usePrefix.js';
+import { usePrefix } from '../../internal/usePrefix.js';
 
-var _defineProperty2;
+var _Modal$propTypes;
 
-var _excluded = ["modalHeading", "modalLabel", "modalAriaLabel", "passiveModal", "hasForm", "secondaryButtonText", "primaryButtonText", "open", "onRequestClose", "onRequestSubmit", "onSecondarySubmit", "iconDescription", "primaryButtonDisabled", "danger", "alert", "secondaryButtons", "selectorPrimaryFocus", "selectorsFloatingMenus", "shouldSubmitOnEnter", "size", "hasScrollingContent", "closeButtonLabel", "preventCloseOnClickOutside"];
+var _excluded = ["children", "className", "modalHeading", "modalLabel", "modalAriaLabel", "passiveModal", "secondaryButtonText", "primaryButtonText", "open", "onRequestClose", "onRequestSubmit", "onSecondarySubmit", "primaryButtonDisabled", "danger", "alert", "secondaryButtons", "selectorPrimaryFocus", "selectorsFloatingMenus", "shouldSubmitOnEnter", "size", "hasScrollingContent", "closeButtonLabel", "preventCloseOnClickOutside"];
 var getInstanceId = setupGetInstanceId();
+var Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
+  var _classNames;
+
+  var children = _ref.children,
+      className = _ref.className,
+      modalHeading = _ref.modalHeading,
+      modalLabel = _ref.modalLabel,
+      modalAriaLabel = _ref.modalAriaLabel,
+      passiveModal = _ref.passiveModal,
+      secondaryButtonText = _ref.secondaryButtonText,
+      primaryButtonText = _ref.primaryButtonText,
+      open = _ref.open,
+      onRequestClose = _ref.onRequestClose,
+      onRequestSubmit = _ref.onRequestSubmit,
+      onSecondarySubmit = _ref.onSecondarySubmit,
+      primaryButtonDisabled = _ref.primaryButtonDisabled,
+      danger = _ref.danger,
+      alert = _ref.alert,
+      secondaryButtons = _ref.secondaryButtons,
+      selectorPrimaryFocus = _ref.selectorPrimaryFocus,
+      selectorsFloatingMenus = _ref.selectorsFloatingMenus,
+      shouldSubmitOnEnter = _ref.shouldSubmitOnEnter,
+      size = _ref.size,
+      hasScrollingContent = _ref.hasScrollingContent,
+      closeButtonLabel = _ref.closeButtonLabel,
+      preventCloseOnClickOutside = _ref.preventCloseOnClickOutside,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var button = useRef();
+  var secondaryButton = useRef();
+  var innerModal = useRef();
+  var startTrap = useRef();
+  var endTrap = useRef();
+  var modalInstanceId = "modal-".concat(getInstanceId());
+  var modalLabelId = "".concat(prefix, "--modal-header__label--").concat(modalInstanceId);
+  var modalHeadingId = "".concat(prefix, "--modal-header__heading--").concat(modalInstanceId);
+  var modalBodyId = "".concat(prefix, "--modal-body--").concat(modalInstanceId);
+  var modalCloseButtonClass = "".concat(prefix, "--modal-close");
+
+  function isCloseButton(element) {
+    return !onSecondarySubmit && element === secondaryButton.current || element.classList.contains(modalCloseButtonClass);
+  }
 
-var Modal = /*#__PURE__*/function (_Component) {
-  _inherits(Modal, _Component);
-
-  var _super = _createSuper(Modal);
-
-  function Modal() {
-    var _this;
-
-    _classCallCheck(this, Modal);
+  function handleKeyDown(evt) {
+    if (open) {
+      if (evt.which === 27) {
+        onRequestClose(evt);
+      }
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+      if (evt.which === 13 && shouldSubmitOnEnter && !isCloseButton(evt.target)) {
+        onRequestSubmit(evt);
+      }
     }
+  }
 
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "button", /*#__PURE__*/React__default.createRef());
-
-    _defineProperty(_assertThisInitialized(_this), "secondaryButton", /*#__PURE__*/React__default.createRef());
-
-    _defineProperty(_assertThisInitialized(_this), "outerModal", /*#__PURE__*/React__default.createRef());
-
-    _defineProperty(_assertThisInitialized(_this), "innerModal", /*#__PURE__*/React__default.createRef());
-
-    _defineProperty(_assertThisInitialized(_this), "startTrap", /*#__PURE__*/React__default.createRef());
-
-    _defineProperty(_assertThisInitialized(_this), "endTrap", /*#__PURE__*/React__default.createRef());
-
-    _defineProperty(_assertThisInitialized(_this), "modalInstanceId", "modal-".concat(getInstanceId()));
-
-    _defineProperty(_assertThisInitialized(_this), "modalLabelId", "".concat(_this.context, "--modal-header__label--").concat(_this.modalInstanceId));
-
-    _defineProperty(_assertThisInitialized(_this), "modalHeadingId", "".concat(_this.context, "--modal-header__heading--").concat(_this.modalInstanceId));
-
-    _defineProperty(_assertThisInitialized(_this), "modalBodyId", "".concat(_this.context, "--modal-body--").concat(_this.modalInstanceId));
-
-    _defineProperty(_assertThisInitialized(_this), "modalCloseButtonClass", "".concat(_this.context, "--modal-close"));
-
-    _defineProperty(_assertThisInitialized(_this), "isCloseButton", function (element) {
-      return !_this.props.onSecondarySubmit && element === _this.secondaryButton.current || element.classList.contains(_this.modalCloseButtonClass);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (evt) {
-      if (_this.props.open) {
-        if (evt.which === 27) {
-          _this.props.onRequestClose(evt);
-        }
-
-        if (evt.which === 13 && _this.props.shouldSubmitOnEnter && !_this.isCloseButton(evt.target)) {
-          _this.props.onRequestSubmit(evt);
-        }
-      }
-    });
+  function handleMousedown(evt) {
+    if (innerModal.current && !innerModal.current.contains(evt.target) && !elementOrParentIsFloatingMenu(evt.target, selectorsFloatingMenus) && !preventCloseOnClickOutside) {
+      onRequestClose(evt);
+    }
+  }
 
-    _defineProperty(_assertThisInitialized(_this), "handleMousedown", function (evt) {
-      if (_this.innerModal.current && !_this.innerModal.current.contains(evt.target) && !elementOrParentIsFloatingMenu(evt.target, _this.props.selectorsFloatingMenus) && !_this.props.preventCloseOnClickOutside) {
-        _this.props.onRequestClose(evt);
-      }
-    });
+  function handleBlur(_ref2) {
+    var oldActiveNode = _ref2.target,
+        currentActiveNode = _ref2.relatedTarget;
+
+    if (open && currentActiveNode && oldActiveNode) {
+      var bodyNode = innerModal.current;
+      var startTrapNode = startTrap.current;
+      var endTrapNode = endTrap.current;
+      wrapFocus({
+        bodyNode: bodyNode,
+        startTrapNode: startTrapNode,
+        endTrapNode: endTrapNode,
+        currentActiveNode: currentActiveNode,
+        oldActiveNode: oldActiveNode,
+        selectorsFloatingMenus: selectorsFloatingMenus
+      });
+    }
+  }
 
-    _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;
+  var onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
+  var modalClasses = cx("".concat(prefix, "--modal"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--modal-tall"), !passiveModal), _defineProperty(_classNames, 'is-visible', open), _defineProperty(_classNames, "".concat(prefix, "--modal--danger"), danger), _defineProperty(_classNames, className, className), _classNames));
+  var containerClasses = cx("".concat(prefix, "--modal-container"), _defineProperty({}, "".concat(prefix, "--modal-container--").concat(size), size));
+  var contentClasses = cx("".concat(prefix, "--modal-content"), _defineProperty({}, "".concat(prefix, "--modal-scroll-content"), hasScrollingContent));
+  var footerClasses = cx("".concat(prefix, "--modal-footer"), _defineProperty({}, "".concat(prefix, "--modal-footer--three-button"), Array.isArray(secondaryButtons) && secondaryButtons.length === 2));
+  var modalButton = /*#__PURE__*/React__default.createElement("button", {
+    className: modalCloseButtonClass,
+    type: "button",
+    onClick: onRequestClose,
+    title: ariaLabel,
+    "aria-label": closeButtonLabel ? closeButtonLabel : 'close',
+    ref: button
+  }, /*#__PURE__*/React__default.createElement(Close, {
+    size: 20,
+    "aria-hidden": "true",
+    tabIndex: "-1",
+    className: "".concat(modalCloseButtonClass, "__icon")
+  }));
+  var ariaLabel = modalLabel || ['aria-label'] || modalAriaLabel || modalHeading;
+  var getAriaLabelledBy = modalLabel ? modalLabelId : modalHeadingId;
+  var hasScrollingContentProps = hasScrollingContent ? {
+    tabIndex: 0,
+    role: 'region',
+    'aria-label': ariaLabel,
+    'aria-labelledby': getAriaLabelledBy
+  } : {};
+  var alertDialogProps = {};
+
+  if (alert && passiveModal) {
+    alertDialogProps.role = 'alert';
+  }
 
-      if (open && currentActiveNode && oldActiveNode) {
-        var bodyNode = _this.innerModal.current;
-        var startTrapNode = _this.startTrap.current;
-        var endTrapNode = _this.endTrap.current;
-        wrapFocus({
-          bodyNode: bodyNode,
-          startTrapNode: startTrapNode,
-          endTrapNode: endTrapNode,
-          currentActiveNode: currentActiveNode,
-          oldActiveNode: oldActiveNode,
-          selectorsFloatingMenus: selectorsFloatingMenus
-        });
-      }
-    });
+  if (alert && !passiveModal) {
+    alertDialogProps.role = 'alertdialog';
+    alertDialogProps['aria-describedby'] = modalBodyId;
+  }
 
-    _defineProperty(_assertThisInitialized(_this), "initialFocus", function (focusContainerElement) {
-      var containerElement = focusContainerElement || _this.innerModal.current;
-      var primaryFocusElement = containerElement ? containerElement.querySelector(_this.props.selectorPrimaryFocus) : null;
+  useEffect(function () {
+    return function () {
+      toggleClass(document.body, "".concat(prefix, "--body--with-modal-open"), false);
+    };
+  }, [prefix]);
+  useEffect(function () {
+    toggleClass(document.body, "".concat(prefix, "--body--with-modal-open"), open);
+  }, [open, prefix]);
+  useEffect(function () {
+    var initialFocus = function initialFocus(focusContainerElement) {
+      var containerElement = focusContainerElement || innerModal.current;
+      var primaryFocusElement = containerElement ? containerElement.querySelector(selectorPrimaryFocus) : null;
 
       if (primaryFocusElement) {
         return primaryFocusElement;
       }
 
-      return _this.button && _this.button.current;
-    });
+      return button && button.current;
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "focusButton", function (focusContainerElement) {
-      var target = _this.initialFocus(focusContainerElement);
+    var focusButton = function focusButton(focusContainerElement) {
+      var target = initialFocus(focusContainerElement);
 
       if (target) {
         target.focus();
       }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleTransitionEnd", function (evt) {
-      if (evt.target === evt.currentTarget && // Not to handle `onTransitionEnd` on child DOM nodes
-      _this.outerModal.current && _this.outerModal.current.offsetWidth && _this.outerModal.current.offsetHeight && _this.beingOpen) {
-        _this.focusButton(evt.currentTarget);
-
-        _this.beingOpen = false;
-      }
-    });
-
-    return _this;
-  }
-
-  _createClass(Modal, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (!prevProps.open && this.props.open) {
-        this.beingOpen = true;
-      } else if (prevProps.open && !this.props.open) {
-        this.beingOpen = false;
-      }
-
-      toggleClass(document.body, "".concat(this.context, "--body--with-modal-open"), this.props.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;
-      }
-
-      this.focusButton(this.innerModal.current);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _classNames, _classNames3;
-
-      var _this$props2 = this.props,
-          modalHeading = _this$props2.modalHeading,
-          modalLabel = _this$props2.modalLabel,
-          modalAriaLabel = _this$props2.modalAriaLabel,
-          passiveModal = _this$props2.passiveModal,
-          hasForm = _this$props2.hasForm,
-          secondaryButtonText = _this$props2.secondaryButtonText,
-          primaryButtonText = _this$props2.primaryButtonText,
-          open = _this$props2.open,
-          onRequestClose = _this$props2.onRequestClose,
-          onRequestSubmit = _this$props2.onRequestSubmit,
-          onSecondarySubmit = _this$props2.onSecondarySubmit,
-          iconDescription = _this$props2.iconDescription,
-          primaryButtonDisabled = _this$props2.primaryButtonDisabled,
-          danger = _this$props2.danger,
-          alert = _this$props2.alert,
-          secondaryButtons = _this$props2.secondaryButtons;
-          _this$props2.selectorPrimaryFocus;
-          _this$props2.selectorsFloatingMenus;
-          _this$props2.shouldSubmitOnEnter;
-          var size = _this$props2.size,
-          hasScrollingContent = _this$props2.hasScrollingContent,
-          closeButtonLabel = _this$props2.closeButtonLabel;
-          _this$props2.preventCloseOnClickOutside;
-          var other = _objectWithoutProperties(_this$props2, _excluded);
-
-      var prefix = this.context;
-      var onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
-      var modalClasses = cx((_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--modal"), true), _defineProperty(_classNames, "".concat(prefix, "--modal-tall"), !passiveModal), _defineProperty(_classNames, 'is-visible', open), _defineProperty(_classNames, "".concat(prefix, "--modal--danger"), this.props.danger), _defineProperty(_classNames, this.props.className, this.props.className), _classNames));
-      var containerClasses = cx("".concat(prefix, "--modal-container"), _defineProperty({}, "".concat(prefix, "--modal-container--").concat(size), size));
-      var contentClasses = cx("".concat(prefix, "--modal-content"), (_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefix, "--modal-content--with-form"), hasForm), _defineProperty(_classNames3, "".concat(prefix, "--modal-scroll-content"), hasScrollingContent), _classNames3));
-      var footerClasses = cx("".concat(prefix, "--modal-footer"), _defineProperty({}, "".concat(prefix, "--modal-footer--three-button"), Array.isArray(secondaryButtons) && secondaryButtons.length === 2));
-      var modalButton = /*#__PURE__*/React__default.createElement("button", {
-        className: this.modalCloseButtonClass,
-        type: "button",
-        onClick: onRequestClose,
-        title: ariaLabel ? ariaLabel : iconDescription,
-        "aria-label": closeButtonLabel ? closeButtonLabel : 'close',
-        ref: this.button
-      }, /*#__PURE__*/React__default.createElement(Close, {
-        size: 20,
-        "aria-hidden": "true",
-        tabIndex: "-1",
-        className: "".concat(this.modalCloseButtonClass, "__icon")
-      }));
-      var ariaLabel = modalLabel || this.props['aria-label'] || modalAriaLabel || modalHeading;
-      var getAriaLabelledBy = modalLabel ? this.modalLabelId : this.modalHeadingId;
-      var hasScrollingContentProps = hasScrollingContent ? {
-        tabIndex: 0,
-        role: 'region',
-        'aria-label': ariaLabel,
-        'aria-labelledby': getAriaLabelledBy
-      } : {};
-      var alertDialogProps = {};
-
-      if (alert && passiveModal) {
-        alertDialogProps.role = 'alert';
-      }
-
-      if (alert && !passiveModal) {
-        alertDialogProps.role = 'alertdialog';
-        alertDialogProps['aria-describedby'] = this.modalBodyId;
-      }
+    };
 
-      var modalBody = /*#__PURE__*/React__default.createElement("div", _extends({
-        ref: this.innerModal,
-        role: "dialog"
-      }, alertDialogProps, {
-        className: containerClasses,
-        "aria-label": ariaLabel,
-        "aria-modal": "true",
-        tabIndex: "-1"
-      }), /*#__PURE__*/React__default.createElement("div", {
-        className: "".concat(prefix, "--modal-header")
-      }, passiveModal && modalButton, modalLabel && /*#__PURE__*/React__default.createElement("h2", {
-        id: this.modalLabelId,
-        className: "".concat(prefix, "--modal-header__label")
-      }, modalLabel), /*#__PURE__*/React__default.createElement("h3", {
-        id: this.modalHeadingId,
-        className: "".concat(prefix, "--modal-header__heading")
-      }, modalHeading), !passiveModal && modalButton), /*#__PURE__*/React__default.createElement("div", _extends({
-        id: this.modalBodyId,
-        className: contentClasses
-      }, hasScrollingContentProps, {
-        "aria-labelledby": getAriaLabelledBy
-      }), this.props.children), hasScrollingContent && /*#__PURE__*/React__default.createElement("div", {
-        className: "".concat(prefix, "--modal-content--overflow-indicator")
-      }), !passiveModal && /*#__PURE__*/React__default.createElement(ButtonSet, {
-        className: footerClasses
-      }, Array.isArray(secondaryButtons) && secondaryButtons.length <= 2 ? secondaryButtons.map(function (_ref2, i) {
-        var buttonText = _ref2.buttonText,
-            onButtonClick = _ref2.onClick;
-        return /*#__PURE__*/React__default.createElement(Button, {
-          key: "".concat(buttonText, "-").concat(i),
-          kind: "secondary",
-          onClick: onButtonClick
-        }, buttonText);
-      }) : secondaryButtonText && /*#__PURE__*/React__default.createElement(Button, {
-        kind: "secondary",
-        onClick: onSecondaryButtonClick,
-        ref: this.secondaryButton
-      }, secondaryButtonText), /*#__PURE__*/React__default.createElement(Button, {
-        kind: danger ? 'danger' : 'primary',
-        disabled: primaryButtonDisabled,
-        onClick: onRequestSubmit,
-        ref: this.button
-      }, primaryButtonText)));
-      return /*#__PURE__*/React__default.createElement("div", _extends({}, other, {
-        onKeyDown: this.handleKeyDown,
-        onMouseDown: this.handleMousedown,
-        onBlur: this.handleBlur,
-        className: modalClasses,
-        role: "presentation",
-        onTransitionEnd: this.props.open ? this.handleTransitionEnd : undefined,
-        ref: this.outerModal
-      }), /*#__PURE__*/React__default.createElement("span", {
-        ref: this.startTrap,
-        tabIndex: "0",
-        role: "link",
-        className: "".concat(prefix, "--visually-hidden")
-      }, "Focus sentinel"), modalBody, /*#__PURE__*/React__default.createElement("span", {
-        ref: this.endTrap,
-        tabIndex: "0",
-        role: "link",
-        className: "".concat(prefix, "--visually-hidden")
-      }, "Focus sentinel"));
+    if (open) {
+      focusButton(innerModal.current);
     }
-  }]);
-
-  return Modal;
-}(Component);
-
-_defineProperty(Modal, "contextType", PrefixContext);
-
-_defineProperty(Modal, "propTypes", (_defineProperty2 = {
+  }, [open, selectorPrimaryFocus]);
+  var modalBody = /*#__PURE__*/React__default.createElement("div", _extends({
+    ref: innerModal,
+    role: "dialog"
+  }, alertDialogProps, {
+    className: containerClasses,
+    "aria-label": ariaLabel,
+    "aria-modal": "true",
+    tabIndex: "-1"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--modal-header")
+  }, passiveModal && modalButton, modalLabel && /*#__PURE__*/React__default.createElement("h2", {
+    id: modalLabelId,
+    className: "".concat(prefix, "--modal-header__label")
+  }, modalLabel), /*#__PURE__*/React__default.createElement("h3", {
+    id: modalHeadingId,
+    className: "".concat(prefix, "--modal-header__heading")
+  }, modalHeading), !passiveModal && modalButton), /*#__PURE__*/React__default.createElement("div", _extends({
+    id: modalBodyId,
+    className: contentClasses
+  }, hasScrollingContentProps, {
+    "aria-labelledby": getAriaLabelledBy
+  }), children), hasScrollingContent && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--modal-content--overflow-indicator")
+  }), !passiveModal && /*#__PURE__*/React__default.createElement(ButtonSet, {
+    className: footerClasses
+  }, Array.isArray(secondaryButtons) && secondaryButtons.length <= 2 ? secondaryButtons.map(function (_ref3, i) {
+    var buttonText = _ref3.buttonText,
+        onButtonClick = _ref3.onClick;
+    return /*#__PURE__*/React__default.createElement(Button, {
+      key: "".concat(buttonText, "-").concat(i),
+      kind: "secondary",
+      onClick: onButtonClick
+    }, buttonText);
+  }) : secondaryButtonText && /*#__PURE__*/React__default.createElement(Button, {
+    kind: "secondary",
+    onClick: onSecondaryButtonClick,
+    ref: secondaryButton
+  }, secondaryButtonText), /*#__PURE__*/React__default.createElement(Button, {
+    kind: danger ? 'danger' : 'primary',
+    disabled: primaryButtonDisabled,
+    onClick: onRequestSubmit,
+    ref: button
+  }, primaryButtonText)));
+  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+    onKeyDown: handleKeyDown,
+    onMouseDown: handleMousedown,
+    onBlur: handleBlur,
+    className: modalClasses,
+    role: "presentation",
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement("span", {
+    ref: startTrap,
+    tabIndex: "0",
+    role: "link",
+    className: "".concat(prefix, "--visually-hidden")
+  }, "Focus sentinel"), modalBody, /*#__PURE__*/React__default.createElement("span", {
+    ref: endTrap,
+    tabIndex: "0",
+    role: "link",
+    className: "".concat(prefix, "--visually-hidden")
+  }, "Focus sentinel"));
+});
+Modal.propTypes = (_Modal$propTypes = {
   /**
    * Specify whether the Modal is displaying an alert, error or warning
    * Should go hand in hand with the danger prop.
    */
   alert: PropTypes.bool
-}, _defineProperty(_defineProperty2, 'aria-label', requiredIfGivenPropIsTruthy('hasScrollingContent', PropTypes.string)), _defineProperty(_defineProperty2, "children", PropTypes.node), _defineProperty(_defineProperty2, "className", PropTypes.string), _defineProperty(_defineProperty2, "closeButtonLabel", PropTypes.string), _defineProperty(_defineProperty2, "danger", PropTypes.bool), _defineProperty(_defineProperty2, "focusTrap", deprecate(PropTypes.bool, "\nThe prop `focusTrap` for Modal has been deprecated, as the feature of `focusTrap` runs by default.")), _defineProperty(_defineProperty2, "hasForm", deprecate(PropTypes.bool, "\nThe prop `hasForm` for Modal has been deprecated, as the feature of `hasForm` runs by default.")), _defineProperty(_defineProperty2, "hasScrollingContent", PropTypes.bool), _defineProperty(_defineProperty2, "iconDescription", deprecate(PropTypes.string, 'The iconDescription prop is no longer needed and can be safely removed. This prop will be removed in the next major release of Carbon.')), _defineProperty(_defineProperty2, "id", PropTypes.string), _defineProperty(_defineProperty2, "modalAriaLabel", PropTypes.string), _defineProperty(_defineProperty2, "modalHeading", PropTypes.node), _defineProperty(_defineProperty2, "modalLabel", PropTypes.node), _defineProperty(_defineProperty2, "onKeyDown", PropTypes.func), _defineProperty(_defineProperty2, "onRequestClose", PropTypes.func), _defineProperty(_defineProperty2, "onRequestSubmit", PropTypes.func), _defineProperty(_defineProperty2, "onSecondarySubmit", PropTypes.func), _defineProperty(_defineProperty2, "open", PropTypes.bool), _defineProperty(_defineProperty2, "passiveModal", PropTypes.bool), _defineProperty(_defineProperty2, "preventCloseOnClickOutside", PropTypes.bool), _defineProperty(_defineProperty2, "primaryButtonDisabled", PropTypes.bool), _defineProperty(_defineProperty2, "primaryButtonText", PropTypes.node), _defineProperty(_defineProperty2, "secondaryButtonText", PropTypes.node), _defineProperty(_defineProperty2, "secondaryButtons", function secondaryButtons(props, propName, componentName) {
+}, _defineProperty(_Modal$propTypes, 'aria-label', requiredIfGivenPropIsTruthy('hasScrollingContent', PropTypes.string)), _defineProperty(_Modal$propTypes, "children", PropTypes.node), _defineProperty(_Modal$propTypes, "className", PropTypes.string), _defineProperty(_Modal$propTypes, "closeButtonLabel", PropTypes.string), _defineProperty(_Modal$propTypes, "danger", PropTypes.bool), _defineProperty(_Modal$propTypes, "hasScrollingContent", PropTypes.bool), _defineProperty(_Modal$propTypes, "id", PropTypes.string), _defineProperty(_Modal$propTypes, "modalAriaLabel", PropTypes.string), _defineProperty(_Modal$propTypes, "modalHeading", PropTypes.node), _defineProperty(_Modal$propTypes, "modalLabel", PropTypes.node), _defineProperty(_Modal$propTypes, "onKeyDown", PropTypes.func), _defineProperty(_Modal$propTypes, "onRequestClose", PropTypes.func), _defineProperty(_Modal$propTypes, "onRequestSubmit", PropTypes.func), _defineProperty(_Modal$propTypes, "onSecondarySubmit", PropTypes.func), _defineProperty(_Modal$propTypes, "open", PropTypes.bool), _defineProperty(_Modal$propTypes, "passiveModal", PropTypes.bool), _defineProperty(_Modal$propTypes, "preventCloseOnClickOutside", PropTypes.bool), _defineProperty(_Modal$propTypes, "primaryButtonDisabled", PropTypes.bool), _defineProperty(_Modal$propTypes, "primaryButtonText", PropTypes.node), _defineProperty(_Modal$propTypes, "secondaryButtonText", PropTypes.node), _defineProperty(_Modal$propTypes, "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"));
@@ -325,9 +256,8 @@ _defineProperty(Modal, "propTypes", (_defineProperty2 = {
   }
 
   return null;
-}), _defineProperty(_defineProperty2, "selectorPrimaryFocus", PropTypes.string), _defineProperty(_defineProperty2, "selectorsFloatingMenus", PropTypes.arrayOf(PropTypes.string)), _defineProperty(_defineProperty2, "shouldSubmitOnEnter", PropTypes.bool), _defineProperty(_defineProperty2, "size", PropTypes.oneOf(['xs', 'sm', 'md', 'lg'])), _defineProperty2));
-
-_defineProperty(Modal, "defaultProps", {
+}), _defineProperty(_Modal$propTypes, "selectorPrimaryFocus", PropTypes.string), _defineProperty(_Modal$propTypes, "selectorsFloatingMenus", PropTypes.arrayOf(PropTypes.string)), _defineProperty(_Modal$propTypes, "shouldSubmitOnEnter", PropTypes.bool), _defineProperty(_Modal$propTypes, "size", PropTypes.oneOf(['xs', 'sm', 'md', 'lg'])), _Modal$propTypes);
+Modal.defaultProps = {
   onRequestClose: function onRequestClose() {},
   onRequestSubmit: function onRequestSubmit() {},
   primaryButtonDisabled: false,
@@ -338,6 +268,7 @@ _defineProperty(Modal, "defaultProps", {
   preventCloseOnClickOutside: false,
   selectorPrimaryFocus: '[data-modal-primary-focus]',
   hasScrollingContent: false
-});
+};
+var Modal$1 = Modal;
 
-export { Modal as default };
+export { Modal$1 as default };

package/es/components/Modal/index.js

@@ -5,11 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import * as FeatureFlags from '@carbon/feature-flags';
-import ModalNext from './next/Modal.js';
-import Modal$2 from './Modal.js';
-
-var Modal = FeatureFlags.enabled('enable-v11-release') ? ModalNext : Modal$2;
-var Modal$1 = Modal;
-
-export { Modal$1 as default };
+import Modal from './Modal.js';
+export { default } from './Modal.js';

package/es/components/ModalWrapper/ModalWrapper.js

@@ -8,7 +8,7 @@
 import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass, objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
-import Modal from '../Modal/index.js';
+import Modal from '../Modal/Modal.js';
 import Button from '../Button/Button.js';
 import { ButtonKinds } from '../../prop-types/types.js';
 

package/es/components/NumberInput/NumberInput.Skeleton.js

@@ -13,7 +13,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 
 var _excluded = ["hideLabel", "className"];
 
-var NumberInputSkeleton = function NumberInputSkeleton(_ref) {
+function NumberInputSkeleton(_ref) {
   var hideLabel = _ref.hideLabel,
       className = _ref.className,
       rest = _objectWithoutProperties(_ref, _excluded);
@@ -26,7 +26,7 @@ var NumberInputSkeleton = function NumberInputSkeleton(_ref) {
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--number ").concat(prefix, "--skeleton")
   }));
-};
+}
 
 NumberInputSkeleton.propTypes = {
   /**
@@ -39,6 +39,5 @@ NumberInputSkeleton.propTypes = {
    */
   hideLabel: PropTypes.bool
 };
-var NumberInputSkeleton$1 = NumberInputSkeleton;
 
-export { NumberInputSkeleton$1 as default };
+export { NumberInputSkeleton as default };