@hitachivantara/uikit-react-core 2.23.2

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

@@ -0,0 +1,361 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["id", "className", "classes", "disabled", "selectable", "nodeId", "icon", "label", "payload", "onClick", "children"];
+import "core-js/modules/web.dom-collections.iterator.js";
+
+/* eslint-disable jsx-a11y/role-supports-aria-props */
+// TODO review aria-disabled and aria-expanded added conditionally to a no tree item li
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import clsx from "clsx";
+import PropTypes from "prop-types";
+import { withStyles } from "@material-ui/core";
+import HvTypography from "../../Typography";
+import { TreeViewControlContext, TreeViewStateContext } from "./TreeViewContexts";
+import { setId } from "../../utils";
+import arrayDiff from "../../utils/arrayDiff";
+import usePropAsRef from "../../utils/usePropAsRef";
+import styles from "./styles";
+
+const isPrintableCharacter = str => str && str.length === 1 && str.match(/\S/);
+
+const TreeViewItem = props => {
+  const {
+    id,
+    className,
+    classes,
+    disabled = false,
+    selectable: selectableProp = null,
+    nodeId,
+    icon = null,
+    label,
+    payload = null,
+    onClick = null,
+    children
+  } = props,
+        others = _objectWithoutProperties(props, _excluded);
+
+  const treeViewControlContext = useContext(TreeViewControlContext);
+  const treeViewStateContext = useContext(TreeViewStateContext);
+  const {
+    expandAllSiblings,
+    focus,
+    focusFirstNode,
+    focusLastNode,
+    focusNextNode,
+    focusPreviousNode,
+    handleLeftArrow,
+    addNodeToNodeMap,
+    removeNodeFromNodeMap,
+    collapsible,
+    select,
+    setFocusByFirstCharacter,
+    toggle,
+    mode
+  } = treeViewControlContext;
+  const treeviewMode = mode === "treeview";
+  const listItemRef = useRef(null);
+  const actionableRef = useRef(null);
+  const [useFocus, setUseFocus] = useState(false);
+  const expandable = Boolean(Array.isArray(children) ? children.length : children);
+  const selectable = selectableProp != null ? selectableProp : !(collapsible && expandable);
+  const expanded = treeViewStateContext.isExpanded(nodeId);
+  const selected = treeViewStateContext.isSelected(nodeId);
+  const tabbable = treeViewStateContext.isTabbable(nodeId);
+  const handleAction = useCallback(event => {
+    if (!disabled) {
+      if (collapsible && expandable) {
+        if (!selectable || !expanded || selected) {
+          return toggle(nodeId);
+        }
+      }
+
+      if (selectable && !selected) {
+        return select(event, nodeId);
+      }
+    }
+
+    return false;
+  }, [collapsible, disabled, expandable, expanded, nodeId, select, selectable, selected, toggle]);
+  const onChangeCallback = usePropAsRef(onClick);
+  const handleClick = useCallback(event => {
+    setUseFocus(false);
+
+    if (!tabbable) {
+      focus(nodeId);
+    }
+
+    handleAction(event); // allow custom click event
+
+    if (!disabled && onChangeCallback.current) {
+      onChangeCallback.current(event);
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+  }, [disabled, focus, tabbable, handleAction, nodeId, onChangeCallback]);
+  const handleNextArrow = useCallback(event => {
+    if (expandable) {
+      if (expanded) {
+        return focusNextNode(event, nodeId);
+      }
+
+      if (!disabled) {
+        return toggle(event, nodeId);
+      }
+    }
+
+    return false;
+  }, [disabled, expandable, expanded, focusNextNode, nodeId, toggle]);
+  const handleKeyDown = useCallback(event => {
+    let isEventHandled = false;
+    const {
+      key
+    } = event;
+
+    if (event.altKey || event.ctrlKey || event.metaKey || event.currentTarget !== event.target) {
+      return;
+    }
+
+    if (!treeviewMode) {
+      if (key === "Enter" || key === " ") {
+        if (actionableRef.current === event.currentTarget) {
+          isEventHandled = handleAction(event);
+        }
+      }
+    } else {
+      switch (key) {
+        case "Enter":
+        case " ":
+          if (event.shift) {
+            isEventHandled = true;
+          } else if (actionableRef.current === event.currentTarget) {
+            isEventHandled = handleAction(event);
+          }
+
+          break;
+
+        case "ArrowDown":
+          isEventHandled = focusNextNode(nodeId);
+          break;
+
+        case "ArrowUp":
+          isEventHandled = focusPreviousNode(nodeId);
+          break;
+
+        case "ArrowRight":
+          isEventHandled = handleNextArrow(nodeId);
+          break;
+
+        case "ArrowLeft":
+          isEventHandled = handleLeftArrow(nodeId, event);
+          break;
+
+        case "Home":
+          isEventHandled = focusFirstNode();
+          break;
+
+        case "End":
+          isEventHandled = focusLastNode();
+          break;
+
+        case "*":
+          isEventHandled = expandAllSiblings(nodeId);
+          break;
+
+        default:
+          if (isPrintableCharacter(key)) {
+            isEventHandled = setFocusByFirstCharacter(nodeId, key);
+          }
+
+      }
+    }
+
+    if (isEventHandled) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }, [treeviewMode, handleAction, focusNextNode, nodeId, focusPreviousNode, handleNextArrow, handleLeftArrow, focusFirstNode, focusLastNode, expandAllSiblings, setFocusByFirstCharacter]);
+  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]); // payload prop was causing unneeded context changes
+  // we just need to keep it as a mutable reference
+
+  const nodePayloadRef = usePropAsRef(payload); // register node in the tree (and unregister on unmount)
+
+  useEffect(() => {
+    addNodeToNodeMap(nodeId, childIds, nodePayloadRef, actionableRef, label);
+    return () => {
+      removeNodeFromNodeMap(nodeId);
+    };
+  }, [addNodeToNodeMap, childIds, label, nodeId, nodePayloadRef, removeNodeFromNodeMap]); // focus the rendered DOM element (if tabbable)
+
+  useEffect(() => {
+    if (treeviewMode && tabbable && actionableRef.current) {
+      actionableRef.current.focus();
+    }
+  }, [treeviewMode, tabbable]);
+  const renderedIcon = useMemo(() => icon && /*#__PURE__*/React.cloneElement(icon, {
+    boxStyles: {
+      width: "32px",
+      height: "32px"
+    }
+  }), [icon]);
+  const renderedContent = useMemo(() => /*#__PURE__*/React.createElement(HvTypography, {
+    id: setId(id, "button"),
+    component: "div",
+    variant: selectable && selected ? "selectedText" : "normalText",
+    role: "button",
+    innerRef: actionableRef,
+    className: clsx(classes.content, useFocus ? classes.contentFocused : classes.contentFocusDisabled),
+    tabIndex: tabbable ? 0 : -1,
+    onKeyDown: handleKeyDown,
+    onFocus: () => setUseFocus(true),
+    onBlur: () => setUseFocus(false),
+    onClick: handleClick,
+    "aria-current": !treeviewMode && selectable && selected ? "page" : undefined
+  }, renderedIcon, label), [classes, handleClick, handleKeyDown, useFocus, id, label, treeviewMode, renderedIcon, selectable, selected, tabbable]);
+  const renderedChildren = useMemo(() => children && /*#__PURE__*/React.createElement("ul", {
+    className: classes.group,
+    role: treeviewMode ? "group" : undefined
+  }, children), [children, classes.group, treeviewMode]);
+  return /*#__PURE__*/React.createElement("li", _extends({
+    ref: listItemRef,
+    id: id,
+    className: clsx(classes.node, className, disabled ? classes.disabled : selectable ? [classes.selectable, selected ? classes.selected : classes.unselected] : classes.unselectable, expandable && (expanded ? classes.expanded : classes.collapsed)),
+    "data-hasicon": icon != null ? true : undefined,
+    "aria-disabled": disabled ? true : undefined,
+    "aria-expanded": collapsible && expandable ? expanded : undefined
+  }, mode === "treeview" && {
+    role: "treeitem",
+    "aria-selected": selectable && selected ? true : undefined
+  }, others), renderedContent, renderedChildren);
+};
+
+process.env.NODE_ENV !== "production" ? TreeViewItem.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 the root of the component.
+     */
+    node: PropTypes.string,
+
+    /**
+     * Style applied to the content.
+     */
+    content: PropTypes.string,
+
+    /**
+     * Style applied to the group.
+     */
+    group: PropTypes.string,
+
+    /**
+     * Style applied when item is disabled.
+     */
+    disabled: PropTypes.string,
+
+    /**
+     * Style applied when item is collapsed.
+     */
+    collapsed: PropTypes.string,
+
+    /**
+     * Style applied when item is expanded.
+     */
+    expanded: PropTypes.string,
+
+    /**
+     * Style applied when item is selectable.
+     */
+    selectable: PropTypes.string,
+
+    /**
+     * Style applied when item is unselectable.
+     */
+    unselectable: PropTypes.string,
+
+    /**
+     * Style applied when item is selected.
+     */
+    selected: PropTypes.string,
+
+    /**
+     * Style applied when item is unselectable.
+     */
+    unselected: PropTypes.string,
+
+    /**
+     * Style applied when element is focused by keyboard.
+     */
+    contentFocused: PropTypes.string,
+
+    /**
+     * Style applied when element is focused by click.
+     */
+    contentFocusDisabled: PropTypes.string
+  }).isRequired,
+
+  /**
+   * Is the node disabled.
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Can the node be selected.
+   */
+  selectable: PropTypes.bool,
+
+  /**
+   * The id of the node.
+   */
+  nodeId: PropTypes.string.isRequired,
+
+  /**
+   * The icon to display next to the node's label.
+   */
+  icon: PropTypes.node,
+
+  /**
+   * The item label.
+   */
+  label: PropTypes.node.isRequired,
+
+  /**
+   * The node payload.
+   */
+  // eslint-disable-next-line react/forbid-prop-types
+  payload: PropTypes.any,
+
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node
+} : void 0;
+export default withStyles(styles, {
+  name: "HvVerticalNavigationTreeViewItem"
+})(TreeViewItem);
+//# sourceMappingURL=TreeViewItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreeViewItem.js","names":["React","useCallback","useContext","useEffect","useMemo","useRef","useState","clsx","PropTypes","withStyles","HvTypography","TreeViewControlContext","TreeViewStateContext","setId","arrayDiff","usePropAsRef","styles","isPrintableCharacter","str","length","match","TreeViewItem","props","id","className","classes","disabled","selectable","selectableProp","nodeId","icon","label","payload","onClick","children","others","treeViewControlContext","treeViewStateContext","expandAllSiblings","focus","focusFirstNode","focusLastNode","focusNextNode","focusPreviousNode","handleLeftArrow","addNodeToNodeMap","removeNodeFromNodeMap","collapsible","select","setFocusByFirstCharacter","toggle","mode","treeviewMode","listItemRef","actionableRef","useFocus","setUseFocus","expandable","Boolean","Array","isArray","expanded","isExpanded","selected","isSelected","tabbable","isTabbable","handleAction","event","onChangeCallback","handleClick","current","preventDefault","stopPropagation","handleNextArrow","handleKeyDown","isEventHandled","key","altKey","ctrlKey","metaKey","currentTarget","target","shift","previousChildIds","childIds","ids","Children","map","child","nodePayloadRef","renderedIcon","cloneElement","boxStyles","width","height","renderedContent","content","contentFocused","contentFocusDisabled","undefined","renderedChildren","group","node","unselected","unselectable","collapsed","role","propTypes","string","shape","isRequired","bool","any","func","name"],"sources":["../../../../src/VerticalNavigation/TreeView/TreeViewItem.js"],"sourcesContent":["/* eslint-disable jsx-a11y/role-supports-aria-props */\n// TODO review aria-disabled and aria-expanded added conditionally to a no tree item li\n\nimport React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@material-ui/core\";\nimport HvTypography from \"../../Typography\";\n\nimport { TreeViewControlContext, TreeViewStateContext } from \"./TreeViewContexts\";\n\nimport { setId } from \"../../utils\";\nimport arrayDiff from \"../../utils/arrayDiff\";\nimport usePropAsRef from \"../../utils/usePropAsRef\";\n\nimport styles from \"./styles\";\n\nconst isPrintableCharacter = (str) => str && str.length === 1 && str.match(/\\S/);\n\nconst TreeViewItem = (props) => {\n  const {\n    id,\n    className,\n    classes,\n\n    disabled = false,\n\n    selectable: selectableProp = null,\n\n    nodeId,\n    icon = null,\n    label,\n    payload = null,\n\n    onClick = null,\n\n    children,\n\n    ...others\n  } = props;\n\n  const treeViewControlContext = useContext(TreeViewControlContext);\n  const treeViewStateContext = useContext(TreeViewStateContext);\n\n  const {\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  } = treeViewControlContext;\n\n  const treeviewMode = mode === \"treeview\";\n\n  const listItemRef = useRef(null);\n  const actionableRef = useRef(null);\n  const [useFocus, setUseFocus] = useState(false);\n\n  const expandable = Boolean(Array.isArray(children) ? children.length : children);\n\n  const selectable = selectableProp != null ? selectableProp : !(collapsible && expandable);\n\n  const expanded = treeViewStateContext.isExpanded(nodeId);\n  const selected = treeViewStateContext.isSelected(nodeId);\n\n  const tabbable = treeViewStateContext.isTabbable(nodeId);\n\n  const handleAction = useCallback(\n    (event) => {\n      if (!disabled) {\n        if (collapsible && expandable) {\n          if (!selectable || !expanded || selected) {\n            return toggle(nodeId);\n          }\n        }\n\n        if (selectable && !selected) {\n          return select(event, nodeId);\n        }\n      }\n\n      return false;\n    },\n    [collapsible, disabled, expandable, expanded, nodeId, select, selectable, selected, toggle]\n  );\n\n  const onChangeCallback = usePropAsRef(onClick);\n\n  const handleClick = useCallback(\n    (event) => {\n      setUseFocus(false);\n      if (!tabbable) {\n        focus(nodeId);\n      }\n\n      handleAction(event);\n\n      // allow custom click event\n      if (!disabled && onChangeCallback.current) {\n        onChangeCallback.current(event);\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [disabled, focus, tabbable, handleAction, nodeId, onChangeCallback]\n  );\n\n  const handleNextArrow = useCallback(\n    (event) => {\n      if (expandable) {\n        if (expanded) {\n          return focusNextNode(event, nodeId);\n        }\n        if (!disabled) {\n          return toggle(event, nodeId);\n        }\n      }\n\n      return false;\n    },\n    [disabled, expandable, expanded, focusNextNode, nodeId, toggle]\n  );\n\n  const handleKeyDown = useCallback(\n    (event) => {\n      let isEventHandled = false;\n      const { key } = event;\n\n      if (event.altKey || event.ctrlKey || event.metaKey || event.currentTarget !== event.target) {\n        return;\n      }\n\n      if (!treeviewMode) {\n        if (key === \"Enter\" || key === \" \") {\n          if (actionableRef.current === event.currentTarget) {\n            isEventHandled = handleAction(event);\n          }\n        }\n      } else {\n        switch (key) {\n          case \"Enter\":\n          case \" \":\n            if (event.shift) {\n              isEventHandled = true;\n            } else if (actionableRef.current === event.currentTarget) {\n              isEventHandled = handleAction(event);\n            }\n            break;\n          case \"ArrowDown\":\n            isEventHandled = focusNextNode(nodeId);\n            break;\n          case \"ArrowUp\":\n            isEventHandled = focusPreviousNode(nodeId);\n            break;\n          case \"ArrowRight\":\n            isEventHandled = handleNextArrow(nodeId);\n            break;\n          case \"ArrowLeft\":\n            isEventHandled = handleLeftArrow(nodeId, event);\n            break;\n          case \"Home\":\n            isEventHandled = focusFirstNode();\n            break;\n          case \"End\":\n            isEventHandled = focusLastNode();\n            break;\n          case \"*\":\n            isEventHandled = expandAllSiblings(nodeId);\n            break;\n          default:\n            if (isPrintableCharacter(key)) {\n              isEventHandled = setFocusByFirstCharacter(nodeId, key);\n            }\n        }\n      }\n\n      if (isEventHandled) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [\n      treeviewMode,\n      handleAction,\n      focusNextNode,\n      nodeId,\n      focusPreviousNode,\n      handleNextArrow,\n      handleLeftArrow,\n      focusFirstNode,\n      focusLastNode,\n      expandAllSiblings,\n      setFocusByFirstCharacter,\n    ]\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  // payload prop was causing unneeded context changes\n  // we just need to keep it as a mutable reference\n  const nodePayloadRef = usePropAsRef(payload);\n\n  // register node in the tree (and unregister on unmount)\n  useEffect(() => {\n    addNodeToNodeMap(nodeId, childIds, nodePayloadRef, actionableRef, label);\n\n    return () => {\n      removeNodeFromNodeMap(nodeId);\n    };\n  }, [addNodeToNodeMap, childIds, label, nodeId, nodePayloadRef, removeNodeFromNodeMap]);\n\n  // focus the rendered DOM element (if tabbable)\n  useEffect(() => {\n    if (treeviewMode && tabbable && actionableRef.current) {\n      actionableRef.current.focus();\n    }\n  }, [treeviewMode, tabbable]);\n\n  const renderedIcon = useMemo(\n    () =>\n      icon &&\n      React.cloneElement(icon, {\n        boxStyles: { width: \"32px\", height: \"32px\" },\n      }),\n    [icon]\n  );\n\n  const renderedContent = useMemo(\n    () => (\n      <HvTypography\n        id={setId(id, \"button\")}\n        component=\"div\"\n        variant={selectable && selected ? \"selectedText\" : \"normalText\"}\n        role=\"button\"\n        innerRef={actionableRef}\n        className={clsx(classes.content, {\n          [classes.contentFocused]: useFocus,\n          [classes.contentFocusDisabled]: !useFocus,\n        })}\n        tabIndex={tabbable ? 0 : -1}\n        onKeyDown={handleKeyDown}\n        onFocus={() => setUseFocus(true)}\n        onBlur={() => setUseFocus(false)}\n        onClick={handleClick}\n        aria-current={!treeviewMode && selectable && selected ? \"page\" : undefined}\n      >\n        {renderedIcon}\n        {label}\n      </HvTypography>\n    ),\n    [\n      classes,\n      handleClick,\n      handleKeyDown,\n      useFocus,\n      id,\n      label,\n      treeviewMode,\n      renderedIcon,\n      selectable,\n      selected,\n      tabbable,\n    ]\n  );\n\n  const renderedChildren = useMemo(\n    () =>\n      children && (\n        <ul className={classes.group} role={treeviewMode ? \"group\" : undefined}>\n          {children}\n        </ul>\n      ),\n    [children, classes.group, treeviewMode]\n  );\n\n  return (\n    <li\n      ref={listItemRef}\n      id={id}\n      className={clsx(classes.node, className, {\n        [classes.disabled]: disabled,\n        [classes.collapsed]: expandable && !expanded,\n        [classes.expanded]: expandable && expanded,\n        [classes.selectable]: !disabled && selectable,\n        [classes.unselectable]: !disabled && !selectable,\n        [classes.selected]: !disabled && selectable && selected,\n        [classes.unselected]: !disabled && selectable && !selected,\n      })}\n      data-hasicon={icon != null ? true : undefined}\n      aria-disabled={disabled ? true : undefined}\n      aria-expanded={collapsible && expandable ? expanded : undefined}\n      {...(mode === \"treeview\" && {\n        role: \"treeitem\",\n        \"aria-selected\": selectable && selected ? true : undefined,\n      })}\n      {...others}\n    >\n      {renderedContent}\n      {renderedChildren}\n    </li>\n  );\n};\n\nTreeViewItem.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 the root of the component.\n     */\n    node: PropTypes.string,\n    /**\n     * Style applied to the content.\n     */\n    content: PropTypes.string,\n    /**\n     * Style applied to the group.\n     */\n    group: PropTypes.string,\n    /**\n     * Style applied when item is disabled.\n     */\n    disabled: PropTypes.string,\n    /**\n     * Style applied when item is collapsed.\n     */\n    collapsed: PropTypes.string,\n    /**\n     * Style applied when item is expanded.\n     */\n    expanded: PropTypes.string,\n    /**\n     * Style applied when item is selectable.\n     */\n    selectable: PropTypes.string,\n    /**\n     * Style applied when item is unselectable.\n     */\n    unselectable: PropTypes.string,\n    /**\n     * Style applied when item is selected.\n     */\n    selected: PropTypes.string,\n    /**\n     * Style applied when item is unselectable.\n     */\n    unselected: PropTypes.string,\n    /**\n     * Style applied when element is focused by keyboard.\n     */\n    contentFocused: PropTypes.string,\n    /**\n     * Style applied when element is focused by click.\n     */\n    contentFocusDisabled: PropTypes.string,\n  }).isRequired,\n  /**\n   * Is the node disabled.\n   */\n  disabled: PropTypes.bool,\n  /**\n   * Can the node be selected.\n   */\n  selectable: PropTypes.bool,\n  /**\n   * The id of the node.\n   */\n  nodeId: PropTypes.string.isRequired,\n  /**\n   * The icon to display next to the node's label.\n   */\n  icon: PropTypes.node,\n  /**\n   * The item label.\n   */\n  label: PropTypes.node.isRequired,\n  /**\n   * The node payload.\n   */\n  // eslint-disable-next-line react/forbid-prop-types\n  payload: PropTypes.any,\n  /**\n   * @ignore\n   */\n  onClick: PropTypes.func,\n  /**\n   * The content of the component.\n   */\n  children: PropTypes.node,\n};\n\nexport default withStyles(styles, {\n  name: \"HvVerticalNavigationTreeViewItem\",\n})(TreeViewItem);\n"],"mappings":"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"}

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

@@ -0,0 +1,5 @@
+export { default } from "./TreeView";
+export * from "./TreeView";
+
+export { default as TreeViewItem } from "./TreeViewItem";
+export * from "./TreeViewItem";

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

@@ -0,0 +1,3 @@
+export { default } from "./TreeView";
+export { default as TreeViewItem } from "./TreeViewItem";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default","TreeViewItem"],"sources":["../../../../src/VerticalNavigation/TreeView/index.js"],"sourcesContent":["export { default } from \"./TreeView\";\nexport { default as TreeViewItem } from \"./TreeViewItem\";\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,YAAxB;AACA,SAASA,OAAO,IAAIC,YAApB,QAAwC,gBAAxC"}

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

@@ -0,0 +1,136 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import focusStyles from "../../Focus/styles";
+const {
+  focused,
+  focusDisabled
+} = focusStyles;
+
+const selected = theme => ({
+  background: theme.hv.palette.accent.acce1,
+  color: theme.hv.palette.atmosphere.atmo1,
+  "& *": {
+    background: theme.hv.palette.accent.acce1,
+    color: theme.hv.palette.atmosphere.atmo1
+  },
+  "& svg *.color0": {
+    fill: theme.hv.palette.atmosphere.atmo1
+  }
+});
+
+const hover = theme => ({
+  background: theme.hv.palette.atmosphere.atmo4,
+  "& *": {
+    background: theme.hv.palette.atmosphere.atmo4
+  }
+});
+
+const styles = theme => ({
+  /* role="tree" root element */
+  root: {
+    display: "block",
+    background: theme.hv.palette.atmosphere.atmo1,
+    padding: `0px`,
+    margin: "0",
+    listStyle: "none"
+  },
+
+  /* role="group" element */
+  group: {
+    margin: "8px 0 0 0",
+    padding: 0
+  },
+
+  /* role="treeitem" element */
+  node: {
+    listStyle: "none",
+    minHeight: "32px",
+    "&:not(:last-child)": {
+      marginBottom: "8px"
+    },
+    // level indentation
+    // 1st, with icon
+    "&[data-hasicon]>$content": {
+      paddingLeft: `0px`
+    },
+    // 1st, no icon
+    "&:not([data-hasicon])>$content": {
+      paddingLeft: `${theme.hv.spacing.xs * 1}px`
+    },
+    // 2nd, with icon
+    "&[data-hasicon]>$group>$node>$content": {
+      paddingLeft: `${32 + theme.hv.spacing.sm * 1}px`
+    },
+    // 2nd, no icon
+    "&:not([data-hasicon])>$group>$node>$content": {
+      paddingLeft: `${theme.hv.spacing.xs * 1 + theme.hv.spacing.sm * 1}px`
+    },
+    // 3rd, with icon
+    "&[data-hasicon]>$group>$node>$group>$node>$content": {
+      paddingLeft: `${32 + theme.hv.spacing.sm * 2}px`
+    },
+    // 3rd, no icon
+    "&:not([data-hasicon])>$group>$node>$group>$node>$content": {
+      paddingLeft: `${theme.hv.spacing.xs * 1 + theme.hv.spacing.sm * 2}px`
+    }
+  },
+
+  /* role="treeitem" element states */
+  disabled: {},
+  selectable: {},
+  unselectable: {},
+  collapsed: {
+    "&>$group": {
+      display: "none"
+    }
+  },
+  expanded: {
+    "&>$group": {
+      display: "block"
+    }
+  },
+  selected: {},
+  unselected: {},
+  noIcon: {},
+  withIcon: {},
+  contentFocusDisabled: _objectSpread({}, focusDisabled),
+  contentFocused: _objectSpread({}, focused),
+
+  /* role="button" element */
+  content: {
+    width: "100%",
+    display: "flex",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    height: "32px",
+    color: theme.hv.palette.atmosphere.acce1,
+    // selected state
+    "$selected>&": selected(theme),
+    // hover
+    ":not($disabled):not($selected)>&:hover": hover(theme),
+    ":not($disabled)$selected>&:hover": {},
+    // focus
+    ":not($disabled):not($selected)>&:focus": hover(theme),
+    "&[disabled], &:active": {
+      outline: "none"
+    },
+    // cursor
+    cursor: "pointer",
+    "& *": {
+      cursor: "pointer"
+    },
+    "$disabled>&": {
+      cursor: "not-allowed",
+      "& *": {
+        cursor: "not-allowed"
+      }
+    }
+  }
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["focusStyles","focused","focusDisabled","selected","theme","background","hv","palette","accent","acce1","color","atmosphere","atmo1","fill","hover","atmo4","styles","root","display","padding","margin","listStyle","group","node","minHeight","marginBottom","paddingLeft","spacing","xs","sm","disabled","selectable","unselectable","collapsed","expanded","unselected","noIcon","withIcon","contentFocusDisabled","contentFocused","content","width","justifyContent","alignItems","height","outline","cursor"],"sources":["../../../../src/VerticalNavigation/TreeView/styles.js"],"sourcesContent":["import focusStyles from \"../../Focus/styles\";\n\nconst { focused, focusDisabled } = focusStyles;\n\nconst selected = (theme) => ({\n  background: theme.hv.palette.accent.acce1,\n  color: theme.hv.palette.atmosphere.atmo1,\n  \"& *\": {\n    background: theme.hv.palette.accent.acce1,\n    color: theme.hv.palette.atmosphere.atmo1,\n  },\n  \"& svg *.color0\": {\n    fill: theme.hv.palette.atmosphere.atmo1,\n  },\n});\n\nconst hover = (theme) => ({\n  background: theme.hv.palette.atmosphere.atmo4,\n  \"& *\": {\n    background: theme.hv.palette.atmosphere.atmo4,\n  },\n});\n\nconst styles = (theme) => ({\n  /* role=\"tree\" root element */\n  root: {\n    display: \"block\",\n    background: theme.hv.palette.atmosphere.atmo1,\n    padding: `0px`,\n    margin: \"0\",\n    listStyle: \"none\",\n  },\n\n  /* role=\"group\" element */\n  group: {\n    margin: \"8px 0 0 0\",\n    padding: 0,\n  },\n\n  /* role=\"treeitem\" element */\n  node: {\n    listStyle: \"none\",\n    minHeight: \"32px\",\n    \"&:not(:last-child)\": {\n      marginBottom: \"8px\",\n    },\n\n    // level indentation\n    // 1st, with icon\n    \"&[data-hasicon]>$content\": { paddingLeft: `0px` },\n    // 1st, no icon\n    \"&:not([data-hasicon])>$content\": {\n      paddingLeft: `${theme.hv.spacing.xs * 1}px`,\n    },\n\n    // 2nd, with icon\n    \"&[data-hasicon]>$group>$node>$content\": {\n      paddingLeft: `${32 + theme.hv.spacing.sm * 1}px`,\n    },\n    // 2nd, no icon\n    \"&:not([data-hasicon])>$group>$node>$content\": {\n      paddingLeft: `${theme.hv.spacing.xs * 1 + theme.hv.spacing.sm * 1}px`,\n    },\n\n    // 3rd, with icon\n    \"&[data-hasicon]>$group>$node>$group>$node>$content\": {\n      paddingLeft: `${32 + theme.hv.spacing.sm * 2}px`,\n    },\n    // 3rd, no icon\n    \"&:not([data-hasicon])>$group>$node>$group>$node>$content\": {\n      paddingLeft: `${theme.hv.spacing.xs * 1 + theme.hv.spacing.sm * 2}px`,\n    },\n  },\n\n  /* role=\"treeitem\" element states */\n  disabled: {},\n  selectable: {},\n  unselectable: {},\n  collapsed: {\n    \"&>$group\": { display: \"none\" },\n  },\n  expanded: {\n    \"&>$group\": { display: \"block\" },\n  },\n  selected: {},\n  unselected: {},\n\n  noIcon: {},\n  withIcon: {},\n\n  contentFocusDisabled: {\n    ...focusDisabled,\n  },\n  contentFocused: {\n    ...focused,\n  },\n\n  /* role=\"button\" element */\n  content: {\n    width: \"100%\",\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n    height: \"32px\",\n    color: theme.hv.palette.atmosphere.acce1,\n\n    // selected state\n    \"$selected>&\": selected(theme),\n\n    // hover\n    \":not($disabled):not($selected)>&:hover\": hover(theme),\n    \":not($disabled)$selected>&:hover\": {},\n\n    // focus\n    \":not($disabled):not($selected)>&:focus\": hover(theme),\n\n    \"&[disabled], &:active\": {\n      outline: \"none\",\n    },\n\n    // cursor\n    cursor: \"pointer\",\n    \"& *\": {\n      cursor: \"pointer\",\n    },\n    \"$disabled>&\": {\n      cursor: \"not-allowed\",\n      \"& *\": {\n        cursor: \"not-allowed\",\n      },\n    },\n  },\n});\n\nexport default styles;\n"],"mappings":"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"}

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

@@ -0,0 +1,52 @@
+import "core-js/modules/web.dom-collections.iterator.js";
+export default class NodeTreeExpandUtils {
+  static isExpanded(expanded, nodeId) {
+    return expanded.indexOf(nodeId) !== -1;
+  }
+
+  static toggle(expanded, nodeId) {
+    let newExpanded;
+
+    if (expanded.indexOf(nodeId) !== -1) {
+      newExpanded = expanded.filter(expandedNodeId => expandedNodeId !== nodeId);
+    } else {
+      newExpanded = [...expanded, nodeId];
+    }
+
+    return newExpanded;
+  }
+
+  static expandAllSiblings(expanded, nodeMap, nodeId) {
+    const node = nodeMap[nodeId];
+    const parent = nodeMap[node.parent];
+    const diff = parent.children.filter(childNode => nodeMap[childNode].children != null).filter(childNode => !NodeTreeExpandUtils.isExpanded(expanded, childNode));
+
+    if (diff.length > 0) {
+      return [...expanded, ...diff];
+    }
+
+    return expanded;
+  }
+
+  static getVisibleNodes(expanded, nodeMap, nodeId = -1) {
+    const toReturn = [];
+
+    if (nodeId !== -1) {
+      toReturn.push(nodeId);
+    }
+
+    const visibleChilds = nodeId === -1 || expanded === true || NodeTreeExpandUtils.isExpanded(expanded, nodeId);
+
+    if (visibleChilds) {
+      const node = nodeMap[nodeId];
+
+      if (node && node.children) {
+        node.children.forEach(childId => toReturn.push(...NodeTreeExpandUtils.getVisibleNodes(expanded, nodeMap, childId)));
+      }
+    }
+
+    return toReturn;
+  }
+
+}
+//# sourceMappingURL=NodeTreeExpandUtils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NodeTreeExpandUtils.js","names":["NodeTreeExpandUtils","isExpanded","expanded","nodeId","indexOf","toggle","newExpanded","filter","expandedNodeId","expandAllSiblings","nodeMap","node","parent","diff","children","childNode","length","getVisibleNodes","toReturn","push","visibleChilds","forEach","childId"],"sources":["../../../../../src/VerticalNavigation/TreeView/utils/NodeTreeExpandUtils.js"],"sourcesContent":["export default class NodeTreeExpandUtils {\n  static isExpanded(expanded, nodeId) {\n    return expanded.indexOf(nodeId) !== -1;\n  }\n\n  static toggle(expanded, nodeId) {\n    let newExpanded;\n    if (expanded.indexOf(nodeId) !== -1) {\n      newExpanded = expanded.filter((expandedNodeId) => expandedNodeId !== nodeId);\n    } else {\n      newExpanded = [...expanded, nodeId];\n    }\n\n    return newExpanded;\n  }\n\n  static expandAllSiblings(expanded, nodeMap, nodeId) {\n    const node = nodeMap[nodeId];\n    const parent = nodeMap[node.parent];\n\n    const diff = parent.children\n      .filter((childNode) => nodeMap[childNode].children != null)\n      .filter((childNode) => !NodeTreeExpandUtils.isExpanded(expanded, childNode));\n\n    if (diff.length > 0) {\n      return [...expanded, ...diff];\n    }\n\n    return expanded;\n  }\n\n  static getVisibleNodes(expanded, nodeMap, nodeId = -1) {\n    const toReturn = [];\n    if (nodeId !== -1) {\n      toReturn.push(nodeId);\n    }\n\n    const visibleChilds =\n      nodeId === -1 || expanded === true || NodeTreeExpandUtils.isExpanded(expanded, nodeId);\n\n    if (visibleChilds) {\n      const node = nodeMap[nodeId];\n\n      if (node && node.children) {\n        node.children.forEach((childId) =>\n          toReturn.push(...NodeTreeExpandUtils.getVisibleNodes(expanded, nodeMap, childId))\n        );\n      }\n    }\n\n    return toReturn;\n  }\n}\n"],"mappings":";AAAA,eAAe,MAAMA,mBAAN,CAA0B;EACtB,OAAVC,UAAU,CAACC,QAAD,EAAWC,MAAX,EAAmB;IAClC,OAAOD,QAAQ,CAACE,OAAT,CAAiBD,MAAjB,MAA6B,CAAC,CAArC;EACD;;EAEY,OAANE,MAAM,CAACH,QAAD,EAAWC,MAAX,EAAmB;IAC9B,IAAIG,WAAJ;;IACA,IAAIJ,QAAQ,CAACE,OAAT,CAAiBD,MAAjB,MAA6B,CAAC,CAAlC,EAAqC;MACnCG,WAAW,GAAGJ,QAAQ,CAACK,MAAT,CAAiBC,cAAD,IAAoBA,cAAc,KAAKL,MAAvD,CAAd;IACD,CAFD,MAEO;MACLG,WAAW,GAAG,CAAC,GAAGJ,QAAJ,EAAcC,MAAd,CAAd;IACD;;IAED,OAAOG,WAAP;EACD;;EAEuB,OAAjBG,iBAAiB,CAACP,QAAD,EAAWQ,OAAX,EAAoBP,MAApB,EAA4B;IAClD,MAAMQ,IAAI,GAAGD,OAAO,CAACP,MAAD,CAApB;IACA,MAAMS,MAAM,GAAGF,OAAO,CAACC,IAAI,CAACC,MAAN,CAAtB;IAEA,MAAMC,IAAI,GAAGD,MAAM,CAACE,QAAP,CACVP,MADU,CACFQ,SAAD,IAAeL,OAAO,CAACK,SAAD,CAAP,CAAmBD,QAAnB,IAA+B,IAD3C,EAEVP,MAFU,CAEFQ,SAAD,IAAe,CAACf,mBAAmB,CAACC,UAApB,CAA+BC,QAA/B,EAAyCa,SAAzC,CAFb,CAAb;;IAIA,IAAIF,IAAI,CAACG,MAAL,GAAc,CAAlB,EAAqB;MACnB,OAAO,CAAC,GAAGd,QAAJ,EAAc,GAAGW,IAAjB,CAAP;IACD;;IAED,OAAOX,QAAP;EACD;;EAEqB,OAAfe,eAAe,CAACf,QAAD,EAAWQ,OAAX,EAAoBP,MAAM,GAAG,CAAC,CAA9B,EAAiC;IACrD,MAAMe,QAAQ,GAAG,EAAjB;;IACA,IAAIf,MAAM,KAAK,CAAC,CAAhB,EAAmB;MACjBe,QAAQ,CAACC,IAAT,CAAchB,MAAd;IACD;;IAED,MAAMiB,aAAa,GACjBjB,MAAM,KAAK,CAAC,CAAZ,IAAiBD,QAAQ,KAAK,IAA9B,IAAsCF,mBAAmB,CAACC,UAApB,CAA+BC,QAA/B,EAAyCC,MAAzC,CADxC;;IAGA,IAAIiB,aAAJ,EAAmB;MACjB,MAAMT,IAAI,GAAGD,OAAO,CAACP,MAAD,CAApB;;MAEA,IAAIQ,IAAI,IAAIA,IAAI,CAACG,QAAjB,EAA2B;QACzBH,IAAI,CAACG,QAAL,CAAcO,OAAd,CAAuBC,OAAD,IACpBJ,QAAQ,CAACC,IAAT,CAAc,GAAGnB,mBAAmB,CAACiB,eAApB,CAAoCf,QAApC,EAA8CQ,OAA9C,EAAuDY,OAAvD,CAAjB,CADF;MAGD;IACF;;IAED,OAAOJ,QAAP;EACD;;AAnDsC"}