@octopusdeploy/design-system-components
Version:
The design systems component library.
77 lines (76 loc) • 3.39 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Spotlight = Spotlight;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const material_1 = require("@mui/material");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const react_1 = require("react");
const react_dom_1 = require("react-dom");
function Spotlight(props) {
const { target, onOverlayClick, show } = props;
const [targetSize, setTargetSize] = (0, react_1.useState)([0, 0]);
(0, react_1.useLayoutEffect)(() => {
if (!target)
return;
function updateSize() {
if (!target)
return;
const elementRect = target.getBoundingClientRect();
const { width, height } = elementRect;
setTargetSize([width, height]);
}
window.addEventListener("resize", updateSize);
updateSize();
return () => window.removeEventListener("resize", updateSize);
}, [target]);
const padding = 8;
const [targetWidth, targetHeight] = targetSize;
const spotlightSizeStyles = {
height: Math.round(targetHeight) + padding * 2,
width: Math.round(targetWidth) + padding * 2,
};
if (!target)
return null;
const isFixedPosition = props.position === "fixed";
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(material_1.Fade, { in: show, timeout: 500, children: (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(styles.container, { [styles.containerAbsolutePosition]: !isFixedPosition, [styles.containerFixedPosition]: isFixedPosition }), onClick: onOverlayClick, children: target && ((0, jsx_runtime_1.jsx)(material_1.Popper, { placement: "top-start", disablePortal: true, open: show, anchorEl: target, popperOptions: {
strategy: "fixed",
}, modifiers: [
{ name: "flip", enabled: false },
{
name: "offset",
enabled: true,
options: {
offset: ({ reference }) => {
const popperHeight = reference.height;
return [-padding, -popperHeight - padding];
},
},
},
{ name: "preventOverflow", enabled: false },
{ name: "hide", enabled: false },
], children: (0, jsx_runtime_1.jsx)("div", { className: styles.spotlight, style: spotlightSizeStyles }) })) }) }), document.body) }));
}
const styles = {
container: (0, css_1.css)({
width: "100%",
zIndex: "auto",
backgroundColor: "#00000051",
mixBlendMode: "hard-light",
pointerEvents: "none",
}),
containerAbsolutePosition: (0, css_1.css)({
position: "absolute",
top: 0,
bottom: 0,
}),
containerFixedPosition: (0, css_1.css)({
position: "fixed",
top: 0,
height: "100vh",
}),
spotlight: (0, css_1.css)({
backgroundColor: "grey",
borderRadius: design_system_tokens_1.borderRadius.extraLarge,
}),
};