@mui/x-tree-view 7.0.0 → 7.1.0

package/node/internals/plugins/{useTreeViewNodes/useTreeViewNodes.js → useTreeViewItems/useTreeViewItems.js}

@@ -4,14 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTreeViewNodes = void 0;
+exports.useTreeViewItems = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useTreeView = require("../../useTreeView/useTreeView.utils");
 var _publishTreeViewEvent = require("../../utils/publishTreeViewEvent");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const updateNodesState = ({
+const updateItemsState = ({
   items,
   isItemDisabled,
   getItemLabel,
@@ -53,86 +53,96 @@ const updateNodesState = ({
     itemMap
   };
 };
-const useTreeViewNodes = ({
+const useTreeViewItems = ({
   instance,
   publicAPI,
   params,
   state,
   setState
 }) => {
-  const getNode = React.useCallback(itemId => state.nodes.nodeMap[itemId], [state.nodes.nodeMap]);
-  const getItem = React.useCallback(itemId => state.nodes.itemMap[itemId], [state.nodes.itemMap]);
-  const isNodeDisabled = React.useCallback(itemId => {
+  const getNode = React.useCallback(itemId => state.items.nodeMap[itemId], [state.items.nodeMap]);
+  const getItem = React.useCallback(itemId => state.items.itemMap[itemId], [state.items.itemMap]);
+  const isItemDisabled = React.useCallback(itemId => {
     if (itemId == null) {
       return false;
     }
-    let item = instance.getNode(itemId);
+    let node = instance.getNode(itemId);
 
-    // This can be called before the item has been added to the node map.
-    if (!item) {
+    // This can be called before the item has been added to the item map.
+    if (!node) {
       return false;
     }
-    if (item.disabled) {
+    if (node.disabled) {
       return true;
     }
-    while (item.parentId != null) {
-      item = instance.getNode(item.parentId);
-      if (item.disabled) {
+    while (node.parentId != null) {
+      node = instance.getNode(node.parentId);
+      if (node.disabled) {
         return true;
       }
     }
     return false;
   }, [instance]);
-  const getChildrenIds = React.useCallback(itemId => Object.values(state.nodes.nodeMap).filter(item => item.parentId === itemId).sort((a, b) => a.index - b.index).map(child => child.id), [state.nodes.nodeMap]);
+  const getChildrenIds = React.useCallback(itemId => Object.values(state.items.nodeMap).filter(item => item.parentId === itemId).sort((a, b) => a.index - b.index).map(child => child.id), [state.items.nodeMap]);
   const getNavigableChildrenIds = itemId => {
     let childrenIds = instance.getChildrenIds(itemId);
     if (!params.disabledItemsFocusable) {
-      childrenIds = childrenIds.filter(item => !instance.isNodeDisabled(item));
+      childrenIds = childrenIds.filter(item => !instance.isItemDisabled(item));
     }
     return childrenIds;
   };
+  const areItemUpdatesPreventedRef = React.useRef(false);
+  const preventItemUpdates = React.useCallback(() => {
+    areItemUpdatesPreventedRef.current = true;
+  }, []);
+  const areItemUpdatesPrevented = React.useCallback(() => areItemUpdatesPreventedRef.current, []);
   React.useEffect(() => {
+    if (instance.areItemUpdatesPrevented()) {
+      return;
+    }
     setState(prevState => {
-      const newState = updateNodesState({
+      const newState = updateItemsState({
         items: params.items,
         isItemDisabled: params.isItemDisabled,
         getItemId: params.getItemId,
         getItemLabel: params.getItemLabel
       });
-      Object.values(prevState.nodes.nodeMap).forEach(node => {
-        if (!newState.nodeMap[node.id]) {
-          (0, _publishTreeViewEvent.publishTreeViewEvent)(instance, 'removeNode', {
-            id: node.id
+      Object.values(prevState.items.nodeMap).forEach(item => {
+        if (!newState.nodeMap[item.id]) {
+          (0, _publishTreeViewEvent.publishTreeViewEvent)(instance, 'removeItem', {
+            id: item.id
           });
         }
       });
       return (0, _extends2.default)({}, prevState, {
-        nodes: newState
+        items: newState
       });
     });
   }, [instance, setState, params.items, params.isItemDisabled, params.getItemId, params.getItemLabel]);
-  const getNodesToRender = () => {
+  const getItemsToRender = () => {
     const getPropsFromItemId = ({
       id,
       children
     }) => {
-      const node = state.nodes.nodeMap[id];
+      const item = state.items.nodeMap[id];
       return {
-        label: node.label,
-        itemId: node.id,
-        id: node.idAttribute,
+        label: item.label,
+        itemId: item.id,
+        id: item.idAttribute,
         children: children?.map(getPropsFromItemId)
       };
     };
-    return state.nodes.nodeTree.map(getPropsFromItemId);
+    return state.items.nodeTree.map(getPropsFromItemId);
   };
   (0, _useTreeView.populateInstance)(instance, {
     getNode,
     getItem,
-    getNodesToRender,
+    getItemsToRender,
     getChildrenIds,
     getNavigableChildrenIds,
-    isNodeDisabled
+    isItemDisabled,
+    preventItemUpdates,
+    areItemUpdatesPrevented
   });
   (0, _useTreeView.populatePublicAPI)(publicAPI, {
     getItem
@@ -143,19 +153,19 @@ const useTreeViewNodes = ({
     }
   };
 };
-exports.useTreeViewNodes = useTreeViewNodes;
-useTreeViewNodes.getInitialState = params => ({
-  nodes: updateNodesState({
+exports.useTreeViewItems = useTreeViewItems;
+useTreeViewItems.getInitialState = params => ({
+  items: updateItemsState({
     items: params.items,
     isItemDisabled: params.isItemDisabled,
     getItemId: params.getItemId,
     getItemLabel: params.getItemLabel
   })
 });
-useTreeViewNodes.getDefaultizedParams = params => (0, _extends2.default)({}, params, {
+useTreeViewItems.getDefaultizedParams = params => (0, _extends2.default)({}, params, {
   disabledItemsFocusable: params.disabledItemsFocusable ?? false
 });
-useTreeViewNodes.params = {
+useTreeViewItems.params = {
   disabledItemsFocusable: true,
   items: true,
   isItemDisabled: true,

package/node/internals/plugins/useTreeViewJSXItems/index.js

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

package/node/internals/plugins/{useTreeViewJSXNodes/useTreeViewJSXNodes.js → useTreeViewJSXItems/useTreeViewJSXItems.js}

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTreeViewJSXNodes = void 0;
+exports.useTreeViewJSXItems = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
@@ -16,45 +16,46 @@ var _DescendantProvider = require("../../TreeViewProvider/DescendantProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useTreeViewJSXNodes = ({
+const useTreeViewJSXItems = ({
   instance,
   setState
 }) => {
-  const insertJSXNode = (0, _useEventCallback.default)(node => {
+  instance.preventItemUpdates();
+  const insertJSXItem = (0, _useEventCallback.default)(item => {
     setState(prevState => {
-      if (prevState.nodes.nodeMap[node.id] != null) {
-        throw new Error(['MUI X: 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.', `Tow items were provided with the same id in the \`items\` prop: "${node.id}"`].join('\n'));
+      if (prevState.items.nodeMap[item.id] != null) {
+        throw new Error(['MUI X: 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.', `Tow items were provided with the same id in the \`items\` prop: "${item.id}"`].join('\n'));
       }
       return (0, _extends2.default)({}, prevState, {
-        nodes: (0, _extends2.default)({}, prevState.nodes, {
-          nodeMap: (0, _extends2.default)({}, prevState.nodes.nodeMap, {
-            [node.id]: node
+        items: (0, _extends2.default)({}, prevState.items, {
+          nodeMap: (0, _extends2.default)({}, prevState.items.nodeMap, {
+            [item.id]: item
           }),
           // For `SimpleTreeView`, we don't have a proper `item` object, so we create a very basic one.
-          itemMap: (0, _extends2.default)({}, prevState.nodes.itemMap, {
-            [node.id]: {
-              id: node.id,
-              label: node.label
+          itemMap: (0, _extends2.default)({}, prevState.items.itemMap, {
+            [item.id]: {
+              id: item.id,
+              label: item.label
             }
           })
         })
       });
     });
   });
-  const removeJSXNode = (0, _useEventCallback.default)(itemId => {
+  const removeJSXItem = (0, _useEventCallback.default)(itemId => {
     setState(prevState => {
-      const newNodeMap = (0, _extends2.default)({}, prevState.nodes.nodeMap);
-      const newItemMap = (0, _extends2.default)({}, prevState.nodes.itemMap);
+      const newNodeMap = (0, _extends2.default)({}, prevState.items.nodeMap);
+      const newItemMap = (0, _extends2.default)({}, prevState.items.itemMap);
       delete newNodeMap[itemId];
       delete newItemMap[itemId];
       return (0, _extends2.default)({}, prevState, {
-        nodes: (0, _extends2.default)({}, prevState.nodes, {
+        items: (0, _extends2.default)({}, prevState.items, {
           nodeMap: newNodeMap,
           itemMap: newItemMap
         })
       });
     });
-    (0, _publishTreeViewEvent.publishTreeViewEvent)(instance, 'removeNode', {
+    (0, _publishTreeViewEvent.publishTreeViewEvent)(instance, 'removeItem', {
       id: itemId
     });
   });
@@ -72,13 +73,13 @@ const useTreeViewJSXNodes = ({
     };
   });
   (0, _useTreeView.populateInstance)(instance, {
-    insertJSXNode,
-    removeJSXNode,
+    insertJSXItem,
+    removeJSXItem,
     mapFirstCharFromJSX
   });
 };
-exports.useTreeViewJSXNodes = useTreeViewJSXNodes;
-const useTreeViewJSXNodesItemPlugin = ({
+exports.useTreeViewJSXItems = useTreeViewJSXItems;
+const useTreeViewJSXItemsItemPlugin = ({
   props,
   rootRef,
   contentRef
@@ -113,9 +114,9 @@ const useTreeViewJSXNodesItemPlugin = ({
     parentId
   } = (0, _DescendantProvider.useDescendant)(descendant);
   React.useEffect(() => {
-    // On the first render a node's index will be -1. We want to wait for the real index.
+    // On the first render a item's index will be -1. We want to wait for the real index.
     if (index !== -1) {
-      instance.insertJSXNode({
+      instance.insertJSXItem({
         id: itemId,
         idAttribute: id,
         index,
@@ -123,7 +124,7 @@ const useTreeViewJSXNodesItemPlugin = ({
         expandable,
         disabled
       });
-      return () => instance.removeJSXNode(itemId);
+      return () => instance.removeJSXItem(itemId);
     }
     return undefined;
   }, [instance, parentId, index, itemId, expandable, disabled, id]);
@@ -138,12 +139,12 @@ const useTreeViewJSXNodesItemPlugin = ({
     rootRef: handleRootRef
   };
 };
-useTreeViewJSXNodes.itemPlugin = useTreeViewJSXNodesItemPlugin;
-useTreeViewJSXNodes.wrapItem = ({
+useTreeViewJSXItems.itemPlugin = useTreeViewJSXItemsItemPlugin;
+useTreeViewJSXItems.wrapItem = ({
   children,
   itemId
 }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_DescendantProvider.DescendantProvider, {
   id: itemId,
   children: children
 });
-useTreeViewJSXNodes.params = {};
+useTreeViewJSXItems.params = {};

package/node/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -24,30 +24,26 @@ function findNextFirstChar(firstChars, startIndex, char) {
 }
 const useTreeViewKeyboardNavigation = ({
   instance,
-  params
+  params,
+  state
 }) => {
   const theme = (0, _styles.useTheme)();
   const isRTL = theme.direction === 'rtl';
   const firstCharMap = React.useRef({});
-  const hasFirstCharMapBeenUpdatedImperatively = React.useRef(false);
   const updateFirstCharMap = (0, _useEventCallback.default)(callback => {
-    hasFirstCharMapBeenUpdatedImperatively.current = true;
     firstCharMap.current = callback(firstCharMap.current);
   });
   React.useEffect(() => {
-    if (hasFirstCharMapBeenUpdatedImperatively.current) {
+    if (instance.areItemUpdatesPrevented()) {
       return;
     }
     const newFirstCharMap = {};
-    const processItem = item => {
-      const getItemId = params.getItemId;
-      const itemId = getItemId ? getItemId(item) : item.id;
-      newFirstCharMap[itemId] = instance.getNode(itemId).label.substring(0, 1).toLowerCase();
-      item.children?.forEach(processItem);
+    const processItem = node => {
+      newFirstCharMap[node.id] = node.label.substring(0, 1).toLowerCase();
     };
-    params.items.forEach(processItem);
+    Object.values(state.items.nodeMap).forEach(processItem);
     firstCharMap.current = newFirstCharMap;
-  }, [params.items, params.getItemId, instance]);
+  }, [state.items.nodeMap, params.getItemId, instance]);
   const getFirstMatchingItem = (itemId, firstChar) => {
     let start;
     let index;
@@ -57,8 +53,8 @@ const useTreeViewKeyboardNavigation = ({
     // This really only works since the ids are strings
     Object.keys(firstCharMap.current).forEach(mapItemId => {
       const map = instance.getNode(mapItemId);
-      const visible = map.parentId ? instance.isNodeExpanded(map.parentId) : true;
-      const shouldBeSkipped = params.disabledItemsFocusable ? false : instance.isNodeDisabled(mapItemId);
+      const visible = map.parentId ? instance.isItemExpanded(map.parentId) : true;
+      const shouldBeSkipped = params.disabledItemsFocusable ? false : instance.isItemDisabled(mapItemId);
       if (visible && !shouldBeSkipped) {
         firstCharIds.push(mapItemId);
         firstChars.push(firstCharMap.current[mapItemId]);
@@ -85,9 +81,9 @@ const useTreeViewKeyboardNavigation = ({
     }
     return null;
   };
-  const canToggleItemSelection = itemId => !params.disableSelection && !instance.isNodeDisabled(itemId);
+  const canToggleItemSelection = itemId => !params.disableSelection && !instance.isItemDisabled(itemId);
   const canToggleItemExpansion = itemId => {
-    return !instance.isNodeDisabled(itemId) && instance.isNodeExpandable(itemId);
+    return !instance.isItemDisabled(itemId) && instance.isItemExpandable(itemId);
   };
 
   // ARIA specification: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboardinteraction
@@ -103,7 +99,7 @@ const useTreeViewKeyboardNavigation = ({
 
     // eslint-disable-next-line default-case
     switch (true) {
-      // Select the node when pressing "Space"
+      // Select the item when pressing "Space"
       case key === ' ' && canToggleItemSelection(itemId):
         {
           event.preventDefault();
@@ -112,26 +108,26 @@ const useTreeViewKeyboardNavigation = ({
               end: itemId
             });
           } else if (params.multiSelect) {
-            instance.selectNode(event, itemId, true);
+            instance.selectItem(event, itemId, true);
           } else {
-            instance.selectNode(event, itemId);
+            instance.selectItem(event, itemId);
           }
           break;
         }
 
-      // If the focused node has children, we expand it.
-      // If the focused node has no children, we select it.
+      // If the focused item has children, we expand it.
+      // If the focused item has no children, we select it.
       case key === 'Enter':
         {
           if (canToggleItemExpansion(itemId)) {
-            instance.toggleNodeExpansion(event, itemId);
+            instance.toggleItemExpansion(event, itemId);
             event.preventDefault();
           } else if (canToggleItemSelection(itemId)) {
             if (params.multiSelect) {
               event.preventDefault();
-              instance.selectNode(event, itemId, true);
-            } else if (!instance.isNodeSelected(itemId)) {
-              instance.selectNode(event, itemId);
+              instance.selectItem(event, itemId, true);
+            } else if (!instance.isItemSelected(itemId)) {
+              instance.selectItem(event, itemId);
               event.preventDefault();
             }
           }
@@ -141,7 +137,7 @@ const useTreeViewKeyboardNavigation = ({
       // Focus the next focusable item
       case key === 'ArrowDown':
         {
-          const nextItem = (0, _useTreeView.getNextNode)(instance, itemId);
+          const nextItem = (0, _useTreeView.getNextItem)(instance, itemId);
           if (nextItem) {
             event.preventDefault();
             instance.focusItem(event, nextItem);
@@ -161,7 +157,7 @@ const useTreeViewKeyboardNavigation = ({
       // Focuses the previous focusable item
       case key === 'ArrowUp':
         {
-          const previousItem = (0, _useTreeView.getPreviousNode)(instance, itemId);
+          const previousItem = (0, _useTreeView.getPreviousItem)(instance, itemId);
           if (previousItem) {
             event.preventDefault();
             instance.focusItem(event, previousItem);
@@ -182,14 +178,14 @@ const useTreeViewKeyboardNavigation = ({
       // If the focused item is collapsed and has children, we expand it
       case key === 'ArrowRight' && !isRTL || key === 'ArrowLeft' && isRTL:
         {
-          if (instance.isNodeExpanded(itemId)) {
-            const nextNodeId = (0, _useTreeView.getNextNode)(instance, itemId);
-            if (nextNodeId) {
-              instance.focusItem(event, nextNodeId);
+          if (instance.isItemExpanded(itemId)) {
+            const nextItemId = (0, _useTreeView.getNextItem)(instance, itemId);
+            if (nextItemId) {
+              instance.focusItem(event, nextItemId);
               event.preventDefault();
             }
           } else if (canToggleItemExpansion(itemId)) {
-            instance.toggleNodeExpansion(event, itemId);
+            instance.toggleItemExpansion(event, itemId);
             event.preventDefault();
           }
           break;
@@ -199,8 +195,8 @@ const useTreeViewKeyboardNavigation = ({
       // If the focused item is collapsed and has a parent, we move the focus to this parent
       case key === 'ArrowLeft' && !isRTL || key === 'ArrowRight' && isRTL:
         {
-          if (canToggleItemExpansion(itemId) && instance.isNodeExpanded(itemId)) {
-            instance.toggleNodeExpansion(event, itemId);
+          if (canToggleItemExpansion(itemId) && instance.isItemExpanded(itemId)) {
+            instance.toggleItemExpansion(event, itemId);
             event.preventDefault();
           } else {
             const parent = instance.getNode(itemId).parentId;
@@ -212,13 +208,13 @@ const useTreeViewKeyboardNavigation = ({
           break;
         }
 
-      // Focuses the first node in the tree
+      // Focuses the first item in the tree
       case key === 'Home':
         {
-          instance.focusItem(event, (0, _useTreeView.getFirstNode)(instance));
+          instance.focusItem(event, (0, _useTreeView.getFirstItem)(instance));
 
           // Multi select behavior when pressing Ctrl + Shift + Home
-          // Selects the focused node and all nodes up to the first node.
+          // Selects the focused item and all items up to the first item.
           if (canToggleItemSelection(itemId) && params.multiSelect && ctrlPressed && event.shiftKey) {
             instance.rangeSelectToFirst(event, itemId);
           }
@@ -229,7 +225,7 @@ const useTreeViewKeyboardNavigation = ({
       // Focuses the last item in the tree
       case key === 'End':
         {
-          instance.focusItem(event, (0, _useTreeView.getLastNode)(instance));
+          instance.focusItem(event, (0, _useTreeView.getLastItem)(instance));
 
           // Multi select behavior when pressing Ctrl + Shirt + End
           // Selects the focused item and all the items down to the last item.
@@ -249,12 +245,12 @@ const useTreeViewKeyboardNavigation = ({
         }
 
       // Multi select behavior when pressing Ctrl + a
-      // Selects all the nodes
+      // Selects all the items
       case key === 'a' && ctrlPressed && params.multiSelect && !params.disableSelection:
         {
           instance.selectRange(event, {
-            start: (0, _useTreeView.getFirstNode)(instance),
-            end: (0, _useTreeView.getLastNode)(instance)
+            start: (0, _useTreeView.getFirstItem)(instance),
+            end: (0, _useTreeView.getLastItem)(instance)
           });
           event.preventDefault();
           break;
@@ -264,9 +260,9 @@ const useTreeViewKeyboardNavigation = ({
       // TODO: Support typing multiple characters
       case !ctrlPressed && !event.shiftKey && isPrintableCharacter(key):
         {
-          const matchingNode = getFirstMatchingItem(itemId, key);
-          if (matchingNode != null) {
-            instance.focusItem(event, matchingNode);
+          const matchingItem = getFirstMatchingItem(itemId, key);
+          if (matchingItem != null) {
+            instance.focusItem(event, matchingItem);
             event.preventDefault();
           }
           break;