@mui/x-tree-view/internals/TreeViewProvider/TreeViewStyleContext.d.mts

The community edition of the MUI X Tree View components.

import type { SlotComponentProps } from '@mui/utils/types';
import * as React from 'react';
import type { TreeItemLoaderOwnerState } from "../../TreeItemLoader/index.mjs";
import type { RichTreeViewLoadingSlotOwnProps, RichTreeViewLoadingSlotOwnerState } from "../components/RichTreeViewLoading.mjs";
export interface TreeViewClasses {
  /** Styles applied to the root element. */
  root: string;
  /** Styles applied to the item's root element. */
  item: string;
  /** Styles applied to the item's content element. */
  itemContent: string;
  /** Styles applied to the item's transition element. */
  itemGroupTransition: string;
  /** Styles applied to the item's icon container element icon. */
  itemIconContainer: string;
  /** Styles applied to the item's label element. */
  itemLabel: string;
  /** Styles applied to the item's label input element (visible only when editing is enabled). */
  itemLabelInput: string;
  /** Styles applied to the item's checkbox element. */
  itemCheckbox: string;
  /** Styles applied to the item's drag and drop overlay element. */
  itemDragAndDropOverlay: string;
  /** Styles applied to the item's error icon element */
  itemErrorIcon: string;
  /** Styles applied to the item's loading icon element */
  itemLoadingIcon: string;
  /** Styles applied to the item loader element. */
  itemLoader: string;
}
export interface TreeViewSlots {
  /**
   * The default icon used to collapse the item.
   */
  collapseIcon?: React.ElementType | null;
  /**
   * The default icon used to expand the item.
   */
  expandIcon?: React.ElementType | null;
  /**
   * The default icon displayed next to an end item.
   * This is applied to all Tree Items and can be overridden by the TreeItem `icon` slot prop.
   */
  endIcon?: React.ElementType | null;
}
export interface TreeViewSlotProps {
  collapseIcon?: SlotComponentProps<'svg', {}, {}>;
  expandIcon?: SlotComponentProps<'svg', {}, {}>;
  endIcon?: SlotComponentProps<'svg', {}, {}>;
}
/**
 * Slots stored in the style context.
 * The loading slots only exist on the components with a loading state,
 * so they are not part of the public `TreeViewSlots` interface.
 */
export interface TreeViewStyleContextSlots extends TreeViewSlots {
  /**
   * Component rendered instead of the default loading rows.
   */
  loading?: React.ElementType;
  /**
   * Component rendered for each loading row. The default renders a skeleton row.
   */
  itemLoader?: React.ElementType;
}
/**
 * Slot props stored in the style context.
 * The loading slot props only exist on the components with a loading state,
 * so they are not part of the public `TreeViewSlotProps` interface.
 */
export interface TreeViewStyleContextSlotProps extends TreeViewSlotProps {
  loading?: SlotComponentProps<'div', RichTreeViewLoadingSlotOwnProps, RichTreeViewLoadingSlotOwnerState>;
  itemLoader?: SlotComponentProps<'li', {}, TreeItemLoaderOwnerState>;
}
export interface TreeViewStyleContextValue {
  classes: Partial<TreeViewClasses>;
  slots: TreeViewStyleContextSlots;
  slotProps: TreeViewStyleContextSlotProps;
}
/**
 * @ignore - internal component.
 */
export declare const TreeViewStyleContext: React.Context<TreeViewStyleContextValue>;
export declare const useTreeViewStyleContext: () => TreeViewStyleContextValue;