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

package/{node → esm}/useTreeItem/useTreeItem.js

@@ -1,27 +1,20 @@
-"use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useTreeItem = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-var _extractEventHandlers = _interopRequireDefault(require("@mui/utils/extractEventHandlers"));
-var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
-var _TreeViewProvider = require("../internals/TreeViewProvider");
-var _useTreeItemUtils = require("../hooks/useTreeItemUtils");
-var _TreeViewItemDepthContext = require("../internals/TreeViewItemDepthContext");
-var _tree = require("../internals/utils/tree");
-var _useSelector = require("../internals/hooks/useSelector");
-var _useTreeViewFocus = require("../internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors");
-var _useTreeViewId = require("../internals/corePlugins/useTreeViewId/useTreeViewId.utils");
-var _useTreeViewItems = require("../internals/plugins/useTreeViewItems/useTreeViewItems.selectors");
-var _useTreeViewId2 = require("../internals/corePlugins/useTreeViewId/useTreeViewId.selectors");
-var _useTreeViewExpansion = require("../internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors");
-const useTreeItem = parameters => {
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import extractEventHandlers from '@mui/utils/extractEventHandlers';
+import useForkRef from '@mui/utils/useForkRef';
+import { useTreeViewContext } from "../internals/TreeViewProvider/index.js";
+import { useTreeItemUtils } from "../hooks/useTreeItemUtils/index.js";
+import { TreeViewItemDepthContext } from "../internals/TreeViewItemDepthContext/index.js";
+import { isTargetInDescendants } from "../internals/utils/tree.js";
+import { useSelector } from "../internals/hooks/useSelector.js";
+import { selectorIsItemTheDefaultFocusableItem } from "../internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors.js";
+import { generateTreeItemIdAttribute } from "../internals/corePlugins/useTreeViewId/useTreeViewId.utils.js";
+import { selectorCanItemBeFocused } from "../internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js";
+import { selectorTreeViewId } from "../internals/corePlugins/useTreeViewId/useTreeViewId.selectors.js";
+import { selectorItemExpansionTrigger } from "../internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js";
+export const useTreeItem = parameters => {
   const {
     runItemPlugins,
     items: {
@@ -35,9 +28,9 @@ const useTreeItem = parameters => {
     instance,
     publicAPI,
     store
-  } = (0, _TreeViewProvider.useTreeViewContext)();
-  const depthContext = React.useContext(_TreeViewItemDepthContext.TreeViewItemDepthContext);
-  const depth = (0, _useSelector.useSelector)(store, (...params) => {
+  } = useTreeViewContext();
+  const depthContext = React.useContext(TreeViewItemDepthContext);
+  const depth = useSelector(store, (...params) => {
     if (typeof depthContext === 'function') {
       return depthContext(...params);
     }
@@ -58,22 +51,22 @@ const useTreeItem = parameters => {
   const {
     interactions,
     status
-  } = (0, _useTreeItemUtils.useTreeItemUtils)({
+  } = useTreeItemUtils({
     itemId,
     children
   });
   const rootRefObject = React.useRef(null);
   const contentRefObject = React.useRef(null);
-  const handleRootRef = (0, _useForkRef.default)(rootRef, pluginRootRef, rootRefObject);
-  const handleContentRef = (0, _useForkRef.default)(contentRef, contentRefObject);
+  const handleRootRef = useForkRef(rootRef, pluginRootRef, rootRefObject);
+  const handleContentRef = useForkRef(contentRef, contentRefObject);
   const checkboxRef = React.useRef(null);
-  const treeId = (0, _useSelector.useSelector)(store, _useTreeViewId2.selectorTreeViewId);
-  const idAttribute = (0, _useTreeViewId.generateTreeItemIdAttribute)({
+  const treeId = useSelector(store, selectorTreeViewId);
+  const idAttribute = generateTreeItemIdAttribute({
     itemId,
     treeId,
     id
   });
-  const shouldBeAccessibleWithTab = (0, _useSelector.useSelector)(store, _useTreeViewFocus.selectorIsItemTheDefaultFocusableItem, itemId);
+  const shouldBeAccessibleWithTab = useSelector(store, selectorIsItemTheDefaultFocusableItem, itemId);
   const sharedPropsEnhancerParams = {
     rootRefObject,
     contentRefObject,
@@ -85,7 +78,7 @@ const useTreeItem = parameters => {
     if (event.defaultMuiPrevented) {
       return;
     }
-    if (!status.focused && (0, _useTreeViewItems.selectorCanItemBeFocused)(store.value, itemId) && event.currentTarget === event.target) {
+    if (!status.focused && selectorCanItemBeFocused(store.value, itemId) && event.currentTarget === event.target) {
       instance.focusItem(event, itemId);
     }
   };
@@ -102,7 +95,7 @@ const useTreeItem = parameters => {
     if (status.editing ||
     // we can exit the editing state by clicking outside the input (within the Tree Item) or by pressing Enter or Escape -> we don't want to remove the focused item from the state in these cases
     // we can also exit the editing state by clicking on the root itself -> want to remove the focused item from the state in this case
-    event.relatedTarget && (0, _tree.isTargetInDescendants)(event.relatedTarget, rootElement) && (event.target && event.target?.dataset?.element === 'labelInput' && (0, _tree.isTargetInDescendants)(event.target, rootElement) || event.relatedTarget?.dataset?.element === 'labelInput')) {
+    event.relatedTarget && isTargetInDescendants(event.relatedTarget, rootElement) && (event.target && event.target?.dataset?.element === 'labelInput' && isTargetInDescendants(event.target, rootElement) || event.relatedTarget?.dataset?.element === 'labelInput')) {
       return;
     }
     instance.removeFocusedItem();
@@ -127,7 +120,7 @@ const useTreeItem = parameters => {
     if (event.defaultMuiPrevented || checkboxRef.current?.contains(event.target)) {
       return;
     }
-    if ((0, _useTreeViewExpansion.selectorItemExpansionTrigger)(store.value) === 'content') {
+    if (selectorItemExpansionTrigger(store.value) === 'content') {
       interactions.handleExpansion(event);
     }
     if (!checkboxSelection) {
@@ -150,7 +143,7 @@ const useTreeItem = parameters => {
     if (event.defaultMuiPrevented) {
       return;
     }
-    if ((0, _useTreeViewExpansion.selectorItemExpansionTrigger)(store.value) === 'iconContainer') {
+    if (selectorItemExpansionTrigger(store.value) === 'iconContainer') {
       interactions.handleExpansion(event);
     }
   };
@@ -159,7 +152,7 @@ const useTreeItem = parameters => {
     id
   });
   const getRootProps = (externalProps = {}) => {
-    const externalEventHandlers = (0, _extends2.default)({}, (0, _extractEventHandlers.default)(parameters), (0, _extractEventHandlers.default)(externalProps));
+    const externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
 
     // https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
     let ariaSelected;
@@ -173,7 +166,7 @@ const useTreeItem = parameters => {
       // - all nodes that are selectable but not selected have aria-selected set to false.
       ariaSelected = false;
     }
-    const props = (0, _extends2.default)({}, externalEventHandlers, {
+    const props = _extends({}, externalEventHandlers, {
       ref: handleRootRef,
       role: 'treeitem',
       tabIndex: shouldBeAccessibleWithTab ? 0 : -1,
@@ -182,44 +175,44 @@ const useTreeItem = parameters => {
       'aria-selected': ariaSelected,
       'aria-disabled': status.disabled || undefined
     }, externalProps, {
-      style: (0, _extends2.default)({}, externalProps.style ?? {}, {
+      style: _extends({}, externalProps.style ?? {}, {
         '--TreeView-itemDepth': depth
       }),
       onFocus: createRootHandleFocus(externalEventHandlers),
       onBlur: createRootHandleBlur(externalEventHandlers),
       onKeyDown: createRootHandleKeyDown(externalEventHandlers)
     });
-    const enhancedRootProps = propsEnhancers.root?.((0, _extends2.default)({}, sharedPropsEnhancerParams, {
+    const enhancedRootProps = propsEnhancers.root?.(_extends({}, sharedPropsEnhancerParams, {
       externalEventHandlers
     })) ?? {};
-    return (0, _extends2.default)({}, props, enhancedRootProps);
+    return _extends({}, props, enhancedRootProps);
   };
   const getContentProps = (externalProps = {}) => {
-    const externalEventHandlers = (0, _extractEventHandlers.default)(externalProps);
-    const props = (0, _extends2.default)({}, externalEventHandlers, externalProps, {
+    const externalEventHandlers = extractEventHandlers(externalProps);
+    const props = _extends({}, externalEventHandlers, externalProps, {
       ref: handleContentRef,
       onClick: createContentHandleClick(externalEventHandlers),
       onMouseDown: createContentHandleMouseDown(externalEventHandlers),
       status
     });
-    const enhancedContentProps = propsEnhancers.content?.((0, _extends2.default)({}, sharedPropsEnhancerParams, {
+    const enhancedContentProps = propsEnhancers.content?.(_extends({}, sharedPropsEnhancerParams, {
       externalEventHandlers
     })) ?? {};
-    return (0, _extends2.default)({}, props, enhancedContentProps);
+    return _extends({}, props, enhancedContentProps);
   };
   const getCheckboxProps = (externalProps = {}) => {
-    const externalEventHandlers = (0, _extractEventHandlers.default)(externalProps);
-    const props = (0, _extends2.default)({}, externalEventHandlers, {
+    const externalEventHandlers = extractEventHandlers(externalProps);
+    const props = _extends({}, externalEventHandlers, {
       ref: checkboxRef
     }, externalProps);
-    const enhancedCheckboxProps = propsEnhancers.checkbox?.((0, _extends2.default)({}, sharedPropsEnhancerParams, {
+    const enhancedCheckboxProps = propsEnhancers.checkbox?.(_extends({}, sharedPropsEnhancerParams, {
       externalEventHandlers
     })) ?? {};
-    return (0, _extends2.default)({}, props, enhancedCheckboxProps);
+    return _extends({}, props, enhancedCheckboxProps);
   };
   const getLabelProps = (externalProps = {}) => {
-    const externalEventHandlers = (0, _extends2.default)({}, (0, _extractEventHandlers.default)(externalProps));
-    const props = (0, _extends2.default)({}, externalEventHandlers, {
+    const externalEventHandlers = _extends({}, extractEventHandlers(externalProps));
+    const props = _extends({}, externalEventHandlers, {
       children: label
     }, externalProps, {
       onDoubleClick: createLabelHandleDoubleClick(externalEventHandlers)
@@ -230,21 +223,32 @@ const useTreeItem = parameters => {
     return props;
   };
   const getLabelInputProps = (externalProps = {}) => {
-    const externalEventHandlers = (0, _extractEventHandlers.default)(externalProps);
-    const enhancedLabelInputProps = propsEnhancers.labelInput?.((0, _extends2.default)({}, sharedPropsEnhancerParams, {
+    const externalEventHandlers = extractEventHandlers(externalProps);
+    const enhancedLabelInputProps = propsEnhancers.labelInput?.(_extends({}, sharedPropsEnhancerParams, {
       externalEventHandlers
     })) ?? {};
-    return (0, _extends2.default)({}, externalProps, enhancedLabelInputProps);
+    return _extends({}, externalProps, enhancedLabelInputProps);
   };
   const getIconContainerProps = (externalProps = {}) => {
-    const externalEventHandlers = (0, _extractEventHandlers.default)(externalProps);
-    return (0, _extends2.default)({}, externalEventHandlers, externalProps, {
+    const externalEventHandlers = extractEventHandlers(externalProps);
+    return _extends({}, externalEventHandlers, externalProps, {
       onClick: createIconContainerHandleClick(externalEventHandlers)
     });
   };
+  const getErrorContainerProps = (externalProps = {}) => {
+    const externalEventHandlers = extractEventHandlers(externalProps);
+    return _extends({}, externalEventHandlers, externalProps);
+  };
+  const getLoadingContainerProps = (externalProps = {}) => {
+    const externalEventHandlers = extractEventHandlers(externalProps);
+    return _extends({
+      size: '12px',
+      thickness: 6
+    }, externalEventHandlers, externalProps);
+  };
   const getGroupTransitionProps = (externalProps = {}) => {
-    const externalEventHandlers = (0, _extractEventHandlers.default)(externalProps);
-    const response = (0, _extends2.default)({}, externalEventHandlers, {
+    const externalEventHandlers = extractEventHandlers(externalProps);
+    const response = _extends({}, externalEventHandlers, {
       unmountOnExit: true,
       component: 'ul',
       role: 'group',
@@ -254,11 +258,11 @@ const useTreeItem = parameters => {
     return response;
   };
   const getDragAndDropOverlayProps = (externalProps = {}) => {
-    const externalEventHandlers = (0, _extractEventHandlers.default)(externalProps);
-    const enhancedDragAndDropOverlayProps = propsEnhancers.dragAndDropOverlay?.((0, _extends2.default)({}, sharedPropsEnhancerParams, {
+    const externalEventHandlers = extractEventHandlers(externalProps);
+    const enhancedDragAndDropOverlayProps = propsEnhancers.dragAndDropOverlay?.(_extends({}, sharedPropsEnhancerParams, {
       externalEventHandlers
     })) ?? {};
-    return (0, _extends2.default)({}, externalProps, enhancedDragAndDropOverlayProps);
+    return _extends({}, externalProps, enhancedDragAndDropOverlayProps);
   };
   return {
     getContextProviderProps,
@@ -270,9 +274,10 @@ const useTreeItem = parameters => {
     getLabelProps,
     getLabelInputProps,
     getDragAndDropOverlayProps,
+    getErrorContainerProps,
+    getLoadingContainerProps,
     rootRef: handleRootRef,
     status,
     publicAPI
   };
-};
-exports.useTreeItem = useTreeItem;
+};

package/esm/useTreeItem/useTreeItem.types.d.ts

@@ -0,0 +1,196 @@
+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>;
+  /**
+   * Only defined when the `isItemEditable` experimental feature is enabled.
+   */
+  editable?: boolean;
+}
+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/esm/useTreeItem/useTreeItem.types.js

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

package/esm/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/esm/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/esm/utils/index.d.ts

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

package/esm/utils/index.js

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

package/hooks/index.d.ts

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

package/hooks/index.js

@@ -1,3 +1,26 @@
-export { useTreeViewApiRef } from "./useTreeViewApiRef.js";
-export { useTreeItemUtils } from "./useTreeItemUtils/index.js";
-export { useTreeItemModel } from "./useTreeItemModel.js";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useTreeItemModel", {
+  enumerable: true,
+  get: function () {
+    return _useTreeItemModel.useTreeItemModel;
+  }
+});
+Object.defineProperty(exports, "useTreeItemUtils", {
+  enumerable: true,
+  get: function () {
+    return _useTreeItemUtils.useTreeItemUtils;
+  }
+});
+Object.defineProperty(exports, "useTreeViewApiRef", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewApiRef.useTreeViewApiRef;
+  }
+});
+var _useTreeViewApiRef = require("./useTreeViewApiRef");
+var _useTreeItemUtils = require("./useTreeItemUtils");
+var _useTreeItemModel = require("./useTreeItemModel");

package/hooks/useTreeItemModel.d.ts

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

package/hooks/useTreeItemModel.js

@@ -1,11 +1,17 @@
+"use strict";
 '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 => {
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeItemModel = void 0;
+var _TreeViewProvider = require("../internals/TreeViewProvider");
+var _useSelector = require("../internals/hooks/useSelector");
+var _useTreeViewItems = require("../internals/plugins/useTreeViewItems/useTreeViewItems.selectors");
+const useTreeItemModel = itemId => {
   const {
     store
-  } = useTreeViewContext();
-  return useSelector(store, selectorItemModel, itemId);
-};
+  } = (0, _TreeViewProvider.useTreeViewContext)();
+  return (0, _useSelector.useSelector)(store, _useTreeViewItems.selectorItemModel, itemId);
+};
+exports.useTreeItemModel = useTreeItemModel;

package/hooks/useTreeItemUtils/index.d.ts

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

package/hooks/useTreeItemUtils/index.js

@@ -1 +1,12 @@
-export { useTreeItemUtils } from "./useTreeItemUtils.js";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useTreeItemUtils", {
+  enumerable: true,
+  get: function () {
+    return _useTreeItemUtils.useTreeItemUtils;
+  }
+});
+var _useTreeItemUtils = require("./useTreeItemUtils");