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

package/modern/internals/plugins/useTreeViewNodes/useTreeViewNodes.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
+import { populateInstance } from '../../useTreeView/useTreeView.utils';
+import { publishTreeViewEvent } from '../../utils/publishTreeViewEvent';
+export const useTreeViewNodes = ({
+  instance,
+  params
+}) => {
+  const nodeMap = React.useRef({});
+  const getNode = React.useCallback(nodeId => nodeMap.current[nodeId], []);
+  const insertNode = React.useCallback(node => {
+    nodeMap.current[node.id] = node;
+  }, []);
+  const removeNode = React.useCallback(nodeId => {
+    const newMap = _extends({}, nodeMap.current);
+    delete newMap[nodeId];
+    nodeMap.current = newMap;
+    publishTreeViewEvent(instance, 'removeNode', {
+      id: nodeId
+    });
+  }, [instance]);
+  const isNodeDisabled = React.useCallback(nodeId => {
+    if (nodeId == null) {
+      return false;
+    }
+    let node = instance.getNode(nodeId);
+
+    // This can be called before the node has been added to the node map.
+    if (!node) {
+      return false;
+    }
+    if (node.disabled) {
+      return true;
+    }
+    while (node.parentId != null) {
+      node = instance.getNode(node.parentId);
+      if (node.disabled) {
+        return true;
+      }
+    }
+    return false;
+  }, [instance]);
+  const getChildrenIds = useEventCallback(nodeId => Object.values(nodeMap.current).filter(node => node.parentId === nodeId).sort((a, b) => a.index - b.index).map(child => child.id));
+  const getNavigableChildrenIds = nodeId => {
+    let childrenIds = instance.getChildrenIds(nodeId);
+    if (!params.disabledItemsFocusable) {
+      childrenIds = childrenIds.filter(node => !instance.isNodeDisabled(node));
+    }
+    return childrenIds;
+  };
+  populateInstance(instance, {
+    getNode,
+    updateNode: insertNode,
+    removeNode,
+    getChildrenIds,
+    getNavigableChildrenIds,
+    isNodeDisabled
+  });
+};

package/modern/internals/plugins/useTreeViewNodes/useTreeViewNodes.types.js

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

package/modern/internals/plugins/useTreeViewSelection/index.js

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

package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -0,0 +1,169 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { populateInstance, getNextNode, getFirstNode, getLastNode } from '../../useTreeView/useTreeView.utils';
+import { findOrderInTremauxTree } from './useTreeViewSelection.utils';
+export const useTreeViewSelection = ({
+  instance,
+  params,
+  models
+}) => {
+  const lastSelectedNode = React.useRef(null);
+  const lastSelectionWasRange = React.useRef(false);
+  const currentRangeSelection = React.useRef([]);
+  const isNodeSelected = nodeId => Array.isArray(models.selected.value) ? models.selected.value.indexOf(nodeId) !== -1 : models.selected.value === nodeId;
+  const selectNode = (event, nodeId, multiple = false) => {
+    if (params.disableSelection) {
+      return;
+    }
+    if (multiple) {
+      if (Array.isArray(models.selected.value)) {
+        let newSelected;
+        if (models.selected.value.indexOf(nodeId) !== -1) {
+          newSelected = models.selected.value.filter(id => id !== nodeId);
+        } else {
+          newSelected = [nodeId].concat(models.selected.value);
+        }
+        if (params.onNodeSelect) {
+          params.onNodeSelect(event, newSelected);
+        }
+        models.selected.setValue(newSelected);
+      }
+    } else {
+      const newSelected = params.multiSelect ? [nodeId] : nodeId;
+      if (params.onNodeSelect) {
+        params.onNodeSelect(event, newSelected);
+      }
+      models.selected.setValue(newSelected);
+    }
+    lastSelectedNode.current = nodeId;
+    lastSelectionWasRange.current = false;
+    currentRangeSelection.current = [];
+  };
+  const getNodesInRange = (nodeAId, nodeBId) => {
+    const [first, last] = findOrderInTremauxTree(instance, nodeAId, nodeBId);
+    const nodes = [first];
+    let current = first;
+    while (current !== last) {
+      current = getNextNode(instance, current);
+      nodes.push(current);
+    }
+    return nodes;
+  };
+  const handleRangeArrowSelect = (event, nodes) => {
+    let base = models.selected.value.slice();
+    const {
+      start,
+      next,
+      current
+    } = nodes;
+    if (!next || !current) {
+      return;
+    }
+    if (currentRangeSelection.current.indexOf(current) === -1) {
+      currentRangeSelection.current = [];
+    }
+    if (lastSelectionWasRange.current) {
+      if (currentRangeSelection.current.indexOf(next) !== -1) {
+        base = base.filter(id => id === start || id !== current);
+        currentRangeSelection.current = currentRangeSelection.current.filter(id => id === start || id !== current);
+      } else {
+        base.push(next);
+        currentRangeSelection.current.push(next);
+      }
+    } else {
+      base.push(next);
+      currentRangeSelection.current.push(current, next);
+    }
+    if (params.onNodeSelect) {
+      params.onNodeSelect(event, base);
+    }
+    models.selected.setValue(base);
+  };
+  const handleRangeSelect = (event, nodes) => {
+    let base = models.selected.value.slice();
+    const {
+      start,
+      end
+    } = nodes;
+    // If last selection was a range selection ignore nodes that were selected.
+    if (lastSelectionWasRange.current) {
+      base = base.filter(id => currentRangeSelection.current.indexOf(id) === -1);
+    }
+    let range = getNodesInRange(start, end);
+    range = range.filter(node => !instance.isNodeDisabled(node));
+    currentRangeSelection.current = range;
+    let newSelected = base.concat(range);
+    newSelected = newSelected.filter((id, i) => newSelected.indexOf(id) === i);
+    if (params.onNodeSelect) {
+      params.onNodeSelect(event, newSelected);
+    }
+    models.selected.setValue(newSelected);
+  };
+  const selectRange = (event, nodes, stacked = false) => {
+    if (params.disableSelection) {
+      return;
+    }
+    const {
+      start = lastSelectedNode.current,
+      end,
+      current
+    } = nodes;
+    if (stacked) {
+      handleRangeArrowSelect(event, {
+        start,
+        next: end,
+        current
+      });
+    } else if (start != null && end != null) {
+      handleRangeSelect(event, {
+        start,
+        end
+      });
+    }
+    lastSelectionWasRange.current = true;
+  };
+  const rangeSelectToFirst = (event, nodeId) => {
+    if (!lastSelectedNode.current) {
+      lastSelectedNode.current = nodeId;
+    }
+    const start = lastSelectionWasRange.current ? lastSelectedNode.current : nodeId;
+    instance.selectRange(event, {
+      start,
+      end: getFirstNode(instance)
+    });
+  };
+  const rangeSelectToLast = (event, nodeId) => {
+    if (!lastSelectedNode.current) {
+      lastSelectedNode.current = nodeId;
+    }
+    const start = lastSelectionWasRange.current ? lastSelectedNode.current : nodeId;
+    instance.selectRange(event, {
+      start,
+      end: getLastNode(instance)
+    });
+  };
+  populateInstance(instance, {
+    isNodeSelected,
+    selectNode,
+    selectRange,
+    rangeSelectToLast,
+    rangeSelectToFirst
+  });
+  return {
+    getRootProps: () => ({
+      'aria-multiselectable': params.multiSelect
+    })
+  };
+};
+useTreeViewSelection.models = {
+  selected: {
+    controlledProp: 'selected',
+    defaultProp: 'defaultSelected'
+  }
+};
+const DEFAULT_SELECTED = [];
+useTreeViewSelection.getDefaultizedParams = params => _extends({}, params, {
+  disableSelection: params.disableSelection ?? false,
+  multiSelect: params.multiSelect ?? false,
+  defaultSelected: params.defaultSelected ?? (params.multiSelect ? DEFAULT_SELECTED : null)
+});

package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.js

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

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

@@ -0,0 +1,55 @@
+/**
+ * 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
+ */
+export 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];
+};

package/modern/internals/useTreeView/index.js

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

package/modern/internals/useTreeView/useTreeView.js

@@ -0,0 +1,65 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useForkRef from '@mui/utils/useForkRef';
+import { DEFAULT_TREE_VIEW_CONTEXT_VALUE } from '../TreeViewProvider/TreeViewContext';
+import { useTreeViewModels } from './useTreeViewModels';
+import { TREE_VIEW_CORE_PLUGINS } from '../corePlugins';
+export const useTreeView = inParams => {
+  const plugins = [...TREE_VIEW_CORE_PLUGINS, ...inParams.plugins];
+  const params = plugins.reduce((acc, plugin) => {
+    if (plugin.getDefaultizedParams) {
+      return plugin.getDefaultizedParams(acc);
+    }
+    return acc;
+  }, inParams);
+  const models = useTreeViewModels(plugins, params);
+  const instanceRef = React.useRef({});
+  const instance = instanceRef.current;
+  const innerRootRef = React.useRef(null);
+  const handleRootRef = useForkRef(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 = 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 = _extends({
+      role: 'tree',
+      tabIndex: 0
+    }, otherHandlers, {
+      ref: handleRootRef
+    });
+    rootPropsGetters.forEach(rootPropsGetter => {
+      Object.assign(rootProps, rootPropsGetter(otherHandlers));
+    });
+    return rootProps;
+  };
+  return {
+    getRootProps,
+    rootRef: handleRootRef,
+    contextValue
+  };
+};

package/modern/internals/useTreeView/useTreeView.types.js

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

package/modern/internals/useTreeView/useTreeView.utils.js

@@ -0,0 +1,43 @@
+export 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;
+};
+export 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;
+};
+export const getLastNode = instance => {
+  let lastNode = instance.getNavigableChildrenIds(null).pop();
+  while (instance.isNodeExpanded(lastNode)) {
+    lastNode = instance.getNavigableChildrenIds(lastNode).pop();
+  }
+  return lastNode;
+};
+export const getFirstNode = instance => instance.getNavigableChildrenIds(null)[0];
+export const populateInstance = (instance, methods) => {
+  Object.assign(instance, methods);
+};

package/modern/internals/useTreeView/useTreeViewModels.js

@@ -0,0 +1,63 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+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 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 => _extends({}, 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;
+};

package/modern/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/modern/internals/utils/cleanupTracking/CleanupTracking.js

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

package/modern/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/modern/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/modern/internals/utils/publishTreeViewEvent.js

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