@kiwicom/orbit-components/lib/Dialog/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.

"use strict";
"use client";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _useFocusTrap = _interopRequireDefault(require("../hooks/useFocusTrap"));
var _Portal = _interopRequireDefault(require("../Portal"));
var _useTheme = _interopRequireDefault(require("../hooks/useTheme"));
var _Heading = _interopRequireDefault(require("../Heading"));
var _Text = _interopRequireDefault(require("../Text"));
var _Stack = _interopRequireDefault(require("../Stack"));
var _useLockScrolling = _interopRequireDefault(require("../hooks/useLockScrolling"));
var _useClickOutside = _interopRequireDefault(require("../hooks/useClickOutside"));
var _useRandomId = _interopRequireDefault(require("../hooks/useRandomId"));
var _consts = _interopRequireDefault(require("../hooks/useFocusTrap/consts"));
const ActionButtonWrapper = ({
  children
}) => {
  return /*#__PURE__*/React.createElement("div", {
    className: "lm:w-auto lm:[&>button]:flex-none lm:[&>button]:w-auto w-full [&>button]:w-full [&>button]:flex-auto"
  }, children);
};
const Dialog = ({
  dataTest,
  id,
  title,
  titleAs,
  description,
  primaryAction,
  secondaryAction,
  onClose,
  maxWidth,
  renderInPortal = true,
  illustration,
  lockScrolling = true,
  triggerRef
}) => {
  const wrapperRef = React.useRef(null);
  (0, _useLockScrolling.default)(wrapperRef, lockScrolling);
  const ref = React.useRef(null);
  const theme = (0, _useTheme.default)();
  (0, _useFocusTrap.default)(ref, true);
  React.useEffect(() => {
    const transitionLength = parseFloat(theme.orbit.durationFast) * 1000;
    const timer = setTimeout(() => {
      if (ref.current) {
        ref.current.focus();
      }
    }, transitionLength);
    const handleKeyDown = ev => {
      if (ev.key === "Escape" && onClose) {
        onClose();
      }
    };
    document.addEventListener("keydown", handleKeyDown);
    return () => {
      document.removeEventListener("keydown", handleKeyDown);
      clearTimeout(timer);
    };
  }, [theme.orbit.durationFast, onClose]);
  React.useEffect(() => {
    return () => {
      // eslint-disable-next-line react-hooks/exhaustive-deps
      triggerRef?.current?.focus();
    };
  }, [triggerRef]);
  React.useEffect(() => {
    if (ref.current) {
      const focusableElements = ref.current.querySelectorAll(_consts.default);
      if (focusableElements.length > 0) {
        focusableElements[0].focus();
      }
    }
  }, []);
  const handleClose = ev => {
    if (ref && ref.current && onClose) {
      if (ref.current && !ref.current.contains(ev.target)) onClose();
    }
  };
  (0, _useClickOutside.default)(ref, handleClose);
  const titleId = (0, _useRandomId.default)();
  const descriptionId = (0, _useRandomId.default)();
  const vars = {
    "--dialog-max-width": `${maxWidth}px`
  };
  const dialog = /*#__PURE__*/React.createElement("div", {
    role: "dialog",
    "aria-modal": "true",
    "aria-labelledby": titleId,
    "aria-describedby": description ? descriptionId : undefined,
    ref: wrapperRef,
    "data-test": dataTest,
    id: id,
    className: (0, _clsx.default)(["font-base", "size-full", "p-400 z-overlay box-border overflow-x-hidden bg-[rgba(0,0,0,0.5)]", "fixed inset-0", "motion-safe:duration-fast motion-safe:transition-opacity motion-safe:ease-in-out", "lm:opacity-100 lm:flex lm:items-center lm:justify-center"])
  }, /*#__PURE__*/React.createElement("div", {
    className: "flex min-h-full items-center"
  }, /*#__PURE__*/React.createElement("div", {
    ref: ref,
    style: vars,
    className: (0, _clsx.default)(["shadow-level4 pt-600 px-400 pb-400 bg-white-normal rounded-dialog-mobile box-border block w-full", "lm:min-w-dialog-width lm:p-600 lm:rounded-dialog-desktop", maxWidth != null && "lm:max-w-[var(--dialog-max-width)]"])
  }, illustration && /*#__PURE__*/React.createElement("div", {
    className: "mb-400 lm:text-start text-center"
  }, illustration), /*#__PURE__*/React.createElement("div", {
    className: "mb-400 gap-200 lm:text-start lm:[&>.orbit-text]:text-start flex flex-col text-center [&>.orbit-text]:text-center"
  }, title && /*#__PURE__*/React.createElement(_Heading.default, {
    type: "title3",
    align: "center",
    largeMobile: {
      align: "start"
    },
    role: undefined,
    as: titleAs,
    id: titleId
  }, title), description && /*#__PURE__*/React.createElement(_Text.default, {
    type: "secondary",
    id: descriptionId
  }, description)), /*#__PURE__*/React.createElement(_Stack.default, {
    direction: "column-reverse",
    spacing: "200",
    largeMobile: {
      direction: "row",
      justify: "end"
    }
  }, secondaryAction && /*#__PURE__*/React.createElement(ActionButtonWrapper, null, secondaryAction), /*#__PURE__*/React.createElement(ActionButtonWrapper, null, primaryAction)))));
  return renderInPortal ? /*#__PURE__*/React.createElement(_Portal.default, {
    renderInto: "modals"
  }, dialog) : dialog;
};
var _default = exports.default = Dialog;