@hitachivantara/uikit-react-core/dist/esm/EmptyState/EmptyState.js

Core React components for the NEXT Design System.

import { jsx, jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import { useTheme } from "@mui/material/styles";
import useMediaQuery from "@mui/material/useMediaQuery";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { theme } from "@hitachivantara/uikit-styles";
import { useClasses } from "./EmptyState.styles.js";
import { staticClasses } from "./EmptyState.styles.js";
import { HvTypography } from "../Typography/Typography.js";
const HvEmptyState = forwardRef(function HvEmptyState2(props, ref) {
  const {
    action,
    icon,
    title,
    message,
    classes: classesProp,
    className,
    ...others
  } = useDefaultProps("HvEmptyState", props);
  const { classes, cx, css } = useClasses(classesProp);
  const muiTheme = useTheme();
  const onlyXs = useMediaQuery(muiTheme.breakpoints.only("xs"));
  const upSm = useMediaQuery(muiTheme.breakpoints.up("sm"));
  const messageOnly = !!(message && !(title || action));
  const renderNode = (variant, node, style) => node && /* @__PURE__ */ jsx(HvTypography, { component: "div", variant, className: style, children: node });
  return /* @__PURE__ */ jsx("div", { ref, className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsxs(
    "div",
    {
      className: cx(
        classes.container,
        onlyXs && css({
          flexDirection: "column",
          alignItems: "center",
          textAlign: "center"
        }),
        {
          [classes.containerMessageOnly]: messageOnly
        },
        onlyXs && messageOnly && css({ flexDirection: "row" })
      ),
      children: [
        /* @__PURE__ */ jsx("div", { className: classes.iconContainer, children: icon }),
        /* @__PURE__ */ jsxs(
          "div",
          {
            className: cx(
              classes.textContainer,
              upSm && css({ marginLeft: theme.space.xs })
            ),
            children: [
              renderNode("title4", title, classes.titleContainer),
              renderNode("body", message, classes.messageContainer),
              renderNode("body", action, classes.actionContainer)
            ]
          }
        )
      ]
    }
  ) });
});
export {
  HvEmptyState,
  staticClasses as emptyStateClasses
};