@hitachivantara/uikit-react-core 5.104.0 → 5.105.0

package/dist/cjs/Accordion/Accordion.cjs

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const useExpandable = require("../hooks/useExpandable.cjs");
+const icons = require("../icons.cjs");
+const Accordion_styles = require("./Accordion.styles.cjs");
+const Typography = require("../Typography/Typography.cjs");
+const ButtonBase = require("../ButtonBase/ButtonBase.cjs");
+const HvAccordion = React.forwardRef(function HvAccordion2(props, ref) {
+  const {
+    id,
+    className,
+    classes: classesProp,
+    disabled = false,
+    label,
+    onChange,
+    children,
+    expanded,
+    headingLevel,
+    defaultExpanded = false,
+    containerProps,
+    labelVariant = "label",
+    disableEventHandling,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvAccordion", props);
+  const { classes, cx } = Accordion_styles.useClasses(classesProp);
+  const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable.useExpandable({
+    id,
+    expanded,
+    disabled,
+    defaultExpanded
+  });
+  const handleClick = React.useCallback(
+    (event) => {
+      if (!disabled) {
+        onChange?.(event, isOpen);
+        toggleOpen();
+      }
+      if (!disableEventHandling) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    [disableEventHandling, disabled, isOpen, onChange, toggleOpen]
+  );
+  const accordionHeader = React.useMemo(() => {
+    const accordionButton = /* @__PURE__ */ jsxRuntime.jsxs(
+      Typography.HvTypography,
+      {
+        ...buttonProps,
+        component: ButtonBase.HvButtonBase,
+        className: cx(classes.label, { [classes.disabled]: disabled }),
+        disabled,
+        onClick: handleClick,
+        variant: labelVariant,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretDown", rotate: isOpen, size: "xs" }),
+          label
+        ]
+      }
+    );
+    return headingLevel === void 0 ? accordionButton : /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: `h${headingLevel}`, variant: labelVariant, children: accordionButton });
+  }, [
+    cx,
+    classes,
+    handleClick,
+    label,
+    buttonProps,
+    disabled,
+    headingLevel,
+    isOpen,
+    labelVariant
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, id, className: cx(classes.root, className), ...others, children: [
+    accordionHeader,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cx(classes.container, { [classes.hidden]: !isOpen }),
+        hidden: !isOpen,
+        ...regionProps,
+        ...containerProps,
+        children
+      }
+    )
+  ] });
+});
+exports.accordionClasses = Accordion_styles.staticClasses;
+exports.HvAccordion = HvAccordion;

package/dist/cjs/ActionBar/ActionBar.cjs

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const ActionBar_styles = require("./ActionBar.styles.cjs");
+const HvActionBar = React.forwardRef(function HvActionBar2(props, ref) {
+  const {
+    classes: classesProp,
+    className,
+    children,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvActionBar", props);
+  const { classes, cx } = ActionBar_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cx(classes.root, className), ...others, children });
+});
+exports.actionBarClasses = ActionBar_styles.staticClasses;
+exports.HvActionBar = HvActionBar;

package/dist/cjs/ActionsGeneric/ActionsGeneric.cjs

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const icons = require("../icons.cjs");
+const setId = require("../utils/setId.cjs");
+const ActionsGeneric_styles = require("./ActionsGeneric.styles.cjs");
+const DropDownMenu = require("../DropDownMenu/DropDownMenu.cjs");
+const IconButton = require("../IconButton/IconButton.cjs");
+const Button = require("../Button/Button.cjs");
+const HvActionsGeneric = React.forwardRef(function HvActionsGeneric2(props, ref) {
+  const {
+    id: idProp,
+    classes: classesProp,
+    className,
+    category = "secondaryGhost",
+    // TODO - remove and update variant default in v6
+    variant: variantProp,
+    disabled = false,
+    actions = [],
+    actionsCallback,
+    // TODO - remove in v6
+    onAction,
+    maxVisibleActions = Infinity,
+    iconOnly: iconOnlyProp,
+    dropdownMenuProps: dropdownMenuPropsProp,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvActionsGeneric", props);
+  const { onClick: onClickDropdownMenu, ...dropdownMenuProps } = dropdownMenuPropsProp || {};
+  const variant = variantProp || category;
+  const { classes, cx } = ActionsGeneric_styles.useClasses(classesProp);
+  const handleCallback = (event, id, action) => {
+    actionsCallback?.(event, id, action);
+    onAction?.(event, action);
+  };
+  if (!Array.isArray(actions)) return React.isValidElement(actions) ? actions : null;
+  const renderButton = (action, idx) => {
+    const {
+      disabled: actDisabled,
+      id: actId,
+      icon,
+      label,
+      iconOnly,
+      ...other
+    } = action;
+    const actionId = setId.setId(idProp, idx, "action", action.id);
+    const renderedIcon = React.isValidElement(icon) ? icon : icon?.({ isDisabled: disabled });
+    const commonButtonProps = {
+      id: actionId,
+      variant,
+      className: classes.button,
+      disabled: actDisabled ?? disabled,
+      onClick: (event) => handleCallback(event, idProp || "", action),
+      ...other
+    };
+    const key = actionId || idx;
+    const isIcon = iconOnly ?? iconOnlyProp;
+    if (isIcon) {
+      return /* @__PURE__ */ jsxRuntime.jsx(IconButton.HvIconButton, { ...commonButtonProps, title: label, children: renderedIcon }, key);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { ...commonButtonProps, startIcon: renderedIcon, children: label }, key);
+  };
+  const renderActionsGrid = () => {
+    const actsVisible = actions.slice(0, maxVisibleActions);
+    const actsDropdown = actions.slice(maxVisibleActions);
+    const iconColor = variant === "semantic" && "textDark" || void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      actsVisible.map((action, idx) => renderButton(action, idx)),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        DropDownMenu.HvDropDownMenu,
+        {
+          id: setId.setId(idProp, "menu"),
+          disabled,
+          variant,
+          classes: {
+            root: classes.dropDownMenu,
+            icon: classes.dropDownMenuButton,
+            iconSelected: classes.dropDownMenuButtonSelected
+          },
+          icon: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "DotsVertical", color: iconColor }),
+          placement: "left",
+          onClick: (event, action) => {
+            handleCallback(event, idProp || "", action);
+            onClickDropdownMenu?.(event, action);
+          },
+          dataList: actsDropdown,
+          keepOpened: false,
+          disablePortal: false,
+          ...dropdownMenuProps
+        }
+      )
+    ] });
+  };
+  const actionOverflow = actions.length > maxVisibleActions;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cx(
+        classes.root,
+        { [classes.actionContainer]: actionOverflow },
+        className
+      ),
+      ...others,
+      children: actionOverflow ? renderActionsGrid() : actions.map((action, idx) => renderButton(action, idx))
+    }
+  );
+});
+exports.actionsGenericClasses = ActionsGeneric_styles.staticClasses;
+exports.HvActionsGeneric = HvActionsGeneric;

package/dist/cjs/AppSwitcher/Action/Action.cjs

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const useUniqueId = require("../../hooks/useUniqueId.cjs");
+const icons = require("../../icons.cjs");
+const Action_styles = require("./Action.styles.cjs");
+const Avatar = require("../../Avatar/Avatar.cjs");
+const ListItem = require("../../ListContainer/ListItem/ListItem.cjs");
+const Typography = require("../../Typography/Typography.cjs");
+const OverflowTooltip = require("../../OverflowTooltip/OverflowTooltip.cjs");
+const Tooltip = require("../../Tooltip/Tooltip.cjs");
+const HvAppSwitcherAction = ({
+  id,
+  className,
+  classes: classesProp,
+  application,
+  onClickCallback = () => {
+  },
+  isSelectedCallback = () => false
+}) => {
+  const { classes, cx } = Action_styles.useClasses(classesProp);
+  const { name, description, disabled, iconElement, iconUrl, url, target } = application;
+  const color = uikitStyles.getColor(
+    disabled ? "textDisabled" : application?.color,
+    "text"
+  );
+  const [validIconUrl, setValidIconUrl] = React.useState(true);
+  const renderApplicationIcon = () => {
+    if (iconElement) {
+      return iconElement;
+    }
+    if (iconUrl && validIconUrl) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          className: classes.iconUrl,
+          src: iconUrl,
+          onError: () => {
+            setValidIconUrl(false);
+          },
+          alt: description
+        }
+      );
+    }
+    const brokenTitle = name.split(" ");
+    const initials = brokenTitle[0].slice(0, 1) + (brokenTitle[1] ? brokenTitle[1].slice(0, 1) : "");
+    return /* @__PURE__ */ jsxRuntime.jsx(Avatar.HvAvatar, { size: "sm", backgroundColor: color, variant: "square", "aria-hidden": true, children: initials });
+  };
+  const isSelected = isSelectedCallback(application);
+  const handleOnClick = React.useCallback(
+    (event) => {
+      if (disabled) {
+        event.preventDefault();
+        return;
+      }
+      onClickCallback?.(event, { ...application, isSelected });
+    },
+    [application, disabled, isSelected, onClickCallback]
+  );
+  const isLink = url != null;
+  const descriptionElementId = useUniqueId.useUniqueId(id);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ListItem.HvListItem,
+    {
+      id,
+      interactive: true,
+      tabIndex: 0,
+      selected: isSelected,
+      disabled,
+      className: cx(
+        classes.root,
+        {
+          [classes.selected]: isSelected,
+          [classes.disabled]: disabled
+        },
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        Typography.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__ */ jsxRuntime.jsx("div", { className: classes.icon, children: renderApplicationIcon() }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              OverflowTooltip.HvOverflowTooltip,
+              {
+                paragraphOverflow: true,
+                className: classes.title,
+                placement: "top-start",
+                data: name,
+                classes: {
+                  tooltipAnchorParagraph: classes.titleAnchor
+                }
+              }
+            ),
+            description && /* @__PURE__ */ jsxRuntime.jsx(Tooltip.HvTooltip, { title: description, children: /* @__PURE__ */ jsxRuntime.jsx(
+              icons.HvIcon,
+              {
+                name: "Info",
+                compact: true,
+                className: classes.iconInfo,
+                id: descriptionElementId
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+};
+exports.appSwitcherActionClasses = Action_styles.staticClasses;
+exports.HvAppSwitcherAction = HvAppSwitcherAction;

package/dist/cjs/AppSwitcher/AppSwitcher.cjs

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const AppSwitcher_styles = require("./AppSwitcher.styles.cjs");
+const Action = require("./Action/Action.cjs");
+const Panel = require("../Panel/Panel.cjs");
+const Typography = require("../Typography/Typography.cjs");
+const OverflowTooltip = require("../OverflowTooltip/OverflowTooltip.cjs");
+const ListContainer = require("../ListContainer/ListContainer.cjs");
+const HvAppSwitcher = React.forwardRef(function HvAppSwitcher2(props, ref) {
+  const {
+    className,
+    classes: classesProp,
+    layout = "single",
+    title,
+    applications,
+    onActionClickedCallback = () => {
+    },
+    isActionSelectedCallback = () => false,
+    header,
+    footer,
+    isOpen,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvAppSwitcher", props);
+  const { classes, cx } = AppSwitcher_styles.useClasses(classesProp);
+  const panelActions = React.useMemo(
+    () => applications?.map((application) => {
+      if (application.name) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Action.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__ */ jsxRuntime.jsxs(
+    Panel.HvPanel,
+    {
+      ref,
+      className: cx(
+        classes.root,
+        classes[layout],
+        { [classes.open]: !!isOpen, [classes.closed]: isOpen === false },
+        className
+      ),
+      ...others,
+      children: [
+        header && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "div", variant: "label", className: classes.title, children: header }) || title && /* @__PURE__ */ jsxRuntime.jsx(
+          OverflowTooltip.HvOverflowTooltip,
+          {
+            className: classes.title,
+            data: title,
+            placement: "top-start",
+            classes: {
+              tooltipAnchorParagraph: classes.titleAnchor
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ListContainer.HvListContainer,
+          {
+            condensed: true,
+            disableGutters: true,
+            className: classes.actionsContainer,
+            children: panelActions
+          }
+        ),
+        footer && /* @__PURE__ */ jsxRuntime.jsx(
+          Typography.HvTypography,
+          {
+            component: "div",
+            variant: "label",
+            className: classes.footerContainer,
+            children: footer
+          }
+        )
+      ]
+    }
+  );
+});
+exports.appSwitcherClasses = AppSwitcher_styles.staticClasses;
+exports.HvAppSwitcher = HvAppSwitcher;

package/dist/cjs/Avatar/Avatar.cjs

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const MuiAvatar = require("@mui/material/Avatar");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const AvatarGroupContext = require("../AvatarGroup/AvatarGroupContext.cjs");
+const useImageLoaded = require("../hooks/useImageLoaded.cjs");
+const icons = require("../icons.cjs");
+const Avatar_styles = require("./Avatar.styles.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const MuiAvatar__default = /* @__PURE__ */ _interopDefault(MuiAvatar);
+const decreaseSizeMap = {
+  xl: "lg",
+  lg: "md",
+  md: "sm",
+  sm: "xs",
+  xs: "xs"
+};
+const HvAvatar = React.forwardRef(function HvAvatar2(props, ref) {
+  const {
+    className,
+    style,
+    classes: classesProp,
+    children: childrenProp,
+    component = "div",
+    size: sizeProp,
+    backgroundColor = "text",
+    color = "bgContainer",
+    src,
+    srcSet,
+    sizes,
+    alt,
+    imgProps,
+    status,
+    badge,
+    variant = "circular",
+    avatarProps,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvAvatar", props);
+  const { classes, cx } = Avatar_styles.useClasses(classesProp);
+  const avatarGroupContext = AvatarGroupContext.useAvatarGroupContext();
+  const size = sizeProp || avatarGroupContext?.size || "sm";
+  let children;
+  const imageLoaded = useImageLoaded.useImageLoaded(src, srcSet);
+  const hasImg = src || srcSet;
+  const hasImgNotFailing = hasImg && imageLoaded !== "error";
+  if (hasImgNotFailing) {
+    children = /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        alt,
+        src,
+        srcSet,
+        sizes,
+        className: classes.img,
+        ...imgProps
+      }
+    );
+  } else if (childrenProp != null) {
+    children = childrenProp;
+  } else if (hasImg && alt) {
+    [children] = alt;
+  } else {
+    children = /* @__PURE__ */ jsxRuntime.jsx(
+      icons.HvIcon,
+      {
+        name: "User",
+        color,
+        size: decreaseSizeMap[size],
+        className: classes.fallback
+      }
+    );
+  }
+  const inlineStyle = {
+    ...style
+  };
+  if (component != null && typeof component !== "string") {
+    inlineStyle.borderRadius = "50%";
+  }
+  if (!hasImgNotFailing) {
+    inlineStyle.backgroundColor = uikitStyles.getColor(backgroundColor, "text");
+    inlineStyle.color = uikitStyles.getColor(color, "textDimmed");
+  }
+  const statusInlineStyle = {};
+  if (status) {
+    const statusColor = uikitStyles.getColor(status, "positive");
+    statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: cx(classes.container, classes.status, classes[variant]),
+      style: statusInlineStyle,
+      ...others,
+      children: [
+        badge && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: classes.badge,
+            style: { backgroundColor: uikitStyles.getColor(badge, "positive") }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          MuiAvatar__default.default,
+          {
+            component,
+            className: cx(classes.root, classes.avatar, classes[size], className),
+            style: inlineStyle,
+            variant,
+            size,
+            ...avatarProps,
+            children
+          }
+        )
+      ]
+    }
+  );
+});
+exports.avatarClasses = Avatar_styles.staticClasses;
+exports.HvAvatar = HvAvatar;