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

package/legacy/index.js

@@ -1,9 +1,10 @@
 /**
- * @mui/x-tree-view v6.0.0-alpha.3
+ * @mui/x-tree-view v6.0.0-alpha.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
 export * from './TreeItem';
-export * from './TreeView';
+export * from './TreeView';
+export { unstable_resetCleanupTracking } from './internals/hooks/useInstanceEventHandler';

package/legacy/internals/TreeViewProvider/TreeViewContext.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+export var DEFAULT_TREE_VIEW_CONTEXT_VALUE = {
+  instance: null,
+  multiSelect: false,
+  disabledItemsFocusable: false,
+  treeId: undefined,
+  icons: {
+    defaultCollapseIcon: null,
+    defaultExpandIcon: null,
+    defaultParentIcon: null,
+    defaultEndIcon: null
+  }
+};
+
+/**
+ * @ignore - internal component.
+ */
+export var TreeViewContext = /*#__PURE__*/React.createContext(DEFAULT_TREE_VIEW_CONTEXT_VALUE);
+if (process.env.NODE_ENV !== 'production') {
+  TreeViewContext.displayName = 'TreeViewContext';
+}

package/legacy/internals/TreeViewProvider/TreeViewProvider.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { TreeViewContext } from './TreeViewContext';
+import { DescendantProvider } from './DescendantProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Sets up the contexts for the underlying TreeItem components.
+ *
+ * @ignore - do not document.
+ */
+export function TreeViewProvider(props) {
+  var value = props.value,
+    children = props.children;
+  return /*#__PURE__*/_jsx(TreeViewContext.Provider, {
+    value: value,
+    children: /*#__PURE__*/_jsx(DescendantProvider, {
+      children: children
+    })
+  });
+}

package/legacy/internals/TreeViewProvider/TreeViewProvider.types.js

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

package/legacy/internals/TreeViewProvider/index.js

@@ -0,0 +1 @@
+export { TreeViewProvider } from './TreeViewProvider';

package/legacy/internals/TreeViewProvider/useTreeViewContext.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { TreeViewContext } from './TreeViewContext';
+export var useTreeViewContext = function useTreeViewContext() {
+  return React.useContext(TreeViewContext);
+};

package/legacy/internals/corePlugins/corePlugins.js

@@ -0,0 +1,6 @@
+import { useTreeViewInstanceEvents } from './useTreeViewInstanceEvents';
+/**
+ * Internal plugins that creates the tools used by the other plugins.
+ * These plugins are used by the tree view components.
+ */
+export var TREE_VIEW_CORE_PLUGINS = [useTreeViewInstanceEvents];

package/legacy/internals/corePlugins/index.js

@@ -0,0 +1 @@
+export { TREE_VIEW_CORE_PLUGINS } from './corePlugins';

package/legacy/internals/corePlugins/useTreeViewInstanceEvents/index.js

@@ -0,0 +1 @@
+export { useTreeViewInstanceEvents } from './useTreeViewInstanceEvents';

package/legacy/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.js

@@ -0,0 +1,45 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+import { EventManager } from '../../utils/EventManager';
+import { populateInstance } from '../../useTreeView/useTreeView.utils';
+var isSyntheticEvent = function isSyntheticEvent(event) {
+  return event.isPropagationStopped !== undefined;
+};
+
+/**
+ * Plugin responsible for the registration of the nodes defined as JSX children of the TreeView.
+ * When we will have both a SimpleTreeView using JSX children and a TreeView using a data prop,
+ * this plugin will only be used by SimpleTreeView.
+ */
+export var useTreeViewInstanceEvents = function useTreeViewInstanceEvents(_ref) {
+  var instance = _ref.instance;
+  var _React$useState = React.useState(function () {
+      return new EventManager();
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 1),
+    eventManager = _React$useState2[0];
+  var publishEvent = React.useCallback(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    var name = args[0],
+      params = args[1],
+      _args$ = args[2],
+      event = _args$ === void 0 ? {} : _args$;
+    event.defaultMuiPrevented = false;
+    if (isSyntheticEvent(event) && event.isPropagationStopped()) {
+      return;
+    }
+    eventManager.emit(name, params, event);
+  }, [eventManager]);
+  var subscribeEvent = React.useCallback(function (event, handler) {
+    eventManager.on(event, handler);
+    return function () {
+      eventManager.removeListener(event, handler);
+    };
+  }, [eventManager]);
+  populateInstance(instance, {
+    $$publishEvent: publishEvent,
+    $$subscribeEvent: subscribeEvent
+  });
+};

package/legacy/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.types.js

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

package/legacy/internals/hooks/useInstanceEventHandler.js

@@ -0,0 +1,87 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import * as React from 'react';
+import { TimerBasedCleanupTracking } from '../utils/cleanupTracking/TimerBasedCleanupTracking';
+import { FinalizationRegistryBasedCleanupTracking } from '../utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking';
+// We use class to make it easier to detect in heap snapshots by name
+var ObjectToBeRetainedByReact = /*#__PURE__*/_createClass(function ObjectToBeRetainedByReact() {
+  _classCallCheck(this, ObjectToBeRetainedByReact);
+}); // Based on https://github.com/Bnaya/use-dispose-uncommitted/blob/main/src/finalization-registry-based-impl.ts
+// Check https://github.com/facebook/react/issues/15317 to get more information
+export function createUseInstanceEventHandler(registryContainer) {
+  var cleanupTokensCounter = 0;
+  return function useInstanceEventHandler(instance, eventName, handler) {
+    if (registryContainer.registry === null) {
+      registryContainer.registry = typeof FinalizationRegistry !== 'undefined' ? new FinalizationRegistryBasedCleanupTracking() : new TimerBasedCleanupTracking();
+    }
+    var _React$useState = React.useState(new ObjectToBeRetainedByReact()),
+      _React$useState2 = _slicedToArray(_React$useState, 1),
+      objectRetainedByReact = _React$useState2[0];
+    var subscription = React.useRef(null);
+    var handlerRef = React.useRef();
+    handlerRef.current = handler;
+    var cleanupTokenRef = React.useRef(null);
+    if (!subscription.current && handlerRef.current) {
+      var enhancedHandler = function enhancedHandler(params, event) {
+        if (!event.defaultMuiPrevented) {
+          var _handlerRef$current;
+          (_handlerRef$current = handlerRef.current) == null || _handlerRef$current.call(handlerRef, params, event);
+        }
+      };
+      subscription.current = instance.$$subscribeEvent(eventName, enhancedHandler);
+      cleanupTokensCounter += 1;
+      cleanupTokenRef.current = {
+        cleanupToken: cleanupTokensCounter
+      };
+      registryContainer.registry.register(objectRetainedByReact,
+      // The callback below will be called once this reference stops being retained
+      function () {
+        var _subscription$current;
+        (_subscription$current = subscription.current) == null || _subscription$current.call(subscription);
+        subscription.current = null;
+        cleanupTokenRef.current = null;
+      }, cleanupTokenRef.current);
+    } else if (!handlerRef.current && subscription.current) {
+      subscription.current();
+      subscription.current = null;
+      if (cleanupTokenRef.current) {
+        registryContainer.registry.unregister(cleanupTokenRef.current);
+        cleanupTokenRef.current = null;
+      }
+    }
+    React.useEffect(function () {
+      if (!subscription.current && handlerRef.current) {
+        var _enhancedHandler = function _enhancedHandler(params, event) {
+          if (!event.defaultMuiPrevented) {
+            var _handlerRef$current2;
+            (_handlerRef$current2 = handlerRef.current) == null || _handlerRef$current2.call(handlerRef, params, event);
+          }
+        };
+        subscription.current = instance.$$subscribeEvent(eventName, _enhancedHandler);
+      }
+      if (cleanupTokenRef.current && registryContainer.registry) {
+        // If the effect was called, it means that this render was committed
+        // so we can trust the cleanup function to remove the listener.
+        registryContainer.registry.unregister(cleanupTokenRef.current);
+        cleanupTokenRef.current = null;
+      }
+      return function () {
+        var _subscription$current2;
+        (_subscription$current2 = subscription.current) == null || _subscription$current2.call(subscription);
+        subscription.current = null;
+      };
+    }, [instance, eventName]);
+  };
+}
+var registryContainer = {
+  registry: null
+};
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export var unstable_resetCleanupTracking = function unstable_resetCleanupTracking() {
+  var _registryContainer$re;
+  (_registryContainer$re = registryContainer.registry) == null || _registryContainer$re.reset();
+  registryContainer.registry = null;
+};
+export var useInstanceEventHandler = createUseInstanceEventHandler(registryContainer);

package/legacy/internals/models/events.js

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

package/legacy/internals/models/helpers.js

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

package/legacy/internals/models/index.js

@@ -0,0 +1,3 @@
+export * from './helpers';
+export * from './plugin';
+export * from './treeView';

package/legacy/internals/models/plugin.js

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

package/legacy/internals/models/treeView.js

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

package/legacy/internals/plugins/defaultPlugins.js

@@ -0,0 +1,9 @@
+import { useTreeViewNodes } from './useTreeViewNodes';
+import { useTreeViewExpansion } from './useTreeViewExpansion';
+import { useTreeViewSelection } from './useTreeViewSelection';
+import { useTreeViewFocus } from './useTreeViewFocus';
+import { useTreeViewKeyboardNavigation } from './useTreeViewKeyboardNavigation';
+import { useTreeViewContextValueBuilder } from './useTreeViewContextValueBuilder';
+export var DEFAULT_TREE_VIEW_PLUGINS = [useTreeViewNodes, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewContextValueBuilder];
+
+// We can't infer this type from the plugin, otherwise we would lose the generics.

package/legacy/internals/plugins/index.js

@@ -0,0 +1 @@
+export { DEFAULT_TREE_VIEW_PLUGINS } from './defaultPlugins';

package/legacy/internals/plugins/useTreeViewContextValueBuilder/index.js

@@ -0,0 +1 @@
+export { useTreeViewContextValueBuilder } from './useTreeViewContextValueBuilder';

package/legacy/internals/plugins/useTreeViewContextValueBuilder/useTreeViewContextValueBuilder.js

@@ -0,0 +1,25 @@
+import useId from '@mui/utils/useId';
+export var useTreeViewContextValueBuilder = function useTreeViewContextValueBuilder(_ref) {
+  var instance = _ref.instance,
+    params = _ref.params;
+  var treeId = useId(params.id);
+  return {
+    getRootProps: function getRootProps() {
+      return {
+        id: treeId
+      };
+    },
+    contextValue: {
+      treeId: treeId,
+      instance: instance,
+      multiSelect: params.multiSelect,
+      disabledItemsFocusable: params.disabledItemsFocusable,
+      icons: {
+        defaultCollapseIcon: params.defaultCollapseIcon,
+        defaultEndIcon: params.defaultEndIcon,
+        defaultExpandIcon: params.defaultExpandIcon,
+        defaultParentIcon: params.defaultParentIcon
+      }
+    }
+  };
+};

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

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

package/legacy/internals/plugins/useTreeViewExpansion/index.js

@@ -0,0 +1 @@
+export { useTreeViewExpansion } from './useTreeViewExpansion';

package/legacy/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -0,0 +1,66 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
+import { populateInstance } from '../../useTreeView/useTreeView.utils';
+export var useTreeViewExpansion = function useTreeViewExpansion(_ref) {
+  var instance = _ref.instance,
+    params = _ref.params,
+    models = _ref.models;
+  var isNodeExpanded = React.useCallback(function (nodeId) {
+    return Array.isArray(models.expanded.value) ? models.expanded.value.indexOf(nodeId) !== -1 : false;
+  }, [models.expanded.value]);
+  var isNodeExpandable = React.useCallback(function (nodeId) {
+    var _instance$getNode;
+    return !!((_instance$getNode = instance.getNode(nodeId)) != null && _instance$getNode.expandable);
+  }, [instance]);
+  var toggleNodeExpansion = useEventCallback(function (event, nodeId) {
+    if (nodeId == null) {
+      return;
+    }
+    var newExpanded;
+    if (models.expanded.value.indexOf(nodeId) !== -1) {
+      newExpanded = models.expanded.value.filter(function (id) {
+        return id !== nodeId;
+      });
+    } else {
+      newExpanded = [nodeId].concat(models.expanded.value);
+    }
+    if (params.onNodeToggle) {
+      params.onNodeToggle(event, newExpanded);
+    }
+    models.expanded.setValue(newExpanded);
+  });
+  var expandAllSiblings = function expandAllSiblings(event, nodeId) {
+    var node = instance.getNode(nodeId);
+    var siblings = instance.getChildrenIds(node.parentId);
+    var diff = siblings.filter(function (child) {
+      return instance.isNodeExpandable(child) && !instance.isNodeExpanded(child);
+    });
+    var newExpanded = models.expanded.value.concat(diff);
+    if (diff.length > 0) {
+      models.expanded.setValue(newExpanded);
+      if (params.onNodeToggle) {
+        params.onNodeToggle(event, newExpanded);
+      }
+    }
+  };
+  populateInstance(instance, {
+    isNodeExpanded: isNodeExpanded,
+    isNodeExpandable: isNodeExpandable,
+    toggleNodeExpansion: toggleNodeExpansion,
+    expandAllSiblings: expandAllSiblings
+  });
+};
+useTreeViewExpansion.models = {
+  expanded: {
+    controlledProp: 'expanded',
+    defaultProp: 'defaultExpanded'
+  }
+};
+var DEFAULT_EXPANDED = [];
+useTreeViewExpansion.getDefaultizedParams = function (params) {
+  var _params$defaultExpand;
+  return _extends({}, params, {
+    defaultExpanded: (_params$defaultExpand = params.defaultExpanded) != null ? _params$defaultExpand : DEFAULT_EXPANDED
+  });
+};

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

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

package/legacy/internals/plugins/useTreeViewFocus/index.js

@@ -0,0 +1 @@
+export { useTreeViewFocus } from './useTreeViewFocus';

package/legacy/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -0,0 +1,87 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
+import ownerDocument from '@mui/utils/ownerDocument';
+import { populateInstance } from '../../useTreeView/useTreeView.utils';
+import { useInstanceEventHandler } from '../../hooks/useInstanceEventHandler';
+export var useTreeViewFocus = function useTreeViewFocus(_ref) {
+  var instance = _ref.instance,
+    params = _ref.params,
+    state = _ref.state,
+    setState = _ref.setState,
+    models = _ref.models,
+    rootRef = _ref.rootRef;
+  var setFocusedNodeId = useEventCallback(function (nodeId) {
+    var cleanNodeId = typeof nodeId === 'function' ? nodeId(state.focusedNodeId) : nodeId;
+    setState(function (prevState) {
+      return _extends({}, prevState, {
+        focusedNodeId: cleanNodeId
+      });
+    });
+  });
+  var isNodeFocused = React.useCallback(function (nodeId) {
+    return state.focusedNodeId === nodeId;
+  }, [state.focusedNodeId]);
+  var focusNode = useEventCallback(function (event, nodeId) {
+    if (nodeId) {
+      setFocusedNodeId(nodeId);
+      if (params.onNodeFocus) {
+        params.onNodeFocus(event, nodeId);
+      }
+    }
+  });
+  populateInstance(instance, {
+    isNodeFocused: isNodeFocused,
+    focusNode: focusNode
+  });
+  useInstanceEventHandler(instance, 'removeNode', function (_ref2) {
+    var id = _ref2.id;
+    setFocusedNodeId(function (oldFocusedNodeId) {
+      if (oldFocusedNodeId === id && rootRef.current === ownerDocument(rootRef.current).activeElement) {
+        return instance.getChildrenIds(null)[0];
+      }
+      return oldFocusedNodeId;
+    });
+  });
+  var createHandleFocus = function createHandleFocus(otherHandlers) {
+    return function (event) {
+      var _otherHandlers$onFocu;
+      (_otherHandlers$onFocu = otherHandlers.onFocus) == null || _otherHandlers$onFocu.call(otherHandlers, event);
+
+      // if the event bubbled (which is React specific) we don't want to steal focus
+      if (event.target === event.currentTarget) {
+        var firstSelected = Array.isArray(models.selected.value) ? models.selected.value[0] : models.selected.value;
+        instance.focusNode(event, firstSelected || instance.getNavigableChildrenIds(null)[0]);
+      }
+    };
+  };
+  var createHandleBlur = function createHandleBlur(otherHandlers) {
+    return function (event) {
+      var _otherHandlers$onBlur;
+      (_otherHandlers$onBlur = otherHandlers.onBlur) == null || _otherHandlers$onBlur.call(otherHandlers, event);
+      setFocusedNodeId(null);
+    };
+  };
+  var focusedNode = instance.getNode(state.focusedNodeId);
+  var activeDescendant = focusedNode ? focusedNode.idAttribute : null;
+  return {
+    getRootProps: function getRootProps(otherHandlers) {
+      return {
+        onFocus: createHandleFocus(otherHandlers),
+        onBlur: createHandleBlur(otherHandlers),
+        'aria-activedescendant': activeDescendant != null ? activeDescendant : undefined
+      };
+    }
+  };
+};
+useTreeViewFocus.getInitialState = function () {
+  return {
+    focusedNodeId: null
+  };
+};
+useTreeViewFocus.getDefaultizedParams = function (params) {
+  var _params$disabledItems;
+  return _extends({}, params, {
+    disabledItemsFocusable: (_params$disabledItems = params.disabledItemsFocusable) != null ? _params$disabledItems : false
+  });
+};

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

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

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

@@ -0,0 +1 @@
+export { useTreeViewKeyboardNavigation } from './useTreeViewKeyboardNavigation';