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

package/esm/TreeItemIcon/TreeItemIcon.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { TreeItemIconProps } from "./TreeItemIcon.types.js";
+declare function TreeItemIcon(props: TreeItemIconProps): React.JSX.Element | null;
+declare namespace TreeItemIcon {
+  var propTypes: any;
+}
+export { TreeItemIcon };

package/esm/TreeItemIcon/TreeItemIcon.js

@@ -0,0 +1,74 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import resolveComponentProps from '@mui/utils/resolveComponentProps';
+import useSlotProps from '@mui/utils/useSlotProps';
+import { useTreeViewContext } from "../internals/TreeViewProvider/index.js";
+import { TreeViewCollapseIcon, TreeViewExpandIcon } from "../icons/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function TreeItemIcon(props) {
+  const {
+    slots,
+    slotProps,
+    status
+  } = props;
+  const context = useTreeViewContext();
+  const contextIcons = _extends({}, context.icons.slots, {
+    expandIcon: context.icons.slots.expandIcon ?? TreeViewExpandIcon,
+    collapseIcon: context.icons.slots.collapseIcon ?? TreeViewCollapseIcon
+  });
+  const contextIconProps = context.icons.slotProps;
+  let iconName;
+  if (slots?.icon) {
+    iconName = 'icon';
+  } else if (status.expandable) {
+    if (status.expanded) {
+      iconName = 'collapseIcon';
+    } else {
+      iconName = 'expandIcon';
+    }
+  } else {
+    iconName = 'endIcon';
+  }
+  const Icon = slots?.[iconName] ?? contextIcons[iconName];
+  const iconProps = useSlotProps({
+    elementType: Icon,
+    externalSlotProps: tempOwnerState => _extends({}, resolveComponentProps(contextIconProps[iconName], tempOwnerState), resolveComponentProps(slotProps?.[iconName], tempOwnerState)),
+    // TODO: Add proper ownerState
+    ownerState: {}
+  });
+  if (!Icon) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(Icon, _extends({}, iconProps));
+}
+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"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
+  status: PropTypes.shape({
+    disabled: PropTypes.bool.isRequired,
+    editable: PropTypes.bool.isRequired,
+    editing: PropTypes.bool.isRequired,
+    error: PropTypes.bool.isRequired,
+    expandable: PropTypes.bool.isRequired,
+    expanded: PropTypes.bool.isRequired,
+    focused: PropTypes.bool.isRequired,
+    loading: PropTypes.bool.isRequired,
+    selected: PropTypes.bool.isRequired
+  }).isRequired
+} : void 0;
+export { TreeItemIcon };

package/esm/TreeItemIcon/TreeItemIcon.types.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { SlotComponentProps } from '@mui/utils/types';
+import { UseTreeItemStatus } from "../useTreeItem/index.js";
+export interface TreeItemIconSlots {
+  /**
+   * The icon used to collapse the item.
+   */
+  collapseIcon?: React.ElementType;
+  /**
+   * The icon used to expand the item.
+   */
+  expandIcon?: React.ElementType;
+  /**
+   * The icon displayed next to an end item.
+   */
+  endIcon?: React.ElementType;
+  /**
+   * The icon to display next to the Tree Item's label.
+   */
+  icon?: React.ElementType;
+}
+export interface TreeItemIconSlotProps {
+  collapseIcon?: SlotComponentProps<'svg', {}, {}>;
+  expandIcon?: SlotComponentProps<'svg', {}, {}>;
+  endIcon?: SlotComponentProps<'svg', {}, {}>;
+  icon?: SlotComponentProps<'svg', {}, {}>;
+}
+export interface TreeItemIconProps {
+  status: UseTreeItemStatus;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: TreeItemIconSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: TreeItemIconSlotProps;
+}

package/esm/TreeItemIcon/TreeItemIcon.types.js

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

package/esm/TreeItemIcon/index.d.ts

@@ -0,0 +1,2 @@
+export { TreeItemIcon } from "./TreeItemIcon.js";
+export type { TreeItemIconProps, TreeItemIconSlots, TreeItemIconSlotProps } from './TreeItemIcon.types';

package/esm/TreeItemIcon/index.js

@@ -0,0 +1 @@
+export { TreeItemIcon } from "./TreeItemIcon.js";

package/esm/TreeItemLabelInput/TreeItemLabelInput.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @ignore - internal component.
+ */
+declare const TreeItemLabelInput: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof import("react").ClassAttributes<HTMLInputElement> | keyof import("react").InputHTMLAttributes<HTMLInputElement>>, {}>;
+export { TreeItemLabelInput };

package/esm/TreeItemLabelInput/TreeItemLabelInput.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { styled } from "../internals/zero-styled/index.js";
+
+/**
+ * @ignore - internal component.
+ */
+const TreeItemLabelInput = styled('input', {
+  name: 'MuiTreeItem',
+  slot: 'LabelInput',
+  overridesResolver: (props, styles) => styles.labelInput
+})(({
+  theme
+}) => _extends({}, theme.typography.body1, {
+  width: '100%',
+  backgroundColor: theme.palette.background.paper,
+  borderRadius: theme.shape.borderRadius,
+  border: 'none',
+  padding: '0 2px',
+  boxSizing: 'border-box',
+  '&:focus': {
+    outline: `1px solid ${theme.palette.primary.main}`
+  }
+}));
+export { TreeItemLabelInput };

package/esm/TreeItemLabelInput/TreeItemLabelInput.types.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { TreeViewCancellableEventHandler } from "../models/index.js";
+export interface TreeItemLabelInputProps {
+  value?: string;
+  /**
+   * Used to determine if the target of keydown or blur events is the input and prevent the event from propagating to the root.
+   */
+  'data-element'?: 'labelInput';
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  onKeyDown?: TreeViewCancellableEventHandler<React.KeyboardEvent<HTMLInputElement>>;
+  onBlur?: TreeViewCancellableEventHandler<React.FocusEvent<HTMLInputElement>>;
+  autoFocus?: true;
+  type?: 'text';
+}

package/esm/TreeItemLabelInput/TreeItemLabelInput.types.js

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

package/esm/TreeItemLabelInput/index.d.ts

@@ -0,0 +1,2 @@
+export { TreeItemLabelInput } from "./TreeItemLabelInput.js";
+export type { TreeItemLabelInputProps } from './TreeItemLabelInput.types';

package/esm/TreeItemLabelInput/index.js

@@ -0,0 +1 @@
+export { TreeItemLabelInput } from "./TreeItemLabelInput.js";

package/esm/TreeItemProvider/TreeItemProvider.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { TreeItemProviderProps } from "./TreeItemProvider.types.js";
+declare function TreeItemProvider(props: TreeItemProviderProps): React.JSX.Element;
+declare namespace TreeItemProvider {
+  var propTypes: any;
+}
+export { TreeItemProvider };

package/esm/TreeItemProvider/TreeItemProvider.js

@@ -0,0 +1,45 @@
+'use client';
+
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useTreeViewContext } from "../internals/TreeViewProvider/index.js";
+import { generateTreeItemIdAttribute } from "../internals/corePlugins/useTreeViewId/useTreeViewId.utils.js";
+import { useSelector } from "../internals/hooks/useSelector.js";
+import { selectorTreeViewId } from "../internals/corePlugins/useTreeViewId/useTreeViewId.selectors.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function TreeItemProvider(props) {
+  const {
+    children,
+    itemId,
+    id
+  } = props;
+  const {
+    wrapItem,
+    instance,
+    store
+  } = useTreeViewContext();
+  const treeId = useSelector(store, selectorTreeViewId);
+  const idAttribute = generateTreeItemIdAttribute({
+    itemId,
+    treeId,
+    id
+  });
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: wrapItem({
+      children,
+      itemId,
+      instance,
+      idAttribute
+    })
+  });
+}
+process.env.NODE_ENV !== "production" ? TreeItemProvider.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  children: PropTypes.node,
+  id: PropTypes.string,
+  itemId: PropTypes.string.isRequired
+} : void 0;
+export { TreeItemProvider };

package/esm/TreeItemProvider/TreeItemProvider.types.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { TreeViewItemId } from "../models/index.js";
+export interface TreeItemProviderProps {
+  children: React.ReactNode;
+  itemId: TreeViewItemId;
+  id: string | undefined;
+}

package/esm/TreeItemProvider/TreeItemProvider.types.js

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

package/esm/TreeItemProvider/index.d.ts

@@ -0,0 +1,2 @@
+export { TreeItemProvider } from "./TreeItemProvider.js";
+export type { TreeItemProviderProps } from './TreeItemProvider.types';

package/esm/TreeItemProvider/index.js

@@ -0,0 +1 @@
+export { TreeItemProvider } from "./TreeItemProvider.js";

package/esm/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useTreeViewApiRef } from "./useTreeViewApiRef.js";
+export { useTreeItemUtils } from "./useTreeItemUtils/index.js";
+export { useTreeItemModel } from "./useTreeItemModel.js";

package/esm/hooks/index.js

@@ -0,0 +1,3 @@
+export { useTreeViewApiRef } from "./useTreeViewApiRef.js";
+export { useTreeItemUtils } from "./useTreeItemUtils/index.js";
+export { useTreeItemModel } from "./useTreeItemModel.js";

package/esm/hooks/useTreeItemModel.d.ts

@@ -0,0 +1,2 @@
+import { TreeViewBaseItem, TreeViewDefaultItemModelProperties, TreeViewItemId } from "../models/index.js";
+export declare const useTreeItemModel: <R extends {} = TreeViewDefaultItemModelProperties>(itemId: TreeViewItemId) => TreeViewBaseItem<R> | null;

package/esm/hooks/useTreeItemModel.js

@@ -0,0 +1,11 @@
+'use client';
+
+import { useTreeViewContext } from "../internals/TreeViewProvider/index.js";
+import { useSelector } from "../internals/hooks/useSelector.js";
+import { selectorItemModel } from "../internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js";
+export const useTreeItemModel = itemId => {
+  const {
+    store
+  } = useTreeViewContext();
+  return useSelector(store, selectorItemModel, itemId);
+};

package/esm/hooks/useTreeItemUtils/index.d.ts

@@ -0,0 +1 @@
+export { useTreeItemUtils } from "./useTreeItemUtils.js";

package/esm/hooks/useTreeItemUtils/index.js

@@ -0,0 +1 @@
+export { useTreeItemUtils } from "./useTreeItemUtils.js";

package/esm/hooks/useTreeItemUtils/useTreeItemUtils.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import type { UseTreeViewLazyLoadingSignature } from '../../internals/plugins/useTreeViewLazyLoading';
+import type { UseTreeViewSelectionSignature } from '../../internals/plugins/useTreeViewSelection';
+import type { UseTreeViewExpansionSignature } from '../../internals/plugins/useTreeViewExpansion';
+import type { UseTreeViewItemsSignature } from '../../internals/plugins/useTreeViewItems';
+import type { UseTreeViewFocusSignature } from '../../internals/plugins/useTreeViewFocus';
+import { UseTreeViewLabelSignature } from "../../internals/plugins/useTreeViewLabel/index.js";
+import type { UseTreeItemStatus } from '../../useTreeItem';
+import { TreeViewPublicAPI } from "../../internals/models/index.js";
+export interface UseTreeItemInteractions {
+  handleExpansion: (event: React.MouseEvent) => void;
+  handleSelection: (event: React.MouseEvent) => void;
+  handleCheckboxSelection: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  toggleItemEditing: () => void;
+  handleSaveItemLabel: (event: React.SyntheticEvent, label: string) => void;
+  handleCancelItemLabelEditing: (event: React.SyntheticEvent) => void;
+}
+/**
+ * Plugins that need to be present in the Tree View in order for `useTreeItemUtils` to work correctly.
+ */
+type UseTreeItemUtilsMinimalPlugins = readonly [UseTreeViewSelectionSignature, UseTreeViewExpansionSignature, UseTreeViewItemsSignature, UseTreeViewFocusSignature];
+/**
+ * Plugins that `useTreeItemUtils` can use if they are present, but are not required.
+ */
+export type UseTreeItemUtilsOptionalPlugins = readonly [UseTreeViewLabelSignature, UseTreeViewLazyLoadingSignature];
+interface UseTreeItemUtilsReturnValue<TSignatures extends UseTreeItemUtilsMinimalPlugins, TOptionalSignatures extends UseTreeItemUtilsOptionalPlugins> {
+  interactions: UseTreeItemInteractions;
+  status: UseTreeItemStatus;
+  /**
+   * The object the allows Tree View manipulation.
+   */
+  publicAPI: TreeViewPublicAPI<TSignatures, TOptionalSignatures>;
+}
+export declare const itemHasChildren: (reactChildren: React.ReactNode) => boolean;
+export declare const useTreeItemUtils: <TSignatures extends UseTreeItemUtilsMinimalPlugins = UseTreeItemUtilsMinimalPlugins, TOptionalSignatures extends UseTreeItemUtilsOptionalPlugins = UseTreeItemUtilsOptionalPlugins>({
+  itemId,
+  children
+}: {
+  itemId: string;
+  children?: React.ReactNode;
+}) => UseTreeItemUtilsReturnValue<TSignatures, TOptionalSignatures>;
+export {};

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

@@ -1,19 +1,16 @@
-"use strict";
 'use client';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useTreeItemUtils = exports.isItemExpandable = void 0;
-var _TreeViewProvider = require("../../internals/TreeViewProvider");
-var _useTreeViewLabel = require("../../internals/plugins/useTreeViewLabel");
-var _plugins = require("../../internals/utils/plugins");
-var _useSelector = require("../../internals/hooks/useSelector");
-var _useTreeViewExpansion = require("../../internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors");
-var _useTreeViewFocus = require("../../internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors");
-var _useTreeViewItems = require("../../internals/plugins/useTreeViewItems/useTreeViewItems.selectors");
-var _useTreeViewSelection = require("../../internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors");
-var _useTreeViewLabel2 = require("../../internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors");
+import { useTreeViewContext } from "../../internals/TreeViewProvider/index.js";
+import { useTreeViewLabel } from "../../internals/plugins/useTreeViewLabel/index.js";
+import { hasPlugin } from "../../internals/utils/plugins.js";
+import { useSelector } from "../../internals/hooks/useSelector.js";
+import { selectorIsItemExpandable, selectorIsItemExpanded } from "../../internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js";
+import { selectorIsItemFocused } from "../../internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors.js";
+import { selectorIsItemDisabled } from "../../internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js";
+import { selectorIsItemSelected } from "../../internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors.js";
+import { selectorGetTreeItemError, selectorIsItemLoading, selectorIsLazyLoadingEnabled } from "../../internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors.js";
+import { selectorIsItemBeingEdited, selectorIsItemEditable } from "../../internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors.js";
+
 /**
  * Plugins that need to be present in the Tree View in order for `useTreeItemUtils` to work correctly.
  */
@@ -22,14 +19,13 @@ var _useTreeViewLabel2 = require("../../internals/plugins/useTreeViewLabel/useTr
  * Plugins that `useTreeItemUtils` can use if they are present, but are not required.
  */
 
-const isItemExpandable = reactChildren => {
+export const itemHasChildren = reactChildren => {
   if (Array.isArray(reactChildren)) {
-    return reactChildren.length > 0 && reactChildren.some(isItemExpandable);
+    return reactChildren.length > 0 && reactChildren.some(itemHasChildren);
   }
   return Boolean(reactChildren);
 };
-exports.isItemExpandable = isItemExpandable;
-const useTreeItemUtils = ({
+export const useTreeItemUtils = ({
   itemId,
   children
 }) => {
@@ -41,24 +37,31 @@ const useTreeItemUtils = ({
       multiSelect
     },
     publicAPI
-  } = (0, _TreeViewProvider.useTreeViewContext)();
-  const isExpanded = (0, _useSelector.useSelector)(store, _useTreeViewExpansion.selectorIsItemExpanded, itemId);
-  const isFocused = (0, _useSelector.useSelector)(store, _useTreeViewFocus.selectorIsItemFocused, itemId);
-  const isSelected = (0, _useSelector.useSelector)(store, _useTreeViewSelection.selectorIsItemSelected, itemId);
-  const isDisabled = (0, _useSelector.useSelector)(store, _useTreeViewItems.selectorIsItemDisabled, itemId);
-  const isEditing = (0, _useSelector.useSelector)(store, state => label == null ? false : (0, _useTreeViewLabel2.selectorIsItemBeingEdited)(state, itemId));
-  const isEditable = (0, _useSelector.useSelector)(store, state => label == null ? false : (0, _useTreeViewLabel2.selectorIsItemEditable)(state, {
+  } = useTreeViewContext();
+  const isItemExpandable = useSelector(store, selectorIsItemExpandable, itemId);
+  const isLazyLoadingEnabled = useSelector(store, selectorIsLazyLoadingEnabled);
+  const loading = useSelector(store, state => isLazyLoadingEnabled ? selectorIsItemLoading(state, itemId) : false);
+  const error = useSelector(store, state => isLazyLoadingEnabled ? Boolean(selectorGetTreeItemError(state, itemId)) : false);
+  const isExpandable = itemHasChildren(children) || isItemExpandable;
+  const isExpanded = useSelector(store, selectorIsItemExpanded, itemId);
+  const isFocused = useSelector(store, selectorIsItemFocused, itemId);
+  const isSelected = useSelector(store, selectorIsItemSelected, itemId);
+  const isDisabled = useSelector(store, selectorIsItemDisabled, itemId);
+  const isEditing = useSelector(store, state => label == null ? false : selectorIsItemBeingEdited(state, itemId));
+  const isEditable = useSelector(store, state => label == null ? false : selectorIsItemEditable(state, {
     itemId,
     isItemEditable: label.isItemEditable
   }));
   const status = {
-    expandable: isItemExpandable(children),
+    expandable: isExpandable,
     expanded: isExpanded,
     focused: isFocused,
     selected: isSelected,
     disabled: isDisabled,
     editing: isEditing,
-    editable: isEditable
+    editable: isEditable,
+    loading,
+    error
   };
   const handleExpansion = event => {
     if (status.disabled) {
@@ -70,8 +73,12 @@ const useTreeItemUtils = ({
     const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
 
     // If already expanded and trying to toggle selection don't close
-    if (status.expandable && !(multiple && (0, _useTreeViewExpansion.selectorIsItemExpanded)(store.value, itemId))) {
-      instance.toggleItemExpansion(event, itemId);
+    if (status.expandable && !(multiple && selectorIsItemExpanded(store.value, itemId))) {
+      // make sure the children selection is propagated again
+      instance.setItemExpansion({
+        event,
+        itemId
+      });
     }
   };
   const handleSelection = event => {
@@ -86,14 +93,14 @@ const useTreeItemUtils = ({
       if (event.shiftKey) {
         instance.expandSelectionRange(event, itemId);
       } else {
-        instance.selectItem({
+        instance.setItemSelection({
           event,
           itemId,
           keepExistingSelection: true
         });
       }
     } else {
-      instance.selectItem({
+      instance.setItemSelection({
         event,
         itemId,
         shouldBeSelected: true
@@ -105,7 +112,7 @@ const useTreeItemUtils = ({
     if (multiSelect && hasShift) {
       instance.expandSelectionRange(event, itemId);
     } else {
-      instance.selectItem({
+      instance.setItemSelection({
         event,
         itemId,
         keepExistingSelection: multiSelect,
@@ -114,7 +121,7 @@ const useTreeItemUtils = ({
     }
   };
   const toggleItemEditing = () => {
-    if (!(0, _plugins.hasPlugin)(instance, _useTreeViewLabel.useTreeViewLabel)) {
+    if (!hasPlugin(instance, useTreeViewLabel)) {
       return;
     }
     if (isEditable) {
@@ -126,24 +133,24 @@ const useTreeItemUtils = ({
     }
   };
   const handleSaveItemLabel = (event, newLabel) => {
-    if (!(0, _plugins.hasPlugin)(instance, _useTreeViewLabel.useTreeViewLabel)) {
+    if (!hasPlugin(instance, useTreeViewLabel)) {
       return;
     }
 
     // As a side effect of `instance.focusItem` called here and in `handleCancelItemLabelEditing` the `labelInput` is blurred
     // The `onBlur` event is triggered, which calls `handleSaveItemLabel` again.
     // To avoid creating an unwanted behavior we need to check if the item is being edited before calling `updateItemLabel`
-    if ((0, _useTreeViewLabel2.selectorIsItemBeingEdited)(store.value, itemId)) {
+    if (selectorIsItemBeingEdited(store.value, itemId)) {
       instance.updateItemLabel(itemId, newLabel);
       toggleItemEditing();
       instance.focusItem(event, itemId);
     }
   };
   const handleCancelItemLabelEditing = event => {
-    if (!(0, _plugins.hasPlugin)(instance, _useTreeViewLabel.useTreeViewLabel)) {
+    if (!hasPlugin(instance, useTreeViewLabel)) {
       return;
     }
-    if ((0, _useTreeViewLabel2.selectorIsItemBeingEdited)(store.value, itemId)) {
+    if (selectorIsItemBeingEdited(store.value, itemId)) {
       toggleItemEditing();
       instance.focusItem(event, itemId);
     }
@@ -161,5 +168,4 @@ const useTreeItemUtils = ({
     status,
     publicAPI
   };
-};
-exports.useTreeItemUtils = useTreeItemUtils;
+};

package/esm/hooks/useTreeViewApiRef.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { TreeViewAnyPluginSignature, TreeViewPublicAPI } from "../internals/models/index.js";
+import { RichTreeViewPluginSignatures } from "../RichTreeView/RichTreeView.plugins.js";
+/**
+ * Hook that instantiates a [[TreeViewApiRef]].
+ */
+export declare const useTreeViewApiRef: <TSignatures extends readonly TreeViewAnyPluginSignature[] = RichTreeViewPluginSignatures>() => React.RefObject<TreeViewPublicAPI<TSignatures> | undefined>;

package/esm/hooks/useTreeViewApiRef.js

@@ -0,0 +1,7 @@
+'use client';
+
+import * as React from 'react';
+/**
+ * Hook that instantiates a [[TreeViewApiRef]].
+ */
+export const useTreeViewApiRef = () => React.useRef(undefined);

package/esm/icons/icons.d.ts

@@ -0,0 +1,6 @@
+export declare const TreeViewExpandIcon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+  muiName: string;
+};
+export declare const TreeViewCollapseIcon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+  muiName: string;
+};

package/esm/icons/icons.js

@@ -0,0 +1,9 @@
+import { createSvgIcon } from '@mui/material/utils';
+import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const TreeViewExpandIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
+  d: "M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
+}), 'TreeViewExpandIcon');
+export const TreeViewCollapseIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
+  d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+}), 'TreeViewCollapseIcon');

package/esm/icons/index.d.ts

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

package/esm/icons/index.js

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

package/esm/index.d.ts

@@ -0,0 +1,12 @@
+export * from "./SimpleTreeView/index.js";
+export * from "./RichTreeView/index.js";
+export * from "./TreeItem/index.js";
+export * from "./useTreeItem/index.js";
+export * from "./TreeItemIcon/index.js";
+export * from "./TreeItemProvider/index.js";
+export * from "./TreeItemDragAndDropOverlay/index.js";
+export * from "./TreeItemLabelInput/index.js";
+export { unstable_resetCleanupTracking } from "./internals/hooks/useInstanceEventHandler.js";
+export * from "./models/index.js";
+export * from "./icons/index.js";
+export * from "./hooks/index.js";

package/esm/index.js

@@ -0,0 +1,22 @@
+/**
+ * @mui/x-tree-view v8.0.0-beta.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.
+ */
+// Tree View
+export * from "./SimpleTreeView/index.js";
+export * from "./RichTreeView/index.js";
+
+// Tree Item
+export * from "./TreeItem/index.js";
+export * from "./useTreeItem/index.js";
+export * from "./TreeItemIcon/index.js";
+export * from "./TreeItemProvider/index.js";
+export * from "./TreeItemDragAndDropOverlay/index.js";
+export * from "./TreeItemLabelInput/index.js";
+export { unstable_resetCleanupTracking } from "./internals/hooks/useInstanceEventHandler.js";
+export * from "./models/index.js";
+export * from "./icons/index.js";
+export * from "./hooks/index.js";

package/esm/internals/TreeViewItemDepthContext/TreeViewItemDepthContext.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { TreeViewItemId } from "../../models/index.js";
+import { TreeViewState } from "../models/index.js";
+import type { UseTreeViewItemsSignature } from '../plugins/useTreeViewItems';
+export declare const TreeViewItemDepthContext: React.Context<number | ((state: TreeViewState<[UseTreeViewItemsSignature]>, itemId: TreeViewItemId) => number)>;

package/esm/internals/TreeViewItemDepthContext/TreeViewItemDepthContext.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export const TreeViewItemDepthContext = /*#__PURE__*/React.createContext(() => -1);
+if (process.env.NODE_ENV !== 'production') {
+  TreeViewItemDepthContext.displayName = 'TreeViewItemDepthContext';
+}

package/esm/internals/TreeViewItemDepthContext/index.d.ts

@@ -0,0 +1 @@
+export { TreeViewItemDepthContext } from "./TreeViewItemDepthContext.js";

package/esm/internals/TreeViewItemDepthContext/index.js

@@ -0,0 +1 @@
+export { TreeViewItemDepthContext } from "./TreeViewItemDepthContext.js";

package/esm/internals/TreeViewProvider/TreeViewChildrenItemProvider.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+export declare const TreeViewChildrenItemContext: React.Context<TreeViewChildrenItemContextValue | null>;
+interface TreeViewChildrenItemProviderProps {
+  itemId: string | null;
+  idAttribute: string | null;
+  children: React.ReactNode;
+}
+export declare function TreeViewChildrenItemProvider(props: TreeViewChildrenItemProviderProps): React.JSX.Element;
+export declare namespace TreeViewChildrenItemProvider {
+  var propTypes: any;
+}
+interface TreeViewChildrenItemContextValue {
+  registerChild: (idAttribute: string, itemId: string) => void;
+  unregisterChild: (idAttribute: string) => void;
+  parentId: string | null;
+}
+export {};