@mui/x-tree-view 6.0.0-alpha.2 → 6.0.0-alpha.4

package/legacy/internals/useTreeView/useTreeViewModels.js

@@ -0,0 +1,76 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+/**
+ * Implements the same behavior as `useControlled` but for several models.
+ * The controlled models are never stored in the state and the state is only updated if the model is not controlled.
+ */
+export var useTreeViewModels = function useTreeViewModels(plugins, props) {
+  var modelsRef = React.useRef({});
+  var _React$useState = React.useState(function () {
+      var initialState = {};
+      plugins.forEach(function (plugin) {
+        if (plugin.models) {
+          Object.entries(plugin.models).forEach(function (_ref) {
+            var _ref2 = _slicedToArray(_ref, 2),
+              modelName = _ref2[0],
+              model = _ref2[1];
+            modelsRef.current[modelName] = {
+              controlledProp: model.controlledProp,
+              defaultProp: model.defaultProp,
+              isControlled: props[model.controlledProp] !== undefined
+            };
+            initialState[modelName] = props[model.defaultProp];
+          });
+        }
+      });
+      return initialState;
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    modelsState = _React$useState2[0],
+    setModelsState = _React$useState2[1];
+  var models = Object.fromEntries(Object.entries(modelsRef.current).map(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      modelName = _ref4[0],
+      model = _ref4[1];
+    var value = model.isControlled ? props[model.controlledProp] : modelsState[modelName];
+    return [modelName, {
+      value: value,
+      setValue: function setValue(newValue) {
+        if (!model.isControlled) {
+          setModelsState(function (prevState) {
+            return _extends({}, prevState, _defineProperty({}, modelName, newValue));
+          });
+        }
+      }
+    }];
+  }));
+
+  // We know that `modelsRef` do not vary across renders.
+  /* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
+  if (process.env.NODE_ENV !== 'production') {
+    Object.entries(modelsRef.current).forEach(function (_ref5) {
+      var _ref6 = _slicedToArray(_ref5, 2),
+        modelName = _ref6[0],
+        model = _ref6[1];
+      var controlled = props[model.controlledProp];
+      var defaultProp = props[model.defaultProp];
+      React.useEffect(function () {
+        if (model.isControlled !== (controlled !== undefined)) {
+          console.error(["MUI: A component is changing the ".concat(model.isControlled ? '' : 'un', "controlled ").concat(modelName, " state of TreeView to be ").concat(model.isControlled ? 'un' : '', "controlled."), 'Elements should not switch from uncontrolled to controlled (or vice versa).', "Decide between using a controlled or uncontrolled ".concat(modelName, " ") + 'element for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
+        }
+      }, [controlled]);
+      var _React$useRef = React.useRef(defaultProp),
+        defaultValue = _React$useRef.current;
+      React.useEffect(function () {
+        if (!model.isControlled && defaultValue !== defaultProp) {
+          console.error(["MUI: A component is changing the default ".concat(modelName, " state of an uncontrolled TreeView after being initialized. ") + "To suppress this warning opt to use a controlled TreeView."].join('\n'));
+        }
+      }, [JSON.stringify(defaultValue)]);
+    });
+  }
+  /* eslint-enable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
+
+  return models;
+};

package/legacy/internals/utils/EventManager.js

@@ -0,0 +1,91 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+// Used https://gist.github.com/mudge/5830382 as a starting point.
+// See https://github.com/browserify/events/blob/master/events.js for
+// the Node.js (https://nodejs.org/api/events.html) polyfill used by webpack.
+export var EventManager = /*#__PURE__*/function () {
+  function EventManager() {
+    _classCallCheck(this, EventManager);
+    this.maxListeners = 20;
+    this.warnOnce = false;
+    this.events = {};
+  }
+  _createClass(EventManager, [{
+    key: "on",
+    value: function on(eventName, listener) {
+      var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      var collection = this.events[eventName];
+      if (!collection) {
+        collection = {
+          highPriority: new Map(),
+          regular: new Map()
+        };
+        this.events[eventName] = collection;
+      }
+      if (options.isFirst) {
+        collection.highPriority.set(listener, true);
+      } else {
+        collection.regular.set(listener, true);
+      }
+      if (process.env.NODE_ENV !== 'production') {
+        var collectionSize = collection.highPriority.size + collection.regular.size;
+        if (collectionSize > this.maxListeners && !this.warnOnce) {
+          this.warnOnce = true;
+          console.warn(["Possible EventEmitter memory leak detected. ".concat(collectionSize, " ").concat(eventName, " listeners added.")].join('\n'));
+        }
+      }
+    }
+  }, {
+    key: "removeListener",
+    value: function removeListener(eventName, listener) {
+      if (this.events[eventName]) {
+        this.events[eventName].regular.delete(listener);
+        this.events[eventName].highPriority.delete(listener);
+      }
+    }
+  }, {
+    key: "removeAllListeners",
+    value: function removeAllListeners() {
+      this.events = {};
+    }
+  }, {
+    key: "emit",
+    value: function emit(eventName) {
+      var collection = this.events[eventName];
+      if (!collection) {
+        return;
+      }
+      var highPriorityListeners = Array.from(collection.highPriority.keys());
+      var regularListeners = Array.from(collection.regular.keys());
+      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        args[_key - 1] = arguments[_key];
+      }
+      for (var i = highPriorityListeners.length - 1; i >= 0; i -= 1) {
+        var listener = highPriorityListeners[i];
+        if (collection.highPriority.has(listener)) {
+          listener.apply(this, args);
+        }
+      }
+      for (var _i = 0; _i < regularListeners.length; _i += 1) {
+        var _listener = regularListeners[_i];
+        if (collection.regular.has(_listener)) {
+          _listener.apply(this, args);
+        }
+      }
+    }
+  }, {
+    key: "once",
+    value: function once(eventName, listener) {
+      // eslint-disable-next-line consistent-this
+      var that = this;
+      this.on(eventName, function oneTimeListener() {
+        that.removeListener(eventName, oneTimeListener);
+        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+          args[_key2] = arguments[_key2];
+        }
+        listener.apply(that, args);
+      });
+    }
+  }]);
+  return EventManager;
+}();

package/legacy/internals/utils/cleanupTracking/CleanupTracking.js

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

package/legacy/internals/utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking.js

@@ -0,0 +1,29 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+export var FinalizationRegistryBasedCleanupTracking = /*#__PURE__*/function () {
+  function FinalizationRegistryBasedCleanupTracking() {
+    _classCallCheck(this, FinalizationRegistryBasedCleanupTracking);
+    this.registry = new FinalizationRegistry(function (unsubscribe) {
+      if (typeof unsubscribe === 'function') {
+        unsubscribe();
+      }
+    });
+  }
+  _createClass(FinalizationRegistryBasedCleanupTracking, [{
+    key: "register",
+    value: function register(object, unsubscribe, unregisterToken) {
+      this.registry.register(object, unsubscribe, unregisterToken);
+    }
+  }, {
+    key: "unregister",
+    value: function unregister(unregisterToken) {
+      this.registry.unregister(unregisterToken);
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+  }, {
+    key: "reset",
+    value: function reset() {}
+  }]);
+  return FinalizationRegistryBasedCleanupTracking;
+}();

package/legacy/internals/utils/cleanupTracking/TimerBasedCleanupTracking.js

@@ -0,0 +1,52 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+// If no effect ran after this amount of time, we assume that the render was not committed by React
+var CLEANUP_TIMER_LOOP_MILLIS = 1000;
+export var TimerBasedCleanupTracking = /*#__PURE__*/function () {
+  function TimerBasedCleanupTracking() {
+    var timeout = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : CLEANUP_TIMER_LOOP_MILLIS;
+    _classCallCheck(this, TimerBasedCleanupTracking);
+    this.timeouts = new Map();
+    this.cleanupTimeout = CLEANUP_TIMER_LOOP_MILLIS;
+    this.cleanupTimeout = timeout;
+  }
+  _createClass(TimerBasedCleanupTracking, [{
+    key: "register",
+    value: function register(object, unsubscribe, unregisterToken) {
+      var _this = this;
+      if (!this.timeouts) {
+        this.timeouts = new Map();
+      }
+      var timeout = setTimeout(function () {
+        if (typeof unsubscribe === 'function') {
+          unsubscribe();
+        }
+        _this.timeouts.delete(unregisterToken.cleanupToken);
+      }, this.cleanupTimeout);
+      this.timeouts.set(unregisterToken.cleanupToken, timeout);
+    }
+  }, {
+    key: "unregister",
+    value: function unregister(unregisterToken) {
+      var timeout = this.timeouts.get(unregisterToken.cleanupToken);
+      if (timeout) {
+        this.timeouts.delete(unregisterToken.cleanupToken);
+        clearTimeout(timeout);
+      }
+    }
+  }, {
+    key: "reset",
+    value: function reset() {
+      var _this2 = this;
+      if (this.timeouts) {
+        this.timeouts.forEach(function (value, key) {
+          _this2.unregister({
+            cleanupToken: key
+          });
+        });
+        this.timeouts = undefined;
+      }
+    }
+  }]);
+  return TimerBasedCleanupTracking;
+}();

package/legacy/internals/utils/publishTreeViewEvent.js

@@ -0,0 +1,3 @@
+export var publishTreeViewEvent = function publishTreeViewEvent(instance, eventName, params) {
+  instance.$$publishEvent(eventName, params);
+};

package/modern/TreeItem/TreeItem.js

@@ -11,10 +11,10 @@ import useForkRef from '@mui/utils/useForkRef';
 import unsupportedProp from '@mui/utils/unsupportedProp';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { TreeViewContext } from '../TreeView/TreeViewContext';
-import { DescendantProvider, useDescendant } from '../TreeView/descendants';
+import { DescendantProvider, useDescendant } from '../internals/TreeViewProvider/DescendantProvider';
 import { TreeItemContent } from './TreeItemContent';
 import { treeItemClasses, getTreeItemUtilityClass } from './treeItemClasses';
+import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -59,6 +59,8 @@ const StyledTreeItemContent = styled(TreeItemContent, {
 }) => ({
   padding: '0 8px',
   width: '100%',
+  boxSizing: 'border-box',
+  // prevent width + padding to overflow
   display: 'flex',
   alignItems: 'center',
   cursor: 'pointer',
@@ -101,10 +103,12 @@ const StyledTreeItemContent = styled(TreeItemContent, {
     }
   },
   [`& .${treeItemClasses.label}`]: _extends({
+    paddingLeft: 4,
     width: '100%',
+    boxSizing: 'border-box',
+    // prevent width + padding to overflow
     // fixes overflow - see https://github.com/mui/material-ui/issues/27372
     minWidth: 0,
-    paddingLeft: 4,
     position: 'relative'
   }, theme.typography.body1)
 }));
@@ -122,11 +126,11 @@ const TreeItemGroup = styled(Collapse, {
  *
  * Demos:
  *
- * - [Tree View](https://mui.com/material-ui/react-tree-view/)
+ * - [Tree View](https://mui.com/x/react-tree-view/)
  *
  * API:
  *
- * - [TreeItem API](https://mui.com/material-ui/api/tree-item/)
+ * - [TreeItem API](https://mui.com/x/api/tree-view/tree-item/)
  */
 export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, ref) {
   const props = useThemeProps({
@@ -154,19 +158,11 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
     icons: contextIcons,
-    focus,
-    isExpanded,
-    isFocused,
-    isSelected,
-    isDisabled,
     multiSelect,
     disabledItemsFocusable,
-    mapFirstChar,
-    unMapFirstChar,
-    registerNode,
-    unregisterNode,
-    treeId
-  } = React.useContext(TreeViewContext);
+    treeId,
+    instance
+  } = useTreeViewContext();
   let id;
   if (idProp != null) {
     id = idProp;
@@ -185,10 +181,10 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     parentId
   } = useDescendant(descendant);
   const expandable = Boolean(Array.isArray(children) ? children.length : children);
-  const expanded = isExpanded ? isExpanded(nodeId) : false;
-  const focused = isFocused ? isFocused(nodeId) : false;
-  const selected = isSelected ? isSelected(nodeId) : false;
-  const disabled = isDisabled ? isDisabled(nodeId) : false;
+  const expanded = instance ? instance.isNodeExpanded(nodeId) : false;
+  const focused = instance ? instance.isNodeFocused(nodeId) : false;
+  const selected = instance ? instance.isNodeSelected(nodeId) : false;
+  const disabled = instance ? instance.isNodeDisabled(nodeId) : false;
   const ownerState = _extends({}, props, {
     expanded,
     focused,
@@ -212,8 +208,8 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
   }
   React.useEffect(() => {
     // On the first render a node's index will be -1. We want to wait for the real index.
-    if (registerNode && unregisterNode && index !== -1) {
-      registerNode({
+    if (instance && index !== -1) {
+      instance.updateNode({
         id: nodeId,
         idAttribute: id,
         index,
@@ -221,21 +217,16 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
         expandable,
         disabled: disabledProp
       });
-      return () => {
-        unregisterNode(nodeId);
-      };
+      return () => instance.removeNode(nodeId);
     }
     return undefined;
-  }, [registerNode, unregisterNode, parentId, index, nodeId, expandable, disabledProp, id]);
+  }, [instance, parentId, index, nodeId, expandable, disabledProp, id]);
   React.useEffect(() => {
-    if (mapFirstChar && unMapFirstChar && label) {
-      mapFirstChar(nodeId, (contentRef.current?.textContent ?? '').substring(0, 1).toLowerCase());
-      return () => {
-        unMapFirstChar(nodeId);
-      };
+    if (instance && label) {
+      return instance.mapFirstChar(nodeId, (contentRef.current?.textContent ?? '').substring(0, 1).toLowerCase());
     }
     return undefined;
-  }, [mapFirstChar, unMapFirstChar, nodeId, label]);
+  }, [instance, nodeId, label]);
   let ariaSelected;
   if (multiSelect) {
     ariaSelected = selected;
@@ -262,8 +253,8 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
       });
     }
     const unfocusable = !disabledItemsFocusable && disabled;
-    if (!focused && event.currentTarget === event.target && !unfocusable) {
-      focus(event, nodeId);
+    if (instance && !focused && event.currentTarget === event.target && !unfocusable) {
+      instance.focusNode(event, nodeId);
     }
   }
   return /*#__PURE__*/_jsxs(TreeItemRoot, _extends({

package/modern/TreeItem/useTreeItem.js

@@ -1,52 +1,43 @@
-import * as React from 'react';
-import { TreeViewContext } from '../TreeView/TreeViewContext';
+import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
 export function useTreeItem(nodeId) {
   const {
-    focus,
-    isExpanded,
-    isExpandable,
-    isFocused,
-    isDisabled,
-    isSelected,
-    multiSelect,
-    selectNode,
-    selectRange,
-    toggleExpansion
-  } = React.useContext(TreeViewContext);
-  const expandable = isExpandable ? isExpandable(nodeId) : false;
-  const expanded = isExpanded ? isExpanded(nodeId) : false;
-  const focused = isFocused ? isFocused(nodeId) : false;
-  const disabled = isDisabled ? isDisabled(nodeId) : false;
-  const selected = isSelected ? isSelected(nodeId) : false;
+    instance,
+    multiSelect
+  } = useTreeViewContext();
+  const expandable = instance ? instance.isNodeExpandable(nodeId) : false;
+  const expanded = instance ? instance.isNodeExpanded(nodeId) : false;
+  const focused = instance ? instance.isNodeFocused(nodeId) : false;
+  const selected = instance ? instance.isNodeSelected(nodeId) : false;
+  const disabled = instance ? instance.isNodeDisabled(nodeId) : false;
   const handleExpansion = event => {
-    if (!disabled) {
+    if (instance && !disabled) {
       if (!focused) {
-        focus(event, nodeId);
+        instance.focusNode(event, nodeId);
       }
       const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
 
       // If already expanded and trying to toggle selection don't close
-      if (expandable && !(multiple && isExpanded(nodeId))) {
-        toggleExpansion(event, nodeId);
+      if (expandable && !(multiple && instance.isNodeExpanded(nodeId))) {
+        instance.toggleNodeExpansion(event, nodeId);
       }
     }
   };
   const handleSelection = event => {
-    if (!disabled) {
+    if (instance && !disabled) {
       if (!focused) {
-        focus(event, nodeId);
+        instance.focusNode(event, nodeId);
       }
       const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
       if (multiple) {
         if (event.shiftKey) {
-          selectRange(event, {
+          instance.selectRange(event, {
             end: nodeId
           });
         } else {
-          selectNode(event, nodeId, true);
+          instance.selectNode(event, nodeId, true);
         }
       } else {
-        selectNode(event, nodeId);
+        instance.selectNode(event, nodeId);
       }
     }
   };