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

UI Kit Core React components.

import { HvTypography } from "../../Typography/Typography.js";
import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
import { useUniqueId } from "../../hooks/useUniqueId.js";
import { HvIcon } from "../../icons.js";
import { HvTooltip } from "../../Tooltip/Tooltip.js";
import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
import { HvAvatar } from "../../Avatar/Avatar.js";
import { useClasses } from "./Action.styles.js";
import { getColor } from "@hitachivantara/uikit-styles";
import { useCallback } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/AppSwitcher/Action/Action.tsx
var 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 renderApplicationIcon = () => {
		if (iconElement) return iconElement;
		const nameParts = name.split(/\s+/);
		const initials = nameParts[0].charAt(0) + (nameParts[1]?.charAt(0) || "");
		return /* @__PURE__ */ jsx(HvAvatar, {
			size: "sm",
			src: iconUrl,
			className: classes.iconUrl,
			alt: description,
			backgroundColor: color,
			color: "bgContainer",
			"aria-hidden": true,
			children: initials
		});
	};
	const isSelected = isSelectedCallback(application);
	/**
	* Handles the onClick event and triggers the appropriate callback if it exists.
	*/
	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.selected]: isSelected,
			[classes.disabled]: disabled
		}, 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
					})
				})
			]
		})
	});
};
//#endregion
export { HvAppSwitcherAction };