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

package/node/TreeItem/TreeItem.js

@@ -17,10 +17,10 @@ var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _unsupportedProp = _interopRequireDefault(require("@mui/utils/unsupportedProp"));
 var _elementTypeAcceptingRef = _interopRequireDefault(require("@mui/utils/elementTypeAcceptingRef"));
 var _base = require("@mui/base");
-var _TreeViewContext = require("../TreeView/TreeViewContext");
-var _descendants = require("../TreeView/descendants");
+var _DescendantProvider = require("../internals/TreeViewProvider/DescendantProvider");
 var _TreeItemContent = require("./TreeItemContent");
 var _treeItemClasses = require("./treeItemClasses");
+var _useTreeViewContext = require("../internals/TreeViewProvider/useTreeViewContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "collapseIcon", "ContentComponent", "ContentProps", "endIcon", "expandIcon", "disabled", "icon", "id", "label", "nodeId", "onClick", "onMouseDown", "TransitionComponent", "TransitionProps"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -67,6 +67,8 @@ const StyledTreeItemContent = (0, _styles.styled)(_TreeItemContent.TreeItemConte
 }) => ({
   padding: '0 8px',
   width: '100%',
+  boxSizing: 'border-box',
+  // prevent width + padding to overflow
   display: 'flex',
   alignItems: 'center',
   cursor: 'pointer',
@@ -109,10 +111,12 @@ const StyledTreeItemContent = (0, _styles.styled)(_TreeItemContent.TreeItemConte
     }
   },
   [`& .${_treeItemClasses.treeItemClasses.label}`]: (0, _extends2.default)({
+    paddingLeft: 4,
     width: '100%',
+    boxSizing: 'border-box',
+    // prevent width + padding to overflow
     // fixes overflow - see https://github.com/mui/material-ui/issues/27372
     minWidth: 0,
-    paddingLeft: 4,
     position: 'relative'
   }, theme.typography.body1)
 }));
@@ -130,11 +134,11 @@ const TreeItemGroup = (0, _styles.styled)(_Collapse.default, {
  *
  * Demos:
  *
- * - [Tree View](https://mui.com/material-ui/react-tree-view/)
+ * - [Tree View](https://mui.com/x/react-tree-view/)
  *
  * API:
  *
- * - [TreeItem API](https://mui.com/material-ui/api/tree-item/)
+ * - [TreeItem API](https://mui.com/x/api/tree-view/tree-item/)
  */
 const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, ref) {
   const props = (0, _styles.useThemeProps)({
@@ -162,19 +166,11 @@ const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, ref) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
     icons: contextIcons,
-    focus,
-    isExpanded,
-    isFocused,
-    isSelected,
-    isDisabled,
     multiSelect,
     disabledItemsFocusable,
-    mapFirstChar,
-    unMapFirstChar,
-    registerNode,
-    unregisterNode,
-    treeId
-  } = React.useContext(_TreeViewContext.TreeViewContext);
+    treeId,
+    instance
+  } = (0, _useTreeViewContext.useTreeViewContext)();
   let id;
   if (idProp != null) {
     id = idProp;
@@ -191,12 +187,12 @@ const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, ref) {
   const {
     index,
     parentId
-  } = (0, _descendants.useDescendant)(descendant);
+  } = (0, _DescendantProvider.useDescendant)(descendant);
   const expandable = Boolean(Array.isArray(children) ? children.length : children);
-  const expanded = isExpanded ? isExpanded(nodeId) : false;
-  const focused = isFocused ? isFocused(nodeId) : false;
-  const selected = isSelected ? isSelected(nodeId) : false;
-  const disabled = isDisabled ? isDisabled(nodeId) : false;
+  const expanded = instance ? instance.isNodeExpanded(nodeId) : false;
+  const focused = instance ? instance.isNodeFocused(nodeId) : false;
+  const selected = instance ? instance.isNodeSelected(nodeId) : false;
+  const disabled = instance ? instance.isNodeDisabled(nodeId) : false;
   const ownerState = (0, _extends2.default)({}, props, {
     expanded,
     focused,
@@ -220,8 +216,8 @@ const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, ref) {
   }
   React.useEffect(() => {
     // On the first render a node's index will be -1. We want to wait for the real index.
-    if (registerNode && unregisterNode && index !== -1) {
-      registerNode({
+    if (instance && index !== -1) {
+      instance.updateNode({
         id: nodeId,
         idAttribute: id,
         index,
@@ -229,21 +225,16 @@ const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, ref) {
         expandable,
         disabled: disabledProp
       });
-      return () => {
-        unregisterNode(nodeId);
-      };
+      return () => instance.removeNode(nodeId);
     }
     return undefined;
-  }, [registerNode, unregisterNode, parentId, index, nodeId, expandable, disabledProp, id]);
+  }, [instance, parentId, index, nodeId, expandable, disabledProp, id]);
   React.useEffect(() => {
-    if (mapFirstChar && unMapFirstChar && label) {
-      mapFirstChar(nodeId, (contentRef.current?.textContent ?? '').substring(0, 1).toLowerCase());
-      return () => {
-        unMapFirstChar(nodeId);
-      };
+    if (instance && label) {
+      return instance.mapFirstChar(nodeId, (contentRef.current?.textContent ?? '').substring(0, 1).toLowerCase());
     }
     return undefined;
-  }, [mapFirstChar, unMapFirstChar, nodeId, label]);
+  }, [instance, nodeId, label]);
   let ariaSelected;
   if (multiSelect) {
     ariaSelected = selected;
@@ -270,8 +261,8 @@ const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, ref) {
       });
     }
     const unfocusable = !disabledItemsFocusable && disabled;
-    if (!focused && event.currentTarget === event.target && !unfocusable) {
-      focus(event, nodeId);
+    if (instance && !focused && event.currentTarget === event.target && !unfocusable) {
+      instance.focusNode(event, nodeId);
     }
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TreeItemRoot, (0, _extends2.default)({
@@ -306,7 +297,7 @@ const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, ref) {
       expansionIcon: expansionIcon,
       displayIcon: displayIcon,
       ownerState: ownerState
-    }, ContentProps)), children && /*#__PURE__*/(0, _jsxRuntime.jsx)(_descendants.DescendantProvider, {
+    }, ContentProps)), children && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DescendantProvider.DescendantProvider, {
       id: nodeId,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeItemGroup, (0, _extends2.default)({
         as: TransitionComponent,

package/node/TreeItem/useTreeItem.js

@@ -4,57 +4,46 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTreeItem = useTreeItem;
-var React = _interopRequireWildcard(require("react"));
-var _TreeViewContext = require("../TreeView/TreeViewContext");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _useTreeViewContext = require("../internals/TreeViewProvider/useTreeViewContext");
 function useTreeItem(nodeId) {
   const {
-    focus,
-    isExpanded,
-    isExpandable,
-    isFocused,
-    isDisabled,
-    isSelected,
-    multiSelect,
-    selectNode,
-    selectRange,
-    toggleExpansion
-  } = React.useContext(_TreeViewContext.TreeViewContext);
-  const expandable = isExpandable ? isExpandable(nodeId) : false;
-  const expanded = isExpanded ? isExpanded(nodeId) : false;
-  const focused = isFocused ? isFocused(nodeId) : false;
-  const disabled = isDisabled ? isDisabled(nodeId) : false;
-  const selected = isSelected ? isSelected(nodeId) : false;
+    instance,
+    multiSelect
+  } = (0, _useTreeViewContext.useTreeViewContext)();
+  const expandable = instance ? instance.isNodeExpandable(nodeId) : false;
+  const expanded = instance ? instance.isNodeExpanded(nodeId) : false;
+  const focused = instance ? instance.isNodeFocused(nodeId) : false;
+  const selected = instance ? instance.isNodeSelected(nodeId) : false;
+  const disabled = instance ? instance.isNodeDisabled(nodeId) : false;
   const handleExpansion = event => {
-    if (!disabled) {
+    if (instance && !disabled) {
       if (!focused) {
-        focus(event, nodeId);
+        instance.focusNode(event, nodeId);
       }
       const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
 
       // If already expanded and trying to toggle selection don't close
-      if (expandable && !(multiple && isExpanded(nodeId))) {
-        toggleExpansion(event, nodeId);
+      if (expandable && !(multiple && instance.isNodeExpanded(nodeId))) {
+        instance.toggleNodeExpansion(event, nodeId);
       }
     }
   };
   const handleSelection = event => {
-    if (!disabled) {
+    if (instance && !disabled) {
       if (!focused) {
-        focus(event, nodeId);
+        instance.focusNode(event, nodeId);
       }
       const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
       if (multiple) {
         if (event.shiftKey) {
-          selectRange(event, {
+          instance.selectRange(event, {
             end: nodeId
           });
         } else {
-          selectNode(event, nodeId, true);
+          instance.selectNode(event, nodeId, true);
         }
       } else {
-        selectNode(event, nodeId);
+        instance.selectNode(event, nodeId);
       }
     }
   };