@mui/x-tree-view 6.0.0-alpha.0

package/modern/TreeItem/TreeItemContent.js

@@ -0,0 +1,101 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["classes", "className", "displayIcon", "expansionIcon", "icon", "label", "nodeId", "onClick", "onMouseDown"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { useTreeItem } from './useTreeItem';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @ignore - internal component.
+ */
+const TreeItemContent = /*#__PURE__*/React.forwardRef(function TreeItemContent(props, ref) {
+  const {
+      classes,
+      className,
+      displayIcon,
+      expansionIcon,
+      icon: iconProp,
+      label,
+      nodeId,
+      onClick,
+      onMouseDown
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    disabled,
+    expanded,
+    selected,
+    focused,
+    handleExpansion,
+    handleSelection,
+    preventSelection
+  } = useTreeItem(nodeId);
+  const icon = iconProp || expansionIcon || displayIcon;
+  const handleMouseDown = event => {
+    preventSelection(event);
+    if (onMouseDown) {
+      onMouseDown(event);
+    }
+  };
+  const handleClick = event => {
+    handleExpansion(event);
+    handleSelection(event);
+    if (onClick) {
+      onClick(event);
+    }
+  };
+  return (
+    /*#__PURE__*/
+    /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */
+    _jsxs("div", _extends({}, other, {
+      className: clsx(className, classes.root, expanded && classes.expanded, selected && classes.selected, focused && classes.focused, disabled && classes.disabled),
+      onClick: handleClick,
+      onMouseDown: handleMouseDown,
+      ref: ref,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: classes.iconContainer,
+        children: icon
+      }), /*#__PURE__*/_jsx("div", {
+        className: classes.label,
+        children: label
+      })]
+    }))
+  );
+});
+process.env.NODE_ENV !== "production" ? TreeItemContent.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * className applied to the root element.
+   */
+  className: PropTypes.string,
+  /**
+   * The icon to display next to the tree node's label. Either a parent or end icon.
+   */
+  displayIcon: PropTypes.node,
+  /**
+   * The icon to display next to the tree node's label. Either an expansion or collapse icon.
+   */
+  expansionIcon: PropTypes.node,
+  /**
+   * The icon to display next to the tree node's label.
+   */
+  icon: PropTypes.node,
+  /**
+   * The tree node label.
+   */
+  label: PropTypes.node,
+  /**
+   * The id of the node.
+   */
+  nodeId: PropTypes.string.isRequired
+} : void 0;
+export { TreeItemContent };

package/modern/TreeItem/index.js

@@ -0,0 +1,4 @@
+export * from './TreeItem';
+export * from './useTreeItem';
+export * from './treeItemClasses';
+export {};

package/modern/TreeItem/treeItemClasses.js

@@ -0,0 +1,6 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getTreeItemUtilityClass(slot) {
+  return generateUtilityClass('MuiTreeItem', slot);
+}
+export const treeItemClasses = generateUtilityClasses('MuiTreeItem', ['root', 'group', 'content', 'expanded', 'selected', 'focused', 'disabled', 'iconContainer', 'label']);

package/modern/TreeItem/useTreeItem.js

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { TreeViewContext } from '../TreeView/TreeViewContext';
+export function useTreeItem(nodeId) {
+  const {
+    focus,
+    isExpanded,
+    isExpandable,
+    isFocused,
+    isDisabled,
+    isSelected,
+    multiSelect,
+    selectNode,
+    selectRange,
+    toggleExpansion
+  } = React.useContext(TreeViewContext);
+  const expandable = isExpandable ? isExpandable(nodeId) : false;
+  const expanded = isExpanded ? isExpanded(nodeId) : false;
+  const focused = isFocused ? isFocused(nodeId) : false;
+  const disabled = isDisabled ? isDisabled(nodeId) : false;
+  const selected = isSelected ? isSelected(nodeId) : false;
+  const handleExpansion = event => {
+    if (!disabled) {
+      if (!focused) {
+        focus(event, nodeId);
+      }
+      const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
+
+      // If already expanded and trying to toggle selection don't close
+      if (expandable && !(multiple && isExpanded(nodeId))) {
+        toggleExpansion(event, nodeId);
+      }
+    }
+  };
+  const handleSelection = event => {
+    if (!disabled) {
+      if (!focused) {
+        focus(event, nodeId);
+      }
+      const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
+      if (multiple) {
+        if (event.shiftKey) {
+          selectRange(event, {
+            end: nodeId
+          });
+        } else {
+          selectNode(event, nodeId, true);
+        }
+      } else {
+        selectNode(event, nodeId);
+      }
+    }
+  };
+  const preventSelection = event => {
+    if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {
+      // Prevent text selection
+      event.preventDefault();
+    }
+  };
+  return {
+    disabled,
+    expanded,
+    selected,
+    focused,
+    handleExpansion,
+    handleSelection,
+    preventSelection
+  };
+}