@octopusdeploy/design-system-components
Version:
The design systems component library.
64 lines (63 loc) • 3.95 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.titleStyles = void 0;
exports.DialogHeader = DialogHeader;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_icons_1 = require("@octopusdeploy/design-system-icons");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const react_1 = require("react");
const Button_1 = require("../Button");
const dialogBreakpoints_styles_1 = require("./dialogBreakpoints.styles");
/**
* DialogHeader – the header bar of a dialog component.
*/
function DialogHeader({ title, width = "medium", action }) {
const openButtonRef = (0, react_1.useRef)(null);
const isOpen = action?.type === "toggleSidePanel" ? action.isOpen : false;
const prevIsOpenRef = (0, react_1.useRef)(isOpen);
const sidePanelWidth = (0, dialogBreakpoints_styles_1.toSidePanelWidth)(width);
// Restore focus to the open-panel button when the side panel closes.
(0, react_1.useEffect)(() => {
const wasOpen = prevIsOpenRef.current;
prevIsOpenRef.current = isOpen;
if (wasOpen && !isOpen) {
openButtonRef.current?.querySelector("button")?.focus();
}
}, [isOpen]);
return ((0, jsx_runtime_1.jsxs)("header", { className: headerStyles, children: [(0, jsx_runtime_1.jsx)("h2", { className: exports.titleStyles, children: title }), action?.type === "toggleSidePanel" && sidePanelWidth && ((0, jsx_runtime_1.jsx)("div", { ref: openButtonRef, ...(action.isOpen && { inert: "" }), className: (0, css_1.cx)(toggleButtonStyles[sidePanelWidth], action.isOpen ? toggleOpenHiddenStyles : toggleOpenStyles), children: (0, jsx_runtime_1.jsx)(Button_1.Button, { importance: "ghost", accessibleName: "Open side panel", onClick: action.onOpen, size: "small", showExpandCollapseIcon: false, icon: (0, jsx_runtime_1.jsx)(design_system_icons_1.ChevronsRightIcon, { size: 24 }) }) })), action?.type === "dismiss" && ((0, jsx_runtime_1.jsx)("div", { className: dismissButtonStyles, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { importance: "ghost", accessibleName: "Close dialog", onClick: action.onClose, size: "medium", icon: (0, jsx_runtime_1.jsx)(design_system_icons_1.XmarkIcon, { size: 20 }) }) }))] }));
}
const toggleButtonBaseProps = { display: "none", flexShrink: 0 };
const toggleButtonStyles = {
small: (0, css_1.css)({ ...toggleButtonBaseProps, [`@media (min-width: ${dialogBreakpoints_styles_1.dialogSidePanelBreakpoint.small})`]: { display: "block" } }),
medium: (0, css_1.css)({ ...toggleButtonBaseProps, [`@media (min-width: ${dialogBreakpoints_styles_1.dialogSidePanelBreakpoint.medium})`]: { display: "block" } }),
large: (0, css_1.css)({ ...toggleButtonBaseProps, [`@media (min-width: ${dialogBreakpoints_styles_1.dialogSidePanelBreakpoint.large})`]: { display: "block" } }),
};
const toggleOpenStyles = (0, css_1.css)({
transition: `opacity ${design_system_tokens_1.dialog.sidePanel.fadeDuration} ease ${design_system_tokens_1.dialog.sidePanel.slideDuration}`,
});
const toggleOpenHiddenStyles = (0, css_1.css)({
opacity: 0,
pointerEvents: "none",
transition: `opacity ${design_system_tokens_1.dialog.sidePanel.fadeDuration} ease 0ms`,
});
const dismissButtonStyles = (0, css_1.css)({
alignSelf: "flex-start",
});
const headerStyles = (0, css_1.css)({
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: design_system_tokens_1.space[24],
gap: design_system_tokens_1.space[8],
borderBottom: `${design_system_tokens_1.borderWidth[1]} solid ${design_system_tokens_1.themeTokens.color.border.primary}`,
":has(button)": {
paddingBottom: design_system_tokens_1.space[16],
},
});
exports.titleStyles = (0, css_1.css)({
font: design_system_tokens_1.text.heading.medium,
margin: 0,
textBox: "trim-both text",
flexWrap: "wrap",
});