@hitachivantara/uikit-react-core 6.8.2 → 6.9.0

package/dist/AppSwitcher/Action/Action.js

@@ -1,116 +1,101 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
-import { getColor } from "@hitachivantara/uikit-styles";
+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 { useClasses } from "./Action.styles.js";
-import { staticClasses } from "./Action.styles.js";
-import { HvTypography } from "../../Typography/Typography.js";
-import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
 import { HvTooltip } from "../../Tooltip/Tooltip.js";
+import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
 import { HvAvatar } from "../../Avatar/Avatar.js";
-import { HvListItem } from "../../ListContainer/ListItem/ListItem.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 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);
-  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
-              }
-            ) })
-          ]
-        }
-      )
-    }
-  );
-};
-export {
-  HvAppSwitcherAction,
-  staticClasses as appSwitcherActionClasses
+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 };

package/dist/AppSwitcher/Action/Action.styles.js

@@ -1,49 +1,45 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses(
-  "HvAppSwitcherAction",
-  {
-    root: {
-      width: "100%",
-      maxWidth: 280,
-      minHeight: 52
-    },
-    icon: { display: "flex", minWidth: 40, justifyContent: "center" },
-    iconUrl: { borderColor: "transparent" },
-    iconInfo: { minWidth: 32 },
-    disabled: {},
-    selected: {},
-    typography: {
-      display: "flex",
-      justifyContent: "flex-start",
-      alignItems: "center",
-      width: "100%",
-      minHeight: 52,
-      padding: `6px ${theme.space.xs}`,
-      border: "none",
-      borderLeft: `2px solid currentcolor`,
-      cursor: "pointer",
-      textDecoration: "inherit",
-      backgroundColor: "inherit",
-      "$disabled &": {
-        cursor: "not-allowed"
-      }
-    },
-    title: {
-      flexGrow: 1,
-      whiteSpace: "normal",
-      textAlign: "left",
-      margin: `0 ${theme.space.xs}`,
-      textWrap: "balance",
-      ...theme.typography.label,
-      color: "inherit"
-    },
-    titleAnchor: {
-      WebkitLineClamp: 2
-    }
-  }
-);
-export {
-  staticClasses,
-  useClasses
-};
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/AppSwitcher/Action/Action.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvAppSwitcherAction", {
+	root: {
+		width: "100%",
+		maxWidth: 280,
+		minHeight: 52
+	},
+	icon: {
+		display: "flex",
+		minWidth: 40,
+		justifyContent: "center"
+	},
+	iconUrl: { borderColor: "transparent" },
+	iconInfo: { minWidth: 32 },
+	disabled: {},
+	selected: {},
+	typography: {
+		display: "flex",
+		justifyContent: "flex-start",
+		alignItems: "center",
+		width: "100%",
+		minHeight: 52,
+		padding: `6px ${theme.space.xs}`,
+		border: "none",
+		borderLeft: `2px solid currentcolor`,
+		cursor: "pointer",
+		textDecoration: "inherit",
+		backgroundColor: "inherit",
+		"$disabled &": { cursor: "not-allowed" }
+	},
+	title: {
+		flexGrow: 1,
+		whiteSpace: "normal",
+		textAlign: "left",
+		margin: `0 ${theme.space.xs}`,
+		textWrap: "balance",
+		...theme.typography.label,
+		color: "inherit"
+	},
+	titleAnchor: { WebkitLineClamp: 2 }
+});
+//#endregion
+export { staticClasses, useClasses };

package/dist/AppSwitcher/AppSwitcher.js

@@ -1,101 +1,73 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { useClasses } from "./AppSwitcher.styles.js";
-import { staticClasses } from "./AppSwitcher.styles.js";
-import { HvAppSwitcherAction } from "./Action/Action.js";
-import { HvPanel } from "../Panel/Panel.js";
 import { HvTypography } from "../Typography/Typography.js";
-import { HvOverflowTooltip } from "../OverflowTooltip/OverflowTooltip.js";
 import { HvListContainer } from "../ListContainer/ListContainer.js";
-const HvAppSwitcher = forwardRef(function HvAppSwitcher2(props, ref) {
-  const {
-    className,
-    classes: classesProp,
-    layout = "single",
-    title,
-    applications,
-    onActionClickedCallback = () => {
-    },
-    isActionSelectedCallback = () => false,
-    header,
-    footer,
-    isOpen,
-    ...others
-  } = useDefaultProps("HvAppSwitcher", props);
-  const { classes, cx } = useClasses(classesProp);
-  const panelActions = useMemo(
-    () => applications?.map((application) => {
-      if (application.name) {
-        return /* @__PURE__ */ jsx(
-          HvAppSwitcherAction,
-          {
-            application,
-            onClickCallback: onActionClickedCallback,
-            isSelectedCallback: isActionSelectedCallback,
-            classes: {
-              root: classes.item,
-              selected: classes.itemSelected,
-              disabled: classes.itemDisabled,
-              typography: classes.itemTrigger,
-              icon: classes.itemIcon,
-              title: classes.itemTitle,
-              iconInfo: classes.itemInfoIcon
-            }
-          },
-          application.id || `${application.name}_${application.url}`
-        );
-      }
-      return void 0;
-    }),
-    [applications, classes, isActionSelectedCallback, onActionClickedCallback]
-  );
-  return /* @__PURE__ */ jsxs(
-    HvPanel,
-    {
-      ref,
-      className: cx(
-        classes.root,
-        classes[layout],
-        { [classes.open]: !!isOpen, [classes.closed]: isOpen === false },
-        className
-      ),
-      ...others,
-      children: [
-        header && /* @__PURE__ */ jsx(HvTypography, { component: "div", variant: "label", className: classes.title, children: header }) || title && /* @__PURE__ */ jsx(
-          HvOverflowTooltip,
-          {
-            className: classes.title,
-            data: title,
-            placement: "top-start",
-            classes: {
-              tooltipAnchorParagraph: classes.titleAnchor
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          HvListContainer,
-          {
-            condensed: true,
-            disableGutters: true,
-            className: classes.actionsContainer,
-            children: panelActions
-          }
-        ),
-        footer && /* @__PURE__ */ jsx(
-          HvTypography,
-          {
-            component: "div",
-            variant: "label",
-            className: classes.footerContainer,
-            children: footer
-          }
-        )
-      ]
-    }
-  );
+import { HvPanel } from "../Panel/Panel.js";
+import { HvOverflowTooltip } from "../OverflowTooltip/OverflowTooltip.js";
+import { HvAppSwitcherAction } from "./Action/Action.js";
+import { useClasses } from "./AppSwitcher.styles.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/AppSwitcher/AppSwitcher.tsx
+/**
+* An app switcher lets users quickly navigate between different applications or modules within a platform.
+*/
+var HvAppSwitcher = forwardRef(function HvAppSwitcher(props, ref) {
+	const { className, classes: classesProp, layout = "single", title, applications, onActionClickedCallback = () => {}, isActionSelectedCallback = () => false, header, footer, isOpen, ...others } = useDefaultProps("HvAppSwitcher", props);
+	const { classes, cx } = useClasses(classesProp);
+	const panelActions = useMemo(() => applications?.map((application) => {
+		if (application.name) return /* @__PURE__ */ jsx(HvAppSwitcherAction, {
+			application,
+			onClickCallback: onActionClickedCallback,
+			isSelectedCallback: isActionSelectedCallback,
+			classes: {
+				root: classes.item,
+				selected: classes.itemSelected,
+				disabled: classes.itemDisabled,
+				typography: classes.itemTrigger,
+				icon: classes.itemIcon,
+				title: classes.itemTitle,
+				iconInfo: classes.itemInfoIcon
+			}
+		}, application.id || `${application.name}_${application.url}`);
+	}), [
+		applications,
+		classes,
+		isActionSelectedCallback,
+		onActionClickedCallback
+	]);
+	return /* @__PURE__ */ jsxs(HvPanel, {
+		ref,
+		className: cx(classes.root, classes[layout], {
+			[classes.open]: !!isOpen,
+			[classes.closed]: isOpen === false
+		}, className),
+		...others,
+		children: [
+			header && /* @__PURE__ */ jsx(HvTypography, {
+				component: "div",
+				variant: "label",
+				className: classes.title,
+				children: header
+			}) || title && /* @__PURE__ */ jsx(HvOverflowTooltip, {
+				className: classes.title,
+				data: title,
+				placement: "top-start",
+				classes: { tooltipAnchorParagraph: classes.titleAnchor }
+			}),
+			/* @__PURE__ */ jsx(HvListContainer, {
+				condensed: true,
+				disableGutters: true,
+				className: classes.actionsContainer,
+				children: panelActions
+			}),
+			footer && /* @__PURE__ */ jsx(HvTypography, {
+				component: "div",
+				variant: "label",
+				className: classes.footerContainer,
+				children: footer
+			})
+		]
+	});
 });
-export {
-  HvAppSwitcher,
-  staticClasses as appSwitcherClasses
-};
+//#endregion
+export { HvAppSwitcher };

package/dist/AppSwitcher/AppSwitcher.styles.js

@@ -1,55 +1,52 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvAppSwitcher", {
-  root: {
-    display: "flex",
-    flexDirection: "column",
-    overflow: "hidden"
-  },
-  item: {},
-  itemSelected: {},
-  itemDisabled: {},
-  itemTrigger: {},
-  itemIcon: {},
-  itemTitle: {},
-  itemInfoIcon: {},
-  actionsContainer: {
-    display: "flex",
-    flexWrap: "wrap",
-    justifyContent: "flex-start",
-    overflowY: "auto",
-    gap: theme.space.xs,
-    padding: 4,
-    margin: -4
-  },
-  footerContainer: {
-    display: "flex",
-    alignItems: "center",
-    marginTop: "auto",
-    height: 52,
-    paddingTop: theme.space.sm
-  },
-  open: {
-    zIndex: theme.zIndices.overlay,
-    position: "absolute",
-    top: "50px",
-    overflowX: "hidden",
-    boxShadow: theme.colors.shadow
-  },
-  closed: { display: "none" },
-  title: {
-    minHeight: 36,
-    paddingBottom: theme.space.sm,
-    ...theme.typography.label
-  },
-  titleAnchor: {
-    WebkitLineClamp: 2
-  },
-  single: { width: 280 + 40 },
-  dual: { width: 560 + 40 },
-  fluid: {}
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/AppSwitcher/AppSwitcher.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvAppSwitcher", {
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		overflow: "hidden"
+	},
+	item: {},
+	itemSelected: {},
+	itemDisabled: {},
+	itemTrigger: {},
+	itemIcon: {},
+	itemTitle: {},
+	itemInfoIcon: {},
+	actionsContainer: {
+		display: "flex",
+		flexWrap: "wrap",
+		justifyContent: "flex-start",
+		overflowY: "auto",
+		gap: theme.space.xs,
+		padding: 4,
+		margin: -4
+	},
+	footerContainer: {
+		display: "flex",
+		alignItems: "center",
+		marginTop: "auto",
+		height: 52,
+		paddingTop: theme.space.sm
+	},
+	open: {
+		zIndex: theme.zIndices.overlay,
+		position: "absolute",
+		top: "50px",
+		overflowX: "hidden",
+		boxShadow: theme.colors.shadow
+	},
+	closed: { display: "none" },
+	title: {
+		minHeight: 36,
+		paddingBottom: theme.space.sm,
+		...theme.typography.label
+	},
+	titleAnchor: { WebkitLineClamp: 2 },
+	single: { width: 320 },
+	dual: { width: 600 },
+	fluid: {}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };