@carbon/react 1.8.0-rc.0 → 1.8.0

package/lib/components/Modal/next/Modal.js

@@ -1,284 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
-var PropTypes = require('prop-types');
-var React = require('react');
-var cx = require('classnames');
-var iconsReact = require('@carbon/icons-react');
-var toggleClass = require('../../../tools/toggleClass.js');
-var Button = require('../../Button/Button.js');
-var ButtonSet = require('../../ButtonSet/ButtonSet.js');
-var requiredIfGivenPropIsTruthy = require('../../../prop-types/requiredIfGivenPropIsTruthy.js');
-var wrapFocus = require('../../../internal/wrapFocus.js');
-var setupGetInstanceId = require('../../../tools/setupGetInstanceId.js');
-var usePrefix = require('../../../internal/usePrefix.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
-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["default"]();
-var Modal = /*#__PURE__*/React__default["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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var button = React.useRef();
-  var secondaryButton = React.useRef();
-  var innerModal = React.useRef();
-  var startTrap = React.useRef();
-  var endTrap = React.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) && !wrapFocus.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["default"]({
-        bodyNode: bodyNode,
-        startTrapNode: startTrapNode,
-        endTrapNode: endTrapNode,
-        currentActiveNode: currentActiveNode,
-        oldActiveNode: oldActiveNode,
-        selectorsFloatingMenus: selectorsFloatingMenus
-      });
-    }
-  }
-
-  var onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
-  var modalClasses = cx__default["default"]("".concat(prefix, "--modal"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--modal-tall"), !passiveModal), _rollupPluginBabelHelpers.defineProperty(_classNames, 'is-visible', open), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--modal--danger"), danger), _rollupPluginBabelHelpers.defineProperty(_classNames, className, className), _classNames));
-  var containerClasses = cx__default["default"]("".concat(prefix, "--modal-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--modal-container--").concat(size), size));
-  var contentClasses = cx__default["default"]("".concat(prefix, "--modal-content"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--modal-scroll-content"), hasScrollingContent));
-  var footerClasses = cx__default["default"]("".concat(prefix, "--modal-footer"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--modal-footer--three-button"), Array.isArray(secondaryButtons) && secondaryButtons.length === 2));
-  var modalButton = /*#__PURE__*/React__default["default"].createElement("button", {
-    className: modalCloseButtonClass,
-    type: "button",
-    onClick: onRequestClose,
-    title: ariaLabel,
-    "aria-label": closeButtonLabel ? closeButtonLabel : 'close',
-    ref: button
-  }, /*#__PURE__*/React__default["default"].createElement(iconsReact.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;
-  }
-
-  React.useEffect(function () {
-    return function () {
-      toggleClass["default"](document.body, "".concat(prefix, "--body--with-modal-open"), false);
-    };
-  }, [prefix]);
-  React.useEffect(function () {
-    toggleClass["default"](document.body, "".concat(prefix, "--body--with-modal-open"), open);
-  }, [open, prefix]);
-  React.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["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-    ref: innerModal,
-    role: "dialog"
-  }, alertDialogProps, {
-    className: containerClasses,
-    "aria-label": ariaLabel,
-    "aria-modal": "true",
-    tabIndex: "-1"
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--modal-header")
-  }, passiveModal && modalButton, modalLabel && /*#__PURE__*/React__default["default"].createElement("h2", {
-    id: modalLabelId,
-    className: "".concat(prefix, "--modal-header__label")
-  }, modalLabel), /*#__PURE__*/React__default["default"].createElement("h3", {
-    id: modalHeadingId,
-    className: "".concat(prefix, "--modal-header__heading")
-  }, modalHeading), !passiveModal && modalButton), /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-    id: modalBodyId,
-    className: contentClasses
-  }, hasScrollingContentProps, {
-    "aria-labelledby": getAriaLabelledBy
-  }), children), hasScrollingContent && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--modal-content--overflow-indicator")
-  }), !passiveModal && /*#__PURE__*/React__default["default"].createElement(ButtonSet["default"], {
-    className: footerClasses
-  }, Array.isArray(secondaryButtons) && secondaryButtons.length <= 2 ? secondaryButtons.map(function (_ref3, i) {
-    var buttonText = _ref3.buttonText,
-        onButtonClick = _ref3.onClick;
-    return /*#__PURE__*/React__default["default"].createElement(Button["default"], {
-      key: "".concat(buttonText, "-").concat(i),
-      kind: "secondary",
-      onClick: onButtonClick
-    }, buttonText);
-  }) : secondaryButtonText && /*#__PURE__*/React__default["default"].createElement(Button["default"], {
-    kind: "secondary",
-    onClick: onSecondaryButtonClick,
-    ref: secondaryButton
-  }, secondaryButtonText), /*#__PURE__*/React__default["default"].createElement(Button["default"], {
-    kind: danger ? 'danger' : 'primary',
-    disabled: primaryButtonDisabled,
-    onClick: onRequestSubmit,
-    ref: button
-  }, primaryButtonText)));
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
-    onKeyDown: handleKeyDown,
-    onMouseDown: handleMousedown,
-    onBlur: handleBlur,
-    className: modalClasses,
-    role: "presentation",
-    ref: ref
-  }), /*#__PURE__*/React__default["default"].createElement("span", {
-    ref: startTrap,
-    tabIndex: "0",
-    role: "link",
-    className: "".concat(prefix, "--visually-hidden")
-  }, "Focus sentinel"), modalBody, /*#__PURE__*/React__default["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__default["default"].bool
-}, _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, 'aria-label', requiredIfGivenPropIsTruthy["default"]('hasScrollingContent', PropTypes__default["default"].string)), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "closeButtonLabel", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "danger", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "hasScrollingContent", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "id", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "modalAriaLabel", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "modalHeading", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "modalLabel", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "onKeyDown", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "onRequestClose", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "onRequestSubmit", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "onSecondarySubmit", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "open", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "passiveModal", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "preventCloseOnClickOutside", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "primaryButtonDisabled", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "primaryButtonText", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "secondaryButtonText", PropTypes__default["default"].node), _rollupPluginBabelHelpers.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__default["default"].node,
-      onClick: PropTypes__default["default"].func
-    };
-    props[propName].forEach(function (secondaryButton) {
-      PropTypes__default["default"].checkPropTypes(shape, secondaryButton, propName, componentName);
-    });
-  }
-
-  return null;
-}), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "selectorPrimaryFocus", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "selectorsFloatingMenus", PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "shouldSubmitOnEnter", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Modal$propTypes, "size", PropTypes__default["default"].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;
-
-exports["default"] = ModalNext;