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

package/node/useTreeItem/useTreeItem.js

@@ -15,13 +15,16 @@ var _TreeViewProvider = require("../internals/TreeViewProvider");
 var _useTreeItemUtils = require("../hooks/useTreeItemUtils");
 var _TreeViewItemDepthContext = require("../internals/TreeViewItemDepthContext");
 var _tree = require("../internals/utils/tree");
+var _useSelector = require("../internals/hooks/useSelector");
+var _useTreeViewFocus = require("../internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors");
 var _useTreeViewId = require("../internals/corePlugins/useTreeViewId/useTreeViewId.utils");
+var _useTreeViewItems = require("../internals/plugins/useTreeViewItems/useTreeViewItems.selectors");
+var _useTreeViewId2 = require("../internals/corePlugins/useTreeViewId/useTreeViewId.selectors");
 const useTreeItem = parameters => {
   const {
     runItemPlugins,
     items: {
-      onItemClick,
-      disabledItemsFocusable
+      onItemClick
     },
     selection: {
       disableSelection,
@@ -30,11 +33,18 @@ const useTreeItem = parameters => {
     expansion: {
       expansionTrigger
     },
-    treeId,
+    label: labelContext,
     instance,
-    publicAPI
+    publicAPI,
+    store
   } = (0, _TreeViewProvider.useTreeViewContext)();
   const depthContext = React.useContext(_TreeViewItemDepthContext.TreeViewItemDepthContext);
+  const depth = (0, _useSelector.useSelector)(store, (...params) => {
+    if (typeof depthContext === 'function') {
+      return depthContext(...params);
+    }
+    return depthContext;
+  }, parameters.itemId);
   const {
     id,
     itemId,
@@ -59,12 +69,13 @@ const useTreeItem = parameters => {
   const handleRootRef = (0, _useForkRef.default)(rootRef, pluginRootRef, rootRefObject);
   const handleContentRef = (0, _useForkRef.default)(contentRef, contentRefObject);
   const checkboxRef = React.useRef(null);
+  const treeId = (0, _useSelector.useSelector)(store, _useTreeViewId2.selectorTreeViewId);
   const idAttribute = (0, _useTreeViewId.generateTreeItemIdAttribute)({
     itemId,
     treeId,
     id
   });
-  const rootTabIndex = instance.canItemBeTabbed(itemId) ? 0 : -1;
+  const shouldBeAccessibleWithTab = (0, _useSelector.useSelector)(store, _useTreeViewFocus.selectorIsItemTheDefaultFocusableItem, itemId);
   const sharedPropsEnhancerParams = {
     rootRefObject,
     contentRefObject,
@@ -76,8 +87,7 @@ const useTreeItem = parameters => {
     if (event.defaultMuiPrevented) {
       return;
     }
-    const canBeFocused = !status.disabled || disabledItemsFocusable;
-    if (!status.focused && canBeFocused && event.currentTarget === event.target) {
+    if (!status.focused && (0, _useTreeViewItems.selectorCanItemBeFocused)(store.value, itemId) && event.currentTarget === event.target) {
       instance.focusItem(event, itemId);
     }
   };
@@ -115,7 +125,7 @@ const useTreeItem = parameters => {
   };
   const createContentHandleClick = otherHandlers => event => {
     otherHandlers.onClick?.(event);
-    onItemClick?.(event, itemId);
+    onItemClick(event, itemId);
     if (event.defaultMuiPrevented || checkboxRef.current?.contains(event.target)) {
       return;
     }
@@ -146,6 +156,10 @@ const useTreeItem = parameters => {
       interactions.handleExpansion(event);
     }
   };
+  const getContextProviderProps = () => ({
+    itemId,
+    id
+  });
   const getRootProps = (externalProps = {}) => {
     const externalEventHandlers = (0, _extends2.default)({}, (0, _extractEventHandlers.default)(parameters), (0, _extractEventHandlers.default)(externalProps));
 
@@ -164,14 +178,14 @@ const useTreeItem = parameters => {
     const props = (0, _extends2.default)({}, externalEventHandlers, {
       ref: handleRootRef,
       role: 'treeitem',
-      tabIndex: rootTabIndex,
+      tabIndex: shouldBeAccessibleWithTab ? 0 : -1,
       id: idAttribute,
       'aria-expanded': status.expandable ? status.expanded : undefined,
       'aria-selected': ariaSelected,
       'aria-disabled': status.disabled || undefined
     }, externalProps, {
       style: (0, _extends2.default)({}, externalProps.style ?? {}, {
-        '--TreeView-itemDepth': typeof depthContext === 'function' ? depthContext(itemId) : depthContext
+        '--TreeView-itemDepth': depth
       }),
       onFocus: createRootHandleFocus(externalEventHandlers),
       onBlur: createRootHandleBlur(externalEventHandlers),
@@ -212,7 +226,7 @@ const useTreeItem = parameters => {
     }, externalProps, {
       onDoubleClick: createLabelHandleDoubleClick(externalEventHandlers)
     });
-    if (instance.isTreeViewEditable) {
+    if (labelContext?.isItemEditable) {
       props.editable = status.editable;
     }
     return props;
@@ -249,6 +263,7 @@ const useTreeItem = parameters => {
     return (0, _extends2.default)({}, externalProps, enhancedDragAndDropOverlayProps);
   };
   return {
+    getContextProviderProps,
     getRootProps,
     getContentProps,
     getGroupTransitionProps,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "8.0.0-alpha.0",
+  "version": "8.0.0-alpha.2",
   "description": "The community edition of the Tree View components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -39,15 +39,17 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-internals": "8.0.0-alpha.0"
+    "reselect": "^5.1.1",
+    "use-sync-external-store": "^1.2.2",
+    "@mui/x-internals": "8.0.0-alpha.2"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/material": "^5.15.14 || ^6.0.0",
     "@mui/system": "^5.15.14 || ^6.0.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "@emotion/react": {

package/useTreeItem/useTreeItem.js

@@ -8,13 +8,16 @@ import { useTreeViewContext } from "../internals/TreeViewProvider/index.js";
 import { useTreeItemUtils } from "../hooks/useTreeItemUtils/index.js";
 import { TreeViewItemDepthContext } from "../internals/TreeViewItemDepthContext/index.js";
 import { isTargetInDescendants } from "../internals/utils/tree.js";
+import { useSelector } from "../internals/hooks/useSelector.js";
+import { selectorIsItemTheDefaultFocusableItem } from "../internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors.js";
 import { generateTreeItemIdAttribute } from "../internals/corePlugins/useTreeViewId/useTreeViewId.utils.js";
+import { selectorCanItemBeFocused } from "../internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js";
+import { selectorTreeViewId } from "../internals/corePlugins/useTreeViewId/useTreeViewId.selectors.js";
 export const useTreeItem = parameters => {
   const {
     runItemPlugins,
     items: {
-      onItemClick,
-      disabledItemsFocusable
+      onItemClick
     },
     selection: {
       disableSelection,
@@ -23,11 +26,18 @@ export const useTreeItem = parameters => {
     expansion: {
       expansionTrigger
     },
-    treeId,
+    label: labelContext,
     instance,
-    publicAPI
+    publicAPI,
+    store
   } = useTreeViewContext();
   const depthContext = React.useContext(TreeViewItemDepthContext);
+  const depth = useSelector(store, (...params) => {
+    if (typeof depthContext === 'function') {
+      return depthContext(...params);
+    }
+    return depthContext;
+  }, parameters.itemId);
   const {
     id,
     itemId,
@@ -52,12 +62,13 @@ export const useTreeItem = parameters => {
   const handleRootRef = useForkRef(rootRef, pluginRootRef, rootRefObject);
   const handleContentRef = useForkRef(contentRef, contentRefObject);
   const checkboxRef = React.useRef(null);
+  const treeId = useSelector(store, selectorTreeViewId);
   const idAttribute = generateTreeItemIdAttribute({
     itemId,
     treeId,
     id
   });
-  const rootTabIndex = instance.canItemBeTabbed(itemId) ? 0 : -1;
+  const shouldBeAccessibleWithTab = useSelector(store, selectorIsItemTheDefaultFocusableItem, itemId);
   const sharedPropsEnhancerParams = {
     rootRefObject,
     contentRefObject,
@@ -69,8 +80,7 @@ export const useTreeItem = parameters => {
     if (event.defaultMuiPrevented) {
       return;
     }
-    const canBeFocused = !status.disabled || disabledItemsFocusable;
-    if (!status.focused && canBeFocused && event.currentTarget === event.target) {
+    if (!status.focused && selectorCanItemBeFocused(store.value, itemId) && event.currentTarget === event.target) {
       instance.focusItem(event, itemId);
     }
   };
@@ -108,7 +118,7 @@ export const useTreeItem = parameters => {
   };
   const createContentHandleClick = otherHandlers => event => {
     otherHandlers.onClick?.(event);
-    onItemClick?.(event, itemId);
+    onItemClick(event, itemId);
     if (event.defaultMuiPrevented || checkboxRef.current?.contains(event.target)) {
       return;
     }
@@ -139,6 +149,10 @@ export const useTreeItem = parameters => {
       interactions.handleExpansion(event);
     }
   };
+  const getContextProviderProps = () => ({
+    itemId,
+    id
+  });
   const getRootProps = (externalProps = {}) => {
     const externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
 
@@ -157,14 +171,14 @@ export const useTreeItem = parameters => {
     const props = _extends({}, externalEventHandlers, {
       ref: handleRootRef,
       role: 'treeitem',
-      tabIndex: rootTabIndex,
+      tabIndex: shouldBeAccessibleWithTab ? 0 : -1,
       id: idAttribute,
       'aria-expanded': status.expandable ? status.expanded : undefined,
       'aria-selected': ariaSelected,
       'aria-disabled': status.disabled || undefined
     }, externalProps, {
       style: _extends({}, externalProps.style ?? {}, {
-        '--TreeView-itemDepth': typeof depthContext === 'function' ? depthContext(itemId) : depthContext
+        '--TreeView-itemDepth': depth
       }),
       onFocus: createRootHandleFocus(externalEventHandlers),
       onBlur: createRootHandleBlur(externalEventHandlers),
@@ -205,7 +219,7 @@ export const useTreeItem = parameters => {
     }, externalProps, {
       onDoubleClick: createLabelHandleDoubleClick(externalEventHandlers)
     });
-    if (instance.isTreeViewEditable) {
+    if (labelContext?.isItemEditable) {
       props.editable = status.editable;
     }
     return props;
@@ -242,6 +256,7 @@ export const useTreeItem = parameters => {
     return _extends({}, externalProps, enhancedDragAndDropOverlayProps);
   };
   return {
+    getContextProviderProps,
     getRootProps,
     getContentProps,
     getGroupTransitionProps,

package/useTreeItem/useTreeItem.types.d.ts

@@ -32,6 +32,10 @@ export interface UseTreeItemParameters {
      */
     children?: React.ReactNode;
 }
+export interface UseTreeItemContextProviderProps {
+    itemId: string;
+    id: string | undefined;
+}
 export interface UseTreeItemRootSlotPropsFromUseTreeItem {
     role: 'treeitem';
     tabIndex: 0 | -1;
@@ -98,6 +102,11 @@ export interface UseTreeItemStatus {
     editable: boolean;
 }
 export interface UseTreeItemReturnValue<TSignatures extends UseTreeItemMinimalPlugins, TOptionalSignatures extends UseTreeItemOptionalPlugins> {
+    /**
+     * Resolver for the context provider's props.
+     * @returns {UseTreeItemContextProviderProps} Props that should be spread on the context provider slot.
+     */
+    getContextProviderProps: () => UseTreeItemContextProviderProps;
     /**
      * Resolver for the root slot's props.
      * @param {ExternalProps} externalProps Additional props for the root slot.