@carbon/react 0.17.0 → 1.0.1

package/es/components/Menu/_utils.js

@@ -0,0 +1,177 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var prefix = 'cds';
+function resetFocus(el) {
+  if (el) {
+    var _el$querySelectorAll;
+
+    Array.from((_el$querySelectorAll = el.querySelectorAll('[tabindex="0"]')) !== null && _el$querySelectorAll !== void 0 ? _el$querySelectorAll : []).forEach(function (node) {
+      node.tabIndex = -1;
+    });
+  }
+}
+function focusNode(node) {
+  if (node) {
+    node.tabIndex = 0;
+    node.focus();
+  }
+}
+function getValidNodes(list) {
+  var level = list.dataset.level;
+  var nodes = [];
+
+  if (level) {
+    var submenus = Array.from(list.querySelectorAll('[data-level]'));
+    nodes = Array.from(list.querySelectorAll("li.".concat(prefix, "--menu-option"))).filter(function (child) {
+      return !submenus.some(function (submenu) {
+        return submenu.contains(child);
+      });
+    });
+  }
+
+  return nodes.filter(function (node) {
+    return node.matches(":not(.".concat(prefix, "--menu-option--disabled)"));
+  });
+}
+function getNextNode(current, direction) {
+  var menu = getParentMenu(current);
+  var nodes = getValidNodes(menu);
+  var currentIndex = nodes.indexOf(current);
+  var nextNode = nodes[currentIndex + direction];
+  return nextNode || null;
+}
+function getFirstSubNode(node) {
+  var submenu = node.querySelector("ul.".concat(prefix, "--menu"));
+
+  if (submenu) {
+    var subnodes = getValidNodes(submenu);
+    return subnodes[0] || null;
+  }
+
+  return null;
+}
+function getParentNode(node) {
+  if (node) {
+    var parentNode = node.parentNode.closest("li.".concat(prefix, "--menu-option"));
+    return parentNode || null;
+  }
+
+  return null;
+}
+function getSubMenuOffset(node) {
+  if (node) {
+    var nodeStyles = getComputedStyle(node);
+    var spacings = parseInt(nodeStyles.paddingTop) + parseInt(nodeStyles.paddingBottom); // styles always in px, convert to number
+
+    var elementHeight = node.firstElementChild.offsetHeight;
+    return elementHeight + spacings || 0;
+  }
+
+  return 0;
+}
+function getParentMenu(el) {
+  if (el) {
+    var parentMenu = el.parentNode.closest("ul.".concat(prefix, "--menu"));
+    return parentMenu || null;
+  }
+
+  return null;
+}
+function clickedElementHasSubnodes(e) {
+  if (e) {
+    var closestFocusableElement = e.target.closest('[tabindex]');
+
+    if ((closestFocusableElement === null || closestFocusableElement === void 0 ? void 0 : closestFocusableElement.tagName) === 'LI') {
+      return getFirstSubNode(closestFocusableElement) !== null;
+    }
+  }
+
+  return false;
+}
+/**
+ * @param {number} [value] The value to cap
+ * @param {number} [min] The minimum of the range
+ * @param {number} [max] The maximum of the range
+ * @returns {number} Whether or not the element fits inside the boundaries on the given axis
+ */
+
+function capWithinRange(value, min, max) {
+  if (value > max) {
+    return max;
+  }
+
+  if (value < min) {
+    return min;
+  }
+
+  return value;
+}
+/**
+ * @param {number[]} [elementDimensions] The dimensions of the element: [width, height]
+ * @param {number[]} [position] The desired position of the element: [x, y]
+ * @param {number[]} [boundaries] The boundaries of the container the element should be contained in: [minX, minY, maxX, maxY]
+ * @param {string} [axis="x"] Which axis to check. Either "x" or "y"
+ * @returns {boolean} Whether or not the element fits inside the boundaries on the given axis
+ */
+
+function elementFits(elementDimensions, position, boundaries) {
+  var axis = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'x';
+  var index = axis === 'y' ? 1 : 0;
+  var min = boundaries[index];
+  var max = boundaries[index + 2];
+  var start = position[index];
+  var end = position[index] + elementDimensions[index];
+  return start >= min && end <= max;
+}
+/**
+ * @param {number[]} [elementDimensions] The dimensions of the element: [width, height]
+ * @param {number[]} [targetBoundaries] The boundaries of the target the element should attach to: [minX, minY, maxX, maxY]
+ * @param {number[]} [containerBoundaries] The boundaries of the container the element should be contained in: [minX, minY, maxX, maxY]
+ * @param {number} [preferredDirection=1] Which direction is preferred. Either 1 (right right) or -1 (to left)
+ * @param {boolean} [isRootLevel] Flag that indicates if the element is on level 1 (the root level)
+ * @param {object} [element] The list element - used to calculate the offset of submenus
+ * @returns {object} The determined position and direction of the element: { position: [x, y], direction: 1 | -1 }
+ */
+
+
+function getPosition(elementDimensions, targetBoundaries, containerBoundaries) {
+  var preferredDirection = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+  var isRootLevel = arguments.length > 4 ? arguments[4] : undefined;
+  var element = arguments.length > 5 ? arguments[5] : undefined;
+  var position = [0, 0];
+  var direction = preferredDirection; // x
+
+  position[0] = direction === 1 ? targetBoundaries[0] : targetBoundaries[2] - elementDimensions[0];
+  var xFits = elementFits(elementDimensions, position, containerBoundaries, 'x');
+
+  if (!xFits) {
+    direction = direction * -1;
+    position[0] = direction === 1 ? targetBoundaries[0] : targetBoundaries[2] - elementDimensions[0];
+  } // y
+
+
+  position[1] = targetBoundaries[3];
+  var yFits = elementFits(elementDimensions, position, containerBoundaries, 'y');
+
+  if (!yFits) {
+    position[1] = targetBoundaries[1] - elementDimensions[1];
+
+    if (!isRootLevel && element) {
+      // if sub-menu and not root level, consider offset
+      var diff = getSubMenuOffset(element);
+      position[1] += diff;
+    }
+  }
+
+  return {
+    position: position,
+    direction: direction
+  };
+}
+
+export { capWithinRange, clickedElementHasSubnodes, focusNode, getFirstSubNode, getNextNode, getParentMenu, getParentNode, getPosition, getSubMenuOffset, getValidNodes, resetFocus };

package/es/components/Menu/index.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import Menu from './Menu.js';
+export { default } from './Menu.js';
+import MenuDivider from './MenuDivider.js';
+export { default as MenuDivider } from './MenuDivider.js';
+import MenuGroup from './MenuGroup.js';
+export { default as MenuGroup } from './MenuGroup.js';
+import MenuItem from './MenuItem.js';
+export { default as MenuItem } from './MenuItem.js';
+import MenuRadioGroup from './MenuRadioGroup.js';
+export { default as MenuRadioGroup } from './MenuRadioGroup.js';
+import MenuSelectableItem from './MenuSelectableItem.js';
+export { default as MenuSelectableItem } from './MenuSelectableItem.js';
+
+Menu.MenuDivider = MenuDivider;
+Menu.MenuGroup = MenuGroup;
+Menu.MenuItem = MenuItem;
+Menu.MenuRadioGroup = MenuRadioGroup;
+Menu.MenuSelectableItem = MenuSelectableItem;

package/es/components/Modal/Modal.js

@@ -0,0 +1,343 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+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 PropTypes from 'prop-types';
+import React__default, { Component } 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';
+
+var _defineProperty2;
+
+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 getInstanceId = setupGetInstanceId();
+
+var Modal = /*#__PURE__*/function (_Component) {
+  _inherits(Modal, _Component);
+
+  var _super = _createSuper(Modal);
+
+  function Modal() {
+    var _this;
+
+    _classCallCheck(this, Modal);
+
+    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), "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);
+        }
+      }
+    });
+
+    _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);
+      }
+    });
+
+    _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 startTrapNode = _this.startTrap.current;
+        var endTrapNode = _this.endTrap.current;
+        wrapFocus({
+          bodyNode: bodyNode,
+          startTrapNode: startTrapNode,
+          endTrapNode: endTrapNode,
+          currentActiveNode: currentActiveNode,
+          oldActiveNode: oldActiveNode,
+          selectorsFloatingMenus: selectorsFloatingMenus
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "initialFocus", function (focusContainerElement) {
+      var containerElement = focusContainerElement || _this.innerModal.current;
+      var primaryFocusElement = containerElement ? containerElement.querySelector(_this.props.selectorPrimaryFocus) : null;
+
+      if (primaryFocusElement) {
+        return primaryFocusElement;
+      }
+
+      return _this.button && _this.button.current;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "focusButton", function (focusContainerElement) {
+      var target = _this.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"));
+    }
+  }]);
+
+  return Modal;
+}(Component);
+
+_defineProperty(Modal, "contextType", PrefixContext);
+
+_defineProperty(Modal, "propTypes", (_defineProperty2 = {
+  /**
+   * 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) {
+  if (props.secondaryButtons) {
+    if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) {
+      return new Error("".concat(propName, " needs to be an array of two button config objects"));
+    }
+
+    var shape = {
+      buttonText: PropTypes.node,
+      onClick: PropTypes.func
+    };
+    props[propName].forEach(function (secondaryButton) {
+      PropTypes.checkPropTypes(shape, secondaryButton, propName, componentName);
+    });
+  }
+
+  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", {
+  onRequestClose: function onRequestClose() {},
+  onRequestSubmit: function onRequestSubmit() {},
+  primaryButtonDisabled: false,
+  onKeyDown: function onKeyDown() {},
+  passiveModal: false,
+  modalHeading: '',
+  modalLabel: '',
+  preventCloseOnClickOutside: false,
+  selectorPrimaryFocus: '[data-modal-primary-focus]',
+  hasScrollingContent: false
+});
+
+export { Modal as default };

package/es/components/Modal/index.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+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 };