@mui/x-tree-view 8.0.0-alpha.9 → 8.0.0-beta.1

package/modern/useTreeItem/useTreeItem.types.d.ts

@@ -0,0 +1,192 @@
+import * as React from 'react';
+import { TreeViewItemId, TreeViewCancellableEventHandler } from "../models/index.js";
+import { TreeViewPublicAPI } from "../internals/models/index.js";
+import { UseTreeViewSelectionSignature } from "../internals/plugins/useTreeViewSelection/index.js";
+import { UseTreeViewItemsSignature } from "../internals/plugins/useTreeViewItems/index.js";
+import { UseTreeViewFocusSignature } from "../internals/plugins/useTreeViewFocus/index.js";
+import { UseTreeViewKeyboardNavigationSignature } from "../internals/plugins/useTreeViewKeyboardNavigation/index.js";
+import { UseTreeViewLabelSignature } from "../internals/plugins/useTreeViewLabel/index.js";
+import { UseTreeViewExpansionSignature } from "../internals/plugins/useTreeViewExpansion/index.js";
+export interface UseTreeItemParameters {
+  /**
+   * The id attribute of the item. If not provided, it will be generated.
+   */
+  id?: string;
+  /**
+   * If `true`, the item is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * The id of the item.
+   * Must be unique.
+   */
+  itemId: TreeViewItemId;
+  /**
+   * The label of the item.
+   */
+  label?: React.ReactNode;
+  rootRef?: React.Ref<HTMLLIElement>;
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+}
+export interface UseTreeItemContextProviderProps {
+  itemId: string;
+  id: string | undefined;
+}
+export interface UseTreeItemRootSlotPropsFromUseTreeItem {
+  role: 'treeitem';
+  tabIndex: 0 | -1;
+  id: string;
+  'aria-expanded': React.AriaAttributes['aria-expanded'];
+  'aria-selected': React.AriaAttributes['aria-selected'];
+  'aria-disabled': React.AriaAttributes['aria-disabled'];
+  onFocus: TreeViewCancellableEventHandler<React.FocusEvent<HTMLElement>>;
+  onBlur: TreeViewCancellableEventHandler<React.FocusEvent<HTMLElement>>;
+  onKeyDown: TreeViewCancellableEventHandler<React.KeyboardEvent<HTMLElement>>;
+  ref: React.RefCallback<HTMLLIElement>;
+  style: React.CSSProperties;
+}
+export interface UseTreeItemRootSlotOwnProps extends UseTreeItemRootSlotPropsFromUseTreeItem {}
+export type UseTreeItemRootSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItemRootSlotOwnProps;
+export interface UseTreeItemContentSlotPropsFromUseTreeItem {
+  onClick: TreeViewCancellableEventHandler<React.MouseEvent>;
+  onMouseDown: TreeViewCancellableEventHandler<React.MouseEvent>;
+  ref: React.RefCallback<HTMLDivElement> | null;
+  status: UseTreeItemStatus;
+}
+export interface UseTreeItemContentSlotOwnProps extends UseTreeItemContentSlotPropsFromUseTreeItem {}
+export type UseTreeItemContentSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItemContentSlotOwnProps;
+export interface UseTreeItemIconContainerSlotOwnProps {
+  onClick: TreeViewCancellableEventHandler<React.MouseEvent>;
+}
+export type UseTreeItemIconContainerSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItemIconContainerSlotOwnProps;
+export interface UseTreeItemLabelSlotOwnProps {
+  children: React.ReactNode;
+  onDoubleClick: TreeViewCancellableEventHandler<React.MouseEvent>;
+}
+export type UseTreeItemLabelSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItemLabelSlotOwnProps;
+export interface UseTreeItemLabelInputSlotOwnProps {}
+export type UseTreeItemLabelInputSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItemLabelInputSlotOwnProps;
+export interface UseTreeItemCheckboxSlotOwnProps {
+  ref: React.RefObject<HTMLButtonElement | null>;
+}
+export type UseTreeItemCheckboxSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItemCheckboxSlotOwnProps;
+export type UseTreeItemErrorContainerSlotProps<ExternalProps = {}> = ExternalProps & {};
+export type UseTreeItemLoadingContainerSlotProps<ExternalProps = {}> = ExternalProps & {
+  size: string;
+  thickness: number;
+};
+export interface UseTreeItemGroupTransitionSlotOwnProps {
+  unmountOnExit: boolean;
+  in: boolean;
+  component: 'ul';
+  role: 'group';
+  children: React.ReactNode;
+}
+export type UseTreeItemGroupTransitionSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItemGroupTransitionSlotOwnProps;
+export interface UseTreeItemDragAndDropOverlaySlotOwnProps {}
+export type UseTreeItemDragAndDropOverlaySlotProps<ExternalProps = {}> = ExternalProps & UseTreeItemDragAndDropOverlaySlotOwnProps;
+export interface UseTreeItemStatus {
+  expandable: boolean;
+  expanded: boolean;
+  focused: boolean;
+  selected: boolean;
+  disabled: boolean;
+  editing: boolean;
+  editable: boolean;
+  loading: boolean;
+  error: boolean;
+}
+export interface UseTreeItemReturnValue<TSignatures extends UseTreeItemMinimalPlugins, TOptionalSignatures extends UseTreeItemOptionalPlugins> {
+  /**
+   * Resolver for the context provider's props.
+   * @returns {UseTreeItemContextProviderProps} Props that should be spread on the context provider slot.
+   */
+  getContextProviderProps: () => UseTreeItemContextProviderProps;
+  /**
+   * Resolver for the root slot's props.
+   * @param {ExternalProps} externalProps Additional props for the root slot.
+   * @returns {UseTreeItemRootSlotProps<ExternalProps>} Props that should be spread on the root slot.
+   */
+  getRootProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItemRootSlotProps<ExternalProps>;
+  /**
+   * Resolver for the content slot's props.
+   * @param {ExternalProps} externalProps Additional props for the content slot.
+   * @returns {UseTreeItemContentSlotProps<ExternalProps>} Props that should be spread on the content slot.
+   */
+  getContentProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItemContentSlotProps<ExternalProps>;
+  /**
+   * Resolver for the label slot's props.
+   * @param {ExternalProps} externalProps Additional props for the label slot.
+   * @returns {UseTreeItemLabelSlotProps<ExternalProps>} Props that should be spread on the label slot.
+   */
+  getLabelProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItemLabelSlotProps<ExternalProps>;
+  /**
+   * Resolver for the labelInput slot's props.
+   * @param {ExternalProps} externalProps Additional props for the labelInput slot.
+   * @returns {UseTreeItemLabelInputSlotProps<ExternalProps>} Props that should be spread on the labelInput slot.
+   */
+  getLabelInputProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItemLabelInputSlotProps<ExternalProps>;
+  /**
+   * Resolver for the checkbox slot's props.
+   * @param {ExternalProps} externalProps Additional props for the checkbox slot.
+   * @returns {UseTreeItemCheckboxSlotProps<ExternalProps>} Props that should be spread on the checkbox slot.
+   */
+  getCheckboxProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItemCheckboxSlotProps<ExternalProps>;
+  /**
+   * Resolver for the iconContainer slot's props.
+   * @param {ExternalProps} externalProps Additional props for the iconContainer slot.
+   * @returns {UseTreeItemIconContainerSlotProps<ExternalProps>} Props that should be spread on the iconContainer slot.
+   */
+  getIconContainerProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItemIconContainerSlotProps<ExternalProps>;
+  /**
+   * Resolver for the GroupTransition slot's props.
+   * @param {ExternalProps} externalProps Additional props for the GroupTransition slot.
+   * @returns {UseTreeItemGroupTransitionSlotProps<ExternalProps>} Props that should be spread on the GroupTransition slot.
+   */
+  getGroupTransitionProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItemGroupTransitionSlotProps<ExternalProps>;
+  /**
+   * Resolver for the DragAndDropOverlay slot's props.
+   * Warning: This slot is only useful when using the `<RichTreeViewPro />` component.
+   * @param {ExternalProps} externalProps Additional props for the DragAndDropOverlay slot.
+   * @returns {UseTreeItemDragAndDropOverlaySlotProps<ExternalProps>} Props that should be spread on the DragAndDropOverlay slot.
+   */
+  getDragAndDropOverlayProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItemDragAndDropOverlaySlotProps<ExternalProps>;
+  /**
+   * Resolver for the ErrorIcon slot's props.
+   * Warning: This slot is only useful when using the `<RichTreeView />` component when lazy loading is enabled.
+   * @param {ExternalProps} externalProps Additional props for the ErrorIcon slot.
+   * @returns {UseTreeItemErrorContainerSlotProps<ExternalProps>} Props that should be spread on the ErrorIcon slot.
+   */
+  getErrorContainerProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItemErrorContainerSlotProps<ExternalProps>;
+  /**
+   * Resolver for the LoadingIcon slot's props.
+   * Warning: This slot is only useful when using the `<RichTreeView />` component when lazy loading is enabled.
+   * @param {ExternalProps} externalProps Additional props for the LoadingIcon slot.
+   * @returns {UseTreeItemLoadingContainerSlotProps<ExternalProps>} Props that should be spread on the LoadingIcon slot.
+   */
+  getLoadingContainerProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItemLoadingContainerSlotProps<ExternalProps>;
+  /**
+   * A ref to the component's root DOM element.
+   */
+  rootRef: React.RefCallback<HTMLLIElement> | null;
+  /**
+   * Current status of the item.
+   */
+  status: UseTreeItemStatus;
+  /**
+   * The object the allows Tree View manipulation.
+   */
+  publicAPI: TreeViewPublicAPI<TSignatures, TOptionalSignatures>;
+}
+/**
+ * Plugins that need to be present in the Tree View in order for `UseTreeItem` to work correctly.
+ */
+export type UseTreeItemMinimalPlugins = readonly [UseTreeViewSelectionSignature, UseTreeViewExpansionSignature, UseTreeViewItemsSignature, UseTreeViewFocusSignature, UseTreeViewKeyboardNavigationSignature, UseTreeViewLabelSignature];
+/**
+ * Plugins that `UseTreeItem` can use if they are present, but are not required.
+ */
+export type UseTreeItemOptionalPlugins = readonly [];

package/modern/utils/cache.d.ts

@@ -0,0 +1,38 @@
+import { TreeViewItemMeta } from "../internals/models/index.js";
+type DataSourceCacheDefaultConfig = {
+  /**
+   * Time To Live for each cache entry in milliseconds.
+   * After this time the cache entry will become stale and the next query will result in cache miss.
+   * @default 300000 (5 minutes)
+   */
+  ttl?: number;
+};
+export interface DataSourceCache {
+  /**
+   * Set the cache entry for the given key.
+   * @param {string} key The key of type `string`
+   * @param {TreeViewItemMeta[]} value The value to be stored in the cache
+   */
+  set: (key: string, value: TreeViewItemMeta[]) => void;
+  /**
+   * Get the cache entry for the given key.
+   * @param {string} key The key of type `string`
+   * @returns {TreeViewItemMeta[]} The value stored in the cache
+   */
+  get: (key: string) => TreeViewItemMeta[] | undefined | -1;
+  /**
+   * Clear the cache.
+   */
+  clear: () => void;
+}
+export declare class DataSourceCacheDefault {
+  private cache;
+  private ttl;
+  constructor({
+    ttl
+  }: DataSourceCacheDefaultConfig);
+  set(key: string, value: TreeViewItemMeta[]): void;
+  get(key: string): TreeViewItemMeta[] | undefined | -1;
+  clear(): void;
+}
+export {};

package/modern/utils/cache.js

@@ -0,0 +1,31 @@
+export class DataSourceCacheDefault {
+  constructor({
+    ttl = 300000
+  }) {
+    this.cache = void 0;
+    this.ttl = void 0;
+    this.cache = {};
+    this.ttl = ttl;
+  }
+  set(key, value) {
+    const expiry = Date.now() + this.ttl;
+    this.cache[key] = {
+      value,
+      expiry
+    };
+  }
+  get(key) {
+    const entry = this.cache[key];
+    if (!entry) {
+      return undefined;
+    }
+    if (Date.now() > entry.expiry) {
+      delete this.cache[key];
+      return -1;
+    }
+    return entry.value;
+  }
+  clear() {
+    this.cache = {};
+  }
+}

package/modern/utils/index.d.ts

@@ -0,0 +1 @@
+export * from "./cache.js";

package/modern/utils/index.js

@@ -0,0 +1 @@
+export * from "./cache.js";

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "8.0.0-alpha.9",
+  "version": "8.0.0-beta.1",
   "description": "The community edition of the Tree View components (MUI X).",
   "author": "MUI Team",
-  "main": "./node/index.js",
+  "main": "./index.js",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/mui/mui-x/issues"
@@ -33,21 +33,21 @@
     "directory": "packages/x-tree-view"
   },
   "dependencies": {
-    "@babel/runtime": "^7.26.0",
-    "@mui/utils": "^5.16.6 || ^6.0.0",
+    "@babel/runtime": "^7.26.10",
+    "@mui/utils": "^7.0.0 || ^7.0.0-beta",
     "@types/react-transition-group": "^4.4.12",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.4.0",
-    "@mui/x-internals": "8.0.0-alpha.9"
+    "@mui/x-internals": "8.0.0-beta.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.15.14 || ^6.0.0",
-    "@mui/system": "^5.15.14 || ^6.0.0",
+    "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0 || ^7.0.0-beta",
+    "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0 || ^7.0.0-beta",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
@@ -63,6 +63,39 @@
     "node": ">=14.0.0"
   },
   "private": false,
-  "module": "./index.js",
+  "module": "./esm/index.js",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "require": {
+        "types": "./index.d.ts",
+        "default": "./index.js"
+      },
+      "import": {
+        "types": "./esm/index.d.ts",
+        "default": "./esm/index.js"
+      },
+      "mui-modern": {
+        "types": "./modern/index.d.ts",
+        "default": "./modern/index.js"
+      }
+    },
+    "./*": {
+      "require": {
+        "types": "./*/index.d.ts",
+        "default": "./*/index.js"
+      },
+      "import": {
+        "types": "./esm/*/index.d.ts",
+        "default": "./esm/*/index.js"
+      },
+      "mui-modern": {
+        "types": "./modern/*/index.d.ts",
+        "default": "./modern/*/index.js"
+      }
+    },
+    "./esm": null,
+    "./modern": null
+  },
   "types": "./index.d.ts"
 }

package/themeAugmentation/components.d.ts

@@ -1,5 +1,4 @@
 import { ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material/styles';
-
 export interface TreeViewComponents<Theme = unknown> {
   MuiSimpleTreeView?: {
     defaultProps?: ComponentsProps['MuiSimpleTreeView'];
@@ -17,7 +16,6 @@ export interface TreeViewComponents<Theme = unknown> {
     variants?: ComponentsVariants<Theme>['MuiTreeItem'];
   };
 }
-
 declare module '@mui/material/styles' {
   interface Components<Theme = unknown> extends TreeViewComponents<Theme> {}
-}
+}

package/themeAugmentation/index.d.ts

@@ -1,3 +1,3 @@
 export type * from './overrides';
 export type * from './props';
-export type * from './components';
+export type * from './components';

package/themeAugmentation/index.js

@@ -0,0 +1 @@
+"use strict";

package/themeAugmentation/overrides.d.ts

@@ -1,6 +1,6 @@
-import { RichTreeViewClassKey } from '../RichTreeView';
-import { SimpleTreeViewClassKey } from '../SimpleTreeView';
-import { TreeItemClassKey } from '../TreeItem';
+import { RichTreeViewClassKey } from "../RichTreeView/index.js";
+import { SimpleTreeViewClassKey } from "../SimpleTreeView/index.js";
+import { TreeItemClassKey } from "../TreeItem/index.js";
 
 // prettier-ignore
 export interface TreeViewComponentNameToClassKey {
@@ -8,10 +8,9 @@ export interface TreeViewComponentNameToClassKey {
   MuiRichTreeView: RichTreeViewClassKey;
   MuiTreeItem: TreeItemClassKey;
 }
-
 declare module '@mui/material/styles' {
   interface ComponentNameToClassKey extends TreeViewComponentNameToClassKey {}
 }
 
 // disable automatic export
-export {};
+export {};

package/themeAugmentation/props.d.ts

@@ -1,16 +1,14 @@
-import { SimpleTreeViewProps } from '../SimpleTreeView';
-import { RichTreeViewProps } from '../RichTreeView';
-import { TreeItemProps } from '../TreeItem';
-
+import { SimpleTreeViewProps } from "../SimpleTreeView/index.js";
+import { RichTreeViewProps } from "../RichTreeView/index.js";
+import { TreeItemProps } from "../TreeItem/index.js";
 export interface TreeViewComponentsPropsList {
   MuiSimpleTreeView: SimpleTreeViewProps<any>;
   MuiRichTreeView: RichTreeViewProps<any, any>;
   MuiTreeItem: TreeItemProps;
 }
-
 declare module '@mui/material/styles' {
   interface ComponentsPropsList extends TreeViewComponentsPropsList {}
 }
 
 // disable automatic export
-export {};
+export {};