@mui/x-tree-view 7.0.0-beta.4 → 7.0.0-beta.5

package/node/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -11,10 +11,12 @@ var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallb
 var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
 var _useTreeView = require("../../useTreeView/useTreeView.utils");
 var _useInstanceEventHandler = require("../../hooks/useInstanceEventHandler");
+var _utils = require("../../utils/utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useTreeViewFocus = ({
   instance,
+  publicAPI,
   params,
   state,
   setState,
@@ -23,19 +25,45 @@ const useTreeViewFocus = ({
 }) => {
   const setFocusedNodeId = (0, _useEventCallback.default)(nodeId => {
     const cleanNodeId = typeof nodeId === 'function' ? nodeId(state.focusedNodeId) : nodeId;
-    setState(prevState => (0, _extends2.default)({}, prevState, {
-      focusedNodeId: cleanNodeId
-    }));
+    if (state.focusedNodeId !== cleanNodeId) {
+      setState(prevState => (0, _extends2.default)({}, prevState, {
+        focusedNodeId: cleanNodeId
+      }));
+    }
   });
-  const isNodeFocused = React.useCallback(nodeId => state.focusedNodeId === nodeId, [state.focusedNodeId]);
+  const isTreeViewFocused = React.useCallback(() => !!rootRef.current && rootRef.current === (0, _utils.getActiveElement)((0, _ownerDocument.default)(rootRef.current)), [rootRef]);
+  const isNodeFocused = React.useCallback(nodeId => state.focusedNodeId === nodeId && isTreeViewFocused(), [state.focusedNodeId, isTreeViewFocused]);
+  const isNodeVisible = nodeId => {
+    const node = instance.getNode(nodeId);
+    return node && (node.parentId == null || instance.isNodeExpanded(node.parentId));
+  };
   const focusNode = (0, _useEventCallback.default)((event, nodeId) => {
-    if (nodeId) {
+    // if we receive a nodeId, and it is visible, the focus will be set to it
+    if (nodeId && isNodeVisible(nodeId)) {
+      if (!isTreeViewFocused()) {
+        instance.focusRoot();
+      }
       setFocusedNodeId(nodeId);
       if (params.onNodeFocus) {
         params.onNodeFocus(event, nodeId);
       }
     }
   });
+  const focusDefaultNode = (0, _useEventCallback.default)(event => {
+    let nodeToFocusId;
+    if (Array.isArray(models.selectedNodes.value)) {
+      nodeToFocusId = models.selectedNodes.value.find(isNodeVisible);
+    } else if (models.selectedNodes.value != null && isNodeVisible(models.selectedNodes.value)) {
+      nodeToFocusId = models.selectedNodes.value;
+    }
+    if (nodeToFocusId == null) {
+      nodeToFocusId = instance.getNavigableChildrenIds(null)[0];
+    }
+    setFocusedNodeId(nodeToFocusId);
+    if (params.onNodeFocus) {
+      params.onNodeFocus(event, nodeToFocusId);
+    }
+  });
   const focusRoot = (0, _useEventCallback.default)(() => {
     rootRef.current?.focus({
       preventScroll: true
@@ -44,7 +72,11 @@ const useTreeViewFocus = ({
   (0, _useTreeView.populateInstance)(instance, {
     isNodeFocused,
     focusNode,
-    focusRoot
+    focusRoot,
+    focusDefaultNode
+  });
+  (0, _useTreeView.populatePublicAPI)(publicAPI, {
+    focusNode
   });
   (0, _useInstanceEventHandler.useInstanceEventHandler)(instance, 'removeNode', ({
     id
@@ -58,23 +90,9 @@ const useTreeViewFocus = ({
   });
   const createHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(event);
-
     // if the event bubbled (which is React specific) we don't want to steal focus
     if (event.target === event.currentTarget) {
-      const isNodeVisible = nodeId => {
-        const node = instance.getNode(nodeId);
-        return node && (node.parentId == null || instance.isNodeExpanded(node.parentId));
-      };
-      let nodeToFocusId;
-      if (Array.isArray(models.selectedNodes.value)) {
-        nodeToFocusId = models.selectedNodes.value.find(isNodeVisible);
-      } else if (models.selectedNodes.value != null && isNodeVisible(models.selectedNodes.value)) {
-        nodeToFocusId = models.selectedNodes.value;
-      }
-      if (nodeToFocusId == null) {
-        nodeToFocusId = instance.getNavigableChildrenIds(null)[0];
-      }
-      instance.focusNode(event, nodeToFocusId);
+      instance.focusDefaultNode(event);
     }
   };
   const createHandleBlur = otherHandlers => event => {

package/node/internals/useTreeView/useTreeView.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTreeView = void 0;
+exports.useTreeViewApiInitialization = useTreeViewApiInitialization;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
@@ -12,6 +13,16 @@ var _useTreeViewModels = require("./useTreeViewModels");
 var _corePlugins = require("../corePlugins");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function useTreeViewApiInitialization(inputApiRef) {
+  const fallbackPublicApiRef = React.useRef({});
+  if (inputApiRef) {
+    if (inputApiRef.current == null) {
+      inputApiRef.current = {};
+    }
+    return inputApiRef.current;
+  }
+  return fallbackPublicApiRef.current;
+}
 const useTreeView = inParams => {
   const plugins = [..._corePlugins.TREE_VIEW_CORE_PLUGINS, ...inParams.plugins];
   const params = plugins.reduce((acc, plugin) => {
@@ -23,6 +34,7 @@ const useTreeView = inParams => {
   const models = (0, _useTreeViewModels.useTreeViewModels)(plugins, params);
   const instanceRef = React.useRef({});
   const instance = instanceRef.current;
+  const publicAPI = useTreeViewApiInitialization(inParams.apiRef);
   const innerRootRef = React.useRef(null);
   const handleRootRef = (0, _useForkRef.default)(innerRootRef, inParams.rootRef);
   const [state, setState] = React.useState(() => {
@@ -41,6 +53,7 @@ const useTreeView = inParams => {
   const runPlugin = plugin => {
     const pluginResponse = plugin({
       instance,
+      publicAPI,
       params,
       slots: params.slots,
       slotProps: params.slotProps,

package/node/internals/useTreeView/useTreeView.utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.populateInstance = exports.getPreviousNode = exports.getNextNode = exports.getLastNode = exports.getFirstNode = void 0;
+exports.populatePublicAPI = exports.populateInstance = exports.getPreviousNode = exports.getNextNode = exports.getLastNode = exports.getFirstNode = void 0;
 const getPreviousNode = (instance, nodeId) => {
   const node = instance.getNode(nodeId);
   const siblings = instance.getNavigableChildrenIds(node.parentId);
@@ -51,4 +51,8 @@ exports.getFirstNode = getFirstNode;
 const populateInstance = (instance, methods) => {
   Object.assign(instance, methods);
 };
-exports.populateInstance = populateInstance;
+exports.populateInstance = populateInstance;
+const populatePublicAPI = (publicAPI, methods) => {
+  Object.assign(publicAPI, methods);
+};
+exports.populatePublicAPI = populatePublicAPI;

package/node/internals/utils/extractPluginParamsFromProps.js

@@ -6,12 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.extractPluginParamsFromProps = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-const _excluded = ["slots", "slotProps"];
+const _excluded = ["slots", "slotProps", "apiRef"];
 const extractPluginParamsFromProps = _ref => {
   let {
       props: {
         slots,
-        slotProps
+        slotProps,
+        apiRef
       },
       plugins,
       rootRef
@@ -25,7 +26,8 @@ const extractPluginParamsFromProps = _ref => {
     plugins,
     rootRef,
     slots: slots ?? {},
-    slotProps: slotProps ?? {}
+    slotProps: slotProps ?? {},
+    apiRef
   };
   const otherProps = {};
   Object.keys(props).forEach(propName => {

package/node/internals/utils/utils.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getActiveElement = void 0;
+const getActiveElement = (root = document) => {
+  const activeEl = root.activeElement;
+  if (!activeEl) {
+    return null;
+  }
+  if (activeEl.shadowRoot) {
+    return getActiveElement(activeEl.shadowRoot);
+  }
+  return activeEl;
+};
+exports.getActiveElement = getActiveElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "7.0.0-beta.4",
+  "version": "7.0.0-beta.5",
   "description": "The community edition of the tree view components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",