@carbon/react 1.27.0-rc.0 → 1.28.0-rc.0

package/es/components/Modal/Modal.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default, { useRef, useEffect } from 'react';
 import cx from 'classnames';
@@ -20,51 +20,51 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape, Enter } from '../../internal/keyboard/keys.js';
 
-var _Modal$propTypes;
-
-var _excluded = ["aria-label", "children", "className", "modalHeading", "modalLabel", "modalAriaLabel", "passiveModal", "secondaryButtonText", "primaryButtonText", "open", "onRequestClose", "onRequestSubmit", "onSecondarySubmit", "primaryButtonDisabled", "danger", "alert", "secondaryButtons", "selectorPrimaryFocus", "selectorsFloatingMenus", "shouldSubmitOnEnter", "size", "hasScrollingContent", "closeButtonLabel", "preventCloseOnClickOutside", "isFullWidth"];
-var getInstanceId = setupGetInstanceId();
-var Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
-  var _classNames, _classNames2;
-
-  var ariaLabelProp = _ref['aria-label'],
-      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,
-      isFullWidth = _ref.isFullWidth,
-      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");
+const getInstanceId = setupGetInstanceId();
+const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
+  let {
+    'aria-label': ariaLabelProp,
+    children,
+    className,
+    modalHeading,
+    modalLabel,
+    modalAriaLabel,
+    passiveModal,
+    secondaryButtonText,
+    primaryButtonText,
+    open,
+    onRequestClose,
+    onRequestSubmit,
+    onSecondarySubmit,
+    primaryButtonDisabled,
+    danger,
+    alert,
+    secondaryButtons,
+    selectorPrimaryFocus,
+    // eslint-disable-line
+    selectorsFloatingMenus,
+    // eslint-disable-line
+    shouldSubmitOnEnter,
+    // eslint-disable-line
+    size,
+    hasScrollingContent,
+    closeButtonLabel,
+    preventCloseOnClickOutside,
+    // eslint-disable-line
+    isFullWidth,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const button = useRef();
+  const secondaryButton = useRef();
+  const innerModal = useRef();
+  const startTrap = useRef();
+  const endTrap = useRef();
+  const modalInstanceId = `modal-${getInstanceId()}`;
+  const modalLabelId = `${prefix}--modal-header__label--${modalInstanceId}`;
+  const modalHeadingId = `${prefix}--modal-header__heading--${modalInstanceId}`;
+  const modalBodyId = `${prefix}--modal-body--${modalInstanceId}`;
+  const modalCloseButtonClass = `${prefix}--modal-close`;
 
   function isCloseButton(element) {
     return !onSecondarySubmit && element === secondaryButton.current || element.classList.contains(modalCloseButtonClass);
@@ -89,51 +89,58 @@ var Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   }
 
   function handleBlur(_ref2) {
-    var oldActiveNode = _ref2.target,
-        currentActiveNode = _ref2.relatedTarget;
+    let {
+      target: oldActiveNode,
+      relatedTarget: currentActiveNode
+    } = _ref2;
 
     if (open && currentActiveNode && oldActiveNode) {
-      var bodyNode = innerModal.current;
-      var startTrapNode = startTrap.current;
-      var endTrapNode = endTrap.current;
+      const {
+        current: bodyNode
+      } = innerModal;
+      const {
+        current: startTrapNode
+      } = startTrap;
+      const {
+        current: endTrapNode
+      } = endTrap;
       wrapFocus({
-        bodyNode: bodyNode,
-        startTrapNode: startTrapNode,
-        endTrapNode: endTrapNode,
-        currentActiveNode: currentActiveNode,
-        oldActiveNode: oldActiveNode,
-        selectorsFloatingMenus: selectorsFloatingMenus
+        bodyNode,
+        startTrapNode,
+        endTrapNode,
+        currentActiveNode,
+        oldActiveNode,
+        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"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--modal-container--").concat(size), size), _defineProperty(_classNames2, "".concat(prefix, "--modal-container--full-width"), isFullWidth), _classNames2));
-  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 || ariaLabelProp || modalAriaLabel || modalHeading;
-  var getAriaLabelledBy = modalLabel ? modalLabelId : modalHeadingId;
-  var hasScrollingContentProps = hasScrollingContent ? {
+  const onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
+  const modalClasses = cx(`${prefix}--modal`, {
+    [`${prefix}--modal-tall`]: !passiveModal,
+    'is-visible': open,
+    [`${prefix}--modal--danger`]: danger,
+    [className]: className
+  });
+  const containerClasses = cx(`${prefix}--modal-container`, {
+    [`${prefix}--modal-container--${size}`]: size,
+    [`${prefix}--modal-container--full-width`]: isFullWidth
+  });
+  const contentClasses = cx(`${prefix}--modal-content`, {
+    [`${prefix}--modal-scroll-content`]: hasScrollingContent
+  });
+  const footerClasses = cx(`${prefix}--modal-footer`, {
+    [`${prefix}--modal-footer--three-button`]: Array.isArray(secondaryButtons) && secondaryButtons.length === 2
+  });
+  const ariaLabel = modalLabel || ariaLabelProp || modalAriaLabel || modalHeading;
+  const getAriaLabelledBy = modalLabel ? modalLabelId : modalHeadingId;
+  const hasScrollingContentProps = hasScrollingContent ? {
     tabIndex: 0,
     role: 'region',
     'aria-label': ariaLabel,
     'aria-labelledby': getAriaLabelledBy
   } : {};
-  var alertDialogProps = {};
+  const alertDialogProps = {};
 
   if (alert && passiveModal) {
     alertDialogProps.role = 'alert';
@@ -144,18 +151,18 @@ var Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     alertDialogProps['aria-describedby'] = modalBodyId;
   }
 
-  useEffect(function () {
-    return function () {
-      toggleClass(document.body, "".concat(prefix, "--body--with-modal-open"), false);
+  useEffect(() => {
+    return () => {
+      toggleClass(document.body, `${prefix}--body--with-modal-open`, false);
     };
   }, [prefix]);
-  useEffect(function () {
-    toggleClass(document.body, "".concat(prefix, "--body--with-modal-open"), open);
+  useEffect(() => {
+    toggleClass(document.body, `${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(danger ? ".".concat(prefix, "--btn--secondary") : selectorPrimaryFocus) : null;
+  useEffect(() => {
+    const initialFocus = focusContainerElement => {
+      const containerElement = focusContainerElement || innerModal.current;
+      const primaryFocusElement = containerElement ? containerElement.querySelector(danger ? `.${prefix}--btn--secondary` : selectorPrimaryFocus) : null;
 
       if (primaryFocusElement) {
         return primaryFocusElement;
@@ -164,8 +171,8 @@ var Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
       return button && button.current;
     };
 
-    var focusButton = function focusButton(focusContainerElement) {
-      var target = initialFocus(focusContainerElement);
+    const focusButton = focusContainerElement => {
+      const target = initialFocus(focusContainerElement);
 
       if (target) {
         target.focus();
@@ -176,7 +183,20 @@ var Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
       focusButton(innerModal.current);
     }
   }, [open, selectorPrimaryFocus, danger, prefix]);
-  var modalBody = /*#__PURE__*/React__default.createElement("div", _extends({
+  const 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: `${modalCloseButtonClass}__icon`
+  }));
+  const modalBody = /*#__PURE__*/React__default.createElement("div", _extends({
     ref: innerModal,
     role: "dialog"
   }, alertDialogProps, {
@@ -185,27 +205,29 @@ var Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     "aria-modal": "true",
     tabIndex: "-1"
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--modal-header")
+    className: `${prefix}--modal-header`
   }, passiveModal && modalButton, modalLabel && /*#__PURE__*/React__default.createElement("h2", {
     id: modalLabelId,
-    className: "".concat(prefix, "--modal-header__label")
+    className: `${prefix}--modal-header__label`
   }, modalLabel), /*#__PURE__*/React__default.createElement("h3", {
     id: modalHeadingId,
-    className: "".concat(prefix, "--modal-header__heading")
+    className: `${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")
+    className: `${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;
+  }, Array.isArray(secondaryButtons) && secondaryButtons.length <= 2 ? secondaryButtons.map((_ref3, i) => {
+    let {
+      buttonText,
+      onClick: onButtonClick
+    } = _ref3;
     return /*#__PURE__*/React__default.createElement(Button, {
-      key: "".concat(buttonText, "-").concat(i),
+      key: `${buttonText}-${i}`,
       kind: "secondary",
       onClick: onButtonClick
     }, buttonText);
@@ -230,42 +252,181 @@ var Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     ref: startTrap,
     tabIndex: "0",
     role: "link",
-    className: "".concat(prefix, "--visually-hidden")
+    className: `${prefix}--visually-hidden`
   }, "Focus sentinel"), modalBody, /*#__PURE__*/React__default.createElement("span", {
     ref: endTrap,
     tabIndex: "0",
     role: "link",
-    className: "".concat(prefix, "--visually-hidden")
+    className: `${prefix}--visually-hidden`
   }, "Focus sentinel"));
 });
-Modal.propTypes = (_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(_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, "isFullWidth", PropTypes.bool), _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"));
+  alert: PropTypes.bool,
+
+  /**
+   * Required props for the accessibility label of the header
+   */
+  ['aria-label']: requiredIfGivenPropIsTruthy('hasScrollingContent', PropTypes.string),
+
+  /**
+   * Provide the contents of your Modal
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the modal root node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify an label for the close button of the modal; defaults to close
+   */
+  closeButtonLabel: PropTypes.string,
+
+  /**
+   * Specify whether the Modal is for dangerous actions
+   */
+  danger: PropTypes.bool,
+
+  /**
+   * Specify whether the modal contains scrolling content
+   */
+  hasScrollingContent: PropTypes.bool,
+
+  /**
+   * Specify the DOM element ID of the top-level node.
+   */
+  id: PropTypes.string,
+
+  /**
+   * Specify whether or not the Modal content should have any inner padding.
+   */
+  isFullWidth: PropTypes.bool,
+
+  /**
+   * Specify a label to be read by screen readers on the modal root node
+   */
+  modalAriaLabel: PropTypes.string,
+
+  /**
+   * Specify the content of the modal header title.
+   */
+  modalHeading: PropTypes.node,
+
+  /**
+   * Specify the content of the modal header label.
+   */
+  modalLabel: PropTypes.node,
+
+  /**
+   * Specify a handler for keypresses.
+   */
+  onKeyDown: PropTypes.func,
+
+  /**
+   * Specify a handler for closing modal.
+   * The handler should care of closing modal, e.g. changing `open` prop.
+   */
+  onRequestClose: PropTypes.func,
+
+  /**
+   * Specify a handler for "submitting" modal.
+   * The handler should care of closing modal, e.g. changing `open` prop, if necessary.
+   */
+  onRequestSubmit: PropTypes.func,
+
+  /**
+   * Specify a handler for the secondary button.
+   * Useful if separate handler from `onRequestClose` is desirable
+   */
+  onSecondarySubmit: PropTypes.func,
+
+  /**
+   * Specify whether the Modal is currently open
+   */
+  open: PropTypes.bool,
+
+  /**
+   * Specify whether the modal should be button-less
+   */
+  passiveModal: PropTypes.bool,
+
+  /**
+   * Prevent closing on click outside of modal
+   */
+  preventCloseOnClickOutside: PropTypes.bool,
+
+  /**
+   * Specify whether the Button should be disabled, or not
+   */
+  primaryButtonDisabled: PropTypes.bool,
+
+  /**
+   * Specify the text for the primary button
+   */
+  primaryButtonText: PropTypes.node,
+
+  /**
+   * Specify the text for the secondary button
+   */
+  secondaryButtonText: PropTypes.node,
+
+  /**
+   * Specify an array of config objects for secondary buttons
+   * (`Array<{
+   *   buttonText: string,
+   *   onClick: function,
+   * }>`).
+   */
+  secondaryButtons: (props, propName, componentName) => {
+    if (props.secondaryButtons) {
+      if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) {
+        return new Error(`${propName} needs to be an array of two button config objects`);
+      }
+
+      const shape = {
+        buttonText: PropTypes.node,
+        onClick: PropTypes.func
+      };
+      props[propName].forEach(secondaryButton => {
+        PropTypes.checkPropTypes(shape, secondaryButton, propName, componentName);
+      });
     }
 
-    var shape = {
-      buttonText: PropTypes.node,
-      onClick: PropTypes.func
-    };
-    props[propName].forEach(function (secondaryButton) {
-      PropTypes.checkPropTypes(shape, secondaryButton, propName, componentName);
-    });
-  }
+    return null;
+  },
+
+  /**
+   * Specify a CSS selector that matches the DOM element that should
+   * be focused when the Modal opens
+   */
+  selectorPrimaryFocus: PropTypes.string,
+
+  /**
+   * Specify CSS selectors that match DOM elements working as floating menus.
+   * Focusing on those elements won't trigger "focus-wrap" behavior
+   */
+  selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string),
 
-  return null;
-}), _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);
+  /**
+   * Specify if Enter key should be used as "submit" action
+   */
+  shouldSubmitOnEnter: PropTypes.bool,
+
+  /**
+   * Specify the size variant.
+   */
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg'])
+};
 Modal.defaultProps = {
-  onRequestClose: function onRequestClose() {},
-  onRequestSubmit: function onRequestSubmit() {},
+  onRequestClose: () => {},
+  onRequestSubmit: () => {},
   primaryButtonDisabled: false,
-  onKeyDown: function onKeyDown() {},
+  onKeyDown: () => {},
   passiveModal: false,
   modalHeading: '',
   modalLabel: '',