@mui/x-tree-view 6.0.0-alpha.3 → 6.0.0-beta.0

package/internals/utils/EventManager.js

@@ -0,0 +1,69 @@
+// 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 class EventManager {
+  constructor() {
+    this.maxListeners = 20;
+    this.warnOnce = false;
+    this.events = {};
+  }
+  on(eventName, listener, options = {}) {
+    let 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') {
+      const collectionSize = collection.highPriority.size + collection.regular.size;
+      if (collectionSize > this.maxListeners && !this.warnOnce) {
+        this.warnOnce = true;
+        console.warn([`Possible EventEmitter memory leak detected. ${collectionSize} ${eventName} listeners added.`].join('\n'));
+      }
+    }
+  }
+  removeListener(eventName, listener) {
+    if (this.events[eventName]) {
+      this.events[eventName].regular.delete(listener);
+      this.events[eventName].highPriority.delete(listener);
+    }
+  }
+  removeAllListeners() {
+    this.events = {};
+  }
+  emit(eventName, ...args) {
+    const collection = this.events[eventName];
+    if (!collection) {
+      return;
+    }
+    const highPriorityListeners = Array.from(collection.highPriority.keys());
+    const regularListeners = Array.from(collection.regular.keys());
+    for (let i = highPriorityListeners.length - 1; i >= 0; i -= 1) {
+      const listener = highPriorityListeners[i];
+      if (collection.highPriority.has(listener)) {
+        listener.apply(this, args);
+      }
+    }
+    for (let i = 0; i < regularListeners.length; i += 1) {
+      const listener = regularListeners[i];
+      if (collection.regular.has(listener)) {
+        listener.apply(this, args);
+      }
+    }
+  }
+  once(eventName, listener) {
+    // eslint-disable-next-line consistent-this
+    const that = this;
+    this.on(eventName, function oneTimeListener(...args) {
+      that.removeListener(eventName, oneTimeListener);
+      listener.apply(that, args);
+    });
+  }
+}

package/internals/utils/cleanupTracking/CleanupTracking.d.ts

@@ -0,0 +1,9 @@
+export type UnregisterToken = {
+    cleanupToken: number;
+};
+export type UnsubscribeFn = () => void;
+export interface CleanupTracking {
+    register(object: any, unsubscribe: UnsubscribeFn, unregisterToken: UnregisterToken): void;
+    unregister(unregisterToken: UnregisterToken): void;
+    reset(): void;
+}

package/internals/utils/cleanupTracking/CleanupTracking.js

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

package/internals/utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking.d.ts

@@ -0,0 +1,7 @@
+import { CleanupTracking, UnsubscribeFn, UnregisterToken } from './CleanupTracking';
+export declare class FinalizationRegistryBasedCleanupTracking implements CleanupTracking {
+    registry: FinalizationRegistry<UnsubscribeFn>;
+    register(object: any, unsubscribe: UnsubscribeFn, unregisterToken: UnregisterToken): void;
+    unregister(unregisterToken: UnregisterToken): void;
+    reset(): void;
+}

package/internals/utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking.js

@@ -0,0 +1,18 @@
+export class FinalizationRegistryBasedCleanupTracking {
+  constructor() {
+    this.registry = new FinalizationRegistry(unsubscribe => {
+      if (typeof unsubscribe === 'function') {
+        unsubscribe();
+      }
+    });
+  }
+  register(object, unsubscribe, unregisterToken) {
+    this.registry.register(object, unsubscribe, unregisterToken);
+  }
+  unregister(unregisterToken) {
+    this.registry.unregister(unregisterToken);
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  reset() {}
+}

package/internals/utils/cleanupTracking/TimerBasedCleanupTracking.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="node" />
+import { CleanupTracking, UnregisterToken, UnsubscribeFn } from './CleanupTracking';
+export declare class TimerBasedCleanupTracking implements CleanupTracking {
+    timeouts?: Map<number, NodeJS.Timeout> | undefined;
+    cleanupTimeout: number;
+    constructor(timeout?: number);
+    register(object: any, unsubscribe: UnsubscribeFn, unregisterToken: UnregisterToken): void;
+    unregister(unregisterToken: UnregisterToken): void;
+    reset(): void;
+}

package/internals/utils/cleanupTracking/TimerBasedCleanupTracking.js

@@ -0,0 +1,38 @@
+// If no effect ran after this amount of time, we assume that the render was not committed by React
+const CLEANUP_TIMER_LOOP_MILLIS = 1000;
+export class TimerBasedCleanupTracking {
+  constructor(timeout = CLEANUP_TIMER_LOOP_MILLIS) {
+    this.timeouts = new Map();
+    this.cleanupTimeout = CLEANUP_TIMER_LOOP_MILLIS;
+    this.cleanupTimeout = timeout;
+  }
+  register(object, unsubscribe, unregisterToken) {
+    if (!this.timeouts) {
+      this.timeouts = new Map();
+    }
+    const timeout = setTimeout(() => {
+      if (typeof unsubscribe === 'function') {
+        unsubscribe();
+      }
+      this.timeouts.delete(unregisterToken.cleanupToken);
+    }, this.cleanupTimeout);
+    this.timeouts.set(unregisterToken.cleanupToken, timeout);
+  }
+  unregister(unregisterToken) {
+    const timeout = this.timeouts.get(unregisterToken.cleanupToken);
+    if (timeout) {
+      this.timeouts.delete(unregisterToken.cleanupToken);
+      clearTimeout(timeout);
+    }
+  }
+  reset() {
+    if (this.timeouts) {
+      this.timeouts.forEach((value, key) => {
+        this.unregister({
+          cleanupToken: key
+        });
+      });
+      this.timeouts = undefined;
+    }
+  }
+}

package/internals/utils/publishTreeViewEvent.d.ts

@@ -0,0 +1,5 @@
+import { UseTreeViewInstanceEventsInstance } from '../corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.types';
+import { TreeViewAnyPluginSignature, TreeViewUsedEvents } from '../models';
+export declare const publishTreeViewEvent: <Instance extends UseTreeViewInstanceEventsInstance & {
+    $$signature: TreeViewAnyPluginSignature;
+}, E extends keyof Instance["$$signature"]["events"] | keyof import("../models").MergePluginsProperty<[import("../corePlugins").TreeViewCorePluginsSignature, ...Instance["$$signature"]["dependantPlugins"]], "events">>(instance: Instance, eventName: E, params: TreeViewUsedEvents<Instance["$$signature"]>[E]["params"]) => void;

package/internals/utils/publishTreeViewEvent.js

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

package/legacy/TreeItem/TreeItem.js

@@ -13,10 +13,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";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -152,20 +152,12 @@ export var TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, r
     TransitionComponent = _props$TransitionComp === void 0 ? Collapse : _props$TransitionComp,
     TransitionProps = props.TransitionProps,
     other = _objectWithoutProperties(props, _excluded);
-  var _React$useContext = React.useContext(TreeViewContext),
-    contextIcons = _React$useContext.icons,
-    focus = _React$useContext.focus,
-    isExpanded = _React$useContext.isExpanded,
-    isFocused = _React$useContext.isFocused,
-    isSelected = _React$useContext.isSelected,
-    isDisabled = _React$useContext.isDisabled,
-    multiSelect = _React$useContext.multiSelect,
-    disabledItemsFocusable = _React$useContext.disabledItemsFocusable,
-    mapFirstChar = _React$useContext.mapFirstChar,
-    unMapFirstChar = _React$useContext.unMapFirstChar,
-    registerNode = _React$useContext.registerNode,
-    unregisterNode = _React$useContext.unregisterNode,
-    treeId = _React$useContext.treeId;
+  var _useTreeViewContext = useTreeViewContext(),
+    contextIcons = _useTreeViewContext.icons,
+    multiSelect = _useTreeViewContext.multiSelect,
+    disabledItemsFocusable = _useTreeViewContext.disabledItemsFocusable,
+    treeId = _useTreeViewContext.treeId,
+    instance = _useTreeViewContext.instance;
   var id;
   if (idProp != null) {
     id = idProp;
@@ -188,10 +180,10 @@ export var TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, r
     index = _useDescendant.index,
     parentId = _useDescendant.parentId;
   var expandable = Boolean(Array.isArray(children) ? children.length : children);
-  var expanded = isExpanded ? isExpanded(nodeId) : false;
-  var focused = isFocused ? isFocused(nodeId) : false;
-  var selected = isSelected ? isSelected(nodeId) : false;
-  var disabled = isDisabled ? isDisabled(nodeId) : false;
+  var expanded = instance ? instance.isNodeExpanded(nodeId) : false;
+  var focused = instance ? instance.isNodeFocused(nodeId) : false;
+  var selected = instance ? instance.isNodeSelected(nodeId) : false;
+  var disabled = instance ? instance.isNodeDisabled(nodeId) : false;
   var ownerState = _extends({}, props, {
     expanded: expanded,
     focused: focused,
@@ -215,8 +207,8 @@ export var TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, r
   }
   React.useEffect(function () {
     // 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: index,
@@ -225,21 +217,18 @@ export var TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, r
         disabled: disabledProp
       });
       return function () {
-        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(function () {
-    if (mapFirstChar && unMapFirstChar && label) {
+    if (instance && label) {
       var _contentRef$current$t, _contentRef$current;
-      mapFirstChar(nodeId, ((_contentRef$current$t = (_contentRef$current = contentRef.current) == null ? void 0 : _contentRef$current.textContent) != null ? _contentRef$current$t : '').substring(0, 1).toLowerCase());
-      return function () {
-        unMapFirstChar(nodeId);
-      };
+      return instance.mapFirstChar(nodeId, ((_contentRef$current$t = (_contentRef$current = contentRef.current) == null ? void 0 : _contentRef$current.textContent) != null ? _contentRef$current$t : '').substring(0, 1).toLowerCase());
     }
     return undefined;
-  }, [mapFirstChar, unMapFirstChar, nodeId, label]);
+  }, [instance, nodeId, label]);
   var ariaSelected;
   if (multiSelect) {
     ariaSelected = selected;
@@ -266,8 +255,8 @@ export var TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, r
       });
     }
     var 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/legacy/TreeItem/useTreeItem.js

@@ -1,51 +1,42 @@
-import * as React from 'react';
-import { TreeViewContext } from '../TreeView/TreeViewContext';
+import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
 export function useTreeItem(nodeId) {
-  var _React$useContext = React.useContext(TreeViewContext),
-    focus = _React$useContext.focus,
-    isExpanded = _React$useContext.isExpanded,
-    isExpandable = _React$useContext.isExpandable,
-    isFocused = _React$useContext.isFocused,
-    isDisabled = _React$useContext.isDisabled,
-    isSelected = _React$useContext.isSelected,
-    multiSelect = _React$useContext.multiSelect,
-    selectNode = _React$useContext.selectNode,
-    selectRange = _React$useContext.selectRange,
-    toggleExpansion = _React$useContext.toggleExpansion;
-  var expandable = isExpandable ? isExpandable(nodeId) : false;
-  var expanded = isExpanded ? isExpanded(nodeId) : false;
-  var focused = isFocused ? isFocused(nodeId) : false;
-  var disabled = isDisabled ? isDisabled(nodeId) : false;
-  var selected = isSelected ? isSelected(nodeId) : false;
+  var _useTreeViewContext = useTreeViewContext(),
+    instance = _useTreeViewContext.instance,
+    multiSelect = _useTreeViewContext.multiSelect;
+  var expandable = instance ? instance.isNodeExpandable(nodeId) : false;
+  var expanded = instance ? instance.isNodeExpanded(nodeId) : false;
+  var focused = instance ? instance.isNodeFocused(nodeId) : false;
+  var selected = instance ? instance.isNodeSelected(nodeId) : false;
+  var disabled = instance ? instance.isNodeDisabled(nodeId) : false;
   var handleExpansion = function handleExpansion(event) {
-    if (!disabled) {
+    if (instance && !disabled) {
       if (!focused) {
-        focus(event, nodeId);
+        instance.focusNode(event, nodeId);
       }
       var 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);
       }
     }
   };
   var handleSelection = function handleSelection(event) {
-    if (!disabled) {
+    if (instance && !disabled) {
       if (!focused) {
-        focus(event, nodeId);
+        instance.focusNode(event, nodeId);
       }
       var 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);
       }
     }
   };