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

package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findOrderInTremauxTree = void 0;
+/**
+ * This is used to determine the start and end of a selection range so
+ * we can get the nodes between the two border nodes.
+ *
+ * It finds the nodes' common ancestor using
+ * a naive implementation of a lowest common ancestor algorithm
+ * (https://en.wikipedia.org/wiki/Lowest_common_ancestor).
+ * Then compares the ancestor's 2 children that are ancestors of nodeA and NodeB
+ * so we can compare their indexes to work out which node comes first in a depth first search.
+ * (https://en.wikipedia.org/wiki/Depth-first_search)
+ *
+ * Another way to put it is which node is shallower in a trémaux tree
+ * https://en.wikipedia.org/wiki/Tr%C3%A9maux_tree
+ */
+const findOrderInTremauxTree = (instance, nodeAId, nodeBId) => {
+  if (nodeAId === nodeBId) {
+    return [nodeAId, nodeBId];
+  }
+  const nodeA = instance.getNode(nodeAId);
+  const nodeB = instance.getNode(nodeBId);
+  if (nodeA.parentId === nodeB.id || nodeB.parentId === nodeA.id) {
+    return nodeB.parentId === nodeA.id ? [nodeA.id, nodeB.id] : [nodeB.id, nodeA.id];
+  }
+  const aFamily = [nodeA.id];
+  const bFamily = [nodeB.id];
+  let aAncestor = nodeA.parentId;
+  let bAncestor = nodeB.parentId;
+  let aAncestorIsCommon = bFamily.indexOf(aAncestor) !== -1;
+  let bAncestorIsCommon = aFamily.indexOf(bAncestor) !== -1;
+  let continueA = true;
+  let continueB = true;
+  while (!bAncestorIsCommon && !aAncestorIsCommon) {
+    if (continueA) {
+      aFamily.push(aAncestor);
+      aAncestorIsCommon = bFamily.indexOf(aAncestor) !== -1;
+      continueA = aAncestor !== null;
+      if (!aAncestorIsCommon && continueA) {
+        aAncestor = instance.getNode(aAncestor).parentId;
+      }
+    }
+    if (continueB && !aAncestorIsCommon) {
+      bFamily.push(bAncestor);
+      bAncestorIsCommon = aFamily.indexOf(bAncestor) !== -1;
+      continueB = bAncestor !== null;
+      if (!bAncestorIsCommon && continueB) {
+        bAncestor = instance.getNode(bAncestor).parentId;
+      }
+    }
+  }
+  const commonAncestor = aAncestorIsCommon ? aAncestor : bAncestor;
+  const ancestorFamily = instance.getChildrenIds(commonAncestor);
+  const aSide = aFamily[aFamily.indexOf(commonAncestor) - 1];
+  const bSide = bFamily[bFamily.indexOf(commonAncestor) - 1];
+  return ancestorFamily.indexOf(aSide) < ancestorFamily.indexOf(bSide) ? [nodeAId, nodeBId] : [nodeBId, nodeAId];
+};
+exports.findOrderInTremauxTree = findOrderInTremauxTree;

package/node/internals/useTreeView/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useTreeView", {
+  enumerable: true,
+  get: function () {
+    return _useTreeView.useTreeView;
+  }
+});
+var _useTreeView = require("./useTreeView");

package/node/internals/useTreeView/useTreeView.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeView = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _TreeViewContext = require("../TreeViewProvider/TreeViewContext");
+var _useTreeViewModels = require("./useTreeViewModels");
+var _corePlugins = require("../corePlugins");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const useTreeView = inParams => {
+  const plugins = [..._corePlugins.TREE_VIEW_CORE_PLUGINS, ...inParams.plugins];
+  const params = plugins.reduce((acc, plugin) => {
+    if (plugin.getDefaultizedParams) {
+      return plugin.getDefaultizedParams(acc);
+    }
+    return acc;
+  }, inParams);
+  const models = (0, _useTreeViewModels.useTreeViewModels)(plugins, params);
+  const instanceRef = React.useRef({});
+  const instance = instanceRef.current;
+  const innerRootRef = React.useRef(null);
+  const handleRootRef = (0, _useForkRef.default)(innerRootRef, inParams.rootRef);
+  const [state, setState] = React.useState(() => {
+    const temp = {};
+    plugins.forEach(plugin => {
+      if (plugin.getInitialState) {
+        Object.assign(temp, plugin.getInitialState(params));
+      }
+    });
+    return temp;
+  });
+  const rootPropsGetters = [];
+  let contextValue = _TreeViewContext.DEFAULT_TREE_VIEW_CONTEXT_VALUE;
+  const runPlugin = plugin => {
+    const pluginResponse = plugin({
+      instance,
+      params,
+      state,
+      setState,
+      rootRef: innerRootRef,
+      models
+    }) || {};
+    if (pluginResponse.getRootProps) {
+      rootPropsGetters.push(pluginResponse.getRootProps);
+    }
+    if (pluginResponse.contextValue) {
+      contextValue = pluginResponse.contextValue;
+    }
+  };
+  plugins.forEach(runPlugin);
+  const getRootProps = (otherHandlers = {}) => {
+    const rootProps = (0, _extends2.default)({
+      role: 'tree',
+      tabIndex: 0
+    }, otherHandlers, {
+      ref: handleRootRef
+    });
+    rootPropsGetters.forEach(rootPropsGetter => {
+      Object.assign(rootProps, rootPropsGetter(otherHandlers));
+    });
+    return rootProps;
+  };
+  return {
+    getRootProps,
+    rootRef: handleRootRef,
+    contextValue
+  };
+};
+exports.useTreeView = useTreeView;

package/node/internals/useTreeView/useTreeView.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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);
+  const nodeIndex = siblings.indexOf(nodeId);
+  if (nodeIndex === 0) {
+    return node.parentId;
+  }
+  let currentNode = siblings[nodeIndex - 1];
+  while (instance.isNodeExpanded(currentNode) && instance.getNavigableChildrenIds(currentNode).length > 0) {
+    currentNode = instance.getNavigableChildrenIds(currentNode).pop();
+  }
+  return currentNode;
+};
+exports.getPreviousNode = getPreviousNode;
+const getNextNode = (instance, nodeId) => {
+  // If expanded get first child
+  if (instance.isNodeExpanded(nodeId) && instance.getNavigableChildrenIds(nodeId).length > 0) {
+    return instance.getNavigableChildrenIds(nodeId)[0];
+  }
+  let node = instance.getNode(nodeId);
+  while (node != null) {
+    // Try to get next sibling
+    const siblings = instance.getNavigableChildrenIds(node.parentId);
+    const nextSibling = siblings[siblings.indexOf(node.id) + 1];
+    if (nextSibling) {
+      return nextSibling;
+    }
+
+    // If the sibling does not exist, go up a level to the parent and try again.
+    node = instance.getNode(node.parentId);
+  }
+  return null;
+};
+exports.getNextNode = getNextNode;
+const getLastNode = instance => {
+  let lastNode = instance.getNavigableChildrenIds(null).pop();
+  while (instance.isNodeExpanded(lastNode)) {
+    lastNode = instance.getNavigableChildrenIds(lastNode).pop();
+  }
+  return lastNode;
+};
+exports.getLastNode = getLastNode;
+const getFirstNode = instance => instance.getNavigableChildrenIds(null)[0];
+exports.getFirstNode = getFirstNode;
+const populateInstance = (instance, methods) => {
+  Object.assign(instance, methods);
+};
+exports.populateInstance = populateInstance;

package/node/internals/useTreeView/useTreeViewModels.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeViewModels = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/**
+ * 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.
+ */
+const useTreeViewModels = (plugins, props) => {
+  const modelsRef = React.useRef({});
+  const [modelsState, setModelsState] = React.useState(() => {
+    const initialState = {};
+    plugins.forEach(plugin => {
+      if (plugin.models) {
+        Object.entries(plugin.models).forEach(([modelName, model]) => {
+          modelsRef.current[modelName] = {
+            controlledProp: model.controlledProp,
+            defaultProp: model.defaultProp,
+            isControlled: props[model.controlledProp] !== undefined
+          };
+          initialState[modelName] = props[model.defaultProp];
+        });
+      }
+    });
+    return initialState;
+  });
+  const models = Object.fromEntries(Object.entries(modelsRef.current).map(([modelName, model]) => {
+    const value = model.isControlled ? props[model.controlledProp] : modelsState[modelName];
+    return [modelName, {
+      value,
+      setValue: newValue => {
+        if (!model.isControlled) {
+          setModelsState(prevState => (0, _extends2.default)({}, prevState, {
+            [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(([modelName, model]) => {
+      const controlled = props[model.controlledProp];
+      const defaultProp = props[model.defaultProp];
+      React.useEffect(() => {
+        if (model.isControlled !== (controlled !== undefined)) {
+          console.error([`MUI: A component is changing the ${model.isControlled ? '' : 'un'}controlled ${modelName} state of TreeView to be ${model.isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled ${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]);
+      const {
+        current: defaultValue
+      } = React.useRef(defaultProp);
+      React.useEffect(() => {
+        if (!model.isControlled && defaultValue !== defaultProp) {
+          console.error([`MUI: A component is changing the default ${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;
+};
+exports.useTreeViewModels = useTreeViewModels;

package/node/internals/utils/EventManager.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EventManager = void 0;
+// 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.
+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);
+    });
+  }
+}
+exports.EventManager = EventManager;

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FinalizationRegistryBasedCleanupTracking = void 0;
+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() {}
+}
+exports.FinalizationRegistryBasedCleanupTracking = FinalizationRegistryBasedCleanupTracking;

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

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TimerBasedCleanupTracking = void 0;
+// 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;
+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;
+    }
+  }
+}
+exports.TimerBasedCleanupTracking = TimerBasedCleanupTracking;

package/node/internals/utils/publishTreeViewEvent.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.publishTreeViewEvent = void 0;
+const publishTreeViewEvent = (instance, eventName, params) => {
+  instance.$$publishEvent(eventName, params);
+};
+exports.publishTreeViewEvent = publishTreeViewEvent;

package/package.json

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

package/themeAugmentation/props.d.ts

@@ -3,7 +3,7 @@ import { TreeViewProps } from '../TreeView';
 
 export interface PickersComponentsPropsList {
   MuiTreeItem: TreeItemProps;
-  MuiTreeView: TreeViewProps;
+  MuiTreeView: TreeViewProps<any>;
 }
 
 declare module '@mui/material/styles' {

package/TreeView/TreeViewContext.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { TreeViewContextValue } from './TreeView.types';
-/**
- * @ignore - internal component.
- */
-export declare const TreeViewContext: React.Context<TreeViewContextValue>;

package/internals/models.d.ts

@@ -1 +0,0 @@
-export type DefaultizedProps<P extends {}, RequiredProps extends keyof P, AdditionalProps extends {} = {}> = Omit<P, RequiredProps | keyof AdditionalProps> & Required<Pick<P, RequiredProps>> & AdditionalProps;

package/legacy/TreeView/TreeViewContext.js

@@ -1,41 +0,0 @@
-import * as React from 'react';
-/**
- * @ignore - internal component.
- */
-export var TreeViewContext = /*#__PURE__*/React.createContext({
-  registerNode: function registerNode() {},
-  unregisterNode: function unregisterNode() {},
-  isFocused: function isFocused() {
-    return false;
-  },
-  isSelected: function isSelected() {
-    return false;
-  },
-  isExpanded: function isExpanded() {
-    return false;
-  },
-  isExpandable: function isExpandable() {
-    return false;
-  },
-  isDisabled: function isDisabled() {
-    return false;
-  },
-  mapFirstChar: function mapFirstChar() {},
-  unMapFirstChar: function unMapFirstChar() {},
-  focus: function focus() {},
-  toggleExpansion: function toggleExpansion() {},
-  selectNode: function selectNode() {},
-  selectRange: function selectRange() {},
-  multiSelect: false,
-  disabledItemsFocusable: false,
-  treeId: undefined,
-  icons: {
-    defaultCollapseIcon: null,
-    defaultExpandIcon: null,
-    defaultParentIcon: null,
-    defaultEndIcon: null
-  }
-});
-if (process.env.NODE_ENV !== 'production') {
-  TreeViewContext.displayName = 'TreeViewContext';
-}