@hitachivantara/uikit-react-core/dist/esm/AppSwitcher/Action/Action.js

Core React components for the NEXT Design System.

import { jsx, jsxs } from "react/jsx-runtime";
import { useState, useCallback } from "react";
import { getColor } from "@hitachivantara/uikit-styles";
import { useUniqueId } from "../../hooks/useUniqueId.js";
import { HvIcon } from "../../icons.js";
import { useClasses } from "./Action.styles.js";
import { staticClasses } from "./Action.styles.js";
import { HvAvatar } from "../../Avatar/Avatar.js";
import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
import { HvTypography } from "../../Typography/Typography.js";
import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
import { HvTooltip } from "../../Tooltip/Tooltip.js";
const HvAppSwitcherAction = ({
  id,
  className,
  classes: classesProp,
  application,
  onClickCallback = () => {
  },
  isSelectedCallback = () => false
}) => {
  const { classes, cx } = useClasses(classesProp);
  const { name, description, disabled, iconElement, iconUrl, url, target } = application;
  const color = getColor(
    disabled ? "textDisabled" : application?.color,
    "text"
  );
  const [validIconUrl, setValidIconUrl] = useState(true);
  const renderApplicationIcon = () => {
    if (iconElement) {
      return iconElement;
    }
    if (iconUrl && validIconUrl) {
      return /* @__PURE__ */ jsx(
        "img",
        {
          className: classes.iconUrl,
          src: iconUrl,
          onError: () => {
            setValidIconUrl(false);
          },
          alt: description
        }
      );
    }
    const brokenTitle = name.split(" ");
    const initials = brokenTitle[0].substring(0, 1) + (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : "");
    return /* @__PURE__ */ jsx(HvAvatar, { size: "sm", backgroundColor: color, variant: "square", "aria-hidden": true, children: initials });
  };
  const isSelected = isSelectedCallback(application);
  const handleOnClick = useCallback(
    (event) => {
      if (disabled) {
        event.preventDefault();
        return;
      }
      onClickCallback?.(event, { ...application, isSelected });
    },
    [application, disabled, isSelected, onClickCallback]
  );
  const isLink = url != null;
  const descriptionElementId = useUniqueId(id);
  return /* @__PURE__ */ jsx(
    HvListItem,
    {
      id,
      interactive: true,
      tabIndex: 0,
      selected: isSelected,
      disabled,
      className: cx(
        classes.root,
        { [classes.disabled]: disabled, [classes.selected]: isSelected },
        className
      ),
      children: /* @__PURE__ */ jsxs(
        HvTypography,
        {
          component: "button",
          className: classes.typography,
          onClick: handleOnClick,
          style: { borderColor: color },
          "aria-label": name,
          ...description && { "aria-describedby": descriptionElementId },
          ...isLink && { component: "a", href: url, target: target || "_top" },
          children: [
            /* @__PURE__ */ jsx("div", { className: classes.icon, children: renderApplicationIcon() }),
            /* @__PURE__ */ jsx(
              HvOverflowTooltip,
              {
                paragraphOverflow: true,
                className: classes.title,
                placement: "top-start",
                data: name,
                classes: {
                  tooltipAnchorParagraph: classes.titleAnchor
                }
              }
            ),
            description && /* @__PURE__ */ jsx(HvTooltip, { title: description, children: /* @__PURE__ */ jsx(
              HvIcon,
              {
                name: "Info",
                compact: true,
                className: classes.iconInfo,
                id: descriptionElementId
              }
            ) })
          ]
        }
      )
    }
  );
};
export {
  HvAppSwitcherAction,
  staticClasses as appSwitcherActionClasses
};