@mui/x-tree-view 7.0.0-alpha.1 → 7.0.0-alpha.8

package/legacy/internals/hooks/useTimeout.js

@@ -0,0 +1,38 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import { useLazyRef } from './useLazyRef';
+import { useOnMount } from './useOnMount';
+var Timeout = /*#__PURE__*/function () {
+  function Timeout() {
+    var _this = this;
+    _classCallCheck(this, Timeout);
+    this.currentId = 0;
+    this.clear = function () {
+      if (_this.currentId !== 0) {
+        clearTimeout(_this.currentId);
+        _this.currentId = 0;
+      }
+    };
+    this.disposeEffect = function () {
+      return _this.clear;
+    };
+  }
+  _createClass(Timeout, [{
+    key: "start",
+    value: function start(delay, fn) {
+      this.clear();
+      this.currentId = setTimeout(fn, delay);
+    }
+  }], [{
+    key: "create",
+    value: function create() {
+      return new Timeout();
+    }
+  }]);
+  return Timeout;
+}();
+export function useTimeout() {
+  var timeout = useLazyRef(Timeout.create).current;
+  useOnMount(timeout.disposeEffect);
+  return timeout;
+}

package/legacy/internals/models/MuiCancellableEvent.js

@@ -0,0 +1 @@
+export {};

package/legacy/internals/plugins/defaultPlugins.js

@@ -1,9 +1,10 @@
+import { useTreeViewId } from './useTreeViewId';
 import { useTreeViewNodes } from './useTreeViewNodes';
 import { useTreeViewExpansion } from './useTreeViewExpansion';
 import { useTreeViewSelection } from './useTreeViewSelection';
 import { useTreeViewFocus } from './useTreeViewFocus';
 import { useTreeViewKeyboardNavigation } from './useTreeViewKeyboardNavigation';
 import { useTreeViewContextValueBuilder } from './useTreeViewContextValueBuilder';
-export var DEFAULT_TREE_VIEW_PLUGINS = [useTreeViewNodes, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewContextValueBuilder];
+export var DEFAULT_TREE_VIEW_PLUGINS = [useTreeViewId, useTreeViewNodes, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewContextValueBuilder];
 
 // We can't infer this type from the plugin, otherwise we would lose the generics.

package/legacy/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js

@@ -1,18 +1,21 @@
-import useId from '@mui/utils/useId';
 export var useTreeViewContextValueBuilder = function useTreeViewContextValueBuilder(_ref) {
   var instance = _ref.instance,
     params = _ref.params;
-  var treeId = useId(params.id);
   return {
-    getRootProps: function getRootProps() {
-      return {
-        id: treeId
-      };
-    },
     contextValue: {
-      treeId: treeId,
       instance: instance,
       multiSelect: params.multiSelect,
+      runItemPlugins: function runItemPlugins(_ref2) {
+        var props = _ref2.props,
+          ref = _ref2.ref;
+        return {
+          props: props,
+          ref: ref,
+          wrapItem: function wrapItem(children) {
+            return children;
+          }
+        };
+      },
       disabledItemsFocusable: params.disabledItemsFocusable,
       icons: {
         defaultCollapseIcon: params.defaultCollapseIcon,
@@ -22,4 +25,10 @@ export var useTreeViewContextValueBuilder = function useTreeViewContextValueBuil
       }
     }
   };
+};
+useTreeViewContextValueBuilder.params = {
+  defaultCollapseIcon: true,
+  defaultEndIcon: true,
+  defaultExpandIcon: true,
+  defaultParentIcon: true
 };

package/legacy/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -7,8 +7,8 @@ export var useTreeViewExpansion = function useTreeViewExpansion(_ref) {
     params = _ref.params,
     models = _ref.models;
   var isNodeExpanded = React.useCallback(function (nodeId) {
-    return Array.isArray(models.expanded.value) ? models.expanded.value.indexOf(nodeId) !== -1 : false;
-  }, [models.expanded.value]);
+    return Array.isArray(models.expandedNodes.value) ? models.expandedNodes.value.indexOf(nodeId) !== -1 : false;
+  }, [models.expandedNodes.value]);
   var isNodeExpandable = React.useCallback(function (nodeId) {
     var _instance$getNode;
     return !!((_instance$getNode = instance.getNode(nodeId)) != null && _instance$getNode.expandable);
@@ -17,18 +17,22 @@ export var useTreeViewExpansion = function useTreeViewExpansion(_ref) {
     if (nodeId == null) {
       return;
     }
+    var isExpandedBefore = models.expandedNodes.value.indexOf(nodeId) !== -1;
     var newExpanded;
-    if (models.expanded.value.indexOf(nodeId) !== -1) {
-      newExpanded = models.expanded.value.filter(function (id) {
+    if (isExpandedBefore) {
+      newExpanded = models.expandedNodes.value.filter(function (id) {
         return id !== nodeId;
       });
     } else {
-      newExpanded = [nodeId].concat(models.expanded.value);
+      newExpanded = [nodeId].concat(models.expandedNodes.value);
     }
-    if (params.onNodeToggle) {
-      params.onNodeToggle(event, newExpanded);
+    if (params.onNodeExpansionToggle) {
+      params.onNodeExpansionToggle(event, nodeId, !isExpandedBefore);
     }
-    models.expanded.setValue(newExpanded);
+    if (params.onExpandedNodesChange) {
+      params.onExpandedNodesChange(event, newExpanded);
+    }
+    models.expandedNodes.setValue(newExpanded);
   });
   var expandAllSiblings = function expandAllSiblings(event, nodeId) {
     var node = instance.getNode(nodeId);
@@ -36,12 +40,17 @@ export var useTreeViewExpansion = function useTreeViewExpansion(_ref) {
     var diff = siblings.filter(function (child) {
       return instance.isNodeExpandable(child) && !instance.isNodeExpanded(child);
     });
-    var newExpanded = models.expanded.value.concat(diff);
+    var newExpanded = models.expandedNodes.value.concat(diff);
     if (diff.length > 0) {
-      models.expanded.setValue(newExpanded);
-      if (params.onNodeToggle) {
-        params.onNodeToggle(event, newExpanded);
+      if (params.onNodeExpansionToggle) {
+        diff.forEach(function (newlyExpandedNodeId) {
+          params.onNodeExpansionToggle(event, newlyExpandedNodeId, true);
+        });
+      }
+      if (params.onExpandedNodesChange) {
+        params.onExpandedNodesChange(event, newExpanded);
       }
+      models.expandedNodes.setValue(newExpanded);
     }
   };
   populateInstance(instance, {
@@ -52,15 +61,21 @@ export var useTreeViewExpansion = function useTreeViewExpansion(_ref) {
   });
 };
 useTreeViewExpansion.models = {
-  expanded: {
-    controlledProp: 'expanded',
-    defaultProp: 'defaultExpanded'
+  expandedNodes: {
+    controlledProp: 'expandedNodes',
+    defaultProp: 'defaultExpandedNodes'
   }
 };
-var DEFAULT_EXPANDED = [];
+var DEFAULT_EXPANDED_NODES = [];
 useTreeViewExpansion.getDefaultizedParams = function (params) {
   var _params$defaultExpand;
   return _extends({}, params, {
-    defaultExpanded: (_params$defaultExpand = params.defaultExpanded) != null ? _params$defaultExpand : DEFAULT_EXPANDED
+    defaultExpandedNodes: (_params$defaultExpand = params.defaultExpandedNodes) != null ? _params$defaultExpand : DEFAULT_EXPANDED_NODES
   });
+};
+useTreeViewExpansion.params = {
+  expandedNodes: true,
+  defaultExpandedNodes: true,
+  onExpandedNodesChange: true,
+  onNodeExpansionToggle: true
 };

package/legacy/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -30,9 +30,16 @@ export var useTreeViewFocus = function useTreeViewFocus(_ref) {
       }
     }
   });
+  var focusRoot = useEventCallback(function () {
+    var _rootRef$current;
+    (_rootRef$current = rootRef.current) == null || _rootRef$current.focus({
+      preventScroll: true
+    });
+  });
   populateInstance(instance, {
     isNodeFocused: isNodeFocused,
-    focusNode: focusNode
+    focusNode: focusNode,
+    focusRoot: focusRoot
   });
   useInstanceEventHandler(instance, 'removeNode', function (_ref2) {
     var id = _ref2.id;
@@ -55,10 +62,10 @@ export var useTreeViewFocus = function useTreeViewFocus(_ref) {
           return node && (node.parentId == null || instance.isNodeExpanded(node.parentId));
         };
         var nodeToFocusId;
-        if (Array.isArray(models.selected.value)) {
-          nodeToFocusId = models.selected.value.find(isNodeVisible);
-        } else if (models.selected.value != null && isNodeVisible(models.selected.value)) {
-          nodeToFocusId = models.selected.value;
+        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];
@@ -75,7 +82,7 @@ export var useTreeViewFocus = function useTreeViewFocus(_ref) {
     };
   };
   var focusedNode = instance.getNode(state.focusedNodeId);
-  var activeDescendant = focusedNode ? focusedNode.idAttribute : null;
+  var activeDescendant = focusedNode ? instance.getTreeItemId(focusedNode.id, focusedNode.idAttribute) : null;
   return {
     getRootProps: function getRootProps(otherHandlers) {
       return {
@@ -96,4 +103,7 @@ useTreeViewFocus.getDefaultizedParams = function (params) {
   return _extends({}, params, {
     disabledItemsFocusable: (_params$disabledItems = params.disabledItemsFocusable) != null ? _params$disabledItems : false
   });
+};
+useTreeViewFocus.params = {
+  onNodeFocus: true
 };

package/legacy/internals/plugins/useTreeViewId/index.js

@@ -0,0 +1 @@
+export { useTreeViewId } from './useTreeViewId';

package/legacy/internals/plugins/useTreeViewId/useTreeViewId.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import useId from '@mui/utils/useId';
+import { populateInstance } from '../../useTreeView/useTreeView.utils';
+export var useTreeViewId = function useTreeViewId(_ref) {
+  var instance = _ref.instance,
+    params = _ref.params;
+  var treeId = useId(params.id);
+  var getTreeItemId = React.useCallback(function (nodeId, idAttribute) {
+    return idAttribute != null ? idAttribute : "".concat(treeId, "-").concat(nodeId);
+  }, [treeId]);
+  populateInstance(instance, {
+    getTreeItemId: getTreeItemId
+  });
+  return {
+    getRootProps: function getRootProps() {
+      return {
+        id: treeId
+      };
+    }
+  };
+};
+useTreeViewId.params = {
+  id: true
+};

package/legacy/internals/plugins/useTreeViewId/useTreeViewId.types.js

@@ -0,0 +1 @@
+export {};

package/legacy/internals/plugins/useTreeViewJSXNodes/index.js

@@ -0,0 +1 @@
+export { useTreeViewJSXNodes } from './useTreeViewJSXNodes';

package/legacy/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.js

@@ -0,0 +1,121 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
+import useForkRef from '@mui/utils/useForkRef';
+import { populateInstance } from '../../useTreeView/useTreeView.utils';
+import { publishTreeViewEvent } from '../../utils/publishTreeViewEvent';
+import { useTreeViewContext } from '../../TreeViewProvider/useTreeViewContext';
+import { DescendantProvider, useDescendant } from '../../TreeViewProvider/DescendantProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var useTreeViewJSXNodes = function useTreeViewJSXNodes(_ref) {
+  var instance = _ref.instance,
+    setState = _ref.setState;
+  var insertJSXNode = useEventCallback(function (node) {
+    setState(function (prevState) {
+      return _extends({}, prevState, {
+        nodeMap: _extends({}, prevState.nodeMap, _defineProperty({}, node.id, node))
+      });
+    });
+  });
+  var removeJSXNode = useEventCallback(function (nodeId) {
+    setState(function (prevState) {
+      var newMap = _extends({}, prevState.nodeMap);
+      delete newMap[nodeId];
+      return _extends({}, prevState, {
+        nodeMap: newMap
+      });
+    });
+    publishTreeViewEvent(instance, 'removeNode', {
+      id: nodeId
+    });
+  });
+  var mapFirstCharFromJSX = useEventCallback(function (nodeId, firstChar) {
+    instance.updateFirstCharMap(function (firstCharMap) {
+      firstCharMap[nodeId] = firstChar;
+      return firstCharMap;
+    });
+    return function () {
+      instance.updateFirstCharMap(function (firstCharMap) {
+        var newMap = _extends({}, firstCharMap);
+        delete newMap[nodeId];
+        return newMap;
+      });
+    };
+  });
+  populateInstance(instance, {
+    insertJSXNode: insertJSXNode,
+    removeJSXNode: removeJSXNode,
+    mapFirstCharFromJSX: mapFirstCharFromJSX
+  });
+};
+var useTreeViewJSXNodesItemPlugin = function useTreeViewJSXNodesItemPlugin(_ref2) {
+  var props = _ref2.props,
+    ref = _ref2.ref;
+  var children = props.children,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    label = props.label,
+    nodeId = props.nodeId,
+    id = props.id,
+    inContentProps = props.ContentProps;
+  var _useTreeViewContext = useTreeViewContext(),
+    instance = _useTreeViewContext.instance;
+  var expandable = Boolean(Array.isArray(children) ? children.length : children);
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    treeItemElement = _React$useState2[0],
+    setTreeItemElement = _React$useState2[1];
+  var contentRef = React.useRef(null);
+  var handleRef = useForkRef(setTreeItemElement, ref);
+  var descendant = React.useMemo(function () {
+    return {
+      element: treeItemElement,
+      id: nodeId
+    };
+  }, [nodeId, treeItemElement]);
+  var _useDescendant = useDescendant(descendant),
+    index = _useDescendant.index,
+    parentId = _useDescendant.parentId;
+  React.useEffect(function () {
+    // On the first render a node's index will be -1. We want to wait for the real index.
+    if (instance && index !== -1) {
+      instance.insertJSXNode({
+        id: nodeId,
+        idAttribute: id,
+        index: index,
+        parentId: parentId,
+        expandable: expandable,
+        disabled: disabled
+      });
+      return function () {
+        return instance.removeJSXNode(nodeId);
+      };
+    }
+    return undefined;
+  }, [instance, parentId, index, nodeId, expandable, disabled, id]);
+  React.useEffect(function () {
+    if (instance && label) {
+      var _contentRef$current$t, _contentRef$current;
+      return instance.mapFirstCharFromJSX(nodeId, ((_contentRef$current$t = (_contentRef$current = contentRef.current) == null ? void 0 : _contentRef$current.textContent) != null ? _contentRef$current$t : '').substring(0, 1).toLowerCase());
+    }
+    return undefined;
+  }, [instance, nodeId, label]);
+  return {
+    props: _extends({}, props, {
+      ContentProps: _extends({}, inContentProps, {
+        ref: contentRef
+      })
+    }),
+    ref: handleRef,
+    wrapItem: function wrapItem(item) {
+      return /*#__PURE__*/_jsx(DescendantProvider, {
+        id: nodeId,
+        children: item
+      });
+    }
+  };
+};
+useTreeViewJSXNodes.itemPlugin = useTreeViewJSXNodesItemPlugin;
+useTreeViewJSXNodes.params = {};

package/legacy/internals/plugins/useTreeViewJSXNodes/useTreeViewJSXNodes.types.js

@@ -0,0 +1 @@
+export {};