@mui/x-tree-view 6.0.0-alpha.0

package/node/TreeView/TreeView.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/TreeView/TreeViewContext.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeViewContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+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; }
+/**
+ * @ignore - internal component.
+ */
+const TreeViewContext = /*#__PURE__*/React.createContext({
+  registerNode: () => {},
+  unregisterNode: () => {},
+  isFocused: () => false,
+  isSelected: () => false,
+  isExpanded: () => false,
+  isExpandable: () => false,
+  isDisabled: () => false,
+  mapFirstChar: () => {},
+  unMapFirstChar: () => {},
+  focus: () => {},
+  toggleExpansion: () => {},
+  selectNode: () => {},
+  selectRange: () => {},
+  multiSelect: false,
+  disabledItemsFocusable: false,
+  treeId: undefined,
+  icons: {
+    defaultCollapseIcon: null,
+    defaultExpandIcon: null,
+    defaultParentIcon: null,
+    defaultEndIcon: null
+  }
+});
+exports.TreeViewContext = TreeViewContext;
+if (process.env.NODE_ENV !== 'production') {
+  TreeViewContext.displayName = 'TreeViewContext';
+}

package/node/TreeView/descendants.js

@@ -0,0 +1,194 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DescendantProvider = DescendantProvider;
+exports.useDescendant = useDescendant;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["element"];
+/** Credit: https://github.com/reach/reach-ui/blob/86a046f54d53b6420e392b3fa56dd991d9d4e458/packages/descendants/README.md
+ *  Modified slightly to suit our purposes.
+ */
+// To replace with .findIndex() once we stop IE11 support.
+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; }
+function findIndex(array, comp) {
+  for (let i = 0; i < array.length; i += 1) {
+    if (comp(array[i])) {
+      return i;
+    }
+  }
+  return -1;
+}
+function binaryFindElement(array, element) {
+  let start = 0;
+  let end = array.length - 1;
+  while (start <= end) {
+    const middle = Math.floor((start + end) / 2);
+    if (array[middle].element === element) {
+      return middle;
+    }
+
+    // eslint-disable-next-line no-bitwise
+    if (array[middle].element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING) {
+      end = middle - 1;
+    } else {
+      start = middle + 1;
+    }
+  }
+  return start;
+}
+const DescendantContext = /*#__PURE__*/React.createContext({});
+if (process.env.NODE_ENV !== 'production') {
+  DescendantContext.displayName = 'DescendantContext';
+}
+function usePrevious(value) {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+const noop = () => {};
+
+/**
+ * This hook registers our descendant by passing it into an array. We can then
+ * search that array by to find its index when registering it in the component.
+ * We use this for focus management, keyboard navigation, and typeahead
+ * functionality for some components.
+ *
+ * The hook accepts the element node
+ *
+ * Our main goals with this are:
+ *   1) maximum composability,
+ *   2) minimal API friction
+ *   3) SSR compatibility*
+ *   4) concurrent safe
+ *   5) index always up-to-date with the tree despite changes
+ *   6) works with memoization of any component in the tree (hopefully)
+ *
+ * * As for SSR, the good news is that we don't actually need the index on the
+ * server for most use-cases, as we are only using it to determine the order of
+ * composed descendants for keyboard navigation.
+ */
+function useDescendant(descendant) {
+  const [, forceUpdate] = React.useState();
+  const {
+    registerDescendant = noop,
+    unregisterDescendant = noop,
+    descendants = [],
+    parentId = null
+  } = React.useContext(DescendantContext);
+
+  // This will initially return -1 because we haven't registered the descendant
+  // on the first render. After we register, this will then return the correct
+  // index on the following render, and we will re-register descendants
+  // so that everything is up-to-date before the user interacts with a
+  // collection.
+  const index = findIndex(descendants, item => item.element === descendant.element);
+  const previousDescendants = usePrevious(descendants);
+
+  // We also need to re-register descendants any time ANY of the other
+  // descendants have changed. My brain was melting when I wrote this and it
+  // feels a little off, but checking in render and using the result in the
+  // effect's dependency array works well enough.
+  const someDescendantsHaveChanged = descendants.some((newDescendant, position) => {
+    return previousDescendants && previousDescendants[position] && previousDescendants[position].element !== newDescendant.element;
+  });
+
+  // Prevent any flashing
+  (0, _useEnhancedEffect.default)(() => {
+    if (descendant.element) {
+      registerDescendant((0, _extends2.default)({}, descendant, {
+        index
+      }));
+      return () => {
+        unregisterDescendant(descendant.element);
+      };
+    }
+    forceUpdate({});
+    return undefined;
+  }, [registerDescendant, unregisterDescendant, index, someDescendantsHaveChanged, descendant]);
+  return {
+    parentId,
+    index
+  };
+}
+function DescendantProvider(props) {
+  const {
+    children,
+    id
+  } = props;
+  const [items, set] = React.useState([]);
+  const registerDescendant = React.useCallback(_ref => {
+    let {
+        element
+      } = _ref,
+      other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+    set(oldItems => {
+      if (oldItems.length === 0) {
+        // If there are no items, register at index 0 and bail.
+        return [(0, _extends2.default)({}, other, {
+          element,
+          index: 0
+        })];
+      }
+      const index = binaryFindElement(oldItems, element);
+      let newItems;
+      if (oldItems[index] && oldItems[index].element === element) {
+        // If the element is already registered, just use the same array
+        newItems = oldItems;
+      } else {
+        // When registering a descendant, we need to make sure we insert in
+        // into the array in the same order that it appears in the DOM. So as
+        // new descendants are added or maybe some are removed, we always know
+        // that the array is up-to-date and correct.
+        //
+        // So here we look at our registered descendants and see if the new
+        // element we are adding appears earlier than an existing descendant's
+        // DOM node via `node.compareDocumentPosition`. If it does, we insert
+        // the new element at this index. Because `registerDescendant` will be
+        // called in an effect every time the descendants state value changes,
+        // we should be sure that this index is accurate when descendent
+        // elements come or go from our component.
+
+        const newItem = (0, _extends2.default)({}, other, {
+          element,
+          index
+        });
+
+        // If an index is not found we will push the element to the end.
+        newItems = oldItems.slice();
+        newItems.splice(index, 0, newItem);
+      }
+      newItems.forEach((item, position) => {
+        item.index = position;
+      });
+      return newItems;
+    });
+  }, []);
+  const unregisterDescendant = React.useCallback(element => {
+    set(oldItems => oldItems.filter(item => element !== item.element));
+  }, []);
+  const value = React.useMemo(() => ({
+    descendants: items,
+    registerDescendant,
+    unregisterDescendant,
+    parentId: id
+  }), [items, registerDescendant, unregisterDescendant, id]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DescendantContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+process.env.NODE_ENV !== "production" ? DescendantProvider.propTypes = {
+  children: _propTypes.default.node,
+  id: _propTypes.default.string
+} : void 0;

package/node/TreeView/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _TreeView = require("./TreeView");
+Object.keys(_TreeView).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TreeView[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TreeView[key];
+    }
+  });
+});
+var _treeViewClasses = require("./treeViewClasses");
+Object.keys(_treeViewClasses).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _treeViewClasses[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _treeViewClasses[key];
+    }
+  });
+});

package/node/TreeView/treeViewClasses.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTreeViewUtilityClass = getTreeViewUtilityClass;
+exports.treeViewClasses = void 0;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getTreeViewUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiTreeView', slot);
+}
+const treeViewClasses = (0, _generateUtilityClasses.default)('MuiTreeView', ['root']);
+exports.treeViewClasses = treeViewClasses;

package/node/index.js

@@ -0,0 +1,34 @@
+/**
+ * @mui/x-tree-view v6.0.0-alpha.0
+ *
+ * @license MIT
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _TreeItem = require("./TreeItem");
+Object.keys(_TreeItem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TreeItem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TreeItem[key];
+    }
+  });
+});
+var _TreeView = require("./TreeView");
+Object.keys(_TreeView).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TreeView[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TreeView[key];
+    }
+  });
+});

package/node/internals/models.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@mui/x-tree-view",
+  "version": "6.0.0-alpha.0",
+  "description": "The community edition of the tree view components (MUI X).",
+  "author": "MUI Team",
+  "main": "./node/index.js",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mui/mui-x/issues"
+  },
+  "homepage": "https://mui.com/x/react-tree-view/",
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/mui"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "react",
+    "react-component",
+    "mui",
+    "material-ui",
+    "material design",
+    "treeview"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mui/mui-x.git",
+    "directory": "packages/x-tree-view"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.22.6",
+    "@mui/utils": "^5.14.1",
+    "@types/react-transition-group": "^4.4.6",
+    "clsx": "^1.2.1",
+    "prop-types": "^15.8.1",
+    "react-transition-group": "^4.4.5"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/base": "^5.0.0-alpha.87",
+    "@mui/material": "^5.8.6",
+    "@mui/system": "^5.8.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
+  },
+  "setupFiles": [
+    "<rootDir>/src/setupTests.js"
+  ],
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "private": false,
+  "module": "./index.js",
+  "types": "./index.d.ts"
+}