@mui/lab 5.0.0-alpha.100

package/TreeItem/treeItemClasses.d.ts

@@ -0,0 +1,24 @@
+export interface TreeItemClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the transition component. */
+    group: string;
+    /** Styles applied to the content element. */
+    content: string;
+    /** State class applied to the content element when expanded. */
+    expanded: string;
+    /** State class applied to the content element when selected. */
+    selected: string;
+    /** State class applied to the content element when focused. */
+    focused: string;
+    /** State class applied to the element when disabled. */
+    disabled: string;
+    /** Styles applied to the tree node icon. */
+    iconContainer: string;
+    /** Styles applied to the label element. */
+    label: string;
+}
+export declare type TreeItemClassKey = keyof TreeItemClasses;
+export declare function getTreeItemUtilityClass(slot: string): string;
+declare const treeItemClasses: TreeItemClasses;
+export default treeItemClasses;

package/TreeItem/treeItemClasses.js

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

package/TreeItem/useTreeItem.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+export default function useTreeItem(nodeId: string): {
+  disabled: boolean;
+  expanded: boolean;
+  selected: boolean;
+  focused: boolean;
+  handleExpansion: (event: React.SyntheticEvent) => void;
+  handleSelection: (event: React.SyntheticEvent) => void;
+  preventSelection: (event: React.SyntheticEvent) => void;
+};

package/TreeItem/useTreeItem.js

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import TreeViewContext from '../TreeView/TreeViewContext';
+export default 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
+  };
+}

package/TreeView/TreeView.d.ts

@@ -0,0 +1,144 @@
+import * as React from 'react';
+import { InternalStandardProps as StandardProps } from '@mui/material';
+import { Theme } from '@mui/material/styles';
+import { SxProps } from '@mui/system';
+import { TreeViewClasses } from './treeViewClasses';
+
+export interface TreeViewPropsBase extends StandardProps<React.HTMLAttributes<HTMLUListElement>> {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<TreeViewClasses>;
+  /**
+   * The default icon used to collapse the node.
+   */
+  defaultCollapseIcon?: React.ReactNode;
+  /**
+   * The default icon displayed next to a end node. This is applied to all
+   * tree nodes and can be overridden by the TreeItem `icon` prop.
+   */
+  defaultEndIcon?: React.ReactNode;
+  /**
+   * Expanded node ids. (Uncontrolled)
+   * @default []
+   */
+  defaultExpanded?: string[];
+  /**
+   * The default icon used to expand the node.
+   */
+  defaultExpandIcon?: React.ReactNode;
+  /**
+   * The default icon displayed next to a parent node. This is applied to all
+   * parent nodes and can be overridden by the TreeItem `icon` prop.
+   */
+  defaultParentIcon?: React.ReactNode;
+  /**
+   * If `true`, will allow focus on disabled items.
+   * @default false
+   */
+  disabledItemsFocusable?: boolean;
+  /**
+   * If `true` selection is disabled.
+   * @default false
+   */
+  disableSelection?: boolean;
+  /**
+   * Expanded node ids. (Controlled)
+   */
+  expanded?: string[];
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * Callback fired when tree items are focused.
+   *
+   * @param {React.SyntheticEvent} event The event source of the callback **Warning**: This is a generic event not a focus event.
+   * @param {string} value of the focused node.
+   */
+  onNodeFocus?: (event: React.SyntheticEvent, nodeId: string) => void;
+  /**
+   * Callback fired when tree items are expanded/collapsed.
+   *
+   * @param {React.SyntheticEvent} event The event source of the callback.
+   * @param {array} nodeIds The ids of the expanded nodes.
+   */
+  onNodeToggle?: (event: React.SyntheticEvent, nodeIds: string[]) => void;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
+export interface MultiSelectTreeViewProps extends TreeViewPropsBase {
+  /**
+   * Selected node ids. (Uncontrolled)
+   * When `multiSelect` is true this takes an array of strings; when false (default) a string.
+   * @default []
+   */
+  defaultSelected?: string[];
+  /**
+   * Selected node ids. (Controlled)
+   * When `multiSelect` is true this takes an array of strings; when false (default) a string.
+   */
+  selected?: string[];
+  /**
+   * If true `ctrl` and `shift` will trigger multiselect.
+   * @default false
+   */
+  multiSelect?: true;
+  /**
+   * Callback fired when tree items are selected/unselected.
+   *
+   * @param {React.SyntheticEvent} event The event source of the callback
+   * @param {string[] | string} nodeIds Ids of the selected nodes. When `multiSelect` is true
+   * this is an array of strings; when false (default) a string.
+   */
+  onNodeSelect?: (event: React.SyntheticEvent, nodeIds: string[]) => void;
+}
+
+export interface SingleSelectTreeViewProps extends TreeViewPropsBase {
+  /**
+   * Selected node ids. (Uncontrolled)
+   * When `multiSelect` is true this takes an array of strings; when false (default) a string.
+   * @default []
+   */
+  defaultSelected?: string;
+  /**
+   * Selected node ids. (Controlled)
+   * When `multiSelect` is true this takes an array of strings; when false (default) a string.
+   */
+  selected?: string;
+  /**
+   * If true `ctrl` and `shift` will trigger multiselect.
+   * @default false
+   */
+  multiSelect?: false;
+  /**
+   * Callback fired when tree items are selected/unselected.
+   *
+   * @param {React.SyntheticEvent} event The event source of the callback
+   * @param {string[] | string} nodeIds Ids of the selected nodes. When `multiSelect` is true
+   * this is an array of strings; when false (default) a string.
+   */
+  onNodeSelect?: (event: React.SyntheticEvent, nodeIds: string) => void;
+}
+
+export type TreeViewProps = SingleSelectTreeViewProps | MultiSelectTreeViewProps;
+
+/**
+ *
+ * Demos:
+ *
+ * - [Tree view](https://mui.com/material-ui/react-tree-view/)
+ *
+ * API:
+ *
+ * - [TreeView API](https://mui.com/material-ui/api/tree-view/)
+ */
+export default function TreeView(props: TreeViewProps): JSX.Element;