@cbinsights/fds/lib/components/Dialog/index.js

Form: A design system by CB Insights

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.isElementOverflowing = exports.default = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _reactDom = _interopRequireDefault(require("react-dom"));

var _reactTransitionGroup = require("react-transition-group");

var _rafSchd = _interopRequireDefault(require("raf-schd"));

var _DenyIcon = _interopRequireDefault(require("../../icons/react/DenyIcon"));

var _IconButton = _interopRequireDefault(require("../IconButton"));

var _classcat = _interopRequireDefault(require("classcat"));

var DialogUi = _interopRequireWildcard(require("@radix-ui/react-dialog"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var isElementOverflowing = function isElementOverflowing(_ref) {
  var current = _ref.current;

  // Checking for current first is safer just in case,
  // and will also fail gracefully in tests
  if (current) {
    return current.scrollHeight > current.clientHeight;
  }

  return false;
};

exports.isElementOverflowing = isElementOverflowing;

var Dialog = function Dialog(_ref2) {
  var _ref2$role = _ref2.role,
      role = _ref2$role === void 0 ? 'dialog' : _ref2$role,
      _ref2$width = _ref2.width,
      width = _ref2$width === void 0 ? '500px' : _ref2$width,
      _ref2$height = _ref2.height,
      height = _ref2$height === void 0 ? '80vh' : _ref2$height,
      onDismiss = _ref2.onDismiss,
      alwaysShowBorder = _ref2.alwaysShowBorder,
      isOpen = _ref2.isOpen,
      title = _ref2.title,
      content = _ref2.content,
      footerContent = _ref2.footerContent,
      subTitle = _ref2.subTitle,
      _ref2$disablePortal = _ref2.disablePortal,
      disablePortal = _ref2$disablePortal === void 0 ? false : _ref2$disablePortal,
      _ref2$disableFocusTra = _ref2.disableFocusTrap,
      disableFocusTrap = _ref2$disableFocusTra === void 0 ? false : _ref2$disableFocusTra;
  var contentEl = (0, _react.useRef)(null);

  var _useState = (0, _react.useState)(false),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      isOverflowing = _useState2[0],
      setIsOverflowing = _useState2[1];

  var schdSetIsOverflowing = (0, _rafSchd.default)(setIsOverflowing);

  var handleResize = function handleResize() {
    schdSetIsOverflowing(isElementOverflowing(contentEl));
  };

  (0, _react.useEffect)(function () {
    if (!alwaysShowBorder) {
      handleResize(); // needs to fire once immediately on mount

      window.addEventListener('resize', handleResize);
      return function () {
        window.removeEventListener('resize', handleResize);
      };
    }

    return undefined;
  }, [alwaysShowBorder]);

  var dialogNode = /*#__PURE__*/_react.default.createElement(DialogUi.Root, {
    open: isOpen,
    onOpenChange: onDismiss,
    modal: !disableFocusTrap
  }, /*#__PURE__*/_react.default.createElement(DialogUi.Overlay, {
    "data-testid": "overlay",
    className: "dialog-overlay"
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: "dialog-zIndex dialog-wrapper"
  }, /*#__PURE__*/_react.default.createElement(DialogUi.Content, {
    onPointerDownOutside: function onPointerDownOutside(event) {
      return event.preventDefault();
    },
    asChild: true,
    className: "ease-in-out"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "dialog elevation--3",
    role: role,
    "aria-labelledby": title && 'a11y-dialog-title',
    "aria-describedby": "a11y-dialog-desc",
    tabIndex: -1,
    "aria-modal": "true",
    style: {
      maxWidth: width,
      maxHeight: height
    },
    "data-testid": "dialog"
  }, (title || onDismiss) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "dialog-header"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "bgColor--white padding--all border--bottom"
  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
    className: "padding--right--xl type--head4"
  }, title ? /*#__PURE__*/_react.default.createElement("span", {
    id: "a11y-dialog-title"
  }, title) : "\xA0", ' '), subTitle), onDismiss && /*#__PURE__*/_react.default.createElement(DialogUi.Trigger, {
    asChild: true
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "dialog-icon"
  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
    Icon: _DenyIcon.default,
    "aria-label": "Close",
    label: "Close"
  })))))), content && /*#__PURE__*/_react.default.createElement("div", {
    className: "dialog-content",
    ref: contentEl
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "padding--all bgColor--white"
  }, content)), footerContent && /*#__PURE__*/_react.default.createElement("div", {
    className: "dialog-footer"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classcat.default)([{
      'border--top': alwaysShowBorder || isOverflowing
    }, 'bgColor--white', 'padding--all'])
  }, footerContent))))));

  var transitionNode = /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
    timeout: 200,
    in: isOpen,
    classNames: "dialog",
    unmountOnExit: true
  }, dialogNode);

  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, disablePortal ? transitionNode : /*#__PURE__*/_reactDom.default.createPortal(transitionNode, document.body));
};

var _default = Dialog;
exports.default = _default;