@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
57 lines (56 loc) • 2.47 kB
JavaScript
import { HvTypography } from "../Typography/Typography.js";
import { getBreakpointStyles, useClasses } from "./GlobalActions.styles.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { forwardRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { useTheme as useTheme$1 } from "@mui/material/styles";
import useMediaQuery from "@mui/material/useMediaQuery";
//#region src/GlobalActions/GlobalActions.tsx
/**
* Global Actions are actions that affect the entire page they live in.
* They should persist while scrolling down the screen.
*
* It uses `variant="global"` by default, rendering an `h1` element and applying sticky positioning.
* Use `variant="section"` to group related content blocks.
* Use it sparingly, as it introduces strong visual separation, which may not always be necessary.
*/
var HvGlobalActions = forwardRef(function HvGlobalActions(props, ref) {
const { children, classes: classesProp, className, title, variant = "global", backButton, headingLevel, position: positionProp, ...others } = useDefaultProps("HvGlobalActions", props);
const muiTheme = useTheme$1();
const { classes, cx, css } = useClasses(classesProp);
const isSmDown = useMediaQuery(muiTheme.breakpoints.down("sm"));
const isUpMd = useMediaQuery(muiTheme.breakpoints.up("md"));
const headingLevelToApply = headingLevel || (variant === "global" ? 1 : 2);
const position = positionProp || (variant === "global" ? "sticky" : "relative");
return /* @__PURE__ */ jsx("div", {
ref,
className: cx(classes.root, {
[classes.positionSticky]: position === "sticky",
[classes.positionFixed]: position === "fixed",
[classes.global]: variant === "global",
[classes.section]: variant === "section"
}, position === "fixed" && css(getBreakpointStyles(isUpMd, isSmDown)), className),
...others,
children: /* @__PURE__ */ jsxs("div", {
className: classes.wrapper,
children: [
variant === "global" && backButton && /* @__PURE__ */ jsx("div", {
className: classes.backButton,
children: backButton
}),
typeof title !== "string" ? title : /* @__PURE__ */ jsx(HvTypography, {
variant: variant === "global" ? "title3" : "title4",
component: `h${headingLevelToApply}`,
className: classes.name,
children: title
}),
children && /* @__PURE__ */ jsx("div", {
className: classes.actions,
children
})
]
})
});
});
//#endregion
export { HvGlobalActions };