@hitachivantara/uikit-react-core 3.52.5

package/dist/modern/VerticalNavigation/Navigation/Navigation.d.ts

@@ -0,0 +1,107 @@
+import React, { MouseEvent } from "react";
+import { StandardProps } from "@material-ui/core";
+
+export interface NavigationData {
+  /**
+   * the id to be applied to the root element.
+   */
+  id: string;
+  /**
+   * the label to be rendered on the menu item.
+   */
+  label: string;
+  /**
+   * Icon to be render.
+   */
+  icon?: React.ReactNode;
+  /**
+   * Data subset.
+   */
+  data?: NavigationData[];
+  /**
+   * Any other properties.
+   */
+  [otherProperty: string]: any;
+}
+
+export type HvNavigationClassKey = "root" | "list" | "listItem";
+
+export interface HvVerticalNavigationNavigationProps
+  extends StandardProps<
+    React.HTMLAttributes<HTMLElement>,
+    HvNavigationClassKey,
+    "onClick" | "onChange"
+  > {
+  /**
+   * Modus operandi (role) of the widget instance.
+   */
+  mode?: "treeview" | "navigation";
+  /**
+   * Can non-leaf nodes be collapsed / expanded.
+   */
+  collapsible?: boolean;
+
+  /**
+   * The ID of the selected page.
+   */
+  selected?: string;
+  /**
+   * When uncontrolled, defines the initial selected page ID.
+   */
+  defaultSelected?: string;
+  /**
+   * Callback fired when a navigation item is selected.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {object} page The data of the selected page.
+   */
+  onChange?: (event: React.SyntheticEvent, selectedItem: NavigationData) => void;
+
+  /**
+   * Expanded nodes' ids.
+   */
+  expanded?: string[];
+  /**
+   * When uncontrolled, defines the initial expanded nodes' ids.
+   *
+   * It also supports `true` for starting with all nodes expanded.
+   * With `false` all nodes will be collapsed.
+   *
+   * By default it expands the needed nodes to display the current selection, if any.
+   */
+  defaultExpanded?: string[] | boolean;
+  /**
+   * Callback fired when tree items are expanded/collapsed.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {array} nodeIds The ids of the expanded nodes.
+   */
+  onToggle?: (event: React.SyntheticEvent, nodeIds: string[]) => void;
+
+  /**
+   * An array containing the data for each menu item.
+   *
+   * id - the id to be applied to the root element.
+   * label - the label to be rendered on the menu item.
+   * data - sub-menu items
+   */
+  data: NavigationData[];
+
+  /**
+   * Callback triggered when any item is clicked.
+   *
+   *  @deprecated use `onChange` for selection and `onToggle` for node expansion/collapse.
+   */
+  onClick?: (event: MouseEvent, selectedItem: NavigationData) => void;
+
+  /**
+   * The root element (nav) aria label.
+   *
+   *  @deprecated Use directly the `aria-label` property instead.
+   */
+  label?: string;
+}
+
+export default function HvVerticalNavigationNavigation(
+  props: HvVerticalNavigationNavigationProps
+): JSX.Element | null;

package/dist/modern/VerticalNavigation/Navigation/Navigation.js

@@ -0,0 +1,267 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["id", "className", "classes", "data", "mode", "collapsible", "expanded", "defaultExpanded", "onToggle", "selected", "defaultSelected", "onChange", "label", "onClick"];
+import "core-js/modules/es.array.unscopables.flat-map.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import React, { useCallback, useMemo } from "react";
+import PropTypes from "prop-types";
+import { deprecatedPropType, withStyles } from "@material-ui/core";
+import clsx from "clsx";
+import TreeView, { TreeViewItem } from "../TreeView";
+import { setId, useControlled } from "../../utils";
+import styles from "./styles";
+import { wrapperTooltip } from "../../List/utils";
+
+const createListHierarchy = (items, id, classes) => items.map(item => {
+  const {
+    id: itemId,
+    label: itemLabel,
+    icon,
+    data: children,
+    selectable
+  } = item;
+  const ItemText = wrapperTooltip(true, itemLabel, itemLabel);
+  return /*#__PURE__*/React.createElement(TreeViewItem, {
+    id: setId(id, itemId),
+    className: classes.listItem,
+    key: itemId,
+    nodeId: itemId,
+    label: /*#__PURE__*/React.createElement(ItemText, null),
+    icon: icon,
+    payload: item,
+    selectable: selectable
+  }, children ? createListHierarchy(children, id, classes) : undefined);
+});
+
+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) {
+    // eslint-disable-next-line no-plusplus
+    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 Navigation = _ref => {
+  let {
+    id,
+    className,
+    classes,
+    data,
+    mode = "navigation",
+    collapsible = false,
+    expanded: expandedProp,
+    defaultExpanded,
+    onToggle,
+    selected: selectedProp,
+    defaultSelected,
+    onChange,
+    label,
+    onClick
+  } = _ref,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  const [selected, setSelected] = useControlled(selectedProp, defaultSelected);
+  const [expanded, setExpanded] = useControlled(expandedProp, () => {
+    if (defaultExpanded === true) {
+      // all parent nodes will be expanded by default
+      return getAllParents(data).map(item => item.id);
+    }
+
+    if (defaultExpanded === false) {
+      // all parent nodes will be collapsed by default
+      return [];
+    }
+
+    if (defaultExpanded == null) {
+      if (selected != null) {
+        // the path to the selected node will be expanded (default behaviour)
+        const path = pathToElement(data, selected);
+        return path.slice(0, -1);
+      } // nothing is expanded
+
+
+      return [];
+    }
+
+    return defaultExpanded;
+  });
+  const handleChange = useCallback((event, selectedId, selectedItem) => {
+    setSelected(selectedId);
+
+    if (onChange) {
+      onChange(event, selectedItem);
+    } // deprecated
+
+
+    if (onClick) {
+      onClick(event, selectedItem);
+    }
+  }, [onChange, onClick, setSelected]);
+  const handleToggle = useCallback((event, newExpanded) => {
+    setExpanded(newExpanded);
+
+    if (onToggle) {
+      onToggle(event, newExpanded);
+    } // deprecated
+
+
+    if (onClick) {
+      onClick(event);
+    }
+  }, [onClick, onToggle, setExpanded]);
+  const children = useMemo(() => data && createListHierarchy(data, id, classes), [classes, data, id]);
+  return /*#__PURE__*/React.createElement("nav", _extends({
+    id: id,
+    className: clsx(className, classes.root),
+    "aria-label": label
+  }, others), /*#__PURE__*/React.createElement(TreeView, {
+    id: setId(id, "tree"),
+    className: classes.list,
+    selectable: true,
+    mode: mode,
+    collapsible: collapsible,
+    selected: selected,
+    onChange: handleChange,
+    expanded: expanded,
+    onToggle: handleToggle
+  }, children));
+};
+
+Navigation.propTypes = {
+  /**
+   * Id to be applied to the root node.
+   */
+  id: PropTypes.string,
+
+  /**
+   * Class names to be applied.
+   */
+  className: PropTypes.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Style applied to the root element.
+     */
+    root: PropTypes.string,
+
+    /**
+     * Style applied to the list.
+     */
+    list: PropTypes.string,
+
+    /**
+     * Style applied to the list items.
+     */
+    listItem: PropTypes.string
+  }).isRequired,
+
+  /**
+   * Modus operandi (role) of the widget instance.
+   */
+  mode: PropTypes.oneOf(["treeview", "navigation"]),
+
+  /**
+   * Can non-leaf nodes be collapsed / expanded.
+   */
+  collapsible: PropTypes.bool,
+
+  /**
+   * The ID of the selected page.
+   */
+  selected: PropTypes.string,
+
+  /**
+   * When uncontrolled, defines the initial selected page ID.
+   */
+  defaultSelected: PropTypes.string,
+
+  /**
+   * Callback fired when a navigation item is selected.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {object} page The data of the selected page.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Expanded nodes' ids.
+   */
+  expanded: PropTypes.arrayOf(PropTypes.string),
+
+  /**
+   * When uncontrolled, defines the initial expanded nodes' ids.
+   *
+   * It also supports `true` for starting with all nodes expanded.
+   * With `false` all nodes will be collapsed.
+   *
+   * By default it expands the needed nodes to display the current selection, if any.
+   */
+  defaultExpanded: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.bool]),
+
+  /**
+   * Callback fired when tree items are expanded/collapsed.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {array} nodeIds The ids of the expanded nodes (old and new).
+   */
+  onToggle: PropTypes.func,
+
+  /**
+   * An array containing the data for each menu item.
+   *
+   * id - the id to be applied to the root element.
+   * label - the label to be rendered on the menu item.
+   * data - sub-menu items
+   */
+  data: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    icon: PropTypes.node,
+    data: PropTypes.array
+  })).isRequired,
+
+  /**
+   * Callback triggered when any item is clicked.
+   *
+   *  @deprecated use `onChange` for selection and `onToggle` for node expansion/collapse.
+   */
+  onClick: deprecatedPropType(PropTypes.func),
+
+  /**
+   * The root element (nav) aria label.
+   *
+   *  @deprecated Use directly the `aria-label` property instead.
+   */
+  label: deprecatedPropType(PropTypes.string)
+};
+export default withStyles(styles, {
+  name: "HvVerticalNavigationNavigation"
+})(Navigation);
+//# sourceMappingURL=Navigation.js.map

package/dist/modern/VerticalNavigation/Navigation/Navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/VerticalNavigation/Navigation/Navigation.js"],"names":["React","useCallback","useMemo","PropTypes","deprecatedPropType","withStyles","clsx","TreeView","TreeViewItem","setId","useControlled","styles","wrapperTooltip","createListHierarchy","items","id","classes","map","item","itemId","label","itemLabel","icon","data","children","selectable","ItemText","listItem","undefined","getAllParents","parents","filter","length","childParents","flatMap","pathToElement","targetId","path","i","push","subPaths","Navigation","className","mode","collapsible","expanded","expandedProp","defaultExpanded","onToggle","selected","selectedProp","defaultSelected","onChange","onClick","others","setSelected","setExpanded","slice","handleChange","event","selectedId","selectedItem","handleToggle","newExpanded","root","list","propTypes","string","shape","isRequired","oneOf","bool","func","arrayOf","oneOfType","node","array","name"],"mappings":"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","sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { deprecatedPropType, withStyles } from \"@material-ui/core\";\nimport clsx from \"clsx\";\nimport TreeView, { TreeViewItem } from \"../TreeView\";\nimport { setId, useControlled } from \"../../utils\";\nimport styles from \"./styles\";\nimport { wrapperTooltip } from \"../../List/utils\";\n\nconst createListHierarchy = (items, id, classes) =>\n  items.map((item) => {\n    const { id: itemId, label: itemLabel, icon, data: children, selectable } = item;\n\n    const ItemText = wrapperTooltip(true, itemLabel, itemLabel);\n\n    return (\n      <TreeViewItem\n        id={setId(id, itemId)}\n        className={classes.listItem}\n        key={itemId}\n        nodeId={itemId}\n        label={<ItemText />}\n        icon={icon}\n        payload={item}\n        selectable={selectable}\n      >\n        {children ? createListHierarchy(children, id, classes) : undefined}\n      </TreeViewItem>\n    );\n  });\n\nconst getAllParents = (items) => {\n  const parents = items.filter((item) => item.data != null && item.data.length > 0);\n  const childParents = parents.flatMap((item) => getAllParents(item.data));\n\n  return [...parents, ...childParents];\n};\n\nfunction pathToElement(data, targetId) {\n  const path = [];\n\n  if (data != null && data.length > 0) {\n    // eslint-disable-next-line no-plusplus\n    for (let i = 0; i !== data.length; ++i) {\n      const item = data[i];\n      if (item.id === targetId) {\n        path.push(item.id);\n        break;\n      }\n\n      const subPaths = pathToElement(item.data, targetId);\n      if (subPaths.length > 0) {\n        path.push(item.id);\n        path.push(...subPaths);\n        break;\n      }\n    }\n  }\n\n  return path;\n}\n\nconst Navigation = ({\n  id,\n\n  className,\n  classes,\n\n  data,\n\n  mode = \"navigation\",\n\n  collapsible = false,\n  expanded: expandedProp,\n  defaultExpanded,\n  onToggle,\n\n  selected: selectedProp,\n  defaultSelected,\n  onChange,\n\n  label,\n  onClick,\n\n  ...others\n}) => {\n  const [selected, setSelected] = useControlled(selectedProp, defaultSelected);\n  const [expanded, setExpanded] = useControlled(expandedProp, () => {\n    if (defaultExpanded === true) {\n      // all parent nodes will be expanded by default\n      return getAllParents(data).map((item) => item.id);\n    }\n\n    if (defaultExpanded === false) {\n      // all parent nodes will be collapsed by default\n      return [];\n    }\n\n    if (defaultExpanded == null) {\n      if (selected != null) {\n        // the path to the selected node will be expanded (default behaviour)\n        const path = pathToElement(data, selected);\n        return path.slice(0, -1);\n      }\n\n      // nothing is expanded\n      return [];\n    }\n\n    return defaultExpanded;\n  });\n\n  const handleChange = useCallback(\n    (event, selectedId, selectedItem) => {\n      setSelected(selectedId);\n\n      if (onChange) {\n        onChange(event, selectedItem);\n      }\n\n      // deprecated\n      if (onClick) {\n        onClick(event, selectedItem);\n      }\n    },\n    [onChange, onClick, setSelected]\n  );\n\n  const handleToggle = useCallback(\n    (event, newExpanded) => {\n      setExpanded(newExpanded);\n\n      if (onToggle) {\n        onToggle(event, newExpanded);\n      }\n\n      // deprecated\n      if (onClick) {\n        onClick(event);\n      }\n    },\n    [onClick, onToggle, setExpanded]\n  );\n\n  const children = useMemo(\n    () => data && createListHierarchy(data, id, classes),\n    [classes, data, id]\n  );\n\n  return (\n    <nav id={id} className={clsx(className, classes.root)} aria-label={label} {...others}>\n      <TreeView\n        id={setId(id, \"tree\")}\n        className={classes.list}\n        selectable\n        mode={mode}\n        collapsible={collapsible}\n        selected={selected}\n        onChange={handleChange}\n        expanded={expanded}\n        onToggle={handleToggle}\n      >\n        {children}\n      </TreeView>\n    </nav>\n  );\n};\n\nNavigation.propTypes = {\n  /**\n   * Id to be applied to the root node.\n   */\n  id: PropTypes.string,\n\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Style applied to the root element.\n     */\n    root: PropTypes.string,\n    /**\n     * Style applied to the list.\n     */\n    list: PropTypes.string,\n    /**\n     * Style applied to the list items.\n     */\n    listItem: PropTypes.string,\n  }).isRequired,\n\n  /**\n   * Modus operandi (role) of the widget instance.\n   */\n  mode: PropTypes.oneOf([\"treeview\", \"navigation\"]),\n  /**\n   * Can non-leaf nodes be collapsed / expanded.\n   */\n  collapsible: PropTypes.bool,\n\n  /**\n   * The ID of the selected page.\n   */\n  selected: PropTypes.string,\n  /**\n   * When uncontrolled, defines the initial selected page ID.\n   */\n  defaultSelected: PropTypes.string,\n  /**\n   * Callback fired when a navigation item is selected.\n   *\n   * @param {object} event The event source of the callback.\n   * @param {object} page The data of the selected page.\n   */\n  onChange: PropTypes.func,\n\n  /**\n   * Expanded nodes' ids.\n   */\n  expanded: PropTypes.arrayOf(PropTypes.string),\n  /**\n   * When uncontrolled, defines the initial expanded nodes' ids.\n   *\n   * It also supports `true` for starting with all nodes expanded.\n   * With `false` all nodes will be collapsed.\n   *\n   * By default it expands the needed nodes to display the current selection, if any.\n   */\n  defaultExpanded: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.bool]),\n  /**\n   * Callback fired when tree items are expanded/collapsed.\n   *\n   * @param {object} event The event source of the callback.\n   * @param {array} nodeIds The ids of the expanded nodes (old and new).\n   */\n  onToggle: PropTypes.func,\n\n  /**\n   * An array containing the data for each menu item.\n   *\n   * id - the id to be applied to the root element.\n   * label - the label to be rendered on the menu item.\n   * data - sub-menu items\n   */\n  data: PropTypes.arrayOf(\n    PropTypes.shape({\n      id: PropTypes.string.isRequired,\n      label: PropTypes.string.isRequired,\n      icon: PropTypes.node,\n      data: PropTypes.array,\n    })\n  ).isRequired,\n\n  /**\n   * Callback triggered when any item is clicked.\n   *\n   *  @deprecated use `onChange` for selection and `onToggle` for node expansion/collapse.\n   */\n  onClick: deprecatedPropType(PropTypes.func),\n  /**\n   * The root element (nav) aria label.\n   *\n   *  @deprecated Use directly the `aria-label` property instead.\n   */\n  label: deprecatedPropType(PropTypes.string),\n};\n\nexport default withStyles(styles, { name: \"HvVerticalNavigationNavigation\" })(Navigation);\n"],"file":"Navigation.js"}

package/dist/modern/VerticalNavigation/Navigation/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Navigation";
+export * from "./Navigation";

package/dist/modern/VerticalNavigation/Navigation/index.js

@@ -0,0 +1,2 @@
+export { default } from "./Navigation";
+//# sourceMappingURL=index.js.map

package/dist/modern/VerticalNavigation/Navigation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/VerticalNavigation/Navigation/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,cAAxB","sourcesContent":["export { default } from \"./Navigation\";\n"],"file":"index.js"}

package/dist/modern/VerticalNavigation/Navigation/styles.js

@@ -0,0 +1,12 @@
+const styles = theme => ({
+  root: {
+    display: "block",
+    background: theme.hv.palette.atmosphere.atmo1,
+    overflowY: "auto"
+  },
+  list: {},
+  listItem: {}
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/modern/VerticalNavigation/Navigation/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/VerticalNavigation/Navigation/styles.js"],"names":["styles","theme","root","display","background","hv","palette","atmosphere","atmo1","overflowY","list","listItem"],"mappings":"AAAA,MAAMA,MAAM,GAAIC,KAAD,KAAY;AACzBC,EAAAA,IAAI,EAAE;AACJC,IAAAA,OAAO,EAAE,OADL;AAEJC,IAAAA,UAAU,EAAEH,KAAK,CAACI,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BC,KAFpC;AAIJC,IAAAA,SAAS,EAAE;AAJP,GADmB;AAOzBC,EAAAA,IAAI,EAAE,EAPmB;AAQzBC,EAAAA,QAAQ,EAAE;AARe,CAAZ,CAAf;;AAWA,eAAeX,MAAf","sourcesContent":["const styles = (theme) => ({\n  root: {\n    display: \"block\",\n    background: theme.hv.palette.atmosphere.atmo1,\n\n    overflowY: \"auto\",\n  },\n  list: {},\n  listItem: {},\n});\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/modern/VerticalNavigation/TreeView/TreeView.d.ts

@@ -0,0 +1,111 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+
+export type HvVerticalNavigationTreeViewClassKey = "root";
+
+export interface HvVerticalNavigationTreeViewPropsBase
+  extends StandardProps<
+    React.HTMLAttributes<HTMLUListElement>,
+    HvVerticalNavigationTreeViewClassKey,
+    "onChange"
+  > {
+  /**
+   * Modus operandi (role) of the widget instance.
+   */
+  mode?: "treeview" | "navigation";
+  /**
+   * Enables selection.
+   * @default false
+   */
+  selectable?: boolean;
+  /**
+   * Can non-leaf nodes be collapsed / expanded.
+   */
+  collapsible?: boolean;
+  /**
+   * Expanded nodes' ids.
+   */
+  expanded?: string[];
+  /**
+   * When uncontrolled, defines the initial expanded nodes' ids.
+   * @default []
+   */
+  defaultExpanded?: string[];
+  /**
+   * Callback fired when tree items are expanded/collapsed.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {array} nodeIds The ids of the expanded nodes.
+   */
+  onToggle?: (event: React.SyntheticEvent, nodeIds: string[]) => void;
+  /**
+   * If `true`, will allow focus on disabled items.
+   * @default false
+   */
+  disabledItemsFocusable?: boolean;
+}
+
+interface MultiSelectTreeViewProps extends HvVerticalNavigationTreeViewPropsBase {
+  /**
+   * The selected nodes' ids.
+   *
+   * When `multiSelect` is true this takes an array of strings; when false (default) a string.
+   */
+  selected?: string[];
+  /**
+   * When uncontrolled, defines the initial selected nodes' ids.
+   *
+   * When `multiSelect` is true this takes an array of strings; when false (default) a string.
+   * @default []
+   */
+  defaultSelected?: string[];
+  /**
+   * Enables the simultaneous selection of multiple items.
+   * @default false
+   */
+  multiSelect?: true;
+  /**
+   * Callback fired when tree items are selected/unselected.
+   *
+   * @param {object} event The event source of the callback
+   * @param {(array|string)} value of the selected nodes. When `multiSelect` is true
+   * this is an array of strings; when false (default) a string.
+   */
+  onChange?: (event: React.SyntheticEvent, nodeIds: string[]) => void;
+}
+
+interface SingleSelectTreeViewProps extends HvVerticalNavigationTreeViewPropsBase {
+  /**
+   * The selected nodes' ids.
+   *
+   * When `multiSelect` is true this takes an array of strings; when false (default) a string.
+   */
+  selected?: string;
+  /**
+   * When uncontrolled, defines the initial selected nodes' ids.
+   *
+   * When `multiSelect` is true this takes an array of strings; when false (default) a string.
+   */
+  defaultSelected?: string;
+  /**
+   * Enables the simultaneous selection of multiple items.
+   * @default false
+   */
+  multiSelect?: false;
+  /**
+   * Callback fired when tree items are selected/unselected.
+   *
+   * @param {object} event The event source of the callback
+   * @param {(array|string)} value of the selected nodes. When `multiSelect` is true
+   * this is an array of strings; when false (default) a string.
+   */
+  onChange?: (event: React.SyntheticEvent, nodeIds: string) => void;
+}
+
+export type HvVerticalNavigationTreeViewProps =
+  | SingleSelectTreeViewProps
+  | MultiSelectTreeViewProps;
+
+export default function HvVerticalNavigationTreeView(
+  props: HvVerticalNavigationTreeViewProps
+): JSX.Element | null;