@carbon/react 0.17.0-rc.0 → 1.0.0

package/es/components/Modal/next/Modal.js

@@ -0,0 +1,274 @@
+/**
+ * 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 { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+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 requiredIfGivenPropIsTruthy from '../../../prop-types/requiredIfGivenPropIsTruthy.js';
+import wrapFocus, { elementOrParentIsFloatingMenu } from '../../../internal/wrapFocus.js';
+import setupGetInstanceId from '../../../tools/setupGetInstanceId.js';
+import { usePrefix } from '../../../internal/usePrefix.js';
+
+var _Modal$propTypes;
+
+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);
+  }
+
+  function handleKeyDown(evt) {
+    if (open) {
+      if (evt.which === 27) {
+        onRequestClose(evt);
+      }
+
+      if (evt.which === 13 && shouldSubmitOnEnter && !isCloseButton(evt.target)) {
+        onRequestSubmit(evt);
+      }
+    }
+  }
+
+  function handleMousedown(evt) {
+    if (innerModal.current && !innerModal.current.contains(evt.target) && !elementOrParentIsFloatingMenu(evt.target, selectorsFloatingMenus) && !preventCloseOnClickOutside) {
+      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
+      });
+    }
+  }
+
+  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 (alert && !passiveModal) {
+    alertDialogProps.role = 'alertdialog';
+    alertDialogProps['aria-describedby'] = modalBodyId;
+  }
+
+  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 button && button.current;
+    };
+
+    var focusButton = function focusButton(focusContainerElement) {
+      var target = initialFocus(focusContainerElement);
+
+      if (target) {
+        target.focus();
+      }
+    };
+
+    if (open) {
+      focusButton(innerModal.current);
+    }
+  }, [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(_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"));
+    }
+
+    var shape = {
+      buttonText: PropTypes.node,
+      onClick: PropTypes.func
+    };
+    props[propName].forEach(function (secondaryButton) {
+      PropTypes.checkPropTypes(shape, secondaryButton, propName, componentName);
+    });
+  }
+
+  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);
+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
+};
+var ModalNext = Modal;
+
+export { ModalNext as default };

package/es/components/ModalWrapper/ModalWrapper.js

@@ -0,0 +1,164 @@
+/**
+ * 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, 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 Button from '../Button/Button.js';
+import { ButtonKinds } from '../../prop-types/types.js';
+
+var _excluded = ["children", "onKeyDown", "buttonTriggerText", "buttonTriggerClassName", "renderTriggerButtonIcon", "triggerButtonIconDescription", "triggerButtonKind", "disabled", "handleSubmit", "shouldCloseAfterSubmit", "selectorPrimaryFocus", "preventCloseOnClickOutside"];
+
+var ModalWrapper = /*#__PURE__*/function (_React$Component) {
+  _inherits(ModalWrapper, _React$Component);
+
+  var _super = _createSuper(ModalWrapper);
+
+  function ModalWrapper() {
+    var _this;
+
+    _classCallCheck(this, ModalWrapper);
+
+    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), "triggerButton", /*#__PURE__*/React__default.createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "modal", /*#__PURE__*/React__default.createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      isOpen: false
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleOpen", function () {
+      _this.setState({
+        isOpen: true
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleClose", function (evt) {
+      if (evt && !_this.modal.current.innerModal.current.contains(evt.target) && _this.props.preventCloseOnClickOutside) {
+        return;
+      } else {
+        _this.setState({
+          isOpen: false
+        }, function () {
+          return _this.triggerButton.current.focus();
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleOnRequestSubmit", function () {
+      var _this$props = _this.props,
+          handleSubmit = _this$props.handleSubmit,
+          shouldCloseAfterSubmit = _this$props.shouldCloseAfterSubmit;
+
+      if (handleSubmit()) {
+        if (shouldCloseAfterSubmit) {
+          _this.handleClose();
+        }
+      }
+    });
+
+    return _this;
+  }
+
+  _createClass(ModalWrapper, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props2 = this.props,
+          children = _this$props2.children,
+          _onKeyDown = _this$props2.onKeyDown,
+          buttonTriggerText = _this$props2.buttonTriggerText,
+          buttonTriggerClassName = _this$props2.buttonTriggerClassName,
+          renderTriggerButtonIcon = _this$props2.renderTriggerButtonIcon,
+          triggerButtonIconDescription = _this$props2.triggerButtonIconDescription,
+          triggerButtonKind = _this$props2.triggerButtonKind,
+          disabled = _this$props2.disabled;
+          _this$props2.handleSubmit;
+          _this$props2.shouldCloseAfterSubmit;
+          var selectorPrimaryFocus = _this$props2.selectorPrimaryFocus;
+          _this$props2.preventCloseOnClickOutside;
+          var other = _objectWithoutProperties(_this$props2, _excluded);
+
+      var props = _objectSpread2(_objectSpread2({}, other), {}, {
+        selectorPrimaryFocus: selectorPrimaryFocus,
+        open: this.state.isOpen,
+        onRequestClose: this.handleClose,
+        onRequestSubmit: this.handleOnRequestSubmit
+      });
+
+      return /*#__PURE__*/React__default.createElement("div", {
+        role: "presentation",
+        onKeyDown: function onKeyDown(evt) {
+          if (evt.which === 27) {
+            _this2.handleClose();
+
+            _onKeyDown(evt);
+          }
+        }
+      }, /*#__PURE__*/React__default.createElement(Button, {
+        className: buttonTriggerClassName,
+        disabled: disabled,
+        kind: triggerButtonKind,
+        renderIcon: renderTriggerButtonIcon,
+        iconDescription: triggerButtonIconDescription,
+        onClick: this.handleOpen,
+        ref: this.triggerButton
+      }, buttonTriggerText), /*#__PURE__*/React__default.createElement(Modal, _extends({
+        ref: this.modal
+      }, props), children));
+    }
+  }]);
+
+  return ModalWrapper;
+}(React__default.Component);
+
+_defineProperty(ModalWrapper, "propTypes", {
+  buttonTriggerClassName: PropTypes.string,
+  buttonTriggerText: PropTypes.node,
+  children: PropTypes.node,
+  disabled: PropTypes.bool,
+  handleOpen: PropTypes.func,
+  handleSubmit: PropTypes.func,
+  id: PropTypes.string,
+  modalBeforeContent: PropTypes.bool,
+  modalHeading: PropTypes.string,
+  modalLabel: PropTypes.string,
+  modalText: PropTypes.string,
+  onKeyDown: PropTypes.func,
+  passiveModal: PropTypes.bool,
+  preventCloseOnClickOutside: PropTypes.bool,
+  primaryButtonText: PropTypes.string,
+  renderTriggerButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  secondaryButtonText: PropTypes.string,
+  selectorPrimaryFocus: PropTypes.string,
+  shouldCloseAfterSubmit: PropTypes.bool,
+  status: PropTypes.string,
+  triggerButtonIconDescription: PropTypes.string,
+  triggerButtonKind: PropTypes.oneOf(ButtonKinds),
+  withHeader: PropTypes.bool
+});
+
+_defineProperty(ModalWrapper, "defaultProps", {
+  primaryButtonText: 'Save',
+  secondaryButtonText: 'Cancel',
+  triggerButtonIconDescription: 'Provide icon description if icon is used',
+  triggerButtonKind: 'primary',
+  disabled: false,
+  preventCloseOnClickOutside: false,
+  selectorPrimaryFocus: '[data-modal-primary-focus]',
+  onKeyDown: function onKeyDown() {}
+});
+
+export { ModalWrapper as default };