@hitachivantara/uikit-react-core 2.23.2

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

@@ -0,0 +1,109 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className", "classes", "id", "label", "data", "selected", "onClick"];
+import React, { useCallback, useMemo } from "react";
+import PropTypes from "prop-types";
+import { withStyles } from "@material-ui/core";
+import clsx from "clsx";
+import TreeView, { TreeViewItem } from "../TreeView";
+import { setId } from "../../utils";
+import styles from "./styles";
+
+const createListHierarchy = (items, id) => items.map(item => {
+  const {
+    id: itemId,
+    label: itemLabel,
+    icon,
+    data: children
+  } = item;
+  return /*#__PURE__*/React.createElement(TreeViewItem, {
+    id: setId(id, itemId),
+    key: itemId,
+    nodeId: itemId,
+    label: itemLabel,
+    icon: icon,
+    payload: item
+  }, children ? createListHierarchy(children) : undefined);
+});
+
+const Navigation = _ref => {
+  let {
+    className,
+    classes,
+    id,
+    label = null,
+    data,
+    selected = null,
+    onClick = null
+  } = _ref,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  const handleChange = useCallback((event, selectedId, selectedItem) => {
+    if (onClick) onClick(event, selectedItem);
+  }, [onClick]);
+  const children = useMemo(() => data && createListHierarchy(data, id), [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"),
+    selected: selected,
+    onChange: handleChange,
+    mode: "navigation"
+  }, children));
+};
+
+process.env.NODE_ENV !== "production" ? Navigation.propTypes = {
+  /**
+   * 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 component.
+     */
+    root: PropTypes.string
+  }).isRequired,
+
+  /**
+   * Id to be applied to the root node.
+   */
+  id: PropTypes.string,
+
+  /**
+   * Label.
+   */
+  label: PropTypes.string,
+
+  /**
+   * 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: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    icon: PropTypes.node,
+    data: PropTypes.array
+  })).isRequired,
+
+  /**
+   * Menu item id selected.
+   */
+  selected: PropTypes.string,
+
+  /**
+   * Callback triggered when any item is clicked.
+   */
+  onClick: PropTypes.func
+} : void 0;
+export default withStyles(styles, {
+  name: "HvVerticalNavigationNavigation"
+})(Navigation);
+//# sourceMappingURL=Navigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.js","names":["React","useCallback","useMemo","PropTypes","withStyles","clsx","TreeView","TreeViewItem","setId","styles","createListHierarchy","items","id","map","item","itemId","label","itemLabel","icon","data","children","undefined","Navigation","className","classes","selected","onClick","others","handleChange","event","selectedId","selectedItem","root","propTypes","string","shape","isRequired","arrayOf","node","array","func","name"],"sources":["../../../../src/VerticalNavigation/Navigation/Navigation.js"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@material-ui/core\";\nimport clsx from \"clsx\";\nimport TreeView, { TreeViewItem } from \"../TreeView\";\nimport { setId } from \"../../utils\";\nimport styles from \"./styles\";\n\nconst createListHierarchy = (items, id) =>\n  items.map((item) => {\n    const { id: itemId, label: itemLabel, icon, data: children } = item;\n\n    return (\n      <TreeViewItem\n        id={setId(id, itemId)}\n        key={itemId}\n        nodeId={itemId}\n        label={itemLabel}\n        icon={icon}\n        payload={item}\n      >\n        {children ? createListHierarchy(children) : undefined}\n      </TreeViewItem>\n    );\n  });\n\nconst Navigation = ({\n  className,\n  classes,\n  id,\n  label = null,\n  data,\n  selected = null,\n  onClick = null,\n  ...others\n}) => {\n  const handleChange = useCallback(\n    (event, selectedId, selectedItem) => {\n      if (onClick) onClick(event, selectedItem);\n    },\n    [onClick]\n  );\n\n  const children = useMemo(() => data && createListHierarchy(data, id), [data, id]);\n\n  return (\n    <nav id={id} className={clsx(className, classes.root)} aria-label={label} {...others}>\n      <TreeView\n        id={setId(id, \"tree\")}\n        selected={selected}\n        onChange={handleChange}\n        mode=\"navigation\"\n      >\n        {children}\n      </TreeView>\n    </nav>\n  );\n};\n\nNavigation.propTypes = {\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 component.\n     */\n    root: PropTypes.string,\n  }).isRequired,\n  /**\n   * Id to be applied to the root node.\n   */\n  id: PropTypes.string,\n  /**\n   * Label.\n   */\n  label: PropTypes.string,\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   */\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   * Menu item id selected.\n   */\n  selected: PropTypes.string,\n  /**\n   * Callback triggered when any item is clicked.\n   */\n  onClick: PropTypes.func,\n};\n\nexport default withStyles(styles, { name: \"HvVerticalNavigationNavigation\" })(Navigation);\n"],"mappings":"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"}

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,"file":"index.js","names":["default"],"sources":["../../../../src/VerticalNavigation/Navigation/index.js"],"sourcesContent":["export { default } from \"./Navigation\";\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,cAAxB"}

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

@@ -0,0 +1,5 @@
+const styles = {
+  root: {}
+};
+export default styles;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["styles","root"],"sources":["../../../../src/VerticalNavigation/Navigation/styles.js"],"sourcesContent":["const styles = {\n  root: {},\n};\n\nexport default styles;\n"],"mappings":"AAAA,MAAMA,MAAM,GAAG;EACbC,IAAI,EAAE;AADO,CAAf;AAIA,eAAeD,MAAf"}

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

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+
+export interface HvVerticalNavigationTreeViewProps
+  extends StandardProps<
+    React.HTMLAttributes<HTMLUListElement>,
+    HvVerticalNavigationTreeViewClassKey,
+    "onChange"
+  > {
+  /**
+   * Modus operandi (role) of the widget instance.
+   */
+  mode?: "treeview" | "navigation";
+  /**
+   * Can nodes be selected.
+   */
+  selectable?: boolean;
+  /**
+   * Receives the id of an item present in the list and selects it.
+   */
+  selected?: string;
+  /**
+   * Can non-leaf nodes be collapsed / expanded.
+   */
+  collapsible?: boolean;
+  /**
+   * Callback fired when a tree item is selected.
+   *
+   * @param {array} nodeId The id of the selected node.
+   */
+  onChange?: (nodeId: string) => void;
+}
+
+export type HvVerticalNavigationTreeViewClassKey = "root";
+
+export default function HvVerticalNavigationTreeView(
+  props: HvVerticalNavigationTreeViewProps
+): JSX.Element | null;

package/dist/modern/VerticalNavigation/TreeView/TreeView.js

@@ -0,0 +1,281 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["id", "className", "classes", "mode", "collapsible", "selectable", "selected", "onChange", "children"];
+import "core-js/modules/web.dom-collections.iterator.js";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { withStyles } from "@material-ui/core";
+import { TreeViewControlContext, TreeViewStateContext } from "./TreeViewContexts";
+import arrayDiff from "../../utils/arrayDiff";
+import usePropAsRef from "../../utils/usePropAsRef";
+import { NodeTreeExpandUtils, NodeTreeMapUtils, NodeTreeNavigationUtils } from "./utils";
+import styles from "./styles";
+
+const TreeView = props => {
+  const {
+    id,
+    className,
+    classes,
+    mode = "treeview",
+    collapsible = false,
+    selectable = true,
+    selected = null,
+    onChange = null,
+    children = null
+  } = props,
+        others = _objectWithoutProperties(props, _excluded);
+
+  const [tabable, setTabable] = useState(null);
+  const [expanded, setExpandedState] = useState([]);
+  const firstNode = useRef(null);
+  const nodeMap = useRef({});
+  const treeviewMode = mode === "treeview";
+  const isExpanded = useCallback(nodeId => !collapsible || NodeTreeExpandUtils.isExpanded(expanded, nodeId), [collapsible, expanded]);
+  const isTabbable = useCallback(nodeId => !treeviewMode || tabable === nodeId, [treeviewMode, tabable]);
+  const isSelected = useCallback(nodeId => selectable && selected != null && selected === nodeId, [selectable, selected]); // onChange prop was causing unneeded context changes
+  // we just need to keep it as a mutable reference
+
+  const onChangeCallback = usePropAsRef(onChange);
+  const select = useCallback((event, selectedNodeId) => {
+    if (onChangeCallback.current) {
+      onChangeCallback.current(event, selectedNodeId, nodeMap.current[selectedNodeId] != null ? nodeMap.current[selectedNodeId].nodePayloadRef.current : null);
+    }
+  }, [onChangeCallback]);
+  const getNextNode = useCallback(nodeId => NodeTreeNavigationUtils.getNextNode(isExpanded, nodeMap.current, nodeId), [isExpanded]);
+  const getPreviousNode = useCallback(nodeId => NodeTreeNavigationUtils.getPreviousNode(isExpanded, nodeMap.current, nodeId), [isExpanded]);
+  const getFirstNode = useCallback(() => {
+    if (firstNode.current) {
+      return firstNode.current;
+    }
+
+    return null;
+  }, []);
+  const getLastNode = useCallback((nodeId = -1) => NodeTreeNavigationUtils.getLastNode(isExpanded, nodeMap.current, nodeId), [isExpanded]);
+  const focus = useCallback(nodeId => {
+    if (nodeId) {
+      if (treeviewMode) {
+        setTabable(nodeId);
+      } else if (nodeMap.current[nodeId] && nodeMap.current[nodeId].nodeActionableRef.current) {
+        nodeMap.current[nodeId].nodeActionableRef.current.focus();
+      }
+    }
+  }, [treeviewMode]);
+  const focusNextNode = useCallback(nodeId => {
+    const nextNode = getNextNode(nodeId);
+
+    if (nextNode) {
+      focus(nextNode);
+      return true;
+    }
+
+    return false;
+  }, [focus, getNextNode]);
+  const focusPreviousNode = useCallback(nodeId => {
+    const previousNode = getPreviousNode(nodeId);
+
+    if (previousNode) {
+      focus(previousNode);
+      return true;
+    }
+
+    return false;
+  }, [focus, getPreviousNode]);
+  const focusFirstNode = useCallback(() => {
+    const fNode = getFirstNode();
+
+    if (fNode) {
+      focus(fNode);
+      return true;
+    }
+
+    return false;
+  }, [focus, getFirstNode]);
+  const focusLastNode = useCallback(() => {
+    const lastNode = getLastNode();
+
+    if (lastNode) {
+      focus(lastNode);
+      return true;
+    }
+
+    return false;
+  }, [focus, getLastNode]);
+  const toggle = useCallback(nodeId => {
+    if (!collapsible) {
+      // nothing to do if in non-colapsible mode
+      return false;
+    }
+
+    const newExpanded = NodeTreeExpandUtils.toggle(expanded, nodeId);
+    setExpandedState(newExpanded);
+    return true;
+  }, [collapsible, expanded]);
+  const expandAllSiblings = useCallback(nodeId => {
+    if (!collapsible) {
+      // nothing to do if in non-colapsible mode
+      return false;
+    }
+
+    const newExpanded = NodeTreeExpandUtils.expandAllSiblings(expanded, nodeMap.current, nodeId);
+    setExpandedState(newExpanded);
+    return true;
+  }, [collapsible, expanded]);
+  const handleLeftArrow = useCallback(nodeId => {
+    if (collapsible && isExpanded(nodeId)) {
+      toggle(nodeId);
+      return true;
+    }
+
+    const {
+      parent
+    } = nodeMap.current[nodeId];
+
+    if (parent !== -1) {
+      focus(parent);
+      return true;
+    }
+
+    return false;
+  }, [collapsible, focus, isExpanded, toggle]);
+  const setFocusByFirstCharacter = useCallback((nodeId, char) => {
+    const toFocus = NodeTreeNavigationUtils.getNodeByFirstCharacter(nodeMap.current, NodeTreeExpandUtils.getVisibleNodes(collapsible ? expanded : true, nodeMap.current), nodeId, char);
+
+    if (toFocus) {
+      focus(toFocus);
+      return true;
+    }
+
+    return false;
+  }, [collapsible, expanded, focus]);
+  const addNodeToNodeMap = useCallback((nodeId, childrenIds, nodePayloadRef, nodeActionableRef, label) => {
+    nodeMap.current = NodeTreeMapUtils.addNodeToNodeMap(nodeMap.current, nodeId, childrenIds, {
+      nodePayloadRef,
+      nodeActionableRef,
+      label
+    });
+  }, []);
+  const removeNodeFromNodeMap = useCallback(nodeId => {
+    nodeMap.current = NodeTreeMapUtils.removeNodeFromNodeMap(nodeMap.current, nodeId);
+  }, []);
+  const previousChildIds = useRef([]);
+  const childIds = useMemo(() => {
+    const ids = React.Children.map(children, child => child.props.nodeId) || [];
+
+    if (arrayDiff(previousChildIds.current, ids)) {
+      previousChildIds.current = ids;
+    }
+
+    return previousChildIds.current;
+  }, [children]);
+  useEffect(() => {
+    addNodeToNodeMap(-1, childIds);
+    [firstNode.current] = childIds;
+    return () => {
+      removeNodeFromNodeMap(-1);
+    };
+  }, [addNodeToNodeMap, childIds, removeNodeFromNodeMap]);
+  useEffect(() => {
+    if (treeviewMode) {
+      if (selectable && selected != null) {
+        // if a node is selected before the tree receives focus,
+        // focus is set on the selected node
+        // (when adding support for multi-select: if one or more nodes are selected
+        // before the tree receives focus, focus is set on the first selected node)
+        setTabable(selected);
+      } else {
+        // if none of the nodes are selected before the tree
+        // receives focus, focus is set on the first node
+        setTabable(firstNode.current);
+      }
+    }
+  }, [selectable, selected, treeviewMode]);
+  const treeControlContext = React.useMemo(() => ({
+    expandAllSiblings,
+    focus,
+    focusFirstNode,
+    focusLastNode,
+    focusNextNode,
+    focusPreviousNode,
+    handleLeftArrow,
+    addNodeToNodeMap,
+    removeNodeFromNodeMap,
+    collapsible,
+    select,
+    setFocusByFirstCharacter,
+    toggle,
+    mode
+  }), [addNodeToNodeMap, collapsible, expandAllSiblings, focus, focusFirstNode, focusLastNode, focusNextNode, focusPreviousNode, handleLeftArrow, removeNodeFromNodeMap, select, setFocusByFirstCharacter, toggle, mode]);
+  const treeStateContext = React.useMemo(() => ({
+    isExpanded,
+    isTabbable,
+    isSelected
+  }), [isExpanded, isSelected, isTabbable]);
+  return /*#__PURE__*/React.createElement(TreeViewControlContext.Provider, {
+    value: treeControlContext
+  }, /*#__PURE__*/React.createElement(TreeViewStateContext.Provider, {
+    value: treeStateContext
+  }, /*#__PURE__*/React.createElement("ul", _extends({
+    id: id,
+    role: treeviewMode ? "tree" : undefined,
+    className: clsx(classes.root, className)
+  }, others), children)));
+};
+
+process.env.NODE_ENV !== "production" ? TreeView.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 to the Radio button.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Style applied to component.
+     */
+    root: PropTypes.string
+  }).isRequired,
+
+  /**
+   * Modus operandi (role) of the widget instance.
+   */
+  mode: PropTypes.oneOf(["treeview", "navigation"]),
+
+  /**
+   * Can nodes be selected.
+   */
+  selectable: PropTypes.bool,
+
+  /**
+   * Receives the id of an item present in the list and selects it.
+   */
+  selected: PropTypes.string,
+
+  /**
+   * Can non-leaf nodes be collapsed / expanded.
+   */
+  collapsible: PropTypes.bool,
+
+  /**
+   * Callback fired when a tree item is selected.
+   *
+   * @param {array} nodeId The id of the selected node.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node
+} : void 0;
+export default withStyles(styles, {
+  name: "HvVerticalNavigationTreeView"
+})(TreeView);
+//# sourceMappingURL=TreeView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreeView.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","PropTypes","clsx","withStyles","TreeViewControlContext","TreeViewStateContext","arrayDiff","usePropAsRef","NodeTreeExpandUtils","NodeTreeMapUtils","NodeTreeNavigationUtils","styles","TreeView","props","id","className","classes","mode","collapsible","selectable","selected","onChange","children","others","tabable","setTabable","expanded","setExpandedState","firstNode","nodeMap","treeviewMode","isExpanded","nodeId","isTabbable","isSelected","onChangeCallback","select","event","selectedNodeId","current","nodePayloadRef","getNextNode","getPreviousNode","getFirstNode","getLastNode","focus","nodeActionableRef","focusNextNode","nextNode","focusPreviousNode","previousNode","focusFirstNode","fNode","focusLastNode","lastNode","toggle","newExpanded","expandAllSiblings","handleLeftArrow","parent","setFocusByFirstCharacter","char","toFocus","getNodeByFirstCharacter","getVisibleNodes","addNodeToNodeMap","childrenIds","label","removeNodeFromNodeMap","previousChildIds","childIds","ids","Children","map","child","treeControlContext","treeStateContext","undefined","root","propTypes","string","shape","isRequired","oneOf","bool","func","node","name"],"sources":["../../../../src/VerticalNavigation/TreeView/TreeView.js"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { withStyles } from \"@material-ui/core\";\n\nimport { TreeViewControlContext, TreeViewStateContext } from \"./TreeViewContexts\";\n\nimport arrayDiff from \"../../utils/arrayDiff\";\nimport usePropAsRef from \"../../utils/usePropAsRef\";\nimport { NodeTreeExpandUtils, NodeTreeMapUtils, NodeTreeNavigationUtils } from \"./utils\";\n\nimport styles from \"./styles\";\n\nconst TreeView = (props) => {\n  const {\n    id,\n    className,\n    classes,\n    mode = \"treeview\",\n    collapsible = false,\n    selectable = true,\n    selected = null,\n    onChange = null,\n    children = null,\n    ...others\n  } = props;\n\n  const [tabable, setTabable] = useState(null);\n\n  const [expanded, setExpandedState] = useState([]);\n\n  const firstNode = useRef(null);\n  const nodeMap = useRef({});\n\n  const treeviewMode = mode === \"treeview\";\n\n  const isExpanded = useCallback(\n    (nodeId) => !collapsible || NodeTreeExpandUtils.isExpanded(expanded, nodeId),\n    [collapsible, expanded]\n  );\n  const isTabbable = useCallback(\n    (nodeId) => !treeviewMode || tabable === nodeId,\n    [treeviewMode, tabable]\n  );\n  const isSelected = useCallback(\n    (nodeId) => selectable && selected != null && selected === nodeId,\n    [selectable, selected]\n  );\n\n  // onChange prop was causing unneeded context changes\n  // we just need to keep it as a mutable reference\n  const onChangeCallback = usePropAsRef(onChange);\n\n  const select = useCallback(\n    (event, selectedNodeId) => {\n      if (onChangeCallback.current) {\n        onChangeCallback.current(\n          event,\n          selectedNodeId,\n          nodeMap.current[selectedNodeId] != null\n            ? nodeMap.current[selectedNodeId].nodePayloadRef.current\n            : null\n        );\n      }\n    },\n    [onChangeCallback]\n  );\n\n  const getNextNode = useCallback(\n    (nodeId) => NodeTreeNavigationUtils.getNextNode(isExpanded, nodeMap.current, nodeId),\n    [isExpanded]\n  );\n  const getPreviousNode = useCallback(\n    (nodeId) => NodeTreeNavigationUtils.getPreviousNode(isExpanded, nodeMap.current, nodeId),\n    [isExpanded]\n  );\n  const getFirstNode = useCallback(() => {\n    if (firstNode.current) {\n      return firstNode.current;\n    }\n\n    return null;\n  }, []);\n  const getLastNode = useCallback(\n    (nodeId = -1) => NodeTreeNavigationUtils.getLastNode(isExpanded, nodeMap.current, nodeId),\n    [isExpanded]\n  );\n\n  const focus = useCallback(\n    (nodeId) => {\n      if (nodeId) {\n        if (treeviewMode) {\n          setTabable(nodeId);\n        } else if (nodeMap.current[nodeId] && nodeMap.current[nodeId].nodeActionableRef.current) {\n          nodeMap.current[nodeId].nodeActionableRef.current.focus();\n        }\n      }\n    },\n    [treeviewMode]\n  );\n\n  const focusNextNode = useCallback(\n    (nodeId) => {\n      const nextNode = getNextNode(nodeId);\n      if (nextNode) {\n        focus(nextNode);\n        return true;\n      }\n\n      return false;\n    },\n    [focus, getNextNode]\n  );\n  const focusPreviousNode = useCallback(\n    (nodeId) => {\n      const previousNode = getPreviousNode(nodeId);\n      if (previousNode) {\n        focus(previousNode);\n        return true;\n      }\n\n      return false;\n    },\n    [focus, getPreviousNode]\n  );\n  const focusFirstNode = useCallback(() => {\n    const fNode = getFirstNode();\n    if (fNode) {\n      focus(fNode);\n      return true;\n    }\n\n    return false;\n  }, [focus, getFirstNode]);\n  const focusLastNode = useCallback(() => {\n    const lastNode = getLastNode();\n    if (lastNode) {\n      focus(lastNode);\n      return true;\n    }\n\n    return false;\n  }, [focus, getLastNode]);\n\n  const toggle = useCallback(\n    (nodeId) => {\n      if (!collapsible) {\n        // nothing to do if in non-colapsible mode\n        return false;\n      }\n\n      const newExpanded = NodeTreeExpandUtils.toggle(expanded, nodeId);\n      setExpandedState(newExpanded);\n\n      return true;\n    },\n    [collapsible, expanded]\n  );\n\n  const expandAllSiblings = useCallback(\n    (nodeId) => {\n      if (!collapsible) {\n        // nothing to do if in non-colapsible mode\n        return false;\n      }\n\n      const newExpanded = NodeTreeExpandUtils.expandAllSiblings(expanded, nodeMap.current, nodeId);\n      setExpandedState(newExpanded);\n\n      return true;\n    },\n    [collapsible, expanded]\n  );\n\n  const handleLeftArrow = useCallback(\n    (nodeId) => {\n      if (collapsible && isExpanded(nodeId)) {\n        toggle(nodeId);\n        return true;\n      }\n\n      const { parent } = nodeMap.current[nodeId];\n      if (parent !== -1) {\n        focus(parent);\n        return true;\n      }\n\n      return false;\n    },\n    [collapsible, focus, isExpanded, toggle]\n  );\n\n  const setFocusByFirstCharacter = useCallback(\n    (nodeId, char) => {\n      const toFocus = NodeTreeNavigationUtils.getNodeByFirstCharacter(\n        nodeMap.current,\n        NodeTreeExpandUtils.getVisibleNodes(collapsible ? expanded : true, nodeMap.current),\n        nodeId,\n        char\n      );\n      if (toFocus) {\n        focus(toFocus);\n        return true;\n      }\n\n      return false;\n    },\n    [collapsible, expanded, focus]\n  );\n\n  const addNodeToNodeMap = useCallback(\n    (nodeId, childrenIds, nodePayloadRef, nodeActionableRef, label) => {\n      nodeMap.current = NodeTreeMapUtils.addNodeToNodeMap(nodeMap.current, nodeId, childrenIds, {\n        nodePayloadRef,\n        nodeActionableRef,\n        label,\n      });\n    },\n    []\n  );\n\n  const removeNodeFromNodeMap = useCallback((nodeId) => {\n    nodeMap.current = NodeTreeMapUtils.removeNodeFromNodeMap(nodeMap.current, nodeId);\n  }, []);\n\n  const previousChildIds = useRef([]);\n  const childIds = useMemo(() => {\n    const ids = React.Children.map(children, (child) => child.props.nodeId) || [];\n\n    if (arrayDiff(previousChildIds.current, ids)) {\n      previousChildIds.current = ids;\n    }\n\n    return previousChildIds.current;\n  }, [children]);\n\n  useEffect(() => {\n    addNodeToNodeMap(-1, childIds);\n\n    [firstNode.current] = childIds;\n\n    return () => {\n      removeNodeFromNodeMap(-1);\n    };\n  }, [addNodeToNodeMap, childIds, removeNodeFromNodeMap]);\n\n  useEffect(() => {\n    if (treeviewMode) {\n      if (selectable && selected != null) {\n        // if a node is selected before the tree receives focus,\n        // focus is set on the selected node\n        // (when adding support for multi-select: if one or more nodes are selected\n        // before the tree receives focus, focus is set on the first selected node)\n        setTabable(selected);\n      } else {\n        // if none of the nodes are selected before the tree\n        // receives focus, focus is set on the first node\n        setTabable(firstNode.current);\n      }\n    }\n  }, [selectable, selected, treeviewMode]);\n\n  const treeControlContext = React.useMemo(\n    () => ({\n      expandAllSiblings,\n      focus,\n      focusFirstNode,\n      focusLastNode,\n      focusNextNode,\n      focusPreviousNode,\n      handleLeftArrow,\n      addNodeToNodeMap,\n      removeNodeFromNodeMap,\n      collapsible,\n      select,\n      setFocusByFirstCharacter,\n      toggle,\n      mode,\n    }),\n    [\n      addNodeToNodeMap,\n      collapsible,\n      expandAllSiblings,\n      focus,\n      focusFirstNode,\n      focusLastNode,\n      focusNextNode,\n      focusPreviousNode,\n      handleLeftArrow,\n      removeNodeFromNodeMap,\n      select,\n      setFocusByFirstCharacter,\n      toggle,\n      mode,\n    ]\n  );\n\n  const treeStateContext = React.useMemo(\n    () => ({\n      isExpanded,\n      isTabbable,\n      isSelected,\n    }),\n    [isExpanded, isSelected, isTabbable]\n  );\n\n  return (\n    <TreeViewControlContext.Provider value={treeControlContext}>\n      <TreeViewStateContext.Provider value={treeStateContext}>\n        <ul\n          id={id}\n          role={treeviewMode ? \"tree\" : undefined}\n          className={clsx(classes.root, className)}\n          {...others}\n        >\n          {children}\n        </ul>\n      </TreeViewStateContext.Provider>\n    </TreeViewControlContext.Provider>\n  );\n};\n\nTreeView.propTypes = {\n  /**\n   * Id to be applied to the root node.\n   */\n  id: PropTypes.string,\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 to the Radio button.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Style applied to component.\n     */\n    root: PropTypes.string,\n  }).isRequired,\n  /**\n   * Modus operandi (role) of the widget instance.\n   */\n  mode: PropTypes.oneOf([\"treeview\", \"navigation\"]),\n  /**\n   * Can nodes be selected.\n   */\n  selectable: PropTypes.bool,\n  /**\n   * Receives the id of an item present in the list and selects it.\n   */\n  selected: PropTypes.string,\n  /**\n   * Can non-leaf nodes be collapsed / expanded.\n   */\n  collapsible: PropTypes.bool,\n  /**\n   * Callback fired when a tree item is selected.\n   *\n   * @param {array} nodeId The id of the selected node.\n   */\n  onChange: PropTypes.func,\n  /**\n   * The content of the component.\n   */\n  children: PropTypes.node,\n};\n\nexport default withStyles(styles, { name: \"HvVerticalNavigationTreeView\" })(TreeView);\n"],"mappings":"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"}

package/dist/modern/VerticalNavigation/TreeView/TreeViewContexts.js

@@ -0,0 +1,7 @@
+import React from "react";
+const TreeViewControlContext = /*#__PURE__*/React.createContext({});
+TreeViewControlContext.displayName = "TreeViewControlContext";
+const TreeViewStateContext = /*#__PURE__*/React.createContext({});
+TreeViewStateContext.displayName = "TreeViewStateContext";
+export { TreeViewControlContext, TreeViewStateContext };
+//# sourceMappingURL=TreeViewContexts.js.map

package/dist/modern/VerticalNavigation/TreeView/TreeViewContexts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeViewContexts.js","names":["React","TreeViewControlContext","createContext","displayName","TreeViewStateContext"],"sources":["../../../../src/VerticalNavigation/TreeView/TreeViewContexts.js"],"sourcesContent":["import React from \"react\";\n\nconst TreeViewControlContext = React.createContext({});\nTreeViewControlContext.displayName = \"TreeViewControlContext\";\n\nconst TreeViewStateContext = React.createContext({});\nTreeViewStateContext.displayName = \"TreeViewStateContext\";\n\nexport { TreeViewControlContext, TreeViewStateContext };\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,MAAMC,sBAAsB,gBAAGD,KAAK,CAACE,aAAN,CAAoB,EAApB,CAA/B;AACAD,sBAAsB,CAACE,WAAvB,GAAqC,wBAArC;AAEA,MAAMC,oBAAoB,gBAAGJ,KAAK,CAACE,aAAN,CAAoB,EAApB,CAA7B;AACAE,oBAAoB,CAACD,WAArB,GAAmC,sBAAnC;AAEA,SAASF,sBAAT,EAAiCG,oBAAjC"}

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

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+import { SyntheticEvent } from "react";
+
+export type HvVerticalNavigationTreeViewItemClassKey =
+  | "node"
+  | "content"
+  | "group"
+  | "disabled"
+  | "collapsed"
+  | "expanded"
+  | "selectable"
+  | "unselectable"
+  | "selected"
+  | "unselected"
+  | "contentFocused"
+  | " contentFocusDisabled";
+
+export interface HvVerticalNavigationTreeViewItemProps
+  extends StandardProps<
+    React.HTMLAttributes<HTMLUListElement>,
+    HvVerticalNavigationTreeViewItemClassKey
+  > {
+  /**
+   * Is the node disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Can the node be selected.
+   */
+  selectable?: boolean;
+  /**
+   * The id of the node.
+   */
+  nodeId: string;
+  /**
+   * The icon to display next to the node's label.
+   */
+  icon?: React.ReactNode;
+  /**
+   * The item label.
+   */
+  label: React.ReactNode;
+  /**
+   * The node payload.
+   */
+  // eslint-disable-next-line
+  payload: any;
+  /**
+   * @ignore
+   */
+  onClick: (event: React.SyntheticEvent) => void;
+}
+
+export default function HvVerticalNavigationTreeItemView(
+  props: HvVerticalNavigationTreeViewItemProps
+): JSX.Element | null;