@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.
128 lines (127 loc) • 4.52 kB
JavaScript
"use client";
import * as React from "react";
import cx from "clsx";
import useFocusTrap from "../hooks/useFocusTrap";
import Portal from "../Portal";
import useTheme from "../hooks/useTheme";
import Heading from "../Heading";
import Text from "../Text";
import Stack from "../Stack";
import useLockScrolling from "../hooks/useLockScrolling";
import useClickOutside from "../hooks/useClickOutside";
import useRandomId from "../hooks/useRandomId";
import FOCUSABLE_ELEMENT_SELECTORS from "../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);
useLockScrolling(wrapperRef, lockScrolling);
const ref = React.useRef(null);
const theme = useTheme();
useFocusTrap(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(FOCUSABLE_ELEMENT_SELECTORS);
if (focusableElements.length > 0) {
focusableElements[0].focus();
}
}
}, []);
const handleClose = ev => {
if (ref && ref.current && onClose) {
if (ref.current && !ref.current.contains(ev.target)) onClose();
}
};
useClickOutside(ref, handleClose);
const titleId = useRandomId();
const descriptionId = useRandomId();
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: cx(["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: cx(["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, {
type: "title3",
align: "center",
largeMobile: {
align: "start"
},
role: undefined,
as: titleAs,
id: titleId
}, title), description && /*#__PURE__*/React.createElement(Text, {
type: "secondary",
id: descriptionId
}, description)), /*#__PURE__*/React.createElement(Stack, {
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, {
renderInto: "modals"
}, dialog) : dialog;
};
export default Dialog;