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

package/node/TreeItem/index.js

@@ -5,7 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   TreeItem: true,
-  TreeItemContent: true
+  TreeItemRoot: true,
+  TreeItemContent: true,
+  TreeItemIconContainer: true,
+  TreeItemGroupTransition: true,
+  TreeItemCheckbox: true,
+  TreeItemLabel: true
 };
 Object.defineProperty(exports, "TreeItem", {
   enumerable: true,
@@ -13,10 +18,40 @@ Object.defineProperty(exports, "TreeItem", {
     return _TreeItem.TreeItem;
   }
 });
+Object.defineProperty(exports, "TreeItemCheckbox", {
+  enumerable: true,
+  get: function () {
+    return _TreeItem.TreeItemCheckbox;
+  }
+});
 Object.defineProperty(exports, "TreeItemContent", {
   enumerable: true,
   get: function () {
-    return _TreeItemContent.TreeItemContent;
+    return _TreeItem.TreeItemContent;
+  }
+});
+Object.defineProperty(exports, "TreeItemGroupTransition", {
+  enumerable: true,
+  get: function () {
+    return _TreeItem.TreeItemGroupTransition;
+  }
+});
+Object.defineProperty(exports, "TreeItemIconContainer", {
+  enumerable: true,
+  get: function () {
+    return _TreeItem.TreeItemIconContainer;
+  }
+});
+Object.defineProperty(exports, "TreeItemLabel", {
+  enumerable: true,
+  get: function () {
+    return _TreeItem.TreeItemLabel;
+  }
+});
+Object.defineProperty(exports, "TreeItemRoot", {
+  enumerable: true,
+  get: function () {
+    return _TreeItem.TreeItemRoot;
   }
 });
 var _TreeItem = require("./TreeItem");
@@ -31,17 +66,4 @@ Object.keys(_treeItemClasses).forEach(function (key) {
       return _treeItemClasses[key];
     }
   });
-});
-var _useTreeItemState = require("./useTreeItemState");
-Object.keys(_useTreeItemState).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _useTreeItemState[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _useTreeItemState[key];
-    }
-  });
-});
-var _TreeItemContent = require("./TreeItemContent");
+});

package/node/{TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.js → TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.js}

@@ -1,19 +1,21 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TreeItem2DragAndDropOverlay = TreeItem2DragAndDropOverlay;
+exports.TreeItemDragAndDropOverlay = TreeItemDragAndDropOverlay;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _system = require("@mui/system");
 var _zeroStyled = require("../internals/zero-styled");
 var _jsxRuntime = require("react/jsx-runtime");
-const TreeItem2DragAndDropOverlayRoot = (0, _zeroStyled.styled)('div', {
-  name: 'MuiTreeItem2DragAndDropOverlay',
+const TreeItemDragAndDropOverlayRoot = (0, _zeroStyled.styled)('div', {
+  name: 'MuiTreeItemDragAndDropOverlay',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
   shouldForwardProp: prop => (0, _system.shouldForwardProp)(prop) && prop !== 'action'
@@ -34,43 +36,45 @@ const TreeItem2DragAndDropOverlayRoot = (0, _zeroStyled.styled)('div', {
     style: {
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
       borderRadius: theme.shape.borderRadius,
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.dark} / ${0.15})` : (0, _styles.alpha)(theme.palette.primary.dark, 0.15)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.darkChannel} / ${theme.vars.palette.action.focusOpacity})` : (0, _styles.alpha)(theme.palette.primary.dark, theme.palette.action.focusOpacity)
     }
   }, {
     props: {
       action: 'reorder-above'
     },
-    style: (0, _extends2.default)({
+    style: {
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
-      borderTop: theme.vars ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})` : `1px solid ${(0, _styles.alpha)(theme.palette.grey[900], 0.6)}`
-    }, theme.applyStyles('dark', {
-      borderTopColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` : (0, _styles.alpha)(theme.palette.grey[100], 0.6)
-    }))
+      borderTop: `1px solid ${(theme.vars || theme).palette.action.active}`
+    }
   }, {
     props: {
       action: 'reorder-below'
     },
-    style: (0, _extends2.default)({
+    style: {
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
-      borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})` : `1px solid ${(0, _styles.alpha)(theme.palette.grey[900], 0.6)}`
-    }, theme.applyStyles('dark', {
-      borderBottomColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` : (0, _styles.alpha)(theme.palette.grey[100], 0.6)
-    }))
+      borderBottom: `1px solid ${(theme.vars || theme).palette.action.active}`
+    }
   }, {
     props: {
       action: 'move-to-parent'
     },
-    style: (0, _extends2.default)({
+    style: {
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * calc(var(--TreeView-itemDepth) - 1))',
-      borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})` : `1px solid ${(0, _styles.alpha)(theme.palette.grey[900], 0.6)}`
-    }, theme.applyStyles('dark', {
-      borderBottomColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` : (0, _styles.alpha)(theme.palette.grey[100], 0.6)
-    }))
+      borderBottom: `1px solid ${(theme.vars || theme).palette.action.active}`
+    }
   }]
 }));
-function TreeItem2DragAndDropOverlay(props) {
+function TreeItemDragAndDropOverlay(props) {
   if (props.action == null) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeItem2DragAndDropOverlayRoot, (0, _extends2.default)({}, props));
-}
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeItemDragAndDropOverlayRoot, (0, _extends2.default)({}, props));
+}
+process.env.NODE_ENV !== "production" ? TreeItemDragAndDropOverlay.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  action: _propTypes.default.oneOf(['make-child', 'move-to-parent', 'reorder-above', 'reorder-below']),
+  style: _propTypes.default.object
+} : void 0;

package/node/TreeItemDragAndDropOverlay/index.js

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

package/node/{TreeItem2Icon/TreeItem2Icon.js → TreeItemIcon/TreeItemIcon.js}

@@ -1,11 +1,12 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TreeItem2Icon = TreeItem2Icon;
+exports.TreeItemIcon = TreeItemIcon;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -14,7 +15,7 @@ var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _TreeViewProvider = require("../internals/TreeViewProvider");
 var _icons = require("../icons");
 var _jsxRuntime = require("react/jsx-runtime");
-function TreeItem2Icon(props) {
+function TreeItemIcon(props) {
   const {
     slots,
     slotProps,
@@ -50,7 +51,7 @@ function TreeItem2Icon(props) {
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, (0, _extends2.default)({}, iconProps));
 }
-process.env.NODE_ENV !== "production" ? TreeItem2Icon.propTypes = {
+process.env.NODE_ENV !== "production" ? TreeItemIcon.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |

package/node/TreeItemIcon/index.js

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

package/node/{TreeItem2LabelInput/TreeItem2LabelInput.js → TreeItemLabelInput/TreeItemLabelInput.js}

@@ -4,11 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TreeItem2LabelInput = void 0;
+exports.TreeItemLabelInput = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _zeroStyled = require("../internals/zero-styled");
-const TreeItem2LabelInput = exports.TreeItem2LabelInput = (0, _zeroStyled.styled)('input', {
-  name: 'MuiTreeItem2',
+/**
+ * @ignore - internal component.
+ */
+const TreeItemLabelInput = exports.TreeItemLabelInput = (0, _zeroStyled.styled)('input', {
+  name: 'MuiTreeItem',
   slot: 'LabelInput',
   overridesResolver: (props, styles) => styles.labelInput
 })(({

package/node/TreeItemLabelInput/index.js

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

package/node/{TreeItem2Provider/TreeItem2Provider.js → TreeItemProvider/TreeItemProvider.js}

@@ -4,10 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TreeItem2Provider = TreeItem2Provider;
+exports.TreeItemProvider = TreeItemProvider;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _TreeViewProvider = require("../internals/TreeViewProvider");
-function TreeItem2Provider(props) {
+/**
+ * @ignore - internal component.
+ */
+function TreeItemProvider(props) {
   const {
     children,
     itemId
@@ -22,7 +25,7 @@ function TreeItem2Provider(props) {
     instance
   });
 }
-TreeItem2Provider.propTypes = {
+TreeItemProvider.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |

package/node/TreeItemProvider/index.js

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

package/node/hooks/index.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "useTreeItem2Utils", {
+Object.defineProperty(exports, "useTreeItemUtils", {
   enumerable: true,
   get: function () {
-    return _useTreeItem2Utils.useTreeItem2Utils;
+    return _useTreeItemUtils.useTreeItemUtils;
   }
 });
 Object.defineProperty(exports, "useTreeViewApiRef", {
@@ -16,4 +16,4 @@ Object.defineProperty(exports, "useTreeViewApiRef", {
   }
 });
 var _useTreeViewApiRef = require("./useTreeViewApiRef");
-var _useTreeItem2Utils = require("./useTreeItem2Utils");
+var _useTreeItemUtils = require("./useTreeItemUtils");

package/node/hooks/useTreeItemUtils/index.js

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

package/node/hooks/{useTreeItem2Utils/useTreeItem2Utils.js → useTreeItemUtils/useTreeItemUtils.js}

@@ -1,18 +1,19 @@
 "use strict";
+'use client';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTreeItem2Utils = void 0;
+exports.useTreeItemUtils = void 0;
 var _TreeViewProvider = require("../../internals/TreeViewProvider");
 var _useTreeViewLabel = require("../../internals/plugins/useTreeViewLabel");
 var _plugins = require("../../internals/utils/plugins");
 /**
- * Plugins that need to be present in the Tree View in order for `useTreeItem2Utils` to work correctly.
+ * Plugins that need to be present in the Tree View in order for `useTreeItemUtils` to work correctly.
  */
 
 /**
- * Plugins that `useTreeItem2Utils` can use if they are present, but are not required.
+ * Plugins that `useTreeItemUtils` can use if they are present, but are not required.
  */
 
 const isItemExpandable = reactChildren => {
@@ -21,7 +22,7 @@ const isItemExpandable = reactChildren => {
   }
   return Boolean(reactChildren);
 };
-const useTreeItem2Utils = ({
+const useTreeItemUtils = ({
   itemId,
   children
 }) => {
@@ -144,4 +145,4 @@ const useTreeItem2Utils = ({
     publicAPI
   };
 };
-exports.useTreeItem2Utils = useTreeItem2Utils;
+exports.useTreeItemUtils = useTreeItemUtils;

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v7.22.0
+ * @mui/x-tree-view v8.0.0-alpha.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -19,18 +19,6 @@ Object.defineProperty(exports, "unstable_resetCleanupTracking", {
     return _useInstanceEventHandler.unstable_resetCleanupTracking;
   }
 });
-var _TreeView = require("./TreeView");
-Object.keys(_TreeView).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _TreeView[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _TreeView[key];
-    }
-  });
-});
 var _SimpleTreeView = require("./SimpleTreeView");
 Object.keys(_SimpleTreeView).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -67,51 +55,63 @@ Object.keys(_TreeItem).forEach(function (key) {
     }
   });
 });
-var _TreeItem2 = require("./TreeItem2");
-Object.keys(_TreeItem2).forEach(function (key) {
+var _useTreeItem = require("./useTreeItem");
+Object.keys(_useTreeItem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useTreeItem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useTreeItem[key];
+    }
+  });
+});
+var _TreeItemIcon = require("./TreeItemIcon");
+Object.keys(_TreeItemIcon).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _TreeItem2[key]) return;
+  if (key in exports && exports[key] === _TreeItemIcon[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _TreeItem2[key];
+      return _TreeItemIcon[key];
     }
   });
 });
-var _useTreeItem = require("./useTreeItem2");
-Object.keys(_useTreeItem).forEach(function (key) {
+var _TreeItemProvider = require("./TreeItemProvider");
+Object.keys(_TreeItemProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _useTreeItem[key]) return;
+  if (key in exports && exports[key] === _TreeItemProvider[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _useTreeItem[key];
+      return _TreeItemProvider[key];
     }
   });
 });
-var _TreeItem2Icon = require("./TreeItem2Icon");
-Object.keys(_TreeItem2Icon).forEach(function (key) {
+var _TreeItemDragAndDropOverlay = require("./TreeItemDragAndDropOverlay");
+Object.keys(_TreeItemDragAndDropOverlay).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _TreeItem2Icon[key]) return;
+  if (key in exports && exports[key] === _TreeItemDragAndDropOverlay[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _TreeItem2Icon[key];
+      return _TreeItemDragAndDropOverlay[key];
     }
   });
 });
-var _TreeItem2Provider = require("./TreeItem2Provider");
-Object.keys(_TreeItem2Provider).forEach(function (key) {
+var _TreeItemLabelInput = require("./TreeItemLabelInput");
+Object.keys(_TreeItemLabelInput).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _TreeItem2Provider[key]) return;
+  if (key in exports && exports[key] === _TreeItemLabelInput[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _TreeItem2Provider[key];
+      return _TreeItemLabelInput[key];
     }
   });
 });

package/node/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -71,8 +71,7 @@ const useTreeViewItems = ({
   instance,
   params,
   state,
-  setState,
-  experimentalFeatures
+  setState
 }) => {
   const getItemMeta = React.useCallback(itemId => state.items.itemMetaMap[itemId], [state.items.itemMetaMap]);
   const getItem = React.useCallback(itemId => state.items.itemMap[itemId], [state.items.itemMap]);
@@ -199,8 +198,7 @@ const useTreeViewItems = ({
     contextValue: {
       items: {
         onItemClick: params.onItemClick,
-        disabledItemsFocusable: params.disabledItemsFocusable,
-        indentationAtItemLevel: experimentalFeatures.indentationAtItemLevel ?? false
+        disabledItemsFocusable: params.disabledItemsFocusable
       }
     }
   };

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

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeViewSelectionItemPlugin = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _TreeViewProvider = require("../../TreeViewProvider");
+function getCheckboxStatus({
+  itemId,
+  instance,
+  selectionPropagation,
+  selected
+}) {
+  if (selected) {
+    return {
+      indeterminate: false,
+      checked: true
+    };
+  }
+  const children = instance.getItemOrderedChildrenIds(itemId);
+  if (children.length === 0) {
+    return {
+      indeterminate: false,
+      checked: false
+    };
+  }
+  let hasSelectedDescendant = false;
+  let hasUnSelectedDescendant = false;
+  const traverseDescendants = itemToTraverseId => {
+    if (itemToTraverseId !== itemId) {
+      if (instance.isItemSelected(itemToTraverseId)) {
+        hasSelectedDescendant = true;
+      } else {
+        hasUnSelectedDescendant = true;
+      }
+    }
+    instance.getItemOrderedChildrenIds(itemToTraverseId).forEach(traverseDescendants);
+  };
+  traverseDescendants(itemId);
+  return {
+    indeterminate: hasSelectedDescendant && hasUnSelectedDescendant || !hasUnSelectedDescendant && !selected,
+    checked: selectionPropagation.parents ? hasSelectedDescendant : selected
+  };
+}
+const useTreeViewSelectionItemPlugin = ({
+  props
+}) => {
+  const {
+    itemId
+  } = props;
+  const {
+    instance,
+    selection: {
+      disableSelection,
+      checkboxSelection,
+      selectionPropagation
+    }
+  } = (0, _TreeViewProvider.useTreeViewContext)();
+  return {
+    propsEnhancers: {
+      checkbox: ({
+        externalEventHandlers,
+        interactions,
+        status
+      }) => {
+        const handleChange = event => {
+          externalEventHandlers.onChange?.(event);
+          if (event.defaultMuiPrevented) {
+            return;
+          }
+          if (disableSelection || status.disabled) {
+            return;
+          }
+          interactions.handleCheckboxSelection(event);
+        };
+        const checkboxStatus = getCheckboxStatus({
+          instance,
+          itemId,
+          selectionPropagation,
+          selected: status.selected
+        });
+        return (0, _extends2.default)({
+          visible: checkboxSelection,
+          disabled: disableSelection || status.disabled,
+          tabIndex: -1,
+          onChange: handleChange
+        }, checkboxStatus);
+      }
+    }
+  };
+};
+exports.useTreeViewSelectionItemPlugin = useTreeViewSelectionItemPlugin;