@mui/x-tree-view 8.0.0-alpha.0 → 8.0.0-alpha.10

package/node/internals/TreeViewProvider/TreeViewChildrenItemProvider.js

@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useTreeViewContext = require("./useTreeViewContext");
 var _utils = require("../utils/utils");
-var _useTreeViewId = require("../corePlugins/useTreeViewId/useTreeViewId.utils");
+var _useTreeViewItems = require("../plugins/useTreeViewItems/useTreeViewItems.selectors");
 var _jsxRuntime = require("react/jsx-runtime");
 const TreeViewChildrenItemContext = exports.TreeViewChildrenItemContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== 'production') {
@@ -20,11 +20,12 @@ if (process.env.NODE_ENV !== 'production') {
 function TreeViewChildrenItemProvider(props) {
   const {
     children,
-    itemId = null
+    itemId = null,
+    idAttribute
   } = props;
   const {
     instance,
-    treeId,
+    store,
     rootRef
   } = (0, _useTreeViewContext.useTreeViewContext)();
   const childrenIdAttrToIdRef = React.useRef(new Map());
@@ -32,25 +33,8 @@ function TreeViewChildrenItemProvider(props) {
     if (!rootRef.current) {
       return;
     }
-    let idAttr = null;
-    if (itemId == null) {
-      idAttr = rootRef.current.id;
-    } else {
-      // Undefined during 1st render
-      const itemMeta = instance.getItemMeta(itemId);
-      if (itemMeta !== undefined) {
-        idAttr = (0, _useTreeViewId.generateTreeItemIdAttribute)({
-          itemId,
-          treeId,
-          id: itemMeta.idAttribute
-        });
-      }
-    }
-    if (idAttr == null) {
-      return;
-    }
-    const previousChildrenIds = instance.getItemOrderedChildrenIds(itemId ?? null) ?? [];
-    const escapedIdAttr = (0, _utils.escapeOperandAttributeSelector)(idAttr);
+    const previousChildrenIds = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(store.value, itemId ?? null) ?? [];
+    const escapedIdAttr = (0, _utils.escapeOperandAttributeSelector)(idAttribute ?? rootRef.current.id);
     const childrenElements = rootRef.current.querySelectorAll(`${itemId == null ? '' : `*[id="${escapedIdAttr}"] `}[role="treeitem"]:not(*[id="${escapedIdAttr}"] [role="treeitem"] [role="treeitem"])`);
     const childrenIds = Array.from(childrenElements).map(child => childrenIdAttrToIdRef.current.get(child.id));
     const hasChanged = childrenIds.length !== previousChildrenIds.length || childrenIds.some((childId, index) => childId !== previousChildrenIds[index]);

package/node/internals/TreeViewProvider/TreeViewProvider.js

@@ -21,8 +21,7 @@ function TreeViewProvider(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewContext.TreeViewContext.Provider, {
     value: value,
     children: value.wrapRoot({
-      children,
-      instance: value.instance
+      children
     })
   });
 }

package/node/internals/components/RichTreeViewItems.js

@@ -10,55 +10,67 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _useSlotProps2 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _fastObjectShallowCompare = require("@mui/x-internals/fastObjectShallowCompare");
 var _TreeItem = require("../../TreeItem");
+var _useSelector = require("../hooks/useSelector");
+var _useTreeViewItems = require("../plugins/useTreeViewItems/useTreeViewItems.selectors");
+var _TreeViewProvider = require("../TreeViewProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["ownerState"];
-function WrappedTreeItem({
-  slots,
-  slotProps,
-  label,
-  id,
-  itemId,
-  itemsToRender
+const RichTreeViewItemsContext = /*#__PURE__*/React.createContext(null);
+if (process.env.NODE_ENV !== 'production') {
+  RichTreeViewItemsContext.displayName = 'RichTreeViewItemsProvider';
+}
+const WrappedTreeItem = /*#__PURE__*/React.memo(function WrappedTreeItem({
+  itemSlot,
+  itemSlotProps,
+  itemId
 }) {
-  const Item = slots?.item ?? _TreeItem.TreeItem;
+  const renderItemForRichTreeView = React.useContext(RichTreeViewItemsContext);
+  const {
+    store
+  } = (0, _TreeViewProvider.useTreeViewContext)();
+  const itemMeta = (0, _useSelector.useSelector)(store, _useTreeViewItems.selectorItemMeta, itemId);
+  const children = (0, _useSelector.useSelector)(store, _useTreeViewItems.selectorItemOrderedChildrenIds, itemId);
+  const Item = itemSlot ?? _TreeItem.TreeItem;
   const _useSlotProps = (0, _useSlotProps2.default)({
       elementType: Item,
-      externalSlotProps: slotProps?.item,
+      externalSlotProps: itemSlotProps,
       additionalProps: {
-        itemId,
-        id,
-        label
+        label: itemMeta?.label,
+        id: itemMeta?.idAttribute,
+        itemId
       },
       ownerState: {
         itemId,
-        label
+        label: itemMeta?.label
       }
     }),
     itemProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded);
-  const children = React.useMemo(() => itemsToRender ? /*#__PURE__*/(0, _jsxRuntime.jsx)(RichTreeViewItems, {
-    itemsToRender: itemsToRender,
-    slots: slots,
-    slotProps: slotProps
-  }) : null, [itemsToRender, slots, slotProps]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, (0, _extends2.default)({}, itemProps, {
-    children: children
+    children: children?.map(renderItemForRichTreeView)
   }));
-}
+}, _fastObjectShallowCompare.fastObjectShallowCompare);
 function RichTreeViewItems(props) {
   const {
-    itemsToRender,
     slots,
     slotProps
   } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
-    children: itemsToRender.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedTreeItem, {
-      slots: slots,
-      slotProps: slotProps,
-      label: item.label,
-      id: item.id,
-      itemId: item.itemId,
-      itemsToRender: item.children
-    }, item.itemId))
+  const {
+    store
+  } = (0, _TreeViewProvider.useTreeViewContext)();
+  const itemSlot = slots?.item;
+  const itemSlotProps = slotProps?.item;
+  const items = (0, _useSelector.useSelector)(store, _useTreeViewItems.selectorItemOrderedChildrenIds, null);
+  const renderItem = React.useCallback(itemId => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedTreeItem, {
+      itemSlot: itemSlot,
+      itemSlotProps: itemSlotProps,
+      itemId: itemId
+    }, itemId);
+  }, [itemSlot, itemSlotProps]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RichTreeViewItemsContext.Provider, {
+    value: renderItem,
+    children: items.map(renderItem)
   });
 }

package/node/internals/corePlugins/useTreeViewId/useTreeViewId.js

@@ -8,32 +8,30 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTreeViewId = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _useTreeViewId = require("./useTreeViewId.utils");
+var _useSelector = require("../../hooks/useSelector");
+var _useTreeViewId = require("./useTreeViewId.selectors");
+var _useTreeViewId2 = require("./useTreeViewId.utils");
 const useTreeViewId = ({
   params,
-  state,
-  setState
+  store
 }) => {
   React.useEffect(() => {
-    setState(prevState => {
-      if (prevState.id.treeId === params.id && prevState.id.treeId !== undefined) {
+    store.update(prevState => {
+      if (params.id === prevState.id.providedTreeId && prevState.id.treeId !== undefined) {
         return prevState;
       }
       return (0, _extends2.default)({}, prevState, {
         id: (0, _extends2.default)({}, prevState.id, {
-          treeId: params.id ?? (0, _useTreeViewId.createTreeViewDefaultId)()
+          treeId: params.id ?? (0, _useTreeViewId2.createTreeViewDefaultId)()
         })
       });
     });
-  }, [setState, params.id]);
-  const treeId = params.id ?? state.id.treeId;
+  }, [store, params.id]);
+  const treeId = (0, _useSelector.useSelector)(store, _useTreeViewId.selectorTreeViewId);
   return {
     getRootProps: () => ({
       id: treeId
-    }),
-    contextValue: {
-      treeId
-    }
+    })
   };
 };
 exports.useTreeViewId = useTreeViewId;
@@ -44,6 +42,7 @@ useTreeViewId.getInitialState = ({
   id
 }) => ({
   id: {
-    treeId: id ?? undefined
+    treeId: undefined,
+    providedTreeId: id
   }
 });

package/node/internals/corePlugins/useTreeViewId/useTreeViewId.selectors.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorTreeViewId = void 0;
+var _selectors = require("../../utils/selectors");
+const selectorTreeViewIdState = state => state.id;
+
+/**
+ * Get the id attribute of the tree view.
+ * @param {TreeViewState<[UseTreeViewIdSignature]>} state The state of the tree view.
+ * @returns {string} The id attribute of the tree view.
+ */
+const selectorTreeViewId = exports.selectorTreeViewId = (0, _selectors.createSelector)(selectorTreeViewIdState, idState => idState.treeId);

package/node/internals/hooks/useInstanceEventHandler.js

@@ -22,7 +22,7 @@ function createUseInstanceEventHandler(registryContainer) {
     }
     const [objectRetainedByReact] = React.useState(new ObjectToBeRetainedByReact());
     const subscription = React.useRef(null);
-    const handlerRef = React.useRef();
+    const handlerRef = React.useRef(undefined);
     handlerRef.current = handler;
     const cleanupTokenRef = React.useRef(null);
     if (!subscription.current && handlerRef.current) {

package/node/internals/hooks/useSelector.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSelector = void 0;
+var _withSelector = require("use-sync-external-store/with-selector");
+const defaultCompare = Object.is;
+const useSelector = (store, selector, args = undefined, equals = defaultCompare) => {
+  const selectorWithArgs = state => selector(state, args);
+  return (0, _withSelector.useSyncExternalStoreWithSelector)(store.subscribe, store.getSnapshot, store.getSnapshot, selectorWithArgs, equals);
+};
+exports.useSelector = useSelector;

package/node/internals/index.js

@@ -21,24 +21,66 @@ Object.defineProperty(exports, "TreeViewProvider", {
     return _TreeViewProvider.TreeViewProvider;
   }
 });
+Object.defineProperty(exports, "TreeViewStore", {
+  enumerable: true,
+  get: function () {
+    return _TreeViewStore.TreeViewStore;
+  }
+});
 Object.defineProperty(exports, "buildSiblingIndexes", {
   enumerable: true,
   get: function () {
     return _useTreeViewItems.buildSiblingIndexes;
   }
 });
+Object.defineProperty(exports, "createSelector", {
+  enumerable: true,
+  get: function () {
+    return _selectors.createSelector;
+  }
+});
 Object.defineProperty(exports, "isTargetInDescendants", {
   enumerable: true,
   get: function () {
     return _tree.isTargetInDescendants;
   }
 });
+Object.defineProperty(exports, "selectorItemIndex", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewItems2.selectorItemIndex;
+  }
+});
+Object.defineProperty(exports, "selectorItemMeta", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewItems2.selectorItemMeta;
+  }
+});
+Object.defineProperty(exports, "selectorItemMetaLookup", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewItems2.selectorItemMetaLookup;
+  }
+});
+Object.defineProperty(exports, "selectorItemOrderedChildrenIds", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewItems2.selectorItemOrderedChildrenIds;
+  }
+});
 Object.defineProperty(exports, "unstable_resetCleanupTracking", {
   enumerable: true,
   get: function () {
     return _useInstanceEventHandler.unstable_resetCleanupTracking;
   }
 });
+Object.defineProperty(exports, "useSelector", {
+  enumerable: true,
+  get: function () {
+    return _useSelector.useSelector;
+  }
+});
 Object.defineProperty(exports, "useTreeView", {
   enumerable: true,
   get: function () {
@@ -103,12 +145,16 @@ var _useTreeView = require("./useTreeView");
 var _TreeViewProvider = require("./TreeViewProvider");
 var _RichTreeViewItems = require("./components/RichTreeViewItems");
 var _useInstanceEventHandler = require("./hooks/useInstanceEventHandler");
+var _useSelector = require("./hooks/useSelector");
 var _useTreeViewExpansion = require("./plugins/useTreeViewExpansion");
 var _useTreeViewSelection = require("./plugins/useTreeViewSelection");
 var _useTreeViewFocus = require("./plugins/useTreeViewFocus");
 var _useTreeViewKeyboardNavigation = require("./plugins/useTreeViewKeyboardNavigation");
 var _useTreeViewIcons = require("./plugins/useTreeViewIcons");
 var _useTreeViewItems = require("./plugins/useTreeViewItems");
+var _useTreeViewItems2 = require("./plugins/useTreeViewItems/useTreeViewItems.selectors");
 var _useTreeViewLabel = require("./plugins/useTreeViewLabel");
 var _useTreeViewJSXItems = require("./plugins/useTreeViewJSXItems");
-var _tree = require("./utils/tree");
+var _selectors = require("./utils/selectors");
+var _tree = require("./utils/tree");
+var _TreeViewStore = require("./utils/TreeViewStore");

package/node/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -1,38 +1,55 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTreeViewExpansion = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _useTreeViewExpansion = require("./useTreeViewExpansion.selectors");
+var _useTreeViewExpansion2 = require("./useTreeViewExpansion.utils");
+var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
 const useTreeViewExpansion = ({
   instance,
+  store,
   params,
   models
 }) => {
-  const expandedItemsMap = React.useMemo(() => {
-    const temp = new Map();
-    models.expandedItems.value.forEach(id => {
-      temp.set(id, true);
+  (0, _useEnhancedEffect.default)(() => {
+    store.update(prevState => (0, _extends2.default)({}, prevState, {
+      expansion: (0, _extends2.default)({}, prevState.expansion, {
+        expandedItemsMap: (0, _useTreeViewExpansion2.createExpandedItemsMap)(models.expandedItems.value)
+      })
+    }));
+  }, [store, models.expandedItems.value]);
+  (0, _useEnhancedEffect.default)(() => {
+    store.update(prevState => {
+      const newExpansionTrigger = (0, _useTreeViewExpansion2.getExpansionTrigger)({
+        isItemEditable: params.isItemEditable,
+        expansionTrigger: params.expansionTrigger
+      });
+      if (prevState.expansion.expansionTrigger === newExpansionTrigger) {
+        return prevState;
+      }
+      return (0, _extends2.default)({}, prevState, {
+        expansion: (0, _extends2.default)({}, prevState.expansion, {
+          expansionTrigger: newExpansionTrigger
+        })
+      });
     });
-    return temp;
-  }, [models.expandedItems.value]);
+  }, [store, params.isItemEditable, params.expansionTrigger]);
   const setExpandedItems = (event, value) => {
     params.onExpandedItemsChange?.(event, value);
     models.expandedItems.setControlledValue(value);
   };
-  const isItemExpanded = React.useCallback(itemId => expandedItemsMap.has(itemId), [expandedItemsMap]);
-  const isItemExpandable = React.useCallback(itemId => !!instance.getItemMeta(itemId)?.expandable, [instance]);
   const toggleItemExpansion = (0, _useEventCallback.default)((event, itemId) => {
-    const isExpandedBefore = instance.isItemExpanded(itemId);
+    const isExpandedBefore = (0, _useTreeViewExpansion.selectorIsItemExpanded)(store.value, itemId);
     instance.setItemExpansion(event, itemId, !isExpandedBefore);
   });
   const setItemExpansion = (0, _useEventCallback.default)((event, itemId, isExpanded) => {
-    const isExpandedBefore = instance.isItemExpanded(itemId);
+    const isExpandedBefore = (0, _useTreeViewExpansion.selectorIsItemExpanded)(store.value, itemId);
     if (isExpandedBefore === isExpanded) {
       return;
     }
@@ -48,9 +65,12 @@ const useTreeViewExpansion = ({
     setExpandedItems(event, newExpanded);
   });
   const expandAllSiblings = (event, itemId) => {
-    const itemMeta = instance.getItemMeta(itemId);
-    const siblings = instance.getItemOrderedChildrenIds(itemMeta.parentId);
-    const diff = siblings.filter(child => instance.isItemExpandable(child) && !instance.isItemExpanded(child));
+    const itemMeta = (0, _useTreeViewItems.selectorItemMeta)(store.value, itemId);
+    if (itemMeta == null) {
+      return;
+    }
+    const siblings = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(store.value, itemMeta.parentId);
+    const diff = siblings.filter(child => (0, _useTreeViewExpansion.selectorIsItemExpandable)(store.value, child) && !(0, _useTreeViewExpansion.selectorIsItemExpanded)(store.value, child));
     const newExpanded = models.expandedItems.value.concat(diff);
     if (diff.length > 0) {
       if (params.onItemExpansionToggle) {
@@ -61,30 +81,14 @@ const useTreeViewExpansion = ({
       setExpandedItems(event, newExpanded);
     }
   };
-  const expansionTrigger = React.useMemo(() => {
-    if (params.expansionTrigger) {
-      return params.expansionTrigger;
-    }
-    if (instance.isTreeViewEditable) {
-      return 'iconContainer';
-    }
-    return 'content';
-  }, [params.expansionTrigger, instance.isTreeViewEditable]);
   return {
     publicAPI: {
       setItemExpansion
     },
     instance: {
-      isItemExpanded,
-      isItemExpandable,
       setItemExpansion,
       toggleItemExpansion,
       expandAllSiblings
-    },
-    contextValue: {
-      expansion: {
-        expansionTrigger
-      }
     }
   };
 };
@@ -100,6 +104,12 @@ useTreeViewExpansion.getDefaultizedParams = ({
 }) => (0, _extends2.default)({}, params, {
   defaultExpandedItems: params.defaultExpandedItems ?? DEFAULT_EXPANDED_ITEMS
 });
+useTreeViewExpansion.getInitialState = params => ({
+  expansion: {
+    expandedItemsMap: (0, _useTreeViewExpansion2.createExpandedItemsMap)(params.expandedItems === undefined ? params.defaultExpandedItems : params.expandedItems),
+    expansionTrigger: (0, _useTreeViewExpansion2.getExpansionTrigger)(params)
+  }
+});
 useTreeViewExpansion.params = {
   expandedItems: true,
   defaultExpandedItems: true,

package/node/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorItemExpansionTrigger = exports.selectorIsItemExpanded = exports.selectorIsItemExpandable = void 0;
+var _selectors = require("../../utils/selectors");
+var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
+const selectorExpansion = state => state.expansion;
+
+/**
+ * Check if an item is expanded.
+ * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
+ * @returns {boolean} `true` if the item is expanded, `false` otherwise.
+ */
+const selectorIsItemExpanded = exports.selectorIsItemExpanded = (0, _selectors.createSelector)([selectorExpansion, (_, itemId) => itemId], (expansionState, itemId) => expansionState.expandedItemsMap.has(itemId));
+
+/**
+ * Check if an item is expandable.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @returns {boolean} `true` if the item is expandable, `false` otherwise.
+ */
+const selectorIsItemExpandable = exports.selectorIsItemExpandable = (0, _selectors.createSelector)([_useTreeViewItems.selectorItemMeta], itemMeta => itemMeta?.expandable ?? false);
+
+/**
+ * Get the slot that triggers the item's expansion when clicked.
+ * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
+ * @returns {'content' | 'iconContainer'} The slot that triggers the item's expansion when clicked. Is `null` if the item is not expandable.
+ */
+const selectorItemExpansionTrigger = exports.selectorItemExpansionTrigger = (0, _selectors.createSelector)([selectorExpansion], expansionState => expansionState.expansionTrigger);

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getExpansionTrigger = exports.createExpandedItemsMap = void 0;
+const createExpandedItemsMap = expandedItems => {
+  const expandedItemsMap = new Map();
+  expandedItems.forEach(id => {
+    expandedItemsMap.set(id, true);
+  });
+  return expandedItemsMap;
+};
+exports.createExpandedItemsMap = createExpandedItemsMap;
+const getExpansionTrigger = ({
+  isItemEditable,
+  expansionTrigger
+}) => {
+  if (expansionTrigger) {
+    return expansionTrigger;
+  }
+  if (isItemEditable) {
+    return 'iconContainer';
+  }
+  return 'content';
+};
+exports.getExpansionTrigger = getExpansionTrigger;