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

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

@@ -0,0 +1,120 @@
+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;

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

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

package/legacy/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
 import useEventCallback from '@mui/utils/useEventCallback';
@@ -21,16 +20,28 @@ export var useTreeViewKeyboardNavigation = function useTreeViewKeyboardNavigatio
   var theme = useTheme();
   var isRtl = theme.direction === 'rtl';
   var firstCharMap = React.useRef({});
-  var mapFirstChar = useEventCallback(function (nodeId, firstChar) {
-    firstCharMap.current[nodeId] = firstChar;
-    return function () {
-      var newMap = _extends({}, firstCharMap.current);
-      delete newMap[nodeId];
-      firstCharMap.current = newMap;
-    };
+  var hasFirstCharMapBeenUpdatedImperatively = React.useRef(false);
+  var updateFirstCharMap = useEventCallback(function (callback) {
+    hasFirstCharMapBeenUpdatedImperatively.current = true;
+    firstCharMap.current = callback(firstCharMap.current);
   });
+  React.useEffect(function () {
+    if (hasFirstCharMapBeenUpdatedImperatively.current) {
+      return;
+    }
+    var newFirstCharMap = {};
+    var processItem = function processItem(item) {
+      var _item$children;
+      var getItemId = params.getItemId;
+      var nodeId = getItemId ? getItemId(item) : item.id;
+      newFirstCharMap[nodeId] = instance.getNode(nodeId).label.substring(0, 1).toLowerCase();
+      (_item$children = item.children) == null || _item$children.forEach(processItem);
+    };
+    params.items.forEach(processItem);
+    firstCharMap.current = newFirstCharMap;
+  }, [params.items, params.getItemId, instance]);
   populateInstance(instance, {
-    mapFirstChar: mapFirstChar
+    updateFirstCharMap: updateFirstCharMap
   });
   var handleNextArrow = function handleNextArrow(event) {
     if (state.focusedNodeId != null && instance.isNodeExpandable(state.focusedNodeId)) {

package/legacy/internals/plugins/useTreeViewNodes/useTreeViewNodes.js

@@ -3,24 +3,54 @@ import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { populateInstance } from '../../useTreeView/useTreeView.utils';
 import { publishTreeViewEvent } from '../../utils/publishTreeViewEvent';
-export var useTreeViewNodes = function useTreeViewNodes(_ref) {
-  var instance = _ref.instance,
-    params = _ref.params;
-  var nodeMap = React.useRef({});
+var updateState = function updateState(_ref) {
+  var items = _ref.items,
+    isItemDisabled = _ref.isItemDisabled,
+    getItemLabel = _ref.getItemLabel,
+    getItemId = _ref.getItemId;
+  var nodeMap = {};
+  var processItem = function processItem(item, index, parentId) {
+    var _item$children, _item$children2;
+    var id = getItemId ? getItemId(item) : item.id;
+    if (id == null) {
+      throw new Error(['MUI: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', 'An item was provided without id in the `items` prop:', JSON.stringify(item)].join('\n'));
+    }
+    var label = getItemLabel ? getItemLabel(item) : item.label;
+    if (label == null) {
+      throw new Error(['MUI: The Tree View component requires all items to have a `label` property.', 'Alternatively, you can use the `getItemLabel` prop to specify a custom label for each item.', 'An item was provided without label in the `items` prop:', JSON.stringify(item)].join('\n'));
+    }
+    nodeMap[id] = {
+      id: id,
+      label: label,
+      index: index,
+      parentId: parentId,
+      idAttribute: id,
+      expandable: !!((_item$children = item.children) != null && _item$children.length),
+      disabled: isItemDisabled ? isItemDisabled(item) : false
+    };
+    return {
+      id: id,
+      children: (_item$children2 = item.children) == null ? void 0 : _item$children2.map(function (child, childIndex) {
+        return processItem(child, childIndex, id);
+      })
+    };
+  };
+  var nodeTree = items.map(function (item, itemIndex) {
+    return processItem(item, itemIndex, null);
+  });
+  return {
+    nodeMap: nodeMap,
+    nodeTree: nodeTree
+  };
+};
+export var useTreeViewNodes = function useTreeViewNodes(_ref2) {
+  var instance = _ref2.instance,
+    params = _ref2.params,
+    state = _ref2.state,
+    setState = _ref2.setState;
   var getNode = React.useCallback(function (nodeId) {
-    return nodeMap.current[nodeId];
-  }, []);
-  var insertNode = React.useCallback(function (node) {
-    nodeMap.current[node.id] = node;
-  }, []);
-  var removeNode = React.useCallback(function (nodeId) {
-    var newMap = _extends({}, nodeMap.current);
-    delete newMap[nodeId];
-    nodeMap.current = newMap;
-    publishTreeViewEvent(instance, 'removeNode', {
-      id: nodeId
-    });
-  }, [instance]);
+    return state.nodeMap[nodeId];
+  }, [state.nodeMap]);
   var isNodeDisabled = React.useCallback(function (nodeId) {
     if (nodeId == null) {
       return false;
@@ -43,7 +73,7 @@ export var useTreeViewNodes = function useTreeViewNodes(_ref) {
     return false;
   }, [instance]);
   var getChildrenIds = useEventCallback(function (nodeId) {
-    return Object.values(nodeMap.current).filter(function (node) {
+    return Object.values(state.nodeMap).filter(function (node) {
       return node.parentId === nodeId;
     }).sort(function (a, b) {
       return a.index - b.index;
@@ -60,12 +90,51 @@ export var useTreeViewNodes = function useTreeViewNodes(_ref) {
     }
     return childrenIds;
   };
+  React.useEffect(function () {
+    setState(function (prevState) {
+      var newState = updateState({
+        items: params.items,
+        isItemDisabled: params.isItemDisabled,
+        getItemId: params.getItemId,
+        getItemLabel: params.getItemLabel
+      });
+      Object.values(prevState.nodeMap).forEach(function (node) {
+        if (!newState.nodeMap[node.id]) {
+          publishTreeViewEvent(instance, 'removeNode', {
+            id: node.id
+          });
+        }
+      });
+      return _extends({}, prevState, newState);
+    });
+  }, [instance, setState, params.items, params.isItemDisabled, params.getItemId, params.getItemLabel]);
+  var getNodesToRender = useEventCallback(function () {
+    var getPropsFromNodeId = function getPropsFromNodeId(_ref3) {
+      var id = _ref3.id,
+        children = _ref3.children;
+      var node = state.nodeMap[id];
+      return {
+        label: node.label,
+        nodeId: node.id,
+        id: node.idAttribute,
+        children: children == null ? void 0 : children.map(getPropsFromNodeId)
+      };
+    };
+    return state.nodeTree.map(getPropsFromNodeId);
+  });
   populateInstance(instance, {
     getNode: getNode,
-    updateNode: insertNode,
-    removeNode: removeNode,
+    getNodesToRender: getNodesToRender,
     getChildrenIds: getChildrenIds,
     getNavigableChildrenIds: getNavigableChildrenIds,
     isNodeDisabled: isNodeDisabled
   });
+};
+useTreeViewNodes.getInitialState = function (params) {
+  return updateState({
+    items: params.items,
+    isItemDisabled: params.isItemDisabled,
+    getItemId: params.getItemId,
+    getItemLabel: params.getItemLabel
+  });
 };

package/legacy/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -11,7 +11,36 @@ export var useTreeViewSelection = function useTreeViewSelection(_ref) {
   var lastSelectionWasRange = React.useRef(false);
   var currentRangeSelection = React.useRef([]);
   var isNodeSelected = function isNodeSelected(nodeId) {
-    return Array.isArray(models.selected.value) ? models.selected.value.indexOf(nodeId) !== -1 : models.selected.value === nodeId;
+    return Array.isArray(models.selectedNodes.value) ? models.selectedNodes.value.indexOf(nodeId) !== -1 : models.selectedNodes.value === nodeId;
+  };
+  var setSelectedNodes = function setSelectedNodes(event, newSelectedNodes) {
+    if (params.onNodeSelectionToggle) {
+      if (params.multiSelect) {
+        var addedNodes = newSelectedNodes.filter(function (nodeId) {
+          return !instance.isNodeSelected(nodeId);
+        });
+        var removedNodes = models.selectedNodes.value.filter(function (nodeId) {
+          return !newSelectedNodes.includes(nodeId);
+        });
+        addedNodes.forEach(function (nodeId) {
+          params.onNodeSelectionToggle(event, nodeId, true);
+        });
+        removedNodes.forEach(function (nodeId) {
+          params.onNodeSelectionToggle(event, nodeId, false);
+        });
+      } else if (newSelectedNodes !== models.selectedNodes.value) {
+        if (models.selectedNodes.value != null) {
+          params.onNodeSelectionToggle(event, models.selectedNodes.value, false);
+        }
+        if (newSelectedNodes != null) {
+          params.onNodeSelectionToggle(event, newSelectedNodes, true);
+        }
+      }
+    }
+    if (params.onSelectedNodesChange) {
+      params.onSelectedNodesChange(event, newSelectedNodes);
+    }
+    models.selectedNodes.setValue(newSelectedNodes);
   };
   var selectNode = function selectNode(event, nodeId) {
     var multiple = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
@@ -19,26 +48,20 @@ export var useTreeViewSelection = function useTreeViewSelection(_ref) {
       return;
     }
     if (multiple) {
-      if (Array.isArray(models.selected.value)) {
+      if (Array.isArray(models.selectedNodes.value)) {
         var newSelected;
-        if (models.selected.value.indexOf(nodeId) !== -1) {
-          newSelected = models.selected.value.filter(function (id) {
+        if (models.selectedNodes.value.indexOf(nodeId) !== -1) {
+          newSelected = models.selectedNodes.value.filter(function (id) {
             return id !== nodeId;
           });
         } else {
-          newSelected = [nodeId].concat(models.selected.value);
-        }
-        if (params.onNodeSelect) {
-          params.onNodeSelect(event, newSelected);
+          newSelected = [nodeId].concat(models.selectedNodes.value);
         }
-        models.selected.setValue(newSelected);
+        setSelectedNodes(event, newSelected);
       }
     } else {
       var _newSelected = params.multiSelect ? [nodeId] : nodeId;
-      if (params.onNodeSelect) {
-        params.onNodeSelect(event, _newSelected);
-      }
-      models.selected.setValue(_newSelected);
+      setSelectedNodes(event, _newSelected);
     }
     lastSelectedNode.current = nodeId;
     lastSelectionWasRange.current = false;
@@ -58,7 +81,7 @@ export var useTreeViewSelection = function useTreeViewSelection(_ref) {
     return nodes;
   };
   var handleRangeArrowSelect = function handleRangeArrowSelect(event, nodes) {
-    var base = models.selected.value.slice();
+    var base = models.selectedNodes.value.slice();
     var start = nodes.start,
       next = nodes.next,
       current = nodes.current;
@@ -84,13 +107,10 @@ export var useTreeViewSelection = function useTreeViewSelection(_ref) {
       base.push(next);
       currentRangeSelection.current.push(current, next);
     }
-    if (params.onNodeSelect) {
-      params.onNodeSelect(event, base);
-    }
-    models.selected.setValue(base);
+    setSelectedNodes(event, base);
   };
   var handleRangeSelect = function handleRangeSelect(event, nodes) {
-    var base = models.selected.value.slice();
+    var base = models.selectedNodes.value.slice();
     var start = nodes.start,
       end = nodes.end;
     // If last selection was a range selection ignore nodes that were selected.
@@ -108,10 +128,7 @@ export var useTreeViewSelection = function useTreeViewSelection(_ref) {
     newSelected = newSelected.filter(function (id, i) {
       return newSelected.indexOf(id) === i;
     });
-    if (params.onNodeSelect) {
-      params.onNodeSelect(event, newSelected);
-    }
-    models.selected.setValue(newSelected);
+    setSelectedNodes(event, newSelected);
   };
   var selectRange = function selectRange(event, nodes) {
     var stacked = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
@@ -172,17 +189,17 @@ export var useTreeViewSelection = function useTreeViewSelection(_ref) {
   };
 };
 useTreeViewSelection.models = {
-  selected: {
-    controlledProp: 'selected',
-    defaultProp: 'defaultSelected'
+  selectedNodes: {
+    controlledProp: 'selectedNodes',
+    defaultProp: 'defaultSelectedNodes'
   }
 };
-var DEFAULT_SELECTED = [];
+var DEFAULT_SELECTED_NODES = [];
 useTreeViewSelection.getDefaultizedParams = function (params) {
   var _params$disableSelect, _params$multiSelect, _params$defaultSelect;
   return _extends({}, params, {
     disableSelection: (_params$disableSelect = params.disableSelection) != null ? _params$disableSelect : false,
     multiSelect: (_params$multiSelect = params.multiSelect) != null ? _params$multiSelect : false,
-    defaultSelected: (_params$defaultSelect = params.defaultSelected) != null ? _params$defaultSelect : params.multiSelect ? DEFAULT_SELECTED : null
+    defaultSelectedNodes: (_params$defaultSelect = params.defaultSelectedNodes) != null ? _params$defaultSelect : params.multiSelect ? DEFAULT_SELECTED_NODES : null
   });
 };

package/legacy/internals/useTreeView/useTreeView.js

@@ -3,7 +3,6 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 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 var useTreeView = function useTreeView(inParams) {
@@ -32,7 +31,7 @@ export var useTreeView = function useTreeView(inParams) {
     state = _React$useState2[0],
     setState = _React$useState2[1];
   var rootPropsGetters = [];
-  var contextValue = DEFAULT_TREE_VIEW_CONTEXT_VALUE;
+  var contextValue = {};
   var runPlugin = function runPlugin(plugin) {
     var pluginResponse = plugin({
       instance: instance,
@@ -50,6 +49,42 @@ export var useTreeView = function useTreeView(inParams) {
     }
   };
   plugins.forEach(runPlugin);
+  contextValue.runItemPlugins = function (_ref) {
+    var props = _ref.props,
+      ref = _ref.ref;
+    var finalProps = props;
+    var finalRef = ref;
+    var itemWrappers = [];
+    plugins.forEach(function (plugin) {
+      if (!plugin.itemPlugin) {
+        return;
+      }
+      var itemPluginResponse = plugin.itemPlugin({
+        props: finalProps,
+        ref: finalRef
+      });
+      if (itemPluginResponse != null && itemPluginResponse.props) {
+        finalProps = itemPluginResponse.props;
+      }
+      if (itemPluginResponse != null && itemPluginResponse.ref) {
+        finalRef = itemPluginResponse.ref;
+      }
+      if (itemPluginResponse != null && itemPluginResponse.wrapItem) {
+        itemWrappers.push(itemPluginResponse.wrapItem);
+      }
+    });
+    return {
+      props: finalProps,
+      ref: finalRef,
+      wrapItem: function wrapItem(children) {
+        var finalChildren = children;
+        itemWrappers.forEach(function (itemWrapper) {
+          finalChildren = itemWrapper(finalChildren);
+        });
+        return finalChildren;
+      }
+    };
+  };
   var getRootProps = function getRootProps() {
     var otherHandlers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     var rootProps = _extends({
@@ -66,6 +101,7 @@ export var useTreeView = function useTreeView(inParams) {
   return {
     getRootProps: getRootProps,
     rootRef: handleRootRef,
-    contextValue: contextValue
+    contextValue: contextValue,
+    instance: instance
   };
 };

package/legacy/internals/utils/warning.js

@@ -0,0 +1,15 @@
+export var buildWarning = function buildWarning(message) {
+  var gravity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'warning';
+  var alreadyWarned = false;
+  var cleanMessage = Array.isArray(message) ? message.join('\n') : message;
+  return function () {
+    if (!alreadyWarned) {
+      alreadyWarned = true;
+      if (gravity === 'error') {
+        console.error(cleanMessage);
+      } else {
+        console.warn(cleanMessage);
+      }
+    }
+  };
+};

package/legacy/models/index.js

@@ -0,0 +1 @@
+export * from './items';

package/legacy/models/items.js

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

package/models/index.d.ts

@@ -0,0 +1 @@
+export * from './items';

package/models/index.js

@@ -0,0 +1 @@
+export * from './items';

package/models/items.d.ts

@@ -0,0 +1,7 @@
+export type TreeViewItemId = string;
+export type TreeViewBaseItem<R extends {} = {
+    id: string;
+    label: string;
+}> = R & {
+    children?: TreeViewBaseItem<R>[];
+};

package/models/items.js

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

package/models/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/models/index.js",
+  "types": "./index.d.ts"
+}