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

package/modern/useTreeItem/useTreeItem.js

@@ -14,17 +14,10 @@ import { generateTreeItemIdAttribute } from "../internals/corePlugins/useTreeVie
 import { selectorCanItemBeFocused } from "../internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js";
 import { selectorTreeViewId } from "../internals/corePlugins/useTreeViewId/useTreeViewId.selectors.js";
 import { selectorItemExpansionTrigger } from "../internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js";
+import { selectorIsCheckboxSelectionEnabled, selectorIsItemSelectionEnabled } from "../internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors.js";
 export const useTreeItem = parameters => {
   const {
     runItemPlugins,
-    items: {
-      onItemClick
-    },
-    selection: {
-      disableSelection,
-      checkboxSelection
-    },
-    label: labelContext,
     instance,
     publicAPI,
     store
@@ -61,6 +54,8 @@ export const useTreeItem = parameters => {
   const handleContentRef = useForkRef(contentRef, contentRefObject);
   const checkboxRef = React.useRef(null);
   const treeId = useSelector(store, selectorTreeViewId);
+  const isSelectionEnabledForItem = useSelector(store, selectorIsItemSelectionEnabled, itemId);
+  const isCheckboxSelectionEnabled = useSelector(store, selectorIsCheckboxSelectionEnabled);
   const idAttribute = generateTreeItemIdAttribute({
     itemId,
     treeId,
@@ -70,8 +65,7 @@ export const useTreeItem = parameters => {
   const sharedPropsEnhancerParams = {
     rootRefObject,
     contentRefObject,
-    interactions,
-    status
+    interactions
   };
   const createRootHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(event);
@@ -116,14 +110,14 @@ export 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 (selectorItemExpansionTrigger(store.value) === 'content') {
       interactions.handleExpansion(event);
     }
-    if (!checkboxSelection) {
+    if (!isCheckboxSelectionEnabled) {
       interactions.handleSelection(event);
     }
   };
@@ -159,7 +153,7 @@ export 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 {
@@ -195,6 +189,11 @@ export 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?.(_extends({}, sharedPropsEnhancerParams, {
       externalEventHandlers
     })) ?? {};
@@ -217,10 +216,10 @@ export const useTreeItem = parameters => {
     }, externalProps, {
       onDoubleClick: createLabelHandleDoubleClick(externalEventHandlers)
     });
-    if (labelContext?.isItemEditable) {
-      props.editable = status.editable;
-    }
-    return props;
+    const enhancedLabelProps = propsEnhancers.label?.(_extends({}, sharedPropsEnhancerParams, {
+      externalEventHandlers
+    })) ?? {};
+    return _extends({}, enhancedLabelProps, props);
   };
   const getLabelInputProps = (externalProps = {}) => {
     const externalEventHandlers = extractEventHandlers(externalProps);

package/modern/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.2",
   "description": "The community edition of the Tree View components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -41,7 +41,7 @@
     "react-transition-group": "^4.4.5",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.4.0",
-    "@mui/x-internals": "8.0.0-beta.0"
+    "@mui/x-internals": "8.0.0-beta.2"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",