@mui/x-tree-view/useTreeItem/useTreeItem.types.d.ts

The community edition of the MUI X Tree View components.

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";
import { UseTreeViewLazyLoadingSignature } from "../internals/plugins/useTreeViewLazyLoading/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;
  /**
   * If `true`, the item cannot be selected.
   * @default false
   */
  disableSelection?: 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-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;
  /**
   * @deprecated Will be removed in the next major version. Please use the data-attrs instead.
   */
  status: UseTreeItemStatus;
  'data-expanded'?: '';
  'data-selected'?: '';
  'data-focused'?: '';
  'data-disabled'?: '';
  'data-editing'?: '';
  'data-editable'?: '';
}
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>;
  'aria-hidden': true;
}
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 [UseTreeViewLazyLoadingSignature];