@mui/x-tree-view 8.0.0-beta.0 → 8.0.0-beta.2

package/useTreeItem/useTreeItem.js

@@ -21,17 +21,10 @@ var _useTreeViewId = require("../internals/corePlugins/useTreeViewId/useTreeView
 var _useTreeViewItems = require("../internals/plugins/useTreeViewItems/useTreeViewItems.selectors");
 var _useTreeViewId2 = require("../internals/corePlugins/useTreeViewId/useTreeViewId.selectors");
 var _useTreeViewExpansion = require("../internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors");
+var _useTreeViewSelection = require("../internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors");
 const useTreeItem = parameters => {
   const {
     runItemPlugins,
-    items: {
-      onItemClick
-    },
-    selection: {
-      disableSelection,
-      checkboxSelection
-    },
-    label: labelContext,
     instance,
     publicAPI,
     store
@@ -68,6 +61,8 @@ const useTreeItem = parameters => {
   const handleContentRef = (0, _useForkRef.default)(contentRef, contentRefObject);
   const checkboxRef = React.useRef(null);
   const treeId = (0, _useSelector.useSelector)(store, _useTreeViewId2.selectorTreeViewId);
+  const isSelectionEnabledForItem = (0, _useSelector.useSelector)(store, _useTreeViewSelection.selectorIsItemSelectionEnabled, itemId);
+  const isCheckboxSelectionEnabled = (0, _useSelector.useSelector)(store, _useTreeViewSelection.selectorIsCheckboxSelectionEnabled);
   const idAttribute = (0, _useTreeViewId.generateTreeItemIdAttribute)({
     itemId,
     treeId,
@@ -77,8 +72,7 @@ const useTreeItem = parameters => {
   const sharedPropsEnhancerParams = {
     rootRefObject,
     contentRefObject,
-    interactions,
-    status
+    interactions
   };
   const createRootHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(event);
@@ -123,14 +117,14 @@ const useTreeItem = parameters => {
   };
   const createContentHandleClick = otherHandlers => event => {
     otherHandlers.onClick?.(event);
-    onItemClick(event, itemId);
+    instance.handleItemClick(event, itemId);
     if (event.defaultMuiPrevented || checkboxRef.current?.contains(event.target)) {
       return;
     }
     if ((0, _useTreeViewExpansion.selectorItemExpansionTrigger)(store.value) === 'content') {
       interactions.handleExpansion(event);
     }
-    if (!checkboxSelection) {
+    if (!isCheckboxSelectionEnabled) {
       interactions.handleSelection(event);
     }
   };
@@ -166,7 +160,7 @@ const useTreeItem = parameters => {
     if (status.selected) {
       // - each selected node has aria-selected set to true.
       ariaSelected = true;
-    } else if (disableSelection || status.disabled) {
+    } else if (!isSelectionEnabledForItem) {
       // - if the tree contains nodes that are not selectable, aria-selected is not present on those nodes.
       ariaSelected = undefined;
     } else {
@@ -202,6 +196,11 @@ const useTreeItem = parameters => {
       onMouseDown: createContentHandleMouseDown(externalEventHandlers),
       status
     });
+    ['expanded', 'selected', 'focused', 'disabled', 'editing', 'editable'].forEach(key => {
+      if (status[key]) {
+        props[`data-${key}`] = '';
+      }
+    });
     const enhancedContentProps = propsEnhancers.content?.((0, _extends2.default)({}, sharedPropsEnhancerParams, {
       externalEventHandlers
     })) ?? {};
@@ -224,10 +223,10 @@ const useTreeItem = parameters => {
     }, externalProps, {
       onDoubleClick: createLabelHandleDoubleClick(externalEventHandlers)
     });
-    if (labelContext?.isItemEditable) {
-      props.editable = status.editable;
-    }
-    return props;
+    const enhancedLabelProps = propsEnhancers.label?.((0, _extends2.default)({}, sharedPropsEnhancerParams, {
+      externalEventHandlers
+    })) ?? {};
+    return (0, _extends2.default)({}, enhancedLabelProps, props);
   };
   const getLabelInputProps = (externalProps = {}) => {
     const externalEventHandlers = (0, _extractEventHandlers.default)(externalProps);

package/useTreeItem/useTreeItem.types.d.ts

@@ -55,7 +55,16 @@ export interface UseTreeItemContentSlotPropsFromUseTreeItem {
   onClick: TreeViewCancellableEventHandler<React.MouseEvent>;
   onMouseDown: TreeViewCancellableEventHandler<React.MouseEvent>;
   ref: React.RefCallback<HTMLDivElement> | null;
+  /**
+   * @deprecated Will be removed in the next major version. Please use the data-attrs instead.
+   */
   status: UseTreeItemStatus;
+  'data-expanded'?: '';
+  'data-selected'?: '';
+  'data-focused'?: '';
+  'data-disabled'?: '';
+  'data-editing'?: '';
+  'data-editable'?: '';
 }
 export interface UseTreeItemContentSlotOwnProps extends UseTreeItemContentSlotPropsFromUseTreeItem {}
 export type UseTreeItemContentSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItemContentSlotOwnProps;
@@ -66,10 +75,6 @@ export type UseTreeItemIconContainerSlotProps<ExternalProps = {}> = ExternalProp
 export interface UseTreeItemLabelSlotOwnProps {
   children: React.ReactNode;
   onDoubleClick: TreeViewCancellableEventHandler<React.MouseEvent>;
-  /**
-   * Only defined when the `isItemEditable` experimental feature is enabled.
-   */
-  editable?: boolean;
 }
 export type UseTreeItemLabelSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItemLabelSlotOwnProps;
 export interface UseTreeItemLabelInputSlotOwnProps {}

package/esm/internals/TreeViewProvider/useTreeViewContext.d.ts

@@ -1,3 +0,0 @@
-import { TreeViewAnyPluginSignature } from "../models/index.js";
-import { TreeViewContextValue } from "./TreeViewProvider.types.js";
-export declare const useTreeViewContext: <TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []>() => TreeViewContextValue<TSignatures, TOptionalSignatures>;

package/esm/internals/TreeViewProvider/useTreeViewContext.js

@@ -1,9 +0,0 @@
-import * as React from 'react';
-import { TreeViewContext } from "./TreeViewContext.js";
-export const useTreeViewContext = () => {
-  const context = React.useContext(TreeViewContext);
-  if (context == null) {
-    throw new Error(['MUI X: Could not find the Tree View context.', 'It looks like you rendered your component outside of a SimpleTreeView or RichTreeView parent component.', 'This can also happen if you are bundling multiple versions of the Tree View.'].join('\n'));
-  }
-  return context;
-};

package/internals/TreeViewProvider/useTreeViewContext.d.ts

@@ -1,3 +0,0 @@
-import { TreeViewAnyPluginSignature } from "../models/index.js";
-import { TreeViewContextValue } from "./TreeViewProvider.types.js";
-export declare const useTreeViewContext: <TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []>() => TreeViewContextValue<TSignatures, TOptionalSignatures>;

package/internals/TreeViewProvider/useTreeViewContext.js

@@ -1,17 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useTreeViewContext = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _TreeViewContext = require("./TreeViewContext");
-const useTreeViewContext = () => {
-  const context = React.useContext(_TreeViewContext.TreeViewContext);
-  if (context == null) {
-    throw new Error(['MUI X: Could not find the Tree View context.', 'It looks like you rendered your component outside of a SimpleTreeView or RichTreeView parent component.', 'This can also happen if you are bundling multiple versions of the Tree View.'].join('\n'));
-  }
-  return context;
-};
-exports.useTreeViewContext = useTreeViewContext;

package/modern/internals/TreeViewProvider/useTreeViewContext.d.ts

@@ -1,3 +0,0 @@
-import { TreeViewAnyPluginSignature } from "../models/index.js";
-import { TreeViewContextValue } from "./TreeViewProvider.types.js";
-export declare const useTreeViewContext: <TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []>() => TreeViewContextValue<TSignatures, TOptionalSignatures>;

package/modern/internals/TreeViewProvider/useTreeViewContext.js

@@ -1,9 +0,0 @@
-import * as React from 'react';
-import { TreeViewContext } from "./TreeViewContext.js";
-export const useTreeViewContext = () => {
-  const context = React.useContext(TreeViewContext);
-  if (context == null) {
-    throw new Error(['MUI X: Could not find the Tree View context.', 'It looks like you rendered your component outside of a SimpleTreeView or RichTreeView parent component.', 'This can also happen if you are bundling multiple versions of the Tree View.'].join('\n'));
-  }
-  return context;
-};