@veracity/vui/dist/tree/tree.types.d.ts

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { PropsOf } from "../utils/types.js";
import "../utils/index.js";
import { ThemingProps } from "../theme/types.js";
import "../theme/index.js";
import { SystemProps } from "../system/system.js";
import "../system/index.js";
import { IconProp } from "../icon/icon.types.js";
import "../icon/index.js";
import { LinkProps } from "../link/link.types.js";
import "../link/index.js";
import { ListItemProps } from "../list/list.types.js";
import "../list/index.js";
import { JSX, ReactNode } from "react";
//#region src/tree/tree.types.d.ts
type TreeProps = SystemProps & ThemingProps<'Tree'> & {
  /** Currently selected item.  */
  activeItemId?: TreeItemId;
  /** Socket defining the collapse icon on the left. */
  iconCollapse?: IconProp;
  /** Socket defining the expand icon on the left. */
  iconExpand?: IconProp;
  /** Socket displaying a tree of items. */
  items?: PropsOf<'li', TreeItemProps>[] | JSX.Element;
  /** Socket defining the size of the tree. */
  onClickItem?: (id: TreeItemId) => void;
};
type TreeItemLinkProps = PropsOf<'a', LinkProps> | object;
type TreeItemId = string | number;
type TreeOnToggleEvent = {
  id: TreeItemId;
  collapsed: boolean;
};
type TreeItemProps = ListItemProps & ThemingProps<'Tree'> & {
  activeItemId?: TreeItemId;
  /** internal, not exposed */
  activeItemIndex?: TreeItemId;
  /** Unique ID */
  id: TreeItemId;
  /** Centers the content vertically and horizontally. @deprecated */
  center?: boolean;
  /** Centers the content horizontally. @deprecated */
  centerH?: boolean;
  /** Centers the content vertically. @deprecated */
  centerV?: boolean;
  /** Socket defining the collapse icon on the left. */
  iconCollapse?: IconProp;
  /** Socket defining the expand icon on the left. */
  iconExpand?: IconProp;
  /** The children of this tree item. */
  items?: PropsOf<'li', TreeItemProps>[];
  children?: ReactNode;
  /** Collapsed state */
  isCollapsed?: boolean;
  /** indicates if the item is first-level; if yes it can be styled differently */
  isFirstLevel?: boolean;
  /** Displays item and its content in disabled state with appropriate styling. */
  disabled?: boolean;
  /** Displays item in selected state with appropriate styling. */
  isActive?: boolean;
  /** If provided, content is wrapper with a link and the props are provided to the element. */
  linkProps?: TreeItemLinkProps;
  /** internal, padding left; if provided it will accumulate function of levels. */
  propagatedPL?: number;
  /** Socket defining the size of the padding increment. */
  plUnit?: number;
  /** Socket displaying text within the item. */
  text: ReactNode;
  /** Collapse change state */
  onToggle?: (event: TreeOnToggleEvent) => void;
  onClickTreeItem?: (id: TreeItemId) => void;
};
//#endregion
export { TreeItemId, TreeItemLinkProps, TreeItemProps, TreeOnToggleEvent, TreeProps };

//# sourceMappingURL=tree.types.d.ts.map