@octopusdeploy/design-system-components
Version:
The design systems component library.
203 lines (202 loc) • 8.66 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.DialogBase = DialogBase;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const react_1 = require("react");
const React = __importStar(require("react"));
const useFocusTrap_1 = require("../../hooks/useFocusTrap");
const isHTMLElement_1 = require("../../utils/isHTMLElement");
const Overlay_1 = require("./Overlay");
const dialogBreakpoints_styles_1 = require("./dialogBreakpoints.styles");
function DialogBase(props) {
const { children, open, onClose, onClosed, closeOnEscape = true, closeOnBackdropClick = true, autoFocusFirstElement = true } = props;
const focusFirstElement = (0, useFocusTrap_1.useFocusFirstFocusableElement)();
const latestCloseRef = React.useRef(props.onClose);
latestCloseRef.current = props.onClose;
const [dialogElement, setDialogElement] = (0, react_1.useState)(null);
(0, useFocusTrap_1.useFocusTrap)(dialogElement, open);
const [isClosing, setIsClosing] = React.useState(false);
const [shouldRender, setShouldRender] = React.useState(open);
const hasStartedClosingRef = React.useRef(false);
const triggerElementRef = React.useRef(null);
const hasCapturedTriggerRef = React.useRef(false);
const closedViaEscapeRef = React.useRef(false);
const handleClose = (0, react_1.useCallback)(() => {
setIsClosing(true);
hasStartedClosingRef.current = true;
latestCloseRef.current?.();
}, []);
const handleKeyDown = (0, react_1.useCallback)((event) => {
if (closeOnEscape && event.key === "Escape" && event.target instanceof HTMLElement) {
// Record that this close was keyboard-driven so focus restoration can show the ring.
closedViaEscapeRef.current = true;
handleClose();
}
}, [closeOnEscape, handleClose]);
React.useEffect(() => {
if (!open)
return;
document.addEventListener("keydown", handleKeyDown);
return () => {
document.removeEventListener("keydown", handleKeyDown);
};
}, [handleKeyDown, open]);
React.useEffect(() => {
if (open) {
setShouldRender(true);
setIsClosing(false);
hasStartedClosingRef.current = false;
}
else if (!hasStartedClosingRef.current) {
setIsClosing(true);
hasStartedClosingRef.current = true;
}
}, [open]);
React.useEffect(() => {
if (open && shouldRender && dialogElement) {
if (autoFocusFirstElement) {
focusFirstElement(dialogElement);
}
else if (!dialogElement.contains(document.activeElement)) {
// Still focus the dialog container so keyboard users have a starting point for the focus trap,
// but only when focus isn't already inside the dialog (e.g. a child used autoFocus).
dialogElement.focus();
}
}
}, [focusFirstElement, open, shouldRender, autoFocusFirstElement, dialogElement]);
// Return focus to the element that opened the dialog when it closes
React.useEffect(() => {
if (open) {
if (!hasCapturedTriggerRef.current) {
hasCapturedTriggerRef.current = true;
closedViaEscapeRef.current = false;
triggerElementRef.current = (0, isHTMLElement_1.isHTMLElement)(document.activeElement) ? document.activeElement : null;
}
return;
}
hasCapturedTriggerRef.current = false;
const triggerElement = triggerElementRef.current;
triggerElementRef.current = null;
if (!triggerElement)
return;
// Only hand focus back if it's still inside the closing dialog or was lost to the body, so
// we don't steal focus the user has since moved elsewhere.
const activeElement = document.activeElement;
if (activeElement === null || activeElement === document.body || (dialogElement?.contains(activeElement) ?? false)) {
triggerElement.focus({ focusVisible: closedViaEscapeRef.current });
}
}, [open, dialogElement]);
React.useLayoutEffect(() => {
if (!isClosing)
return;
if (!dialogElement)
return;
const handleAnimationEnd = (event) => {
if (event.animationName === "dialogFadeOut") {
setShouldRender(false);
hasStartedClosingRef.current = false;
onClosed?.();
}
};
dialogElement.addEventListener("animationend", handleAnimationEnd);
return () => {
dialogElement.removeEventListener("animationend", handleAnimationEnd);
};
}, [isClosing, onClosed, dialogElement]);
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: shouldRender && ((0, jsx_runtime_1.jsx)(Overlay_1.Overlay, { isClosing: isClosing, onClick: () => {
if (closeOnBackdropClick) {
handleClose();
}
}, children: (0, jsx_runtime_1.jsx)("div", { ref: setDialogElement, className: (0, css_1.cx)(styles.dialog, {
[styles.closing]: isClosing,
}), role: "dialog", "aria-label": props.accessibleName, "aria-modal": "true", tabIndex: -1, children: children }) })) }));
}
const styles = {
dialog: (0, css_1.css)({
border: "none",
padding: 0,
position: "fixed",
margin: design_system_tokens_1.space[24],
maxWidth: "100vw", // without this the browser enforces a small amount of horizontal margin
maxHeight: "100vh", // without this the browser enforces a small amount of vertical margin
borderRadius: design_system_tokens_1.borderRadius.large,
background: design_system_tokens_1.themeTokens.color.dialog.background.primary,
opacity: 0,
animationName: "dialogSlideUpFadeIn",
animationDuration: "200ms",
animationTimingFunction: "ease-in",
animationFillMode: "forwards",
animationDelay: "20ms",
[`@media (min-width: ${dialogBreakpoints_styles_1.dialogBreakpoints.laptop})`]: {
margin: "auto",
},
"&:focus": {
outline: "none",
},
"& *": {
boxSizing: "border-box",
},
"::backdrop": {
background: design_system_tokens_1.themeTokens.color.overlay.primary,
},
"@keyframes dialogSlideUpFadeIn": {
from: {
opacity: 0,
transform: "translateY(10px)",
},
to: {
opacity: 1,
transform: "translateY(0)",
},
},
}),
closing: (0, css_1.css)({
animation: "dialogFadeOut 200ms ease-out forwards",
"@keyframes dialogFadeOut": {
from: {
opacity: 1,
transform: "translateY(0)",
},
to: {
opacity: 0,
transform: "translateY(0)",
},
},
}),
};
DialogBase.displayName = "DialogBase";