@mui/x-tree-view/internals/components/RichTreeViewLoading.d.ts

The community edition of the MUI X Tree View components.

import * as React from 'react';
import type { SlotComponentProps } from '@mui/utils/types';
import type { TreeItemLoaderOwnerState } from "../../TreeItemLoader/index.js";
import type { TreeViewAnyStore } from "../models/index.js";
import type { TreeViewItemId } from "../../models/index.js";
import type { TreeViewStoreInContext } from "../TreeViewProvider/index.js";
export declare const DEFAULT_LOADING_ITEMS_COUNT = 5;
export declare const MAX_LOADING_ITEMS_COUNT = 100;
export declare function getLoadingItemsCount(itemsCount: number | undefined): number;
export interface RichTreeViewLoadingSlots {
  /**
   * Element rendered at the root.
   */
  root: React.ElementType;
  /**
   * Component rendered instead of the default loading rows.
   * It renders inside the tree root while the tree is loading and inside a
   * lazily loading item while its children load.
   */
  loading?: React.ElementType;
  /**
   * Component rendered for each loading row.
   * @default TreeItemLoader
   */
  itemLoader?: React.ElementType;
}
export interface RichTreeViewLoadingSlotOwnProps {
  /**
   * The number of loading rows to render.
   * The children of a lazily loading item use `getChildrenCount()` as the default instead.
   * @default 5
   */
  itemsCount?: number;
  /**
   * A message describing the loading state.
   * The default loading rows do not render it.
   * It is forwarded to a custom `loading` slot component.
   */
  message?: React.ReactNode;
}
/**
 * The owner state of the `loading` slot.
 */
export interface RichTreeViewLoadingSlotOwnerState {
  /**
   * The id of the item whose children are loading.
   * `null` while the whole tree is loading.
   */
  itemId: TreeViewItemId | null;
}
export interface RichTreeViewLoadingSlotProps<TOwnerState extends object> {
  root?: SlotComponentProps<'ul', {}, TOwnerState>;
  loading?: SlotComponentProps<'div', RichTreeViewLoadingSlotOwnProps, RichTreeViewLoadingSlotOwnerState>;
  itemLoader?: SlotComponentProps<'li', {}, TreeItemLoaderOwnerState>;
}
export interface RichTreeViewLoadingClasses {
  root?: string;
  itemLoader?: string;
}
export interface RichTreeViewLoadingProps<TStore extends TreeViewAnyStore, TOwnerState extends object> {
  store: TreeViewStoreInContext<TStore>;
  slots: RichTreeViewLoadingSlots;
  slotProps?: RichTreeViewLoadingSlotProps<TOwnerState>;
  ownerState: TOwnerState;
  forwardedProps: React.HTMLAttributes<HTMLUListElement>;
  rootRef: React.Ref<HTMLUListElement>;
  classes: RichTreeViewLoadingClasses;
}
export interface RichTreeViewItemLoadersProps {
  classes: Pick<RichTreeViewLoadingClasses, 'itemLoader'>;
  slots: Pick<RichTreeViewLoadingSlots, 'itemLoader'>;
  slotProps?: Pick<RichTreeViewLoadingSlotProps<object>, 'itemLoader'>;
  itemsCount: number;
}
/**
 * Renders the default loading rows without any wrapper.
 * Used by `RichTreeViewLoading` for the whole-tree loading state and by
 * `RichTreeViewItem` for the children of an item that lazily loads them.
 * It must render inside a `TreeItemLoaderContext` provider.
 */
export declare function RichTreeViewItemLoaders(props: RichTreeViewItemLoadersProps): React.JSX.Element;
/**
 * Provides the layout information the loading rows need to `TreeItemLoader`.
 * Wraps both the default rows and a custom `loading` slot, so custom loading
 * UIs composed with `TreeItemLoader` keep the correct depth and height.
 */
export declare function RichTreeViewLoadingContext<TStore extends TreeViewAnyStore>(props: {
  store: TreeViewStoreInContext<TStore>;
  itemDepth?: number;
  children: React.ReactNode;
}): React.JSX.Element;
/**
 * Renders the loading placeholder shared by `RichTreeView` and `RichTreeViewPro`.
 * It reuses `useTreeViewRootProps` so the root element keeps the same `role="tree"`,
 * `id`, `aria-multiselectable` and slot/className behavior as the non-loading tree.
 */
export declare function RichTreeViewLoading<TStore extends TreeViewAnyStore, TOwnerState extends object>(props: RichTreeViewLoadingProps<TStore, TOwnerState>): React.JSX.Element;