@primer/react
Version:
An implementation of GitHub's Primer Design System using React
465 lines (464 loc) • 12.3 kB
JavaScript
import { useMergedRefs } from "../hooks/useMergedRefs.js";
import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
import { useId as useId$1 } from "../hooks/useId.js";
import { IconButton } from "../Button/IconButton.js";
import { ButtonComponent } from "../Button/Button.js";
import { useDevOnlyEffect } from "../internal/hooks/useDevOnlyEffect.js";
import Banner_module_css_default from "./Banner.module.css.js";
import { c } from "react-compiler-runtime";
import { clsx } from "clsx";
import { jsx, jsxs } from "react/jsx-runtime";
import React, { forwardRef } from "react";
import { AlertIcon, CheckCircleIcon, InfoIcon, StopIcon, XIcon } from "@primer/octicons-react";
//#region src/Banner/Banner.tsx
const BannerContext = /*#__PURE__*/ React.createContext(void 0);
const iconForVariant = {
critical: /*#__PURE__*/ jsx(StopIcon, {}),
info: /*#__PURE__*/ jsx(InfoIcon, {}),
success: /*#__PURE__*/ jsx(CheckCircleIcon, {}),
upsell: /*#__PURE__*/ jsx(InfoIcon, {}),
warning: /*#__PURE__*/ jsx(AlertIcon, {})
};
const Banner = /*#__PURE__*/ React.forwardRef(function Banner(t0, forwardRef) {
var _leadingVisual, _labelledBy;
const $ = c(64);
let children;
let className;
let description;
let hideTitle;
let icon;
let label;
let labelledBy;
let leadingVisual;
let onDismiss;
let primaryAction;
let rest;
let secondaryAction;
let t1;
let t2;
let t3;
let title;
if ($[0] !== t0) {
({"aria-label": label, "aria-labelledby": labelledBy, children, className, description, hideTitle, icon, leadingVisual, onDismiss, primaryAction, secondaryAction, title, variant: t1, actionsLayout: t2, flush: t3, ...rest} = t0);
$[0] = t0;
$[1] = children;
$[2] = className;
$[3] = description;
$[4] = hideTitle;
$[5] = icon;
$[6] = label;
$[7] = labelledBy;
$[8] = leadingVisual;
$[9] = onDismiss;
$[10] = primaryAction;
$[11] = rest;
$[12] = secondaryAction;
$[13] = t1;
$[14] = t2;
$[15] = t3;
$[16] = title;
} else {
children = $[1];
className = $[2];
description = $[3];
hideTitle = $[4];
icon = $[5];
label = $[6];
labelledBy = $[7];
leadingVisual = $[8];
onDismiss = $[9];
primaryAction = $[10];
rest = $[11];
secondaryAction = $[12];
t1 = $[13];
t2 = $[14];
t3 = $[15];
title = $[16];
}
const variant = t1 === void 0 ? "info" : t1;
const actionsLayout = t2 === void 0 ? "default" : t2;
const flush = t3 === void 0 ? false : t3;
const dismissible = !!onDismiss;
const hasActions = primaryAction || secondaryAction;
const bannerRef = React.useRef(null);
const ref = useMergedRefs(forwardRef, bannerRef);
const supportsCustomIcon = variant === "info" || variant === "upsell";
const titleId = useId$1();
const visual = (_leadingVisual = leadingVisual) !== null && _leadingVisual !== void 0 ? _leadingVisual : icon;
let t4;
let t5;
if ($[17] !== title) {
t4 = () => {
if (title) return;
const { current: banner } = bannerRef;
if (!banner) return;
if (!banner.querySelector("[data-banner-title]")) throw new Error("Expected a title to be provided to the <Banner> component with the `title` prop or through `<Banner.Title>` but no title was found");
};
t5 = [title];
$[17] = title;
$[18] = t4;
$[19] = t5;
} else {
t4 = $[18];
t5 = $[19];
}
useDevOnlyEffect(t4, t5);
let t6;
if ($[20] !== titleId) {
t6 = { titleId };
$[20] = titleId;
$[21] = t6;
} else t6 = $[21];
const t7 = (_labelledBy = labelledBy) !== null && _labelledBy !== void 0 ? _labelledBy : label ? void 0 : titleId;
const t8 = labelledBy ? void 0 : label;
let t9;
if ($[22] !== className) {
t9 = clsx(className, Banner_module_css_default.Banner);
$[22] = className;
$[23] = t9;
} else t9 = $[23];
const t10 = onDismiss ? "" : void 0;
const t11 = hasActions ? "" : void 0;
const t12 = hideTitle ? "" : void 0;
const t13 = rest.layout || "default";
const t14 = flush ? "" : void 0;
const t15 = visual && supportsCustomIcon ? visual : iconForVariant[variant];
let t16;
if ($[24] !== t15) {
t16 = /*#__PURE__*/ jsx("div", {
"data-component": "Banner.Icon",
className: Banner_module_css_default.BannerIcon,
children: t15
});
$[24] = t15;
$[25] = t16;
} else t16 = $[25];
let t17;
if ($[26] !== hideTitle || $[27] !== title) {
t17 = title ? hideTitle ? /*#__PURE__*/ jsx(VisuallyHidden, { children: /*#__PURE__*/ jsx(BannerTitle, { children: title }) }) : /*#__PURE__*/ jsx(BannerTitle, { children: title }) : null;
$[26] = hideTitle;
$[27] = title;
$[28] = t17;
} else t17 = $[28];
let t18;
if ($[29] !== description) {
t18 = description ? /*#__PURE__*/ jsx(BannerDescription, { children: description }) : null;
$[29] = description;
$[30] = t18;
} else t18 = $[30];
let t19;
if ($[31] !== children || $[32] !== t17 || $[33] !== t18) {
t19 = /*#__PURE__*/ jsxs("div", {
"data-component": "Banner.Content",
className: Banner_module_css_default.BannerContent,
children: [
t17,
t18,
children
]
});
$[31] = children;
$[32] = t17;
$[33] = t18;
$[34] = t19;
} else t19 = $[34];
let t20;
if ($[35] !== hasActions || $[36] !== primaryAction || $[37] !== secondaryAction) {
t20 = hasActions ? /*#__PURE__*/ jsx(BannerActions, {
primaryAction,
secondaryAction
}) : null;
$[35] = hasActions;
$[36] = primaryAction;
$[37] = secondaryAction;
$[38] = t20;
} else t20 = $[38];
let t21;
if ($[39] !== t19 || $[40] !== t20) {
t21 = /*#__PURE__*/ jsxs("div", {
className: Banner_module_css_default.BannerContainer,
children: [t19, t20]
});
$[39] = t19;
$[40] = t20;
$[41] = t21;
} else t21 = $[41];
let t22;
if ($[42] !== dismissible || $[43] !== onDismiss) {
t22 = dismissible ? /*#__PURE__*/ jsx(IconButton, {
"aria-label": "Dismiss banner",
onClick: onDismiss,
className: Banner_module_css_default.BannerDismiss,
icon: XIcon,
variant: "invisible"
}) : null;
$[42] = dismissible;
$[43] = onDismiss;
$[44] = t22;
} else t22 = $[44];
let t23;
if ($[45] !== actionsLayout || $[46] !== ref || $[47] !== rest || $[48] !== t10 || $[49] !== t11 || $[50] !== t12 || $[51] !== t13 || $[52] !== t14 || $[53] !== t16 || $[54] !== t21 || $[55] !== t22 || $[56] !== t7 || $[57] !== t8 || $[58] !== t9 || $[59] !== variant) {
t23 = /*#__PURE__*/ jsxs("section", {
"data-component": "Banner",
...rest,
"aria-labelledby": t7,
"aria-label": t8,
className: t9,
"data-dismissible": t10,
"data-has-actions": t11,
"data-title-hidden": t12,
"data-variant": variant,
"data-actions-layout": actionsLayout,
tabIndex: -1,
ref,
"data-layout": t13,
"data-flush": t14,
children: [
t16,
t21,
t22
]
});
$[45] = actionsLayout;
$[46] = ref;
$[47] = rest;
$[48] = t10;
$[49] = t11;
$[50] = t12;
$[51] = t13;
$[52] = t14;
$[53] = t16;
$[54] = t21;
$[55] = t22;
$[56] = t7;
$[57] = t8;
$[58] = t9;
$[59] = variant;
$[60] = t23;
} else t23 = $[60];
let t24;
if ($[61] !== t23 || $[62] !== t6) {
t24 = /*#__PURE__*/ jsx(BannerContext.Provider, {
value: t6,
children: t23
});
$[61] = t23;
$[62] = t6;
$[63] = t24;
} else t24 = $[63];
return t24;
});
function BannerTitle(props) {
var _id;
const $ = c(14);
let children;
let className;
let id;
let rest;
let t0;
if ($[0] !== props) {
({as: t0, className, children, id, ...rest} = props);
$[0] = props;
$[1] = children;
$[2] = className;
$[3] = id;
$[4] = rest;
$[5] = t0;
} else {
children = $[1];
className = $[2];
id = $[3];
rest = $[4];
t0 = $[5];
}
const Heading = t0 === void 0 ? "h2" : t0;
const context = React.useContext(BannerContext);
const titleId = (_id = id) !== null && _id !== void 0 ? _id : context === null || context === void 0 ? void 0 : context.titleId;
let t1;
if ($[6] !== className) {
t1 = clsx(className, Banner_module_css_default.BannerTitle);
$[6] = className;
$[7] = t1;
} else t1 = $[7];
let t2;
if ($[8] !== Heading || $[9] !== children || $[10] !== rest || $[11] !== t1 || $[12] !== titleId) {
t2 = /*#__PURE__*/ jsx(Heading, {
...rest,
id: titleId,
className: t1,
"data-component": "Banner.Title",
"data-banner-title": "",
children
});
$[8] = Heading;
$[9] = children;
$[10] = rest;
$[11] = t1;
$[12] = titleId;
$[13] = t2;
} else t2 = $[13];
return t2;
}
function BannerDescription(t0) {
const $ = c(10);
let children;
let className;
let rest;
if ($[0] !== t0) {
({children, className, ...rest} = t0);
$[0] = t0;
$[1] = children;
$[2] = className;
$[3] = rest;
} else {
children = $[1];
className = $[2];
rest = $[3];
}
let t1;
if ($[4] !== className) {
t1 = clsx("BannerDescription", className);
$[4] = className;
$[5] = t1;
} else t1 = $[5];
let t2;
if ($[6] !== children || $[7] !== rest || $[8] !== t1) {
t2 = /*#__PURE__*/ jsx("div", {
...rest,
className: t1,
"data-component": "Banner.Description",
children
});
$[6] = children;
$[7] = rest;
$[8] = t1;
$[9] = t2;
} else t2 = $[9];
return t2;
}
function BannerActions(t0) {
const $ = c(9);
const { primaryAction, secondaryAction } = t0;
const t1 = secondaryAction !== null && secondaryAction !== void 0 ? secondaryAction : null;
const t2 = primaryAction !== null && primaryAction !== void 0 ? primaryAction : null;
let t3;
if ($[0] !== t1 || $[1] !== t2) {
t3 = /*#__PURE__*/ jsxs("div", {
className: Banner_module_css_default.BannerActionsContainer,
"data-primary-action": "trailing",
children: [t1, t2]
});
$[0] = t1;
$[1] = t2;
$[2] = t3;
} else t3 = $[2];
const t4 = primaryAction !== null && primaryAction !== void 0 ? primaryAction : null;
const t5 = secondaryAction !== null && secondaryAction !== void 0 ? secondaryAction : null;
let t6;
if ($[3] !== t4 || $[4] !== t5) {
t6 = /*#__PURE__*/ jsxs("div", {
className: Banner_module_css_default.BannerActionsContainer,
"data-primary-action": "leading",
children: [t4, t5]
});
$[3] = t4;
$[4] = t5;
$[5] = t6;
} else t6 = $[5];
let t7;
if ($[6] !== t3 || $[7] !== t6) {
t7 = /*#__PURE__*/ jsxs("div", {
className: Banner_module_css_default.BannerActions,
"data-component": "Banner.Actions",
children: [t3, t6]
});
$[6] = t3;
$[7] = t6;
$[8] = t7;
} else t7 = $[8];
return t7;
}
const BannerPrimaryAction = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
const $ = c(11);
let children;
let className;
let rest;
if ($[0] !== t0) {
({children, className, ...rest} = t0);
$[0] = t0;
$[1] = children;
$[2] = className;
$[3] = rest;
} else {
children = $[1];
className = $[2];
rest = $[3];
}
let t1;
if ($[4] !== className) {
t1 = clsx("BannerPrimaryAction", className);
$[4] = className;
$[5] = t1;
} else t1 = $[5];
let t2;
if ($[6] !== children || $[7] !== forwardedRef || $[8] !== rest || $[9] !== t1) {
t2 = /*#__PURE__*/ jsx(ButtonComponent, {
"data-component": "Banner.PrimaryAction",
ref: forwardedRef,
className: t1,
variant: "default",
...rest,
children
});
$[6] = children;
$[7] = forwardedRef;
$[8] = rest;
$[9] = t1;
$[10] = t2;
} else t2 = $[10];
return t2;
});
BannerPrimaryAction.displayName = "BannerPrimaryAction";
const BannerSecondaryAction = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
const $ = c(11);
let children;
let className;
let rest;
if ($[0] !== t0) {
({children, className, ...rest} = t0);
$[0] = t0;
$[1] = children;
$[2] = className;
$[3] = rest;
} else {
children = $[1];
className = $[2];
rest = $[3];
}
let t1;
if ($[4] !== className) {
t1 = clsx("BannerPrimaryAction", className);
$[4] = className;
$[5] = t1;
} else t1 = $[5];
let t2;
if ($[6] !== children || $[7] !== forwardedRef || $[8] !== rest || $[9] !== t1) {
t2 = /*#__PURE__*/ jsx(ButtonComponent, {
"data-component": "Banner.SecondaryAction",
ref: forwardedRef,
className: t1,
variant: "invisible",
...rest,
children
});
$[6] = children;
$[7] = forwardedRef;
$[8] = rest;
$[9] = t1;
$[10] = t2;
} else t2 = $[10];
return t2;
});
BannerSecondaryAction.displayName = "BannerSecondaryAction";
//#endregion
export { Banner, BannerActions, BannerDescription, BannerPrimaryAction, BannerSecondaryAction, BannerTitle };