@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 { ThemingProps } from "../theme/types.js";
import { SystemProps } from "../system/system.js";
import { IconProp } from "../icon/icon.types.js";
import { LinkProps } from "../link/link.types.js";
import { ListItemProps } from "../list/list.types.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