@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
313 lines (312 loc) • 7.68 kB
JavaScript
"use client";
import { c as _c } from "react-compiler-runtime";
import React, { forwardRef, useLayoutEffect, useRef, useSyncExternalStore } from "react";
import classNames from "classnames";
import { faXmark } from "@fortawesome/free-solid-svg-icons/faXmark";
import useLocale from "../../hooks/useLocale.js";
import setRef from "../../utils/setRef.js";
import Icon from "../Icon/Icon.js";
import useFloatingMessage from "../../hooks/useFloatingMessage.js";
import { FloatingMessageStack } from "../FloatingMessage/FloatingMessage.js";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/**
* Dialog popup with a fullscreen backdrop overlay
*
* @see https://bifrost.intility.com/react/modal
*
* @example
* <Modal isOpen={open} onRequestClose={() => setOpen(false)}>
* Modal content
* </Modal>
*/
const Modal = /*#__PURE__*/forwardRef((t0, ref) => {
const $ = _c(62);
let children;
let className;
let header;
let onRequestClose;
let props;
let style;
let t1;
let t2;
let t3;
let t4;
let t5;
let t6;
let t7;
if ($[0] !== t0) {
({
children,
className,
header,
style,
width: t1,
isOpen: t2,
onRequestClose,
noPadding: t3,
noCloseButton: t4,
noCloseOnOverlayClick: t5,
noCloseOnEsc: t6,
transparent: t7,
...props
} = t0);
$[0] = t0;
$[1] = children;
$[2] = className;
$[3] = header;
$[4] = onRequestClose;
$[5] = props;
$[6] = style;
$[7] = t1;
$[8] = t2;
$[9] = t3;
$[10] = t4;
$[11] = t5;
$[12] = t6;
$[13] = t7;
} else {
children = $[1];
className = $[2];
header = $[3];
onRequestClose = $[4];
props = $[5];
style = $[6];
t1 = $[7];
t2 = $[8];
t3 = $[9];
t4 = $[10];
t5 = $[11];
t6 = $[12];
t7 = $[13];
}
const width = t1 === undefined ? "100%" : t1;
const isOpen = t2 === undefined ? false : t2;
const noPadding = t3 === undefined ? false : t3;
const noCloseButton = t4 === undefined ? false : t4;
const noCloseOnOverlayClick = t5 === undefined ? false : t5;
const noCloseOnEsc = t6 === undefined ? false : t6;
const transparent = t7 === undefined ? false : t7;
const locale = useLocale();
const {
_stack
} = useFloatingMessage();
const dialogRef = useRef(null);
const previousDialogMouseDownTarget = useRef(null);
let t8;
let t9;
if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
t8 = onStoreChange => {
const dialogElement = dialogRef.current;
if (!dialogElement) {
return _temp;
}
dialogElement.addEventListener("toggle", onStoreChange);
return () => {
dialogElement.removeEventListener("toggle", onStoreChange);
};
};
t9 = () => dialogRef.current?.open ?? false;
$[14] = t8;
$[15] = t9;
} else {
t8 = $[14];
t9 = $[15];
}
const dialogIsOpen = useSyncExternalStore(t8, t9, _temp2);
let t10;
let t11;
if ($[16] !== isOpen) {
t10 = () => {
if (isOpen && !dialogRef.current?.open) {
dialogRef.current?.showModal();
}
if (!isOpen && dialogRef.current?.open) {
dialogRef.current?.close();
}
};
t11 = [isOpen];
$[16] = isOpen;
$[17] = t10;
$[18] = t11;
} else {
t10 = $[17];
t11 = $[18];
}
useLayoutEffect(t10, t11);
let t12;
if ($[19] !== className) {
t12 = classNames(className, "bf-modal", "bf-scrollbar-small", "bf-open-sans");
$[19] = className;
$[20] = t12;
} else {
t12 = $[20];
}
const t13 = typeof width === "number" ? width + "px" : width;
let t14;
if ($[21] !== style || $[22] !== t13) {
t14 = {
...style,
"--bf-modal-width": t13
};
$[21] = style;
$[22] = t13;
$[23] = t14;
} else {
t14 = $[23];
}
const t15 = t14;
let t16;
if ($[24] !== noCloseOnEsc || $[25] !== onRequestClose || $[26] !== props) {
t16 = e => {
props.onCancel?.(e);
if (e.target !== dialogRef.current) {
return;
}
e.preventDefault();
if (noCloseOnEsc) {
return;
}
onRequestClose?.();
};
$[24] = noCloseOnEsc;
$[25] = onRequestClose;
$[26] = props;
$[27] = t16;
} else {
t16 = $[27];
}
let t17;
if ($[28] !== isOpen) {
t17 = () => {
if (isOpen) {
dialogRef.current?.showModal();
}
};
$[28] = isOpen;
$[29] = t17;
} else {
t17 = $[29];
}
let t18;
if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
t18 = e_0 => {
previousDialogMouseDownTarget.current = e_0.target;
};
$[30] = t18;
} else {
t18 = $[30];
}
let t19;
if ($[31] !== noCloseOnOverlayClick || $[32] !== onRequestClose) {
t19 = e_1 => {
if (dialogRef.current === e_1.target && previousDialogMouseDownTarget.current === e_1.target && !noCloseOnOverlayClick) {
onRequestClose?.();
}
};
$[31] = noCloseOnOverlayClick;
$[32] = onRequestClose;
$[33] = t19;
} else {
t19 = $[33];
}
let t20;
if ($[34] !== ref) {
t20 = r => {
setRef(ref, r);
setRef(dialogRef, r);
};
$[34] = ref;
$[35] = t20;
} else {
t20 = $[35];
}
let t21;
if ($[36] !== locale || $[37] !== noCloseButton || $[38] !== onRequestClose) {
t21 = onRequestClose && !noCloseButton && /*#__PURE__*/_jsx("button", {
type: "button",
onClick: () => onRequestClose(),
className: "bf-modal-close",
"aria-label": locale.closeModal,
children: /*#__PURE__*/_jsx(Icon, {
icon: faXmark
})
});
$[36] = locale;
$[37] = noCloseButton;
$[38] = onRequestClose;
$[39] = t21;
} else {
t21 = $[39];
}
let t22;
if ($[40] !== _stack || $[41] !== children || $[42] !== dialogIsOpen || $[43] !== header || $[44] !== noPadding || $[45] !== transparent) {
t22 = dialogIsOpen && /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsxs("div", {
className: classNames("bf-modal-content", {
"bf-modal-transparent": transparent,
"bf-no-padding": noPadding
}),
children: [header && /*#__PURE__*/_jsx("header", {
className: "bf-modal-header",
children: header
}), children]
}), _stack && /*#__PURE__*/_jsx(FloatingMessageStack, {})]
});
$[40] = _stack;
$[41] = children;
$[42] = dialogIsOpen;
$[43] = header;
$[44] = noPadding;
$[45] = transparent;
$[46] = t22;
} else {
t22 = $[46];
}
let t23;
if ($[47] !== children || $[48] !== dialogIsOpen || $[49] !== header) {
t23 = !dialogIsOpen && /*#__PURE__*/_jsxs("div", {
hidden: true,
children: [header, children]
});
$[47] = children;
$[48] = dialogIsOpen;
$[49] = header;
$[50] = t23;
} else {
t23 = $[50];
}
let t24;
if ($[51] !== props || $[52] !== t12 || $[53] !== t15 || $[54] !== t16 || $[55] !== t17 || $[56] !== t19 || $[57] !== t20 || $[58] !== t21 || $[59] !== t22 || $[60] !== t23) {
t24 = /*#__PURE__*/_jsxs("dialog", {
...props,
className: t12,
style: t15,
onCancel: t16,
onClose: t17,
onMouseDown: t18,
onClick: t19,
ref: t20,
children: [t21, t22, t23]
});
$[51] = props;
$[52] = t12;
$[53] = t15;
$[54] = t16;
$[55] = t17;
$[56] = t19;
$[57] = t20;
$[58] = t21;
$[59] = t22;
$[60] = t23;
$[61] = t24;
} else {
t24 = $[61];
}
return t24;
});
Modal.displayName = "Modal";
export default Modal;
function _temp() {}
function _temp2() {
return false;
}