@hitachivantara/uikit-react-core 5.104.0 → 5.105.0

package/dist/esm/TreeView/internals/hooks/useTreeViewModels.js

@@ -0,0 +1,43 @@
+import * as React from "react";
+const useTreeViewModels = (plugins, props) => {
+  const modelsRef = React.useRef({});
+  const [modelsState, setModelsState] = React.useState(() => {
+    const initialState = {};
+    plugins.forEach((plugin) => {
+      if (plugin.models) {
+        Object.entries(plugin.models).forEach(([modelName, model]) => {
+          modelsRef.current[modelName] = {
+            controlledProp: model.controlledProp,
+            defaultProp: model.defaultProp,
+            isControlled: props[model.controlledProp] !== void 0
+          };
+          initialState[modelName] = props[model.defaultProp];
+        });
+      }
+    });
+    return initialState;
+  });
+  const models = Object.fromEntries(
+    Object.entries(modelsRef.current).map(([modelName, model]) => {
+      const value = model.isControlled ? props[model.controlledProp] : modelsState[modelName];
+      return [
+        modelName,
+        {
+          value,
+          setValue: (newValue) => {
+            if (!model.isControlled) {
+              setModelsState((prevState) => ({
+                ...prevState,
+                [modelName]: newValue
+              }));
+            }
+          }
+        }
+      ];
+    })
+  );
+  return models;
+};
+export {
+  useTreeViewModels
+};

package/dist/esm/hooks/useUniqueId.js

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { useEnhancedEffect } from "./useEnhancedEffect.js";
+const useReactId = React["useId".toString()] || (() => void 0);
+let count = 0;
+const useUniqueId = (deterministicId, idPrefix) => {
+  const [id, setId] = React.useState(useReactId());
+  useEnhancedEffect(() => {
+    if (!deterministicId) setId((reactId) => reactId ?? String(count++));
+  }, [deterministicId, idPrefix]);
+  return deterministicId || (idPrefix ? idPrefix + id : id ?? "");
+};
+export {
+  useUniqueId
+};

package/dist/types/index.d.ts

@@ -4516,6 +4516,8 @@ export declare interface HvListItemProps extends HvBaseProps<HTMLLIElement> {
      * If unwanted, the element should be placed directly as a child.
      */
     endAdornment?: React.ReactNode;
+    /** Whether to show a separator after this list item */
+    separator?: boolean;
     /** The value to be set on the 'li' element */
     value?: any;
     /** A Jss Object used to override or extend the styles applied to the component. */
@@ -7646,7 +7648,6 @@ export declare const listClasses: {
     truncate: string;
     item: string;
     itemSelector: string;
-    separator: string;
     link: string;
     selectAllSelector: string;
 };
@@ -7667,6 +7668,7 @@ export declare const listItemClasses: {
     endAdornment: string;
     withStartAdornment: string;
     withEndAdornment: string;
+    separator: string;
 };
 
 export declare const loadingClasses: {
@@ -9795,7 +9797,7 @@ declare const useClasses_59: (classesProp?: Partial<Record<"dropdown" | "label"
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_6: (classesProp?: Partial<Record<"condensed" | "disabled" | "selected" | "root" | "focus" | "endAdornment" | "startAdornment" | "interactive" | "gutters" | "withStartAdornment" | "withEndAdornment", string>>, addStatic?: boolean) => {
+declare const useClasses_6: (classesProp?: Partial<Record<"condensed" | "separator" | "disabled" | "selected" | "root" | "focus" | "endAdornment" | "startAdornment" | "interactive" | "gutters" | "withStartAdornment" | "withEndAdornment", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         focus: string;
@@ -9808,6 +9810,7 @@ declare const useClasses_6: (classesProp?: Partial<Record<"condensed" | "disable
         endAdornment: string;
         withStartAdornment: string;
         withEndAdornment: string;
+        separator: string;
     };
     readonly css: any;
     readonly cx: (...args: any) => string;
@@ -10235,7 +10238,7 @@ declare const useClasses_87: (classesProp?: Partial<Record<"a", string>>, addSta
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_88: (classesProp?: Partial<Record<"link" | "separator" | "root" | "item" | "virtualizedRoot" | "selectorRoot" | "selectorContainer" | "box" | "truncate" | "itemSelector" | "selectAllSelector", string>>, addStatic?: boolean) => {
+declare const useClasses_88: (classesProp?: Partial<Record<"link" | "root" | "item" | "virtualizedRoot" | "selectorRoot" | "selectorContainer" | "box" | "truncate" | "itemSelector" | "selectAllSelector", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         virtualizedRoot: string;
@@ -10245,7 +10248,6 @@ declare const useClasses_88: (classesProp?: Partial<Record<"link" | "separator"
         truncate: string;
         item: string;
         itemSelector: string;
-        separator: string;
         link: string;
         selectAllSelector: string;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.104.0",
+  "version": "5.105.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "UI Kit Core React components.",
@@ -37,6 +37,7 @@
     "@hitachivantara/uikit-styles": "^5.51.0",
     "@internationalized/date": "^3.2.0",
     "@mui/base": "5.0.0-beta.68",
+    "@phosphor-icons/react": "^2.1.7",
     "@popperjs/core": "^2.11.8",
     "@react-aria/datepicker": "^3.9.0",
     "@react-stately/datepicker": "^3.9.0",
@@ -61,7 +62,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "18bba1bbe7a6ecddfcb9f56d1613c547bfd0e6d7",
+  "gitHead": "5ef69f269499dc34d74b7eacb753774759109000",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",

package/dist/cjs/packages/core/src/Accordion/Accordion.cjs

@@ -1,91 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const a = 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 = a.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 = a.useCallback(
-    (event) => {
-      if (!disabled) {
-        onChange?.(event, isOpen);
-        toggleOpen();
-      }
-      if (!disableEventHandling) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-    },
-    [disableEventHandling, disabled, isOpen, onChange, toggleOpen]
-  );
-  const accordionHeader = a.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/packages/core/src/ActionBar/ActionBar.cjs

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const a = require("react");
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const ActionBar_styles = require("./ActionBar.styles.cjs");
-const HvActionBar = a.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/packages/core/src/ActionsGeneric/ActionsGeneric.cjs

@@ -1,111 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const a = 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 = a.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 a.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 = a.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/packages/core/src/AppSwitcher/Action/Action.cjs

@@ -1,120 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const a = 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] = a.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 = a.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/packages/core/src/AppSwitcher/AppSwitcher.cjs

@@ -1,100 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const a = 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 = a.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 = a.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;