@hitachivantara/uikit-react-core/dist/esm/utils/Callout.js

Core React components for the NEXT Design System.

import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { forwardRef } from "react";
import SnackbarContent from "@mui/material/SnackbarContent";
import { useDefaultProps, createClasses, useTheme } from "@hitachivantara/uikit-react-utils";
import { theme } from "@hitachivantara/uikit-styles";
import { HvIcon } from "../icons.js";
import { iconVariant } from "./iconVariant.js";
import { HvActionsGeneric } from "../ActionsGeneric/ActionsGeneric.js";
import { HvButton } from "../Button/Button.js";
const { useClasses } = createClasses("HvCallout", {
  root: {
    position: "relative",
    boxShadow: "none",
    flexWrap: "nowrap",
    padding: 0,
    borderRadius: theme.radii.round
  },
  success: {
    backgroundColor: theme.colors.positiveDimmed
  },
  warning: {
    backgroundColor: theme.colors.warningDimmed
  },
  error: {
    backgroundColor: theme.colors.negativeDimmed
  },
  info: {
    backgroundColor: theme.colors.infoDimmed
  },
  accent: {
    backgroundColor: theme.colors.accentDimmed
  },
  default: {
    backgroundColor: theme.colors.infoDimmed
  },
  message: {
    display: "flex",
    alignItems: "center",
    padding: 0,
    color: theme.colors.textDark
  },
  messageContent: {
    textWrap: "balance",
    overflow: "hidden",
    wordBreak: "break-word"
  },
  messageIcon: {
    lineHeight: 0,
    flexShrink: 0
  },
  messageTitle: {
    display: "block",
    fontWeight: theme.fontWeights.semibold
  },
  action: {
    marginRight: 0
  },
  actionContent: {
    display: "flex",
    flexDirection: "column",
    height: "100%",
    justifyContent: "space-between",
    gap: theme.space.xs
  },
  actionCustom: {
    flex: "0 0 auto"
  },
  actionClose: {
    alignSelf: "flex-end"
  }
});
const HvCallout = forwardRef(function HvCallout2(props, ref) {
  const {
    id,
    classes: classesProp,
    className,
    title,
    showClose,
    showIcon,
    customIcon,
    variant = "default",
    onClose,
    actions,
    onAction,
    actionsPosition: actionsPositionProp = "auto",
    children,
    actionProps,
    ...others
  } = useDefaultProps("HvCallout", props);
  const { classes, cx } = useClasses(classesProp, false);
  const { activeTheme } = useTheme();
  const icon = customIcon || showIcon && iconVariant(variant);
  const actionsPosition = actionsPositionProp === "auto" ? "inline" : actionsPositionProp;
  const actionsContent = /* @__PURE__ */ jsx(
    HvActionsGeneric,
    {
      id,
      className: classes.actionCustom,
      variant: activeTheme?.snackbar.actionButtonVariant,
      actions,
      onAction
    }
  );
  const showCustomActions = actions && actionsPosition === "bottom-right";
  return /* @__PURE__ */ jsx(
    SnackbarContent,
    {
      ref,
      id,
      classes: {
        root: cx(classes.root, classes[variant], className),
        message: classes.message,
        action: classes.action
      },
      message: /* @__PURE__ */ jsxs(Fragment, { children: [
        icon && /* @__PURE__ */ jsx("div", { className: classes.messageIcon, children: icon }),
        /* @__PURE__ */ jsxs("div", { className: classes.messageContent, children: [
          title && /* @__PURE__ */ jsx("b", { className: classes.messageTitle, children: title }),
          children
        ] }),
        actions && actionsPosition === "inline" && actionsContent
      ] }),
      action: (showClose || showCustomActions) && /* @__PURE__ */ jsxs("div", { className: classes.actionContent, children: [
        showClose && /* @__PURE__ */ jsx(
          HvButton,
          {
            icon: true,
            className: classes.actionClose,
            variant: "semantic",
            "aria-label": "Close",
            onClick: (evt) => onClose?.(evt, "clickaway"),
            ...actionProps,
            children: /* @__PURE__ */ jsx(HvIcon, { size: "xs", name: "Close" })
          }
        ),
        showCustomActions && actionsContent
      ] }),
      ...others
    }
  );
});
export {
  HvCallout
};