@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
333 lines (330 loc) • 7.54 kB
JavaScript
"use client";
import { c as _c } from "react-compiler-runtime";
import classNames from "classnames";
import { FocusTrap } from "focus-trap-react";
import { forwardRef, useEffect } from "react";
import useBreakpoint from "../../hooks/useBreakpoint.js";
import isInert from "../../utils/isInert.js";
import CloseButton from "../common/CloseButton.internal.js";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
/**
* Hideable right-hand sidebar
*
* @see https://bifrost.intility.com/react/drawer
*
* @example
* <Drawer
* header="Drawer header"
* isOpen={openState}
* onRequestClose={() => setOpenState(false)}
* >
* <p>Drawer content</p>
* </Drawer>
*/
const Drawer = /*#__PURE__*/forwardRef((t0, ref) => {
const $ = _c(49);
let children;
let className;
let footer;
let header;
let onRequestClose;
let props;
let t1;
let t2;
let t3;
let t4;
let t5;
if ($[0] !== t0) {
({
children,
className,
position: t1,
header,
footer,
isOpen: t2,
overlay: t3,
disableFocusTrap: t4,
noPadding: t5,
onRequestClose,
...props
} = t0);
$[0] = t0;
$[1] = children;
$[2] = className;
$[3] = footer;
$[4] = header;
$[5] = onRequestClose;
$[6] = props;
$[7] = t1;
$[8] = t2;
$[9] = t3;
$[10] = t4;
$[11] = t5;
} else {
children = $[1];
className = $[2];
footer = $[3];
header = $[4];
onRequestClose = $[5];
props = $[6];
t1 = $[7];
t2 = $[8];
t3 = $[9];
t4 = $[10];
t5 = $[11];
}
const position = t1 === undefined ? "right" : t1;
const isOpen = t2 === undefined ? false : t2;
const overlay = t3 === undefined ? undefined : t3;
const disableFocusTrap = t4 === undefined ? false : t4;
const noPadding = t5 === undefined ? false : t5;
const isLarge = useBreakpoint("large");
const overlayEnabled = overlay ?? (position !== "bottom" && !isLarge);
let t6;
if ($[12] !== onRequestClose) {
t6 = onRequestClose && /*#__PURE__*/_jsx(CloseButton, {
onClick: onRequestClose
});
$[12] = onRequestClose;
$[13] = t6;
} else {
t6 = $[13];
}
let t7;
if ($[14] !== header) {
t7 = header && /*#__PURE__*/_jsx("header", {
className: "bf-drawer-header",
"data-testid": "bf-drawer-header",
children: header
});
$[14] = header;
$[15] = t7;
} else {
t7 = $[15];
}
let t8;
if ($[16] !== children || $[17] !== t6 || $[18] !== t7) {
t8 = /*#__PURE__*/_jsxs(_Fragment, {
children: [t6, t7, children]
});
$[16] = children;
$[17] = t6;
$[18] = t7;
$[19] = t8;
} else {
t8 = $[19];
}
const drawerContent = t8;
const t9 = isOpen && overlayEnabled && !disableFocusTrap;
let t10;
if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
t10 = {
allowOutsideClick: true,
fallbackFocus: ".bf-drawer-focus-trap-fallback",
initialFocus: false
};
$[20] = t10;
} else {
t10 = $[20];
}
const t11 = position === "bottom";
let t12;
if ($[21] !== className || $[22] !== footer || $[23] !== isOpen || $[24] !== noPadding || $[25] !== onRequestClose || $[26] !== t11) {
t12 = classNames("bf-drawer", "bf-scrollbar-small", "bf-drawer-focus-trap-fallback", "bf-container", "bf-open-sans", className, {
"bf-drawer-open": isOpen,
"bf-drawer-with-footer": footer,
"bf-drawer-with-close": onRequestClose,
"bf-drawer-bottom": t11,
"bf-drawer-nopadding": noPadding
});
$[21] = className;
$[22] = footer;
$[23] = isOpen;
$[24] = noPadding;
$[25] = onRequestClose;
$[26] = t11;
$[27] = t12;
} else {
t12 = $[27];
}
const t13 = !isOpen;
let t14;
if ($[28] !== t13) {
t14 = isInert(t13);
$[28] = t13;
$[29] = t14;
} else {
t14 = $[29];
}
let t15;
if ($[30] !== drawerContent || $[31] !== footer) {
t15 = /*#__PURE__*/_jsx("div", {
children: footer ? /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx("div", {
className: "bf-drawer-content bf-scrollbar-small",
children: drawerContent
}), /*#__PURE__*/_jsx("div", {
className: "bf-drawer-footer",
children: footer
})]
}) : drawerContent
});
$[30] = drawerContent;
$[31] = footer;
$[32] = t15;
} else {
t15 = $[32];
}
let t16;
if ($[33] !== props || $[34] !== ref || $[35] !== t12 || $[36] !== t14 || $[37] !== t15) {
t16 = /*#__PURE__*/_jsx("div", {
className: t12,
"data-testid": "bf-drawer",
ref: ref,
tabIndex: -1,
inert: t14,
...props,
children: t15
});
$[33] = props;
$[34] = ref;
$[35] = t12;
$[36] = t14;
$[37] = t15;
$[38] = t16;
} else {
t16 = $[38];
}
let t17;
if ($[39] !== t16 || $[40] !== t9) {
t17 = /*#__PURE__*/_jsx(FocusTrap, {
active: t9,
focusTrapOptions: t10,
children: t16
});
$[39] = t16;
$[40] = t9;
$[41] = t17;
} else {
t17 = $[41];
}
let t18;
if ($[42] !== isOpen || $[43] !== onRequestClose || $[44] !== overlayEnabled) {
t18 = overlayEnabled && /*#__PURE__*/_jsx(Overlay, {
onRequestClose: onRequestClose,
open: isOpen
});
$[42] = isOpen;
$[43] = onRequestClose;
$[44] = overlayEnabled;
$[45] = t18;
} else {
t18 = $[45];
}
let t19;
if ($[46] !== t17 || $[47] !== t18) {
t19 = /*#__PURE__*/_jsxs(_Fragment, {
children: [t17, t18]
});
$[46] = t17;
$[47] = t18;
$[48] = t19;
} else {
t19 = $[48];
}
return t19;
});
Drawer.displayName = "Drawer";
// INTERNAL Overlay
const Overlay = t0 => {
const $ = _c(14);
const {
onRequestClose,
open
} = t0;
let t1;
let t2;
if ($[0] !== onRequestClose || $[1] !== open) {
t1 = () => {
if (!open || !onRequestClose) {
return;
}
const closeDrawerOnEsc = e => {
if (e.key === "Escape") {
e.stopPropagation();
onRequestClose(e);
}
};
document.addEventListener("keydown", closeDrawerOnEsc);
return () => {
document.removeEventListener("keydown", closeDrawerOnEsc);
};
};
t2 = [onRequestClose, open];
$[0] = onRequestClose;
$[1] = open;
$[2] = t1;
$[3] = t2;
} else {
t1 = $[2];
t2 = $[3];
}
useEffect(t1, t2);
let t3;
let t4;
if ($[4] !== open) {
t3 = () => {
if (!open) {
return;
}
document.documentElement.classList.add("bf-drawer-overlay-active");
return _temp;
};
t4 = [open];
$[4] = open;
$[5] = t3;
$[6] = t4;
} else {
t3 = $[5];
t4 = $[6];
}
useEffect(t3, t4);
let t5;
if ($[7] !== open) {
t5 = classNames("bf-drawer-overlay", {
"bf-drawer-overlay-open": open
});
$[7] = open;
$[8] = t5;
} else {
t5 = $[8];
}
let t6;
if ($[9] !== onRequestClose) {
t6 = e_0 => {
e_0.stopPropagation();
onRequestClose?.(e_0);
};
$[9] = onRequestClose;
$[10] = t6;
} else {
t6 = $[10];
}
let t7;
if ($[11] !== t5 || $[12] !== t6) {
t7 = /*#__PURE__*/_jsx("div", {
className: t5,
onClick: t6
});
$[11] = t5;
$[12] = t6;
$[13] = t7;
} else {
t7 = $[13];
}
return t7;
};
export default Drawer;
function _temp() {
document.documentElement.classList.remove("bf-drawer-overlay-active");
}