@octopusdeploy/design-system-components/dist/src/components/Dialog/DialogMainPanel.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DialogMainPanel = DialogMainPanel;
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 LinearProgress_1 = require("../Progress/LinearProgress");
const DialogHeader_1 = require("./DialogHeader");
const DialogScrollableContent_1 = require("./DialogScrollableContent");
const dialogBreakpoints_styles_1 = require("./dialogBreakpoints.styles");
/**
 * DialogMainPanel – the primary content section of a dialog.
 */
function DialogMainPanel({ width, hasSidePanel, title, headerAction, progressTracker, errorPanel, footer, children, isLoading }) {
    const sidePanelWidth = (0, dialogBreakpoints_styles_1.toSidePanelWidth)(width);
    return ((0, jsx_runtime_1.jsxs)("section", { className: (0, css_1.cx)(mainPanelStyles, widthStyles[width], hasSidePanel && sidePanelWidth ? hasSidePanelStyles[sidePanelWidth] : null), children: [(0, jsx_runtime_1.jsx)(DialogHeader_1.DialogHeader, { title: title, width: width, action: headerAction }), (0, jsx_runtime_1.jsx)(LinearProgress_1.LinearProgress, { show: !!isLoading, variant: "indeterminate" }), (0, jsx_runtime_1.jsx)(DialogScrollableContent_1.DialogScrollableContent, { progressTracker: progressTracker, errorPanel: errorPanel, children: children }), footer] }));
}
const mainPanelStyles = (0, css_1.css)({
    display: "flex",
    flexDirection: "column",
    color: design_system_tokens_1.themeTokens.color.text.primary,
    background: design_system_tokens_1.themeTokens.color.dialog.background.primary,
    position: "relative",
    zIndex: 1,
    minHeight: 0,
});
const widthStyles = {
    small: (0, css_1.css)({ [`@media (min-width: ${dialogBreakpoints_styles_1.dialogBreakpoints.tablet})`]: { width: design_system_tokens_1.dialog.mainPanel.width.small, maxWidth: "100%" } }),
    medium: (0, css_1.css)({ [`@media (min-width: ${dialogBreakpoints_styles_1.dialogBreakpoints.tablet})`]: { width: design_system_tokens_1.dialog.mainPanel.width.medium, maxWidth: "100%" } }),
    large: (0, css_1.css)({ [`@media (min-width: ${dialogBreakpoints_styles_1.dialogBreakpoints.tablet})`]: { width: design_system_tokens_1.dialog.mainPanel.width.large, maxWidth: "100%" } }),
    extraLarge: (0, css_1.css)({ [`@media (min-width: ${dialogBreakpoints_styles_1.dialogBreakpoints.tablet})`]: { width: design_system_tokens_1.dialog.mainPanel.width.extraLarge, maxWidth: "100%" } }),
};
const hasSidePanelStyles = {
    small: (0, css_1.css)({ [`@media (min-width: ${dialogBreakpoints_styles_1.dialogSidePanelBreakpoint.small})`]: { minWidth: 0 } }),
    medium: (0, css_1.css)({ [`@media (min-width: ${dialogBreakpoints_styles_1.dialogSidePanelBreakpoint.medium})`]: { minWidth: 0 } }),
    large: (0, css_1.css)({ [`@media (min-width: ${dialogBreakpoints_styles_1.dialogSidePanelBreakpoint.large})`]: { minWidth: 0 } }),
};