@hitachivantara/uikit-react-core 5.104.0 → 5.105.0

package/dist/cjs/TreeView/internals/hooks/useTreeView.cjs

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const utils = require("@mui/material/utils");
+const corePlugins = require("../corePlugins.cjs");
+const TreeViewProvider = require("../TreeViewProvider.cjs");
+const useTreeViewModels = require("./useTreeViewModels.cjs");
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespace(React);
+const useTreeView = (inParams) => {
+  const plugins = [...corePlugins.TREE_VIEW_CORE_PLUGINS, ...inParams.plugins];
+  const params = plugins.reduce((acc, plugin) => {
+    if (plugin.getDefaultizedParams) {
+      return plugin.getDefaultizedParams(acc);
+    }
+    return acc;
+  }, inParams);
+  const models = useTreeViewModels.useTreeViewModels(
+    plugins,
+    params
+  );
+  const instanceRef = React__namespace.useRef(
+    {}
+  );
+  const instance = instanceRef.current;
+  const innerRootRef = React__namespace.useRef(null);
+  const handleRootRef = utils.useForkRef(innerRootRef, inParams.rootRef);
+  const [state, setState] = React__namespace.useState(() => {
+    const temp = {};
+    plugins.forEach((plugin) => {
+      if (plugin.getInitialState) {
+        Object.assign(
+          temp,
+          plugin.getInitialState(
+            params
+          )
+        );
+      }
+    });
+    return temp;
+  });
+  const rootPropsGetters = [];
+  let contextValue = TreeViewProvider.DEFAULT_TREE_VIEW_CONTEXT_VALUE;
+  const runPlugin = (plugin) => {
+    const pluginResponse = plugin({
+      instance,
+      params,
+      state,
+      setState,
+      rootRef: innerRootRef,
+      models
+    }) || {};
+    if (pluginResponse.getRootProps) {
+      rootPropsGetters.push(pluginResponse.getRootProps);
+    }
+    if (pluginResponse.contextValue) {
+      contextValue = pluginResponse.contextValue;
+    }
+  };
+  plugins.forEach(runPlugin);
+  const getRootProps = (otherHandlers = {}) => {
+    const rootProps = {
+      role: "tree",
+      tabIndex: 0,
+      ...otherHandlers,
+      ref: handleRootRef
+    };
+    rootPropsGetters.forEach((rootPropsGetter) => {
+      Object.assign(rootProps, rootPropsGetter(otherHandlers));
+    });
+    return rootProps;
+  };
+  return { getRootProps, rootRef: handleRootRef, contextValue };
+};
+exports.useTreeView = useTreeView;

package/dist/cjs/TreeView/internals/hooks/useTreeViewInstanceEvents.cjs

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const EventManager = require("../utils/EventManager.cjs");
+const utils = require("./utils.cjs");
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespace(React);
+const isSyntheticEvent = (event) => {
+  return event.isPropagationStopped !== void 0;
+};
+const useTreeViewInstanceEvents = ({ instance }) => {
+  const [eventManager] = React__namespace.useState(() => new EventManager.EventManager());
+  const publishEvent = React__namespace.useCallback(
+    (...args) => {
+      const [name, params, event = {}] = args;
+      event.defaultMuiPrevented = false;
+      if (isSyntheticEvent(event) && event.isPropagationStopped()) {
+        return;
+      }
+      eventManager.emit(name, params, event);
+    },
+    [eventManager]
+  );
+  const subscribeEvent = React__namespace.useCallback(
+    (event, handler) => {
+      eventManager.on(event, handler);
+      return () => {
+        eventManager.removeListener(event, handler);
+      };
+    },
+    [eventManager]
+  );
+  utils.populateInstance(instance, {
+    $$publishEvent: publishEvent,
+    $$subscribeEvent: subscribeEvent
+  });
+};
+exports.useTreeViewInstanceEvents = useTreeViewInstanceEvents;

package/dist/cjs/TreeView/internals/hooks/useTreeViewModels.cjs

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespace(React);
+const useTreeViewModels = (plugins, props) => {
+  const modelsRef = React__namespace.useRef({});
+  const [modelsState, setModelsState] = React__namespace.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;
+};
+exports.useTreeViewModels = useTreeViewModels;

package/dist/cjs/VerticalNavigation/Actions/Action.cjs

@@ -0,0 +1,46 @@
+"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 setId = require("../../utils/setId.cjs");
+const VerticalNavigationContext = require("../VerticalNavigationContext.cjs");
+const Action_styles = require("./Action.styles.cjs");
+const Button = require("../../Button/Button.cjs");
+const HvVerticalNavigationAction = (props) => {
+  const {
+    className,
+    classes: classesProp,
+    id,
+    label = "",
+    icon,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvVerticalNavigationAction", props);
+  const { isOpen } = React.useContext(VerticalNavigationContext.VerticalNavigationContext);
+  const { classes, cx } = Action_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Button.HvButton,
+    {
+      id: setId.setId(id, "button"),
+      variant: "secondaryGhost",
+      icon: !isOpen,
+      startIcon: isOpen && icon,
+      className: cx(
+        classes.action,
+        {
+          [classes.noIcon]: !icon,
+          [classes.minimized]: !isOpen
+        },
+        className
+      ),
+      ...!isOpen && { "aria-label": label },
+      ...others,
+      children: [
+        !isOpen && icon,
+        isOpen && label
+      ]
+    }
+  );
+};
+exports.actionClasses = Action_styles.staticClasses;
+exports.HvVerticalNavigationAction = HvVerticalNavigationAction;

package/dist/cjs/VerticalNavigation/Actions/Actions.cjs

@@ -0,0 +1,33 @@
+"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 VerticalNavigationContext = require("../VerticalNavigationContext.cjs");
+const Actions_styles = require("./Actions.styles.cjs");
+const HvVerticalNavigationActions = (props) => {
+  const {
+    className,
+    classes: classesProp,
+    children,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvVerticalNavigationActions", props);
+  const { classes, cx } = Actions_styles.useClasses(classesProp);
+  const { isOpen, useIcons } = React.useContext(VerticalNavigationContext.VerticalNavigationContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cx(
+        classes.root,
+        {
+          [classes.hide]: !isOpen && !useIcons
+        },
+        className
+      ),
+      ...others,
+      children
+    }
+  );
+};
+exports.actionsClasses = Actions_styles.staticClasses;
+exports.HvVerticalNavigationActions = HvVerticalNavigationActions;

package/dist/cjs/VerticalNavigation/Header/Header.cjs

@@ -0,0 +1,94 @@
+"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 VerticalNavigationContext = require("../VerticalNavigationContext.cjs");
+const Header_styles = require("./Header.styles.cjs");
+const Button = require("../../Button/Button.cjs");
+const Typography = require("../../Typography/Typography.cjs");
+const HvVerticalNavigationHeader = (props) => {
+  const {
+    title,
+    openIcon: openIconProp,
+    closeIcon: closeIconProp,
+    collapseButtonProps = {},
+    backButtonProps = {},
+    className,
+    classes: classesProp,
+    onCollapseButtonClick,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvVerticalNavigationHeader", props);
+  const {
+    isOpen,
+    useIcons,
+    headerTitle,
+    slider,
+    navigateToParentHandler,
+    parentItem
+  } = React.useContext(VerticalNavigationContext.VerticalNavigationContext);
+  const { classes, cx } = Header_styles.useClasses(classesProp);
+  const shouldShowTitle = React.useMemo(
+    () => !slider || slider && !Array.isArray(parentItem),
+    [parentItem, slider]
+  );
+  if (!shouldShowTitle) return null;
+  const openIcon = openIconProp ?? /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: useIcons ? "Forwards" : "Menu" });
+  const closeIcon = closeIconProp ?? /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Backwards" });
+  const handleClickBack = () => navigateToParentHandler?.();
+  const { className: backButtonClassName, ...otherBackButtonProps } = backButtonProps;
+  const {
+    className: collapseButtonClassName,
+    classes: collapseButtonClasses,
+    ...otherCollapseButtonProps
+  } = collapseButtonProps;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cx(classes.root, { [classes.minimized]: !isOpen }, className),
+      ...others,
+      children: [
+        isOpen && headerTitle && slider && /* @__PURE__ */ jsxRuntime.jsx(
+          Button.HvButton,
+          {
+            icon: true,
+            onClick: handleClickBack,
+            className: cx(classes.backButton, backButtonClassName),
+            "aria-label": "Back",
+            ...otherBackButtonProps,
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Backwards", size: "xs" })
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+          Typography.HvTypography,
+          {
+            variant: slider ? "label" : "title3",
+            className: classes.title,
+            children: headerTitle && slider ? headerTitle : title
+          }
+        ),
+        onCollapseButtonClick && /* @__PURE__ */ jsxRuntime.jsx(
+          Button.HvButton,
+          {
+            icon: true,
+            onClick: onCollapseButtonClick,
+            className: cx(classes.collapseButton, collapseButtonClassName),
+            classes: {
+              ...collapseButtonClasses,
+              root: cx(
+                { [classes.minimized]: !isOpen },
+                // TODO - v6 don't use minimized classes in two different places
+                collapseButtonClasses?.root
+              )
+            },
+            ...otherCollapseButtonProps,
+            children: isOpen ? closeIcon : openIcon
+          }
+        )
+      ]
+    }
+  );
+};
+exports.verticalNavigationHeaderClasses = Header_styles.staticClasses;
+exports.HvVerticalNavigationHeader = HvVerticalNavigationHeader;

package/dist/cjs/VerticalNavigation/Navigation/Navigation.cjs

@@ -0,0 +1,284 @@
+"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 useControlled = require("../../hooks/useControlled.cjs");
+const helpers = require("../../utils/helpers.cjs");
+const setId = require("../../utils/setId.cjs");
+const NavigationPopupContainer = require("../NavigationPopup/NavigationPopupContainer.cjs");
+const utils = require("../NavigationSlider/utils.cjs");
+const VerticalNavigationContext = require("../VerticalNavigationContext.cjs");
+const Navigation_styles = require("./Navigation.styles.cjs");
+const NavigationSlider = require("../NavigationSlider/NavigationSlider.cjs");
+const TreeView = require("../TreeView/TreeView.cjs");
+const TreeViewItem = require("../TreeView/TreeViewItem.cjs");
+const createListHierarchy = (items, id, classes, mouseEnterHandler, disableTooltip = false) => items.map((item) => {
+  const {
+    id: itemId,
+    label: itemLabel,
+    icon,
+    data: children,
+    selectable,
+    disabled,
+    href,
+    target
+  } = item;
+  const itemMouseEnterHandler = (event) => {
+    mouseEnterHandler?.(event, item);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TreeViewItem.HvVerticalNavigationTreeViewItem,
+    {
+      id: setId.setId(id, itemId),
+      className: classes?.listItem,
+      href,
+      target,
+      nodeId: itemId,
+      label: itemLabel,
+      icon,
+      payload: item,
+      selectable,
+      disabled,
+      onMouseEnter: itemMouseEnterHandler,
+      disableTooltip,
+      children: children ? createListHierarchy(
+        children,
+        id,
+        classes,
+        mouseEnterHandler,
+        disableTooltip
+      ) : void 0
+    },
+    itemId
+  );
+});
+const getAllParents = (items) => {
+  const parents = items.filter(
+    (item) => item.data != null && item.data.length > 0
+  );
+  const childParents = parents.flatMap((item) => getAllParents(item.data));
+  return [...parents, ...childParents];
+};
+function pathToElement(data, targetId) {
+  const path = [];
+  if (data != null && data.length > 0) {
+    for (let i = 0; i !== data.length; ++i) {
+      const item = data[i];
+      if (item.id === targetId) {
+        path.push(item.id);
+        break;
+      }
+      const subPaths = pathToElement(item.data, targetId);
+      if (subPaths.length > 0) {
+        path.push(item.id);
+        path.push(...subPaths);
+        break;
+      }
+    }
+  }
+  return path;
+}
+const HvVerticalNavigationTree = (props) => {
+  const {
+    id,
+    className,
+    classes: classesProp,
+    data,
+    mode = "navigation",
+    collapsible = false,
+    expanded: expandedProp,
+    defaultExpanded,
+    onToggle,
+    selected: selectedProp,
+    defaultSelected,
+    onChange,
+    sliderForwardButtonAriaLabel = "Navigate to submenu",
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvVerticalNavigationTree", props);
+  const { classes, cx } = Navigation_styles.useClasses(classesProp);
+  const [selected, setSelected] = useControlled.useControlled(selectedProp, defaultSelected);
+  const [expanded, setExpanded] = useControlled.useControlled(expandedProp, () => {
+    if (defaultExpanded === true) {
+      return getAllParents(data).map((item) => item.id);
+    }
+    if (defaultExpanded === false) {
+      return [];
+    }
+    if (defaultExpanded == null) {
+      if (selected != null) {
+        const path = pathToElement(data, selected);
+        return path.slice(0, -1);
+      }
+      return [];
+    }
+    return defaultExpanded;
+  });
+  const {
+    isOpen,
+    useIcons,
+    slider,
+    parentItem,
+    setParentItem,
+    withParentData,
+    navigateToChildHandler,
+    setParentData,
+    setParentSelected
+  } = React.useContext(VerticalNavigationContext.VerticalNavigationContext);
+  const [navigationPopup, setNavigationPopup] = React.useState(null);
+  const handleChange = React.useCallback(
+    (event, selectedId, selectedItem) => {
+      if (useIcons && !isOpen && selectedItem.data) {
+        const currentEventTarget = event.currentTarget;
+        setNavigationPopup((prevState) => {
+          return prevState?.anchorEl === currentEventTarget ? null : {
+            uniqueKey: helpers.uniqueId(),
+            anchorEl: currentEventTarget,
+            fixedMode: true,
+            data: selectedItem.data
+          };
+        });
+        event.stopPropagation();
+      } else {
+        setSelected(selectedId);
+        setExpanded((prevState) => {
+          if (!isOpen) {
+            return [...prevState, ...pathToElement(data, selectedId)];
+          }
+          return [...prevState];
+        });
+        setNavigationPopup(null);
+        onChange?.(event, selectedItem);
+      }
+    },
+    [onChange, setSelected, setExpanded, isOpen, useIcons, data]
+  );
+  const treeViewItemMouseEnterHandler = React.useCallback(
+    (event, item) => {
+      const isCollapsed = useIcons && !isOpen;
+      if (isCollapsed && item.data && !navigationPopup?.fixedMode) {
+        const currentEventTarget = event.currentTarget;
+        setNavigationPopup?.({
+          uniqueKey: helpers.uniqueId(),
+          anchorEl: currentEventTarget,
+          fixedMode: false,
+          data: item.data
+        });
+      } else if (isCollapsed && !item.data && !navigationPopup?.fixedMode) {
+        setNavigationPopup(null);
+      }
+    },
+    [isOpen, useIcons, navigationPopup]
+  );
+  const handleToggle = React.useCallback(
+    (event, newExpanded) => {
+      setExpanded(newExpanded);
+      onToggle?.(event, newExpanded);
+    },
+    [onToggle, setExpanded]
+  );
+  const children = React.useMemo(
+    () => data && createListHierarchy(
+      data,
+      id,
+      classes,
+      treeViewItemMouseEnterHandler,
+      navigationPopup?.fixedMode
+    ),
+    [classes, data, id, navigationPopup, treeViewItemMouseEnterHandler]
+  );
+  React.useEffect(() => {
+    if (!isOpen) {
+      setNavigationPopup?.(null);
+    }
+  }, [isOpen]);
+  React.useEffect(() => {
+    if (setParentSelected) setParentSelected(selected);
+  }, [selected, setSelected, setParentSelected]);
+  React.useEffect(() => {
+    if (setParentData) setParentData(data);
+  }, [data, setParentData]);
+  React.useEffect(() => {
+    if (withParentData && selected && setParentItem && utils.getParentItemById(withParentData, selected)) {
+      setParentItem(utils.getParentItemById(withParentData, selected));
+    }
+  }, [withParentData, selected, setParentItem]);
+  const navigateToTargetHandler = (event, selectedItem) => handleChange(event, selectedItem.id, selectedItem);
+  const handleNavigationPopupClose = () => setNavigationPopup(null);
+  const handleStyledNavMouseLeave = () => {
+    if (useIcons && !isOpen && !navigationPopup?.fixedMode) {
+      setNavigationPopup(null);
+    }
+  };
+  const handleNavigationPopupMouseLeave = () => {
+    if (!navigationPopup?.fixedMode) {
+      handleNavigationPopupClose();
+    }
+  };
+  const handleNavigationPopupChange = (event, selectedItem) => {
+    handleChange(event, selectedItem.id, selectedItem);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "nav",
+    {
+      id,
+      className: cx(
+        classes.root,
+        { [classes.collapsed]: !isOpen && !useIcons },
+        className
+      ),
+      onMouseLeave: handleStyledNavMouseLeave,
+      ...others,
+      children: slider ? /* @__PURE__ */ jsxRuntime.jsx(
+        NavigationSlider.HvVerticalNavigationSlider,
+        {
+          data: parentItem.data || withParentData,
+          selected,
+          onNavigateToTarget: navigateToTargetHandler,
+          onNavigateToChild: navigateToChildHandler,
+          forwardButtonAriaLabel: sliderForwardButtonAriaLabel
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsxs(
+        TreeView.HvVerticalNavigationTreeView,
+        {
+          id: setId.setId(id, "tree"),
+          className: classes.list,
+          selectable: true,
+          mode,
+          collapsible,
+          selected,
+          onChange: handleChange,
+          expanded,
+          onToggle: handleToggle,
+          children: [
+            useIcons && !isOpen && navigationPopup && /* @__PURE__ */ jsxRuntime.jsx(
+              NavigationPopupContainer.NavigationPopupContainer,
+              {
+                anchorEl: navigationPopup.anchorEl,
+                onClose: handleNavigationPopupClose,
+                className: classes.navigationPopup,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  HvVerticalNavigationTree,
+                  {
+                    className: classes.popup,
+                    id: setId.setId(id, "navigation-popup-tree"),
+                    collapsible: true,
+                    defaultExpanded: true,
+                    selected,
+                    data: navigationPopup.data,
+                    onChange: handleNavigationPopupChange,
+                    onMouseLeave: handleNavigationPopupMouseLeave
+                  }
+                )
+              },
+              navigationPopup.uniqueKey
+            ),
+            children
+          ]
+        }
+      )
+    }
+  );
+};
+exports.verticalNavigationTreeClasses = Navigation_styles.staticClasses;
+exports.HvVerticalNavigationTree = HvVerticalNavigationTree;