@carbon/react 0.17.0 → 1.0.1

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

@@ -0,0 +1,223 @@
+/**
+ * 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 { defineProperty as _defineProperty, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { ModalHeader } from './ModalHeader.js';
+import { ModalFooter } from '../ComposedModal.js';
+import cx from 'classnames';
+import toggleClass from '../../../tools/toggleClass.js';
+import requiredIfGivenPropIsTruthy from '../../../prop-types/requiredIfGivenPropIsTruthy.js';
+import wrapFocus from '../../../internal/wrapFocus.js';
+import { usePrefix } from '../../../internal/usePrefix.js';
+
+var _ModalBody$propTypes, _ComposedModal$propTy;
+
+var _excluded = ["className", "children", "hasForm", "hasScrollingContent"],
+    _excluded2 = ["aria-labelledby", "aria-label", "children", "className", "containerClassName", "danger", "onClose", "onKeyDown", "open", "preventCloseOnClickOutside", "selectorPrimaryFocus", "selectorsFloatingMenus", "size"];
+var ModalBody = /*#__PURE__*/React__default.forwardRef(function ModalBody(_ref, ref) {
+  var _cx;
+
+  var customClassName = _ref.className,
+      children = _ref.children,
+      hasForm = _ref.hasForm,
+      hasScrollingContent = _ref.hasScrollingContent,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var contentClass = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--modal-content"), true), _defineProperty(_cx, "".concat(prefix, "--modal-content--with-form"), hasForm), _defineProperty(_cx, "".concat(prefix, "--modal-scroll-content"), hasScrollingContent), _defineProperty(_cx, customClassName, customClassName), _cx));
+  var hasScrollingContentProps = hasScrollingContent ? {
+    tabIndex: 0,
+    role: 'region'
+  } : {};
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", _extends({
+    className: contentClass
+  }, hasScrollingContentProps, rest, {
+    ref: ref
+  }), children), hasScrollingContent && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--modal-content--overflow-indicator")
+  }));
+});
+ModalBody.propTypes = (_ModalBody$propTypes = {}, _defineProperty(_ModalBody$propTypes, 'aria-label', requiredIfGivenPropIsTruthy('hasScrollingContent', PropTypes.string)), _defineProperty(_ModalBody$propTypes, "children", PropTypes.node), _defineProperty(_ModalBody$propTypes, "className", PropTypes.string), _defineProperty(_ModalBody$propTypes, "hasForm", PropTypes.bool), _defineProperty(_ModalBody$propTypes, "hasScrollingContent", PropTypes.bool), _ModalBody$propTypes);
+var ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedModal(_ref2, ref) {
+  var _cx2, _cx3;
+
+  var ariaLabelledBy = _ref2['aria-labelledby'],
+      ariaLabel = _ref2['aria-label'],
+      children = _ref2.children,
+      customClassName = _ref2.className,
+      containerClassName = _ref2.containerClassName,
+      danger = _ref2.danger,
+      onClose = _ref2.onClose,
+      onKeyDown = _ref2.onKeyDown,
+      open = _ref2.open,
+      preventCloseOnClickOutside = _ref2.preventCloseOnClickOutside,
+      selectorPrimaryFocus = _ref2.selectorPrimaryFocus,
+      selectorsFloatingMenus = _ref2.selectorsFloatingMenus,
+      size = _ref2.size,
+      rest = _objectWithoutProperties(_ref2, _excluded2);
+
+  var prefix = usePrefix();
+
+  var _useState = useState(open),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setisOpen = _useState2[1];
+
+  var _useState3 = useState(open),
+      _useState4 = _slicedToArray(_useState3, 2),
+      prevOpen = _useState4[0],
+      setPrevOpen = _useState4[1];
+
+  var innerModal = useRef();
+  var button = useRef();
+  var startSentinel = useRef();
+  var endSentinel = useRef();
+
+  if (open !== prevOpen) {
+    setisOpen(open);
+    setPrevOpen(open);
+  }
+
+  function handleKeyDown(evt) {
+    // Esc key
+    if (evt.which === 27) {
+      closeModal(evt);
+    }
+
+    onKeyDown(evt);
+  }
+
+  function handleClick(evt) {
+    if (!innerModal.current.contains(evt.target) && preventCloseOnClickOutside) {
+      return;
+    }
+
+    if (innerModal.current && !innerModal.current.contains(evt.target)) {
+      closeModal(evt);
+    }
+  }
+
+  function handleBlur(_ref3) {
+    var oldActiveNode = _ref3.target,
+        currentActiveNode = _ref3.relatedTarget;
+
+    if (open && currentActiveNode && oldActiveNode) {
+      var bodyNode = innerModal.current;
+      var startSentinelNode = startSentinel.current;
+      var endSentinelNode = endSentinel.current;
+      wrapFocus({
+        bodyNode: bodyNode,
+        startSentinelNode: startSentinelNode,
+        endSentinelNode: endSentinelNode,
+        currentActiveNode: currentActiveNode,
+        oldActiveNode: oldActiveNode,
+        selectorsFloatingMenus: selectorsFloatingMenus
+      });
+    }
+  }
+
+  function closeModal(evt) {
+    if (!onClose || onClose(evt) !== false) {
+      setisOpen(false);
+    }
+  }
+
+  var modalClass = cx((_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--modal"), true), _defineProperty(_cx2, 'is-visible', isOpen), _defineProperty(_cx2, customClassName, customClassName), _defineProperty(_cx2, "".concat(prefix, "--modal--danger"), danger), _cx2));
+  var containerClass = cx((_cx3 = {}, _defineProperty(_cx3, "".concat(prefix, "--modal-container"), true), _defineProperty(_cx3, "".concat(prefix, "--modal-container--").concat(size), size), _defineProperty(_cx3, containerClassName, containerClassName), _cx3)); // Generate aria-label based on Modal Header label if one is not provided (L253)
+
+  var generatedAriaLabel;
+  var childrenWithProps = React__default.Children.toArray(children).map(function (child) {
+    switch (child.type) {
+      case React__default.createElement(ModalHeader).type:
+        generatedAriaLabel = child.props.label;
+        return /*#__PURE__*/React__default.cloneElement(child, {
+          closeModal: closeModal
+        });
+
+      case React__default.createElement(ModalFooter).type:
+        return /*#__PURE__*/React__default.cloneElement(child, {
+          closeModal: closeModal,
+          inputref: button
+        });
+
+      default:
+        return child;
+    }
+  });
+  useEffect(function () {
+    if (prevOpen !== isOpen) {
+      toggleClass(document.body, "".concat(prefix, "--body--with-modal-open"), isOpen);
+    }
+  });
+  useEffect(function () {
+    return function () {
+      return toggleClass(document.body, "".concat(prefix, "--body--with-modal-open"), false);
+    };
+  });
+  useEffect(function () {
+    toggleClass(document.body, "".concat(prefix, "--body--with-modal-open"), open);
+  }, [open, prefix]);
+  useEffect(function () {
+    var focusButton = function focusButton(focusContainerElement) {
+      if (focusContainerElement) {
+        var primaryFocusElement = focusContainerElement.querySelector(selectorPrimaryFocus);
+
+        if (primaryFocusElement) {
+          primaryFocusElement.focus();
+          return;
+        }
+
+        if (button.current) {
+          button.current.focus();
+        }
+      }
+    };
+
+    if (!open) {
+      return;
+    }
+
+    if (innerModal.current) {
+      focusButton(innerModal.current);
+    }
+  }, [open, selectorPrimaryFocus]);
+  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+    role: "presentation",
+    ref: ref,
+    onBlur: handleBlur,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    className: modalClass
+  }), /*#__PURE__*/React__default.createElement("span", {
+    ref: startSentinel,
+    tabIndex: "0",
+    role: "link",
+    className: "".concat(prefix, "--visually-hidden")
+  }, "Focus sentinel"), /*#__PURE__*/React__default.createElement("div", {
+    ref: innerModal,
+    className: containerClass,
+    role: "dialog",
+    "aria-modal": "true",
+    "aria-label": ariaLabel ? ariaLabel : generatedAriaLabel,
+    "aria-labelledby": ariaLabelledBy
+  }, childrenWithProps), /*#__PURE__*/React__default.createElement("span", {
+    ref: endSentinel,
+    tabIndex: "0",
+    role: "link",
+    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.defaultProps = {
+  onKeyDown: function onKeyDown() {},
+  selectorPrimaryFocus: '[data-modal-primary-focus]'
+};
+var ComposedModalNext = ComposedModal;
+
+export { ModalBody, ComposedModalNext as default };

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

@@ -0,0 +1,213 @@
+/**
+ * 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 React__default from 'react';
+import PropTypes from 'prop-types';
+import Button from '../../Button/Button.js';
+import ButtonSet from '../../ButtonSet/ButtonSet.js';
+import cx from 'classnames';
+import { usePrefix } from '../../../internal/usePrefix.js';
+
+var _excluded = ["children", "className", "closeModal", "danger", "inputref", "onRequestClose", "onRequestSubmit", "primaryButtonDisabled", "primaryButtonText", "primaryClassName", "secondaryButtonText", "secondaryButtons", "secondaryClassName"];
+
+function SecondaryButtonSet(_ref) {
+  var secondaryButtons = _ref.secondaryButtons,
+      secondaryButtonText = _ref.secondaryButtonText,
+      secondaryClassName = _ref.secondaryClassName,
+      closeModal = _ref.closeModal,
+      onRequestClose = _ref.onRequestClose;
+
+  function handleRequestClose(evt) {
+    closeModal(evt);
+    onRequestClose(evt);
+  }
+
+  if (Array.isArray(secondaryButtons) && secondaryButtons.length <= 2) {
+    return secondaryButtons.map(function (_ref2, i) {
+      var buttonText = _ref2.buttonText,
+          onButtonClick = _ref2.onClick;
+      return /*#__PURE__*/React__default.createElement(Button, {
+        key: "".concat(buttonText, "-").concat(i),
+        className: secondaryClassName,
+        kind: "secondary",
+        onClick: onButtonClick || handleRequestClose
+      }, buttonText);
+    });
+  }
+
+  if (secondaryButtonText) {
+    return /*#__PURE__*/React__default.createElement(Button, {
+      className: secondaryClassName,
+      onClick: handleRequestClose,
+      kind: "secondary"
+    }, secondaryButtonText);
+  }
+
+  return null;
+}
+
+SecondaryButtonSet.propTypes = {
+  closeModal: PropTypes.func,
+  onRequestClose: PropTypes.func,
+  secondaryButtonText: PropTypes.string,
+  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;
+  },
+  secondaryClassName: PropTypes.string
+};
+var ModalFooter = /*#__PURE__*/React__default.forwardRef(function ModalFooter(_ref3, ref) {
+  var _cx;
+
+  var children = _ref3.children,
+      customClassName = _ref3.className,
+      closeModal = _ref3.closeModal,
+      danger = _ref3.danger,
+      inputref = _ref3.inputref,
+      onRequestClose = _ref3.onRequestClose,
+      onRequestSubmit = _ref3.onRequestSubmit,
+      primaryButtonDisabled = _ref3.primaryButtonDisabled,
+      primaryButtonText = _ref3.primaryButtonText,
+      primaryClassName = _ref3.primaryClassName,
+      secondaryButtonText = _ref3.secondaryButtonText,
+      secondaryButtons = _ref3.secondaryButtons,
+      secondaryClassName = _ref3.secondaryClassName,
+      rest = _objectWithoutProperties(_ref3, _excluded);
+
+  var prefix = usePrefix();
+  var footerClass = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--modal-footer"), true), _defineProperty(_cx, customClassName, customClassName), _defineProperty(_cx, "".concat(prefix, "--modal-footer--three-button"), Array.isArray(secondaryButtons) && secondaryButtons.length === 2), _cx));
+  var secondaryButtonProps = {
+    closeModal: closeModal,
+    secondaryButtons: secondaryButtons,
+    secondaryButtonText: secondaryButtonText,
+    secondaryClassName: secondaryClassName,
+    onRequestClose: onRequestClose
+  };
+  return /*#__PURE__*/React__default.createElement(ButtonSet, _extends({
+    className: footerClass
+  }, rest, {
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement(SecondaryButtonSet, secondaryButtonProps), primaryButtonText && /*#__PURE__*/React__default.createElement(Button, {
+    onClick: onRequestSubmit,
+    className: primaryClassName,
+    disabled: primaryButtonDisabled,
+    kind: danger ? 'danger' : 'primary',
+    ref: inputref
+  }, primaryButtonText), children);
+});
+ModalFooter.propTypes = {
+  /**
+   * Pass in content that will be rendered in the Modal Footer
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify a custom className to be applied to the Modal Footer container
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify an optional function that is called whenever the modal is closed
+   */
+  closeModal: PropTypes.func,
+
+  /**
+   * Specify whether the primary button should be replaced with danger button.
+   * Note that this prop is not applied if you render primary/danger button by yourself
+   */
+  danger: PropTypes.bool,
+
+  /**
+   * The `ref` callback for the primary button.
+   */
+  inputref: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any
+  })]),
+
+  /**
+   * Specify an optional function for when the modal is requesting to be
+   * closed
+   */
+  onRequestClose: PropTypes.func,
+
+  /**
+   * Specify an optional function for when the modal is requesting to be
+   * submitted
+   */
+  onRequestSubmit: PropTypes.func,
+
+  /**
+   * Specify whether the primary button should be disabled
+   */
+  primaryButtonDisabled: PropTypes.bool,
+
+  /**
+   * Specify the text for the primary button
+   */
+  primaryButtonText: PropTypes.string,
+
+  /**
+   * Specify a custom className to be applied to the primary button
+   */
+  primaryClassName: PropTypes.string,
+
+  /**
+   * Specify the text for the secondary button
+   */
+  secondaryButtonText: PropTypes.string,
+
+  /**
+   * Specify an array of config objects for secondary buttons
+   * (`Array<{
+   *   buttonText: string,
+   *   onClick: function,
+   * }>`).
+   */
+  secondaryButtons: function secondaryButtons(props, propName, componentName) {
+    if (props.secondaryButtons) {
+      if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) {
+        return new Error("".concat(propName, " needs to be an array of two button config objects"));
+      }
+
+      var shape = {
+        buttonText: PropTypes.node,
+        onClick: PropTypes.func
+      };
+      props[propName].forEach(function (secondaryButton) {
+        PropTypes.checkPropTypes(shape, secondaryButton, propName, componentName);
+      });
+    }
+
+    return null;
+  },
+
+  /**
+   * Specify a custom className to be applied to the secondary button
+   */
+  secondaryClassName: PropTypes.string
+};
+ModalFooter.defaultProps = {
+  onRequestClose: function onRequestClose() {},
+  onRequestSubmit: function onRequestSubmit() {},
+  closeModal: function closeModal() {}
+};
+
+export { ModalFooter };

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

@@ -0,0 +1,127 @@
+/**
+ * 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 React__default from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { Close } from '@carbon/icons-react';
+import { usePrefix } from '../../../internal/usePrefix.js';
+
+var _excluded = ["buttonOnClick", "children", "className", "closeClassName", "closeIconClassName", "closeModal", "iconDescription", "label", "labelClassName", "title", "titleClassName"];
+var ModalHeader = /*#__PURE__*/React__default.forwardRef(function ModalHeader(_ref, ref) {
+  var _cx, _cx2, _cx3, _cx4, _cx5;
+
+  var buttonOnClick = _ref.buttonOnClick,
+      children = _ref.children,
+      customClassName = _ref.className,
+      closeClassName = _ref.closeClassName,
+      closeIconClassName = _ref.closeIconClassName,
+      closeModal = _ref.closeModal,
+      iconDescription = _ref.iconDescription,
+      label = _ref.label,
+      labelClassName = _ref.labelClassName,
+      title = _ref.title,
+      titleClassName = _ref.titleClassName,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+
+  function handleCloseButtonClick(evt) {
+    closeModal(evt);
+    buttonOnClick();
+  }
+
+  var headerClass = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--modal-header"), true), _defineProperty(_cx, customClassName, customClassName), _cx));
+  var labelClass = cx((_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--modal-header__label ").concat(prefix, "--type-delta"), true), _defineProperty(_cx2, labelClassName, labelClassName), _cx2));
+  var titleClass = cx((_cx3 = {}, _defineProperty(_cx3, "".concat(prefix, "--modal-header__heading ").concat(prefix, "--type-beta"), true), _defineProperty(_cx3, titleClassName, titleClassName), _cx3));
+  var closeClass = cx((_cx4 = {}, _defineProperty(_cx4, "".concat(prefix, "--modal-close"), true), _defineProperty(_cx4, closeClassName, closeClassName), _cx4));
+  var closeIconClass = cx((_cx5 = {}, _defineProperty(_cx5, "".concat(prefix, "--modal-close__icon"), true), _defineProperty(_cx5, closeIconClassName, closeIconClassName), _cx5));
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: headerClass
+  }, rest, {
+    ref: ref
+  }), label && /*#__PURE__*/React__default.createElement("h2", {
+    className: labelClass
+  }, label), title && /*#__PURE__*/React__default.createElement("h3", {
+    className: titleClass
+  }, title), children, /*#__PURE__*/React__default.createElement("button", {
+    onClick: handleCloseButtonClick,
+    className: closeClass,
+    title: iconDescription,
+    "aria-label": iconDescription,
+    type: "button"
+  }, /*#__PURE__*/React__default.createElement(Close, {
+    size: 20,
+    className: closeIconClass
+  })));
+});
+ModalHeader.propTypes = {
+  /**
+   * Provide an optional function to be called when the close button is
+   * clicked
+   */
+  buttonOnClick: PropTypes.func,
+
+  /**
+   * Specify the content to be placed in the ModalHeader
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the modal header
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify an optional className to be applied to the modal close node
+   */
+  closeClassName: PropTypes.string,
+
+  /**
+   * Specify an optional className to be applied to the modal close icon node
+   */
+  closeIconClassName: PropTypes.string,
+
+  /**
+   * Provide an optional function to be called when the modal is closed
+   */
+  closeModal: PropTypes.func,
+
+  /**
+   * Specify a description for the close icon that can be read by screen
+   * readers
+   */
+  iconDescription: PropTypes.string,
+
+  /**
+   * Specify an optional label to be displayed
+   */
+  label: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the modal header label
+   */
+  labelClassName: PropTypes.string,
+
+  /**
+   * Specify an optional title to be displayed
+   */
+  title: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the modal heading
+   */
+  titleClassName: PropTypes.string
+};
+ModalHeader.defaultProps = {
+  iconDescription: 'Close',
+  buttonOnClick: function buttonOnClick() {},
+  closeModal: function closeModal() {}
+};
+
+export { ModalHeader };