"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SidebarModal = void 0;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _faXmark = require("@fortawesome/free-solid-svg-icons/faXmark");
var _button = require("../button");
var _fontAwesomeIcon = require("../font-awesome-icon");
var _useFocusTrap = require("../hooks/use-focus-trap");
var _truncateWithTooltip = require("../truncate-with-tooltip");
var _modalService = _interopRequireDefault(require("../modal/modal-service"));
var _useTranslation = require("../hooks/use-translation");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
/**
 * Modal window which is rendered next to sidebar.
 * Requirements for parent component of this modal:
 * - position: relative;
 * - no overflow styles;
 * - should be rightmost or leftmost component on the page, like sidebar
 * @midnight-gray-supported
 * @uxr-only-supported
 * @alpine-light-supported
 */
const SidebarModal = ({
  title,
  children,
  footer,
  onClose = () => {},
  show,
  headerTagName = 'h4',
  headerClassName,
  headerTagClassName,
  contentClassName,
  footerClassName,
  modalBodyClassName,
  testId = 'sidebar-modal',
  closeButtonTestId = 'sidebar-modal-close-button',
  closeLabelText,
  shouldCloseOnEsc = true,
  showCloseIcon = true,
  disableClose = false,
  alignRight = false,
  ariaLabel
}) => {
  const {
    t
  } = (0, _useTranslation.useTranslation)();
  if (!show) {
    return null;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SidebarModalContent, {
    title: title,
    footer: footer,
    onClose: onClose,
    headerTagName: headerTagName,
    headerClassName: headerClassName,
    headerTagClassName: headerTagClassName,
    contentClassName: contentClassName,
    footerClassName: footerClassName,
    modalBodyClassName: modalBodyClassName,
    testId: testId,
    closeButtonTestId: closeButtonTestId,
    closeLabelText: closeLabelText ?? t('Close'),
    shouldCloseOnEsc: shouldCloseOnEsc,
    showCloseIcon: showCloseIcon,
    disableClose: disableClose,
    alignRight: alignRight,
    ariaLabel: ariaLabel ?? t('Sidebar modal'),
    children: children
  });
};

/**
 * This wrapper is required because hooks could not be called conditionally, useFocusTrap will not react on updated ref
 */
exports.SidebarModal = SidebarModal;
function SidebarModalContent({
  title,
  children,
  footer,
  onClose = () => {},
  headerTagName: HeaderTag = 'h4',
  headerClassName,
  headerTagClassName,
  contentClassName,
  footerClassName,
  modalBodyClassName,
  testId,
  closeButtonTestId,
  closeLabelText,
  shouldCloseOnEsc,
  showCloseIcon,
  disableClose,
  alignRight,
  ariaLabel
}) {
  const modalContainerRef = (0, _react.useRef)(null);
  const modalService = _modalService.default.getInstance();
  (0, _useFocusTrap.useFocusTrap)(modalContainerRef);
  (0, _react.useEffect)(() => {
    const modalKey = 'sidebar-modal';
    // Treat this as a specific case of a modal
    modalService?.closeAllDropdowns();
    modalService?.registerModal({
      key: modalKey,
      triggerClose: onClose,
      forceOpen: false,
      supportsStacking: false
    });
    return () => {
      modalService?.clearModal(modalKey);
    };
  }, [modalService, onClose]);
  (0, _react.useEffect)(() => {
    // The modal should get focus when opened, so the following Tab will move focus to the first focusable element within
    modalContainerRef.current?.focus();
  }, []);
  const onKeyPress = (0, _react.useCallback)(event => {
    if (shouldCloseOnEsc && !disableClose && event.key === 'Escape') {
      onClose();
    }
  }, [shouldCloseOnEsc, disableClose, onClose]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
      // when aria-modal="true", screen readers might limit interaction to the modal content only and, for example, not announce the content of typeahead
      role: "dialog",
      "aria-label": ariaLabel,
      tabIndex: -1 // Shouldn't be navigated directly by pressing Tab, but should be implicitly focusable when modal is opened and .focus() is called.
      ,
      className: (0, _classnames.default)('sidebar-modal', modalBodyClassName, {
        'align-right': alignRight
      }),
      "test-id": testId,
      onKeyUp: onKeyPress,
      ref: modalContainerRef,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("header", {
        className: (0, _classnames.default)('sidebar-modal-header', headerClassName),
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_truncateWithTooltip.TruncateWithTooltip, {
          className: (0, _classnames.default)(headerTagClassName),
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderTag, {
            className: (0, _classnames.default)(headerTagClassName),
            children: title
          })
        }), showCloseIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
          accentType: _button.ACCENT_TYPES.ROUND_ICON,
          onClick: disableClose ? undefined : onClose,
          size: _button.BUTTON_SIZES.XS,
          disabled: disableClose,
          "aria-label": closeLabelText,
          testId: closeButtonTestId,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
            icon: _faXmark.faXmark
          })
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: (0, _classnames.default)('sidebar-modal-content', contentClassName),
        children: children
      }), !!footer && /*#__PURE__*/(0, _jsxRuntime.jsx)("footer", {
        className: (0, _classnames.default)('sidebar-modal-footer', footerClassName),
        "test-id": "sidebar-modal-footer",
        children: footer
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      onClick: disableClose ? undefined : onClose,
      className: (0, _classnames.default)('sidebar-modal-backdrop', {
        'align-right': alignRight
      }),
      "test-id": "sidebar-modal-backdrop"
    })]
  });
}