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

package/TreeItem/TreeItem.types.d.ts

@@ -1,53 +1,64 @@
 import * as React from 'react';
-import { Theme } from '@mui/material/styles';
 import { SlotComponentProps } from '@mui/utils';
-import { TransitionProps } from '@mui/material/transitions';
-import { SxProps } from '@mui/system';
-import { TreeItemContentProps } from './TreeItemContent';
+import { UseTreeItemParameters, UseTreeItemStatus } from '../useTreeItem';
 import { TreeItemClasses } from './treeItemClasses';
-import { TreeViewItemId, TreeViewCancellableEventHandler } from '../models';
-import { SlotComponentPropsFromProps } from '../internals/models';
-import { UseTreeViewIconsSignature } from '../internals/plugins/useTreeViewIcons';
-import { UseTreeViewSelectionSignature } from '../internals/plugins/useTreeViewSelection';
-import { UseTreeViewItemsSignature } from '../internals/plugins/useTreeViewItems';
-import { UseTreeViewFocusSignature } from '../internals/plugins/useTreeViewFocus';
-import { UseTreeViewExpansionSignature } from '../internals/plugins/useTreeViewExpansion';
-import { UseTreeViewKeyboardNavigationSignature } from '../internals/plugins/useTreeViewKeyboardNavigation';
-export interface TreeItemSlots {
+import { TreeItemIconSlotProps, TreeItemIconSlots } from '../TreeItemIcon';
+import { TreeViewCancellableEventHandler } from '../models';
+export interface TreeItemSlots extends TreeItemIconSlots {
     /**
-     * The icon used to collapse the item.
+     * The component that renders the root.
+     * @default TreeItemRoot
      */
-    collapseIcon?: React.ElementType;
+    root?: React.ElementType;
     /**
-     * The icon used to expand the item.
+     * The component that renders the content of the item.
+     * (e.g.: everything related to this item, not to its children).
+     * @default TreeItemContent
      */
-    expandIcon?: React.ElementType;
+    content?: React.ElementType;
     /**
-     * The icon displayed next to an end item.
+     * The component that renders the children of the item.
+     * @default TreeItemGroupTransition
      */
-    endIcon?: React.ElementType;
+    groupTransition?: React.ElementType;
     /**
-     * The icon to display next to the Tree Item's label.
+     * The component that renders the icon.
+     * @default TreeItemIconContainer
      */
-    icon?: React.ElementType;
+    iconContainer?: React.ElementType;
     /**
-     * The component that animates the appearance / disappearance of the item's children.
-     * @default TreeItem2Group
+     * The component that renders the item checkbox for selection.
+     * @default TreeItemCheckbox
      */
-    groupTransition?: React.ElementType;
-}
-export interface TreeItemSlotProps {
-    collapseIcon?: SlotComponentProps<'svg', {}, {}>;
-    expandIcon?: SlotComponentProps<'svg', {}, {}>;
-    endIcon?: SlotComponentProps<'svg', {}, {}>;
-    icon?: SlotComponentProps<'svg', {}, {}>;
-    groupTransition?: SlotComponentPropsFromProps<TransitionProps, {}, {}>;
-}
-export interface TreeItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>, 'onFocus'> {
+    checkbox?: React.ElementType;
     /**
-     * The content of the component.
+     * The component that renders the item label.
+     * @default TreeItemLabel
      */
-    children?: React.ReactNode;
+    label?: React.ElementType;
+    /**
+     * The component that renders the input to edit the label when the item is editable and is currently being edited.
+     * @default TreeItemLabelInput
+     */
+    labelInput?: React.ElementType;
+    /**
+     * The component that renders the overlay when an item reordering is ongoing.
+     * Warning: This slot is only useful when using the `<RichTreeViewPro />` component.
+     * @default TreeItemDragAndDropOverlay
+     */
+    dragAndDropOverlay?: React.ElementType;
+}
+export interface TreeItemSlotProps extends TreeItemIconSlotProps {
+    root?: SlotComponentProps<'li', {}, {}>;
+    content?: SlotComponentProps<'div', {}, {}>;
+    groupTransition?: SlotComponentProps<'div', {}, {}>;
+    iconContainer?: SlotComponentProps<'div', {}, {}>;
+    checkbox?: SlotComponentProps<'button', {}, {}>;
+    label?: SlotComponentProps<'div', {}, {}>;
+    labelInput?: SlotComponentProps<'input', {}, {}>;
+    dragAndDropOverlay?: SlotComponentProps<'div', {}, {}>;
+}
+export interface TreeItemProps extends Omit<UseTreeItemParameters, 'rootRef'>, Omit<React.HTMLAttributes<HTMLLIElement>, 'onFocus'> {
     className?: string;
     /**
      * Override or extend the styles applied to the component.
@@ -63,65 +74,19 @@ export interface TreeItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>,
      * @default {}
      */
     slotProps?: TreeItemSlotProps;
-    /**
-     * The component used to render the content of the item.
-     * @deprecated Consider using the `<TreeItem2 />` component or the `useTreeItem2` hook instead. For more details, see https://mui.com/x/react-tree-view/tree-item-customization/.
-     * @default TreeItemContent
-     */
-    ContentComponent?: React.JSXElementConstructor<TreeItemContentProps>;
-    /**
-     * Props applied to ContentComponent.
-     * @deprecated Consider using the `<TreeItem2 />` component or the `useTreeItem2` hook instead. For more details, see https://mui.com/x/react-tree-view/tree-item-customization/.
-     */
-    ContentProps?: React.HTMLAttributes<HTMLElement> & {
-        ref?: React.Ref<HTMLElement>;
-    };
-    /**
-     * If `true`, the item is disabled.
-     * @default false
-     */
-    disabled?: boolean;
     /**
      * This prop isn't supported.
-     * Use the `onItemFocus` callback on the tree if you need to monitor a item's focus.
+     * Use the `onItemFocus` callback on the tree if you need to monitor an item's focus.
      */
     onFocus?: null;
     /**
-     * The Tree Item label.
-     */
-    label?: React.ReactNode;
-    /**
-     * The id of the item.
-     */
-    itemId: TreeViewItemId;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
+     * Callback fired when the item root is blurred.
      */
-    sx?: SxProps<Theme>;
+    onBlur?: TreeViewCancellableEventHandler<React.FocusEvent<HTMLLIElement>>;
     /**
-     * Callback fired when a key of the keyboard is pressed on the item.
+     * Callback fired when a key is pressed on the keyboard and the tree is in focus.
      */
     onKeyDown?: TreeViewCancellableEventHandler<React.KeyboardEvent<HTMLLIElement>>;
 }
-export interface TreeItemOwnerState extends TreeItemProps {
-    expanded: boolean;
-    focused: boolean;
-    selected: boolean;
-    disabled: boolean;
-    indentationAtItemLevel: boolean;
+export interface TreeItemOwnerState extends Omit<TreeItemProps, 'disabled'>, UseTreeItemStatus {
 }
-/**
- * Plugins that need to be present in the Tree View in order for Tree Item to work correctly.
- */
-export type TreeItemMinimalPlugins = readonly [
-    UseTreeViewIconsSignature,
-    UseTreeViewSelectionSignature,
-    UseTreeViewItemsSignature,
-    UseTreeViewFocusSignature,
-    UseTreeViewExpansionSignature,
-    UseTreeViewKeyboardNavigationSignature
-];
-/**
- * Plugins that Tree Item can use if they are present, but are not required.
- */
-export type TreeItemOptionalPlugins = readonly [];

package/TreeItem/index.d.ts

@@ -1,6 +1,3 @@
-export { TreeItem } from './TreeItem';
+export { TreeItem, TreeItemRoot, TreeItemContent, TreeItemIconContainer, TreeItemGroupTransition, TreeItemCheckbox, TreeItemLabel, } from './TreeItem';
 export type { TreeItemProps, TreeItemSlots, TreeItemSlotProps } from './TreeItem.types';
 export * from './treeItemClasses';
-export * from './useTreeItemState';
-export { TreeItemContent } from './TreeItemContent';
-export type { TreeItemContentProps, TreeItemContentClassKey } from './TreeItemContent';

package/TreeItem/index.js

@@ -1,4 +1,2 @@
-export { TreeItem } from "./TreeItem.js";
-export * from "./treeItemClasses.js";
-export * from "./useTreeItemState.js";
-export { TreeItemContent } from "./TreeItemContent.js";
+export { TreeItem, TreeItemRoot, TreeItemContent, TreeItemIconContainer, TreeItemGroupTransition, TreeItemCheckbox, TreeItemLabel } from "./TreeItem.js";
+export * from "./treeItemClasses.js";

package/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.d.ts

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

package/{modern/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.js → TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.js}

@@ -1,11 +1,14 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { alpha } from '@mui/material/styles';
 import { shouldForwardProp } from '@mui/system';
 import { styled } from "../internals/zero-styled/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const TreeItem2DragAndDropOverlayRoot = styled('div', {
-  name: 'MuiTreeItem2DragAndDropOverlay',
+const TreeItemDragAndDropOverlayRoot = styled('div', {
+  name: 'MuiTreeItemDragAndDropOverlay',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
   shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'action'
@@ -26,44 +29,46 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', {
     style: {
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
       borderRadius: theme.shape.borderRadius,
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.dark} / ${0.15})` : alpha(theme.palette.primary.dark, 0.15)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.darkChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette.primary.dark, theme.palette.action.focusOpacity)
     }
   }, {
     props: {
       action: 'reorder-above'
     },
-    style: _extends({
+    style: {
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
-      borderTop: theme.vars ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})` : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`
-    }, theme.applyStyles('dark', {
-      borderTopColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` : alpha(theme.palette.grey[100], 0.6)
-    }))
+      borderTop: `1px solid ${(theme.vars || theme).palette.action.active}`
+    }
   }, {
     props: {
       action: 'reorder-below'
     },
-    style: _extends({
+    style: {
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
-      borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})` : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`
-    }, theme.applyStyles('dark', {
-      borderBottomColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` : alpha(theme.palette.grey[100], 0.6)
-    }))
+      borderBottom: `1px solid ${(theme.vars || theme).palette.action.active}`
+    }
   }, {
     props: {
       action: 'move-to-parent'
     },
-    style: _extends({
+    style: {
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * calc(var(--TreeView-itemDepth) - 1))',
-      borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})` : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`
-    }, theme.applyStyles('dark', {
-      borderBottomColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` : alpha(theme.palette.grey[100], 0.6)
-    }))
+      borderBottom: `1px solid ${(theme.vars || theme).palette.action.active}`
+    }
   }]
 }));
-function TreeItem2DragAndDropOverlay(props) {
+function TreeItemDragAndDropOverlay(props) {
   if (props.action == null) {
     return null;
   }
-  return /*#__PURE__*/_jsx(TreeItem2DragAndDropOverlayRoot, _extends({}, props));
+  return /*#__PURE__*/_jsx(TreeItemDragAndDropOverlayRoot, _extends({}, props));
 }
-export { TreeItem2DragAndDropOverlay };
+process.env.NODE_ENV !== "production" ? TreeItemDragAndDropOverlay.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  action: PropTypes.oneOf(['make-child', 'move-to-parent', 'reorder-above', 'reorder-below']),
+  style: PropTypes.object
+} : void 0;
+export { TreeItemDragAndDropOverlay };

package/{TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.types.d.ts → TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.types.d.ts}

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TreeViewItemsReorderingAction } from '../models';
-export interface TreeItem2DragAndDropOverlayProps {
+export interface TreeItemDragAndDropOverlayProps {
     action?: TreeViewItemsReorderingAction;
     style?: React.CSSProperties;
 }

package/TreeItemDragAndDropOverlay/index.d.ts

@@ -0,0 +1,2 @@
+export { TreeItemDragAndDropOverlay } from './TreeItemDragAndDropOverlay';
+export type { TreeItemDragAndDropOverlayProps } from './TreeItemDragAndDropOverlay.types';

package/TreeItemDragAndDropOverlay/index.js

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

package/{TreeItem2LabelInput → TreeItemDragAndDropOverlay}/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
   "module": "./index.js",
-  "main": "../node/TreeItem2LabelInput/index.js",
+  "main": "../node/TreeItemDragAndDropOverlay/index.js",
   "types": "./index.d.ts"
 }

package/TreeItemIcon/TreeItemIcon.d.ts

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

package/{TreeItem2Icon/TreeItem2Icon.js → TreeItemIcon/TreeItemIcon.js}

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -6,7 +8,7 @@ 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 TreeItem2Icon(props) {
+function TreeItemIcon(props) {
   const {
     slots,
     slotProps,
@@ -42,7 +44,7 @@ function TreeItem2Icon(props) {
   }
   return /*#__PURE__*/_jsx(Icon, _extends({}, iconProps));
 }
-process.env.NODE_ENV !== "production" ? TreeItem2Icon.propTypes = {
+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"  |
@@ -67,4 +69,4 @@ process.env.NODE_ENV !== "production" ? TreeItem2Icon.propTypes = {
     selected: PropTypes.bool.isRequired
   }).isRequired
 } : void 0;
-export { TreeItem2Icon };
+export { TreeItemIcon };

package/{TreeItem2Icon/TreeItem2Icon.types.d.ts → TreeItemIcon/TreeItemIcon.types.d.ts}

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SlotComponentProps } from '@mui/utils';
-import { UseTreeItem2Status } from '../useTreeItem2';
-export interface TreeItem2IconSlots {
+import { UseTreeItemStatus } from '../useTreeItem';
+export interface TreeItemIconSlots {
     /**
      * The icon used to collapse the item.
      */
@@ -19,22 +19,22 @@ export interface TreeItem2IconSlots {
      */
     icon?: React.ElementType;
 }
-export interface TreeItem2IconSlotProps {
+export interface TreeItemIconSlotProps {
     collapseIcon?: SlotComponentProps<'svg', {}, {}>;
     expandIcon?: SlotComponentProps<'svg', {}, {}>;
     endIcon?: SlotComponentProps<'svg', {}, {}>;
     icon?: SlotComponentProps<'svg', {}, {}>;
 }
-export interface TreeItem2IconProps {
-    status: UseTreeItem2Status;
+export interface TreeItemIconProps {
+    status: UseTreeItemStatus;
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots?: TreeItem2IconSlots;
+    slots?: TreeItemIconSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: TreeItem2IconSlotProps;
+    slotProps?: TreeItemIconSlotProps;
 }

package/TreeItemIcon/index.d.ts

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

package/TreeItemIcon/index.js

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

package/{useTreeItem2 → TreeItemIcon}/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
   "module": "./index.js",
-  "main": "../node/useTreeItem2/index.js",
+  "main": "../node/TreeItemIcon/index.js",
   "types": "./index.d.ts"
 }

package/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/{TreeItem2LabelInput/TreeItem2LabelInput.js → TreeItemLabelInput/TreeItemLabelInput.js}

@@ -1,7 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { styled } from "../internals/zero-styled/index.js";
-const TreeItem2LabelInput = styled('input', {
-  name: 'MuiTreeItem2',
+
+/**
+ * @ignore - internal component.
+ */
+const TreeItemLabelInput = styled('input', {
+  name: 'MuiTreeItem',
   slot: 'LabelInput',
   overridesResolver: (props, styles) => styles.labelInput
 })(({
@@ -17,4 +21,4 @@ const TreeItem2LabelInput = styled('input', {
     outline: `1px solid ${theme.palette.primary.main}`
   }
 }));
-export { TreeItem2LabelInput };
+export { TreeItemLabelInput };

package/{TreeItem2LabelInput/TreeItem2LabelInput.types.d.ts → TreeItemLabelInput/TreeItemLabelInput.types.d.ts}

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TreeViewCancellableEventHandler } from '../models';
-export interface TreeItem2LabelInputProps {
+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.

package/TreeItemLabelInput/index.d.ts

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

package/TreeItemLabelInput/index.js

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

package/{TreeItem2Provider → TreeItemLabelInput}/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
   "module": "./index.js",
-  "main": "../node/TreeItem2Provider/index.js",
+  "main": "../node/TreeItemLabelInput/index.js",
   "types": "./index.d.ts"
 }

package/TreeItemProvider/TreeItemProvider.d.ts

@@ -0,0 +1,9 @@
+import { TreeItemProviderProps } from './TreeItemProvider.types';
+/**
+ * @ignore - internal component.
+ */
+declare function TreeItemProvider(props: TreeItemProviderProps): import("react").ReactNode;
+declare namespace TreeItemProvider {
+    var propTypes: any;
+}
+export { TreeItemProvider };

package/{modern/TreeItem2Provider/TreeItem2Provider.js → TreeItemProvider/TreeItemProvider.js}

@@ -1,6 +1,10 @@
 import PropTypes from 'prop-types';
 import { useTreeViewContext } from "../internals/TreeViewProvider/index.js";
-function TreeItem2Provider(props) {
+
+/**
+ * @ignore - internal component.
+ */
+function TreeItemProvider(props) {
   const {
     children,
     itemId
@@ -15,7 +19,7 @@ function TreeItem2Provider(props) {
     instance
   });
 }
-TreeItem2Provider.propTypes = {
+TreeItemProvider.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
@@ -23,4 +27,4 @@ TreeItem2Provider.propTypes = {
   children: PropTypes.node,
   itemId: PropTypes.string.isRequired
 };
-export { TreeItem2Provider };
+export { TreeItemProvider };

package/{TreeItem2Provider/TreeItem2Provider.types.d.ts → TreeItemProvider/TreeItemProvider.types.d.ts}

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TreeViewItemId } from '../models';
-export interface TreeItem2ProviderProps {
+export interface TreeItemProviderProps {
     children: React.ReactNode;
     itemId: TreeViewItemId;
 }

package/TreeItemProvider/index.d.ts

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

package/TreeItemProvider/index.js

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

package/{TreeItem2Icon → TreeItemProvider}/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
   "module": "./index.js",
-  "main": "../node/TreeItem2Icon/index.js",
+  "main": "../node/TreeItemProvider/index.js",
   "types": "./index.d.ts"
 }

package/hooks/index.d.ts

@@ -1,2 +1,2 @@
 export { useTreeViewApiRef } from './useTreeViewApiRef';
-export { useTreeItem2Utils } from './useTreeItem2Utils';
+export { useTreeItemUtils } from './useTreeItemUtils';

package/hooks/index.js

@@ -1,2 +1,2 @@
 export { useTreeViewApiRef } from "./useTreeViewApiRef.js";
-export { useTreeItem2Utils } from "./useTreeItem2Utils/index.js";
+export { useTreeItemUtils } from "./useTreeItemUtils/index.js";

package/hooks/useTreeItemUtils/index.d.ts

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

package/hooks/useTreeItemUtils/index.js

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

package/hooks/{useTreeItem2Utils/useTreeItem2Utils.d.ts → useTreeItemUtils/useTreeItemUtils.d.ts}

@@ -4,9 +4,9 @@ import { UseTreeViewExpansionSignature } from '../../internals/plugins/useTreeVi
 import { UseTreeViewItemsSignature } from '../../internals/plugins/useTreeViewItems';
 import { UseTreeViewFocusSignature } from '../../internals/plugins/useTreeViewFocus';
 import { UseTreeViewLabelSignature } from '../../internals/plugins/useTreeViewLabel';
-import type { UseTreeItem2Status } from '../../useTreeItem2';
+import type { UseTreeItemStatus } from '../../useTreeItem';
 import { TreeViewPublicAPI } from '../../internals/models';
-export interface UseTreeItem2Interactions {
+export interface UseTreeItemInteractions {
     handleExpansion: (event: React.MouseEvent) => void;
     handleSelection: (event: React.MouseEvent) => void;
     handleCheckboxSelection: (event: React.ChangeEvent<HTMLInputElement>) => void;
@@ -15,28 +15,28 @@ export interface UseTreeItem2Interactions {
     handleCancelItemLabelEditing: (event: React.SyntheticEvent) => void;
 }
 /**
- * Plugins that need to be present in the Tree View in order for `useTreeItem2Utils` to work correctly.
+ * Plugins that need to be present in the Tree View in order for `useTreeItemUtils` to work correctly.
  */
-type UseTreeItem2UtilsMinimalPlugins = readonly [
+type UseTreeItemUtilsMinimalPlugins = readonly [
     UseTreeViewSelectionSignature,
     UseTreeViewExpansionSignature,
     UseTreeViewItemsSignature,
     UseTreeViewFocusSignature
 ];
 /**
- * Plugins that `useTreeItem2Utils` can use if they are present, but are not required.
+ * Plugins that `useTreeItemUtils` can use if they are present, but are not required.
  */
-export type UseTreeItem2UtilsOptionalPlugins = readonly [UseTreeViewLabelSignature];
-interface UseTreeItem2UtilsReturnValue<TSignatures extends UseTreeItem2UtilsMinimalPlugins, TOptionalSignatures extends UseTreeItem2UtilsOptionalPlugins> {
-    interactions: UseTreeItem2Interactions;
-    status: UseTreeItem2Status;
+export type UseTreeItemUtilsOptionalPlugins = readonly [UseTreeViewLabelSignature];
+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 useTreeItem2Utils: <TSignatures extends UseTreeItem2UtilsMinimalPlugins = UseTreeItem2UtilsMinimalPlugins, TOptionalSignatures extends UseTreeItem2UtilsOptionalPlugins = UseTreeItem2UtilsOptionalPlugins>({ itemId, children, }: {
+export declare const useTreeItemUtils: <TSignatures extends UseTreeItemUtilsMinimalPlugins = UseTreeItemUtilsMinimalPlugins, TOptionalSignatures extends UseTreeItemUtilsOptionalPlugins = UseTreeItemUtilsOptionalPlugins>({ itemId, children, }: {
     itemId: string;
     children: React.ReactNode;
-}) => UseTreeItem2UtilsReturnValue<TSignatures, TOptionalSignatures>;
+}) => UseTreeItemUtilsReturnValue<TSignatures, TOptionalSignatures>;
 export {};

package/hooks/{useTreeItem2Utils/useTreeItem2Utils.js → useTreeItemUtils/useTreeItemUtils.js}

@@ -1,13 +1,15 @@
+'use client';
+
 import { useTreeViewContext } from "../../internals/TreeViewProvider/index.js";
 import { useTreeViewLabel } from "../../internals/plugins/useTreeViewLabel/index.js";
 import { hasPlugin } from "../../internals/utils/plugins.js";
 
 /**
- * Plugins that need to be present in the Tree View in order for `useTreeItem2Utils` to work correctly.
+ * Plugins that need to be present in the Tree View in order for `useTreeItemUtils` to work correctly.
  */
 
 /**
- * Plugins that `useTreeItem2Utils` can use if they are present, but are not required.
+ * Plugins that `useTreeItemUtils` can use if they are present, but are not required.
  */
 
 const isItemExpandable = reactChildren => {
@@ -16,7 +18,7 @@ const isItemExpandable = reactChildren => {
   }
   return Boolean(reactChildren);
 };
-export const useTreeItem2Utils = ({
+export const useTreeItemUtils = ({
   itemId,
   children
 }) => {

package/index.d.ts

@@ -1,11 +1,11 @@
-export * from './TreeView';
 export * from './SimpleTreeView';
 export * from './RichTreeView';
 export * from './TreeItem';
-export * from './TreeItem2';
-export * from './useTreeItem2';
-export * from './TreeItem2Icon';
-export * from './TreeItem2Provider';
+export * from './useTreeItem';
+export * from './TreeItemIcon';
+export * from './TreeItemProvider';
+export * from './TreeItemDragAndDropOverlay';
+export * from './TreeItemLabelInput';
 export { unstable_resetCleanupTracking } from './internals/hooks/useInstanceEventHandler';
 export * from './models';
 export * from './icons';