@yworks/react-yfiles-orgchart
Version:
yFiles React Organization Chart Component - A powerful and versatile React component based on the yFiles library, allows you to seamlessly incorporate dynamic and interactive organization charts into your applications.
961 lines (918 loc) • 32.1 kB
TypeScript
import { ComponentType } from 'react';
import { CSSProperties } from 'react';
import { GraphComponent } from '@yfiles/yfiles';
import { JSX as JSX_2 } from 'react';
import { PropsWithChildren } from 'react';
import * as react from 'react';
import * as react_jsx_runtime from 'react/jsx-runtime';
/**
* A connection arrow configuration.
*/
export declare interface Arrow {
/**
* The arrow color.
*/
color?: string;
/**
* The shape of the arrow.
*/
type?: 'ellipse' | 'cross' | 'stealth' | 'diamond' | 'none' | 'open' | 'triangle' | 'deltoid' | 'kite' | 'chevron';
}
/**
* A connection style configuration.
*/
export declare interface ConnectionStyle {
/**
* An optional CSS class that's used by the connection.
*/
className?: string;
/**
* The thickness of the connection.
*/
thickness?: number;
/**
* The bend smoothing of the connection.
*/
smoothingLength?: number;
/**
* The source arrow type.
*/
sourceArrow?: Arrow;
/**
* The target arrow type.
*/
targetArrow?: Arrow;
}
/**
* A function type that provides connection styles between two items in an organization chart.
* The source/target represents the start/end item of the connection, respectively.
*/
export declare type ConnectionStyleProvider<TOrgChartItem extends OrgChartItem> = (source: TOrgChartItem, target: TOrgChartItem) => ConnectionStyle | undefined;
/**
* An entry in the context menu.
*/
export declare interface ContextMenuItem<TDataItem> {
/**
* The displayed text on the context menu item.
*/
title: string;
/**
* The function that is triggered when clicking the context menu item.
*/
action: ContextMenuItemAction<TDataItem>;
}
/**
* A callback type representing an action to be performed when a context menu item is clicked.
*/
export declare type ContextMenuItemAction<TDataItem> = (item: TDataItem | null) => void;
/**
* A function type specifying the context menu items for a data item.
*/
export declare type ContextMenuItemProvider<TDataItem> = (item: TDataItem | null) => ContextMenuItem<TDataItem>[];
/**
* The props provided by the context menu.
*/
export declare interface ContextMenuProps<TDataItem> {
/**
* A function specifying the context menu items for a data item.
*/
menuItems?: ContextMenuItemProvider<TDataItem>;
/**
* An optional component used for rendering a custom context menu.
*/
renderMenu?: ComponentType<RenderContextMenuProps<TDataItem>>;
/**
* Optional global props that get passed to the context-menu component
*/
extraProps?: Record<string, any>;
}
/**
* A button in the {@link Controls} component.
*/
export declare interface ControlButton {
/**
* The function that is triggered when clicking the control button.
*/
action: () => void;
/**
* The url or element to be used as the button icon.
*/
icon?: string | JSX_2.Element;
/**
* The class name to style the control button.
*/
className?: string;
/**
* Whether the control button is active.
*/
disabled?: boolean;
/**
* The tooltip that is displayed when hovering the control button.
*/
tooltip?: string;
}
/**
* The Controls component renders buttons that perform actions on the graph.
* This component must be used inside a parent component that displays the graph, or its corresponding provider.
*
* ```tsx
* function App() {
* const button1 = { action: () => alert('Button 1 clicked!'), icon: <div>Button 1</div> }
* const button2 = { action: () => alert('Button 2 clicked!'), icon: <div>Button 2</div> }
* return (
* <MyReactYFilesComponent data={data}>
* <Controls buttons={() => [button1, button2]}></Controls>
* </MyReactYFilesComponent>
* )
* }
* ```
*/
export declare function Controls({ buttons, orientation, position, className, renderControls }: ControlsProps & PropsWithChildren): react_jsx_runtime.JSX.Element;
/**
* A function type specifying the buttons of the {@link Controls} component.
*/
export declare type ControlsButtonProvider = () => ControlButton[];
/**
* The props provided by the {@link Controls}.
*/
export declare interface ControlsProps {
/**
* A function specifying the buttons that are rendered by the {@link Controls} component.
*/
buttons: ControlsButtonProvider;
/**
* The orientation of the {@link Controls} component.
*/
orientation?: 'horizontal' | 'vertical';
/**
* The CSS class of the {@link Controls} component.
*/
className?: string;
/**
* The position of the {@link Controls} component.
*/
position?: Position | 'custom';
/**
* An optional component used for rendering a custom {@link Controls} component.
*/
renderControls?: ComponentType<RenderControlsProps>;
}
/**
* A type that consists of a list of custom data. It can be used to ensure that the input data has the
* correct format and to adjust custom components that visualize items or context menus.
*/
export declare type CustomOrgChartData<TCustomProps> = CustomOrgChartItem<TCustomProps>[];
/**
* A data type that combines custom data props with the {@link OrgChartItem}. Data needs to fit in
* this type so the component can handle the structure of the organizational chart correctly.
*/
export declare type CustomOrgChartItem<TCustomProps = {
status?: 'present' | 'busy' | 'travel' | 'unavailable';
position?: string;
name?: string;
email?: string;
phone?: string;
fax?: string;
businessUnit?: string;
icon?: string;
}> = TCustomProps & OrgChartItem;
/**
* Settings to configure how the graph is exported.
*/
export declare interface ExportSettings {
/**
* Gets or sets the scale for the export.
*
* A scale of 1 preserves the original size, a scale of 0.5 results in a target image with half the original size and so on.
* This value has to be strictly greater than 0 and finite. Its default value is 1.0
*/
scale?: number;
/**
* Gets or sets the bounds of the content to export in world coordinates.
* The default behavior is to use bounds to encompass the whole diagram.
*/
bounds?: {
x: number;
y: number;
width: number;
height: number;
};
/**
* Gets or sets the zoom property to use during the creation of the visualization.
*
* In contrast to the scale property, which works on the output graphics, this property determines what zoom value is
* to be assumed on the canvas when creating the visual. This can affect the rendering of zoom-dependent visuals,
* especially level-of-detail rendering.
*
* This value has to be strictly greater than 0. Its default value is 1.0
*/
zoom?: number;
/**
* Gets or sets the background color for the exported SVG.
* CSS color values are supported.
* https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
*/
background?: string;
/**
* Gets or sets the margins for the exported image.
*
* The margins are added to the content.
* This means that an image with non-zero margins is larger than the export area even if the scale is 1.0.
* The margins are not scaled. They are interpreted to be in units (pixels for bitmaps) for the resulting image.
* The default is an empty margin.
*/
margins?: {
top: number;
right: number;
bottom: number;
left: number;
};
/**
* Gets or sets a value indicating whether all external images should be inlined and encoded as Base64 data URIs.
* Note that this feature is not applicable when loading images from cross-origin sources.
* The default is true.
*/
inlineImages?: boolean;
}
/**
* A callback type invoked when an item has been focused.
*/
export declare type ItemFocusedListener<TOrgChartItem extends OrgChartItem> = (item: TOrgChartItem | null) => void;
/**
* A callback type invoked when the hovered item has changed.
*/
export declare type ItemHoveredListener<TOrgChartItem extends OrgChartItem> = (item: TOrgChartItem | null, oldItem?: TOrgChartItem | null) => void;
/**
* A callback type invoked when an item has been selected or deselected.
*/
export declare type ItemSelectedListener<TOrgChartItem extends OrgChartItem> = (selectedItems: TOrgChartItem[]) => void;
/**
* The OrgChart component visualizes the given data as an organization chart.
* All data items have to be included in the [data]{@link OrgChartProps.data}. The relationship between an item
* and its subordinates is specified in the [subordinates]{@link OrgChartItem.subordinates}.
*
* ```tsx
* function OrganizationChart() {
* return (
* <OrgChart data={data}> </OrgChart>
* )
* }
* ```
*/
export declare function OrgChart<TOrgChartItem extends OrgChartItem = CustomOrgChartItem, TNeedle = string>(props: OrgChartProps<TOrgChartItem, TNeedle> & PropsWithChildren): react_jsx_runtime.JSX.Element;
/**
* The basic data type for the connections between data items visualized by the {@link OrgChart} component.
*/
export declare interface OrgChartConnection<TOrgChartItem extends OrgChartItem> {
source: TOrgChartItem;
target: TOrgChartItem;
}
/**
* Default [context menu items]{@link ContextMenuProps.menuItems} for the context menu component that include the
* standard orgchart actions: show/hide superior, show/hide subordinates, and show all items.
*
* ```tsx
* function OrganizationChart() {
* return (
* <OrgChart data={data} contextMenuItems={OrgChartContextMenuItems}></OrgChart>
* )
* }
* ```
*
* @param item - The item to provide the items for.
* @returns an array of [context menu items]{@link ContextMenuProps.menuItems}.
*/
export declare function OrgChartContextMenuItems(item: OrgChartItem | OrgChartConnection<OrgChartItem> | null): ContextMenuItem<OrgChartItem>[];
/**
* Default [buttons]{@link ControlsProps.buttons} for the {@link Controls} component that provide
* useful actions to interact with the organization chart.
*
* This includes the following buttons: zoom in, zoom out, zoom to the original size, fit the graph into the viewport, and expand the whole diagram.
*
* @returns an array of [control buttons]{@link ControlsProps.buttons}.
*
* ```tsx
* function OrganizationChart() {
* return (
* <OrgChart data={data}>
* <Controls buttons={OrgChartControlButtons}></Controls>
* </OrgChart>
* )
* }
* ```
*/
export declare function OrgChartControlButtons(): ControlButton[];
/**
* The basic data type for the data items visualized by the {@link OrgChart} component.
*/
export declare interface OrgChartItem {
/**
* The item's unique id.
*/
id: OrgChartItemId;
/**
* Specifies the subordinates of this item.
* This array should contain ids of items from the {@link OrgChartProps.data}.
*/
subordinates?: OrgChartItemId[];
/**
* Whether this item is an assistant. Assistants are placed on a separate layer between their superior
* and their non-assistant subordinates.
*/
assistant?: boolean;
/**
* The optional render width of this item. If the width is not specified, it is determined by measuring the
* item visualization unless a default size is defined by {@link OrgChartProps.nodeSize}.
*/
width?: number;
/**
* The optional render height of this item. If the height is not specified, it is determined by measuring the
* item visualization unless a default size is defined by {@link OrgChartProps.nodeSize}.
*/
height?: number;
/**
* The optional CSS class name that can be accessed in a custom component that renders the item.
*/
className?: string;
/**
* The optional CSS style that can be accessed in a custom component that renders the item.
*/
style?: CSSProperties;
}
/**
* The item's unique id.
*/
export declare type OrgChartItemId = string | number;
/**
* The OrgChartModel provides common functionality to interact with the {@link OrgChart} component.
*/
export declare interface OrgChartModel {
/**
* The [yFiles GraphComponent]{@link http://docs.yworks.com/yfileshtml/#/api/GraphComponent} used
* by the {@link OrgChart} component to display the graph.
*
* This property is intended for advanced users who have a familiarity with the
* [yFiles for HTML]{@link https://www.yworks.com/products/yfiles-for-html} library.
*/
graphComponent: GraphComponent;
/**
* Shows all items in the organization chart.
*/
showAll(): Promise<void>;
/**
* Whether there are any hidden organization chart items to show.
*/
canShowAll(): boolean;
/**
* Shows the superior of the given item.
*/
showSuperior(item: OrgChartItem): Promise<void>;
/**
* Whether the superior of the given item is hidden.
*/
canShowSuperior(item: OrgChartItem): boolean;
/**
* Hides the superior of the given item.
*/
hideSuperior(item: OrgChartItem): Promise<void>;
/**
* Whether the superior of the given item is visible.
*/
canHideSuperior(item: OrgChartItem): boolean;
/**
* Shows the subordinates of the given item.
*/
showSubordinates(item: OrgChartItem): Promise<void>;
/**
* Whether the subordinates of the given item are hidden.
*/
canShowSubordinates(item: OrgChartItem): boolean;
/**
* Hides the subordinates of the given item.
*/
hideSubordinates(item: OrgChartItem): Promise<void>;
/**
* Whether the subordinates of the given item are visible.
*/
canHideSubordinates(item: OrgChartItem): boolean;
/**
* Refreshes the organization chart layout.
* If the incremental parameter is set to true, the layout considers certain
* items as fixed and arranges only the items contained in the incrementalItems array.
*/
applyLayout(incremental?: boolean, incrementalItems?: OrgChartItem[]): void;
/**
* Retrieves the items that match the search currently.
*/
getSearchHits: () => OrgChartItem[];
/**
* Pans the viewport to the center of the given items.
*/
zoomTo(items: (OrgChartItem | OrgChartConnection<OrgChartItem>)[]): void;
/**
* Pans the viewport to center the given item.
*/
zoomToItem(item: OrgChartItem | OrgChartConnection<OrgChartItem>): void;
/**
* Increases the zoom level.
*/
zoomIn(): void;
/**
* Decreases the zoom level.
*/
zoomOut(): void;
/**
* Fits the organization chart inside the viewport.
*/
fitContent(): void;
/**
* Resets the zoom level to 1.
*/
zoomToOriginal(): void;
/**
* Adds a listener called whenever organization chart items are shown or hidden.
*/
addGraphUpdatedListener(listener: () => void): void;
/**
* Removes a listener added in {@link OrgChartModel.addGraphUpdatedListener}.
*/
removeGraphUpdatedListener(listener: () => void): void;
/**
* Returns the currently visible items of the organization chart.
*/
getVisibleItems(): OrgChartItem[];
/**
* Exports the organization chart to an SVG file.
* @throws Exception if the diagram cannot be exported.
* The exception may occur when the diagram contains images from cross-origin sources.
* In this case, disable {@link ExportSettings.inlineImages} and encode the icons manually to base64.
*/
exportToSvg(exportSettings?: ExportSettings): Promise<void>;
/**
* Exports the organization chart to a PNG Image.
* @throws Exception if the diagram cannot be exported.
* The exception may occur when the diagram contains images from cross-origin sources.
* In this case, disable {@link ExportSettings.inlineImages} and encode the icons manually to base64.
*/
exportToPng(exportSettings?: ExportSettings): Promise<void>;
/**
* Exports and prints the organization chart.
*/
print(printSettings?: PrintSettings): Promise<void>;
/**
* Triggers a re-rendering of the chart. This may become useful if properties in the data change and the visualization
* should update accordingly.
*/
refresh(): void;
}
/**
* The props for the {@link OrgChart} component.
*/
export declare interface OrgChartProps<TOrgChartItem extends OrgChartItem, TNeedle> {
/**
* The data items visualized by the organization chart.
*/
data: TOrgChartItem[];
/**
* An optional callback that's called when an item is focused.
*
* Note that the focused item is not changed if the empty canvas is clicked.
*/
onItemFocus?: ItemFocusedListener<TOrgChartItem>;
/**
* An optional callback that's called when an item is selected or deselected.
*/
onItemSelect?: ItemSelectedListener<TOrgChartItem>;
/**
* An optional callback that's called when the hovered item has changed.
*/
onItemHover?: ItemHoveredListener<TOrgChartItem>;
/**
* A string or a complex object to search for.
*
* The default search implementation can only handle strings and searches on the properties of the
* data item. For more complex search logic, provide an {@link OrgChart.onSearch} callback.
*/
searchNeedle?: TNeedle;
/**
* An optional callback that returns whether the given item matches the search needle.
*
* The default search implementation only supports string needles and searches all properties of the data item.
* Provide this callback to implement custom search logic.
*/
onSearch?: SearchFunction<TOrgChartItem, TNeedle>;
/**
* A custom render component used for rendering the given data item.
*/
renderItem?: ComponentType<RenderItemProps<TOrgChartItem>> | undefined;
/**
* A function that provides a style configuration for the given connection.
*/
connectionStyles?: ConnectionStyleProvider<TOrgChartItem>;
/**
* Specifies the CSS class used for the {@link OrgChart} component.
*/
className?: string;
/**
* Specifies whether the interactive collapse and expand buttons on the orgchart nodes are visible.
* The default is true.
*/
interactive?: boolean;
/**
* Specifies the CSS style used for the {@link OrgChart} component.
*/
style?: CSSProperties;
/**
* Specifies the default item size used when no explicit width and height are provided.
*/
itemSize?: {
width: number;
height: number;
};
/**
* An optional component that can be used for rendering a custom tooltip.
*/
renderTooltip?: ComponentType<RenderTooltipProps<TOrgChartItem | OrgChartConnection<TOrgChartItem>>>;
/**
* An optional function specifying the context menu items for a data item.
*/
contextMenuItems?: ContextMenuItemProvider<TOrgChartItem>;
/**
* An optional component that renders a custom context menu.
*/
renderContextMenu?: ComponentType<RenderContextMenuProps<TOrgChartItem>>;
/**
* The optional position of the popup. The default is 'top'.
*/
popupPosition?: 'right' | 'top' | 'top-right' | 'top-left' | 'bottom' | 'bottom-right' | 'bottom-left' | 'left';
/**
* An optional component used for rendering a custom popup.
*/
renderPopup?: ComponentType<RenderPopupProps<TOrgChartItem>>;
/**
* Specifies whether the layout algorithm should consider the existing elements as fixed.
* True if the layout should only place newly added items, false otherwise.
*/
incrementalLayout?: boolean;
}
/**
* The OrgChartProvider component is a [context provider]{@link https://react.dev/learn/passing-data-deeply-with-context},
* granting external access to the organization chart beyond the {@link OrgChart} component itself.
*
* This functionality proves particularly valuable when there's a toolbar or sidebar housing elements that require
* interaction with the organization chart. Examples would include buttons for zooming in and out or fitting the graph into the viewport.
*
* The snippet below illustrates how to leverage the OrgChartProvider, enabling a component featuring both an {@link OrgChart}
* and a sidebar to utilize the {@link useOrgChartContext} hook.
*
* ```tsx
* function OrgChartWrapper() {
* const { fitContent, zoomToItem } = useOrgChartContext()
*
* return (
* <>
* <OrgChart data={data} contextMenuItems={(item: CustomOrgChartItem | null) => {
* if (item) {
* return [{ title: 'Zoom to Item', action: () => item && zoomToItem(item) }]
* }
* return []
* }}>
* </OrgChart>
* <Sidebar>
* <button onClick={fitContent}>Fit Content</button>
* </Sidebar>
* </>
* )
* }
*
* function OrganizationChart () {
* return (
* <OrgChartProvider>
* <OrgChartWrapper></OrgChartWrapper>
* </OrgChartProvider>
* )
* }
* ```
*/
export declare const OrgChartProvider: (props: {
children?: react.ReactNode | undefined;
}) => react_jsx_runtime.JSX.Element;
/**
* The Overview component provides an overview of the graph displayed by its parent component.
* This component has to be used inside a parent component that displays the graph, or its corresponding provider.
*
* ```tsx
* function App() {
* return (
* <MyReactYFilesComponent data={data}>
* <Overview></Overview>
* </MyReactYFilesComponent>
* )
* }
* ```
*/
export declare function Overview({ title, className, position }: OverviewProps): react_jsx_runtime.JSX.Element;
/**
* The props for the {@link Overview} component.
*/
export declare interface OverviewProps {
/**
* The {@link Overview} title.
*/
title?: string;
/**
* An optional CSS class to be used by the {@link Overview} component.
*/
className?: string;
/**
* The position of the {@link Overview} component.
* When position is set to 'custom', the overview can be placed using a CSS-class.
*/
position?: Position | 'custom';
}
/**
* Specifies the possible positions for placing a component.
*/
export declare type Position = 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';
/**
* Settings to configure how the graph is printed.
*/
export declare type PrintSettings = {
/**
* Gets or sets the scale for the printing.
*
* A scale of 1 preserves the original size, a scale of 0.5 results in a target image with half the original size and so on.
* This value has to be strictly greater than 0 and finite. Its default value is 1.0
*/
scale?: number;
/**
* Gets or sets the bounds of the content to print in world coordinates.
* The default behavior is to use bounds to encompass the whole diagram.
*/
bounds?: {
x: number;
y: number;
width: number;
height: number;
};
/**
* Gets or sets the margins for the printed image.
*
* The margins are added to the content.
* This means that an image with non-zero margins is larger than the printed area even if the scale is 1.0.
* The margins are not scaled. They are interpreted to be in units (pixels for bitmaps) for the resulting image.
* The default is an empty margin.
*/
margins?: {
top: number;
right: number;
bottom: number;
left: number;
};
/**
* Gets or sets to print the diagram in multiple pages if the content does not fit on a single page.
* The default is false.
*/
tiledPrinting?: boolean;
/**
* Gets or sets the width of a single tile (page) in pt (1/72 inch), if {@link PrintSettings.tiledPrinting} is enabled.
* The default width is 595.
*/
tileWidth?: number;
/**
* Gets or sets the height of a single tile (page) in pt (1/72 inch), if {@link PrintSettings.tiledPrinting} is enabled.
* The default height is 842.
*/
tileHeight?: number;
};
/**
* Registers the [yFiles license]{@link http://docs.yworks.com/yfileshtml/#/dguide/licensing} which is needed to
* use the yFiles React component.
*
* ```tsx
* function App() {
* registerLicense(yFilesLicense)
*
* return (
* <MyReactYFilesComponent data={data}></MyReactYFilesComponent>
* )
* }
* ```
*
* @param licenseKey - The license key to register
*/
export declare function registerLicense(licenseKey: Record<string, unknown>): void;
/**
* The props for rendering the context menu.
*/
export declare interface RenderContextMenuProps<TDataItem> {
/**
* The data item for which the context menu was opened, or null.
*/
item: TDataItem | null;
/**
* The menu items to be rendered.
*/
menuItems: ContextMenuItem<TDataItem>[];
/**
* A function that closes the context menu.
*/
onClose: Function;
}
/**
* The props for rendering the {@link Controls} component.
*/
export declare interface RenderControlsProps {
/**
* The buttons that are rendered by the {@link Controls} component.
*/
buttons: ControlButton[];
/**
* The orientation of the {@link Controls} component.
*/
orientation?: 'horizontal' | 'vertical';
/**
* The CSS class of the {@link Controls} component.
*/
className?: string;
/**
* The position of the {@link Controls} component.
*/
position?: Position | 'custom';
}
/**
* The interface of the props passed to the HTML react component for rendering the node contents.
*/
export declare interface RenderItemProps<TDataItem> {
/**
* Whether the item is currently selected.
*/
selected: boolean;
/**
* Whether the item is currently being hovered.
*/
hovered: boolean;
/**
* Whether the item is currently focused.
*/
focused: boolean;
/**
* The width of the item.
*/
width: number;
/**
* The height of the item.
*/
height: number;
/**
* The detail level of the visualization. Use this value to implement level-of-detail rendering.
*/
detail: 'low' | 'high';
/**
* The data item to render.
*/
dataItem: TDataItem;
}
/**
* A default component that visualizes nodes in the organization chart. It is optimized for data items
* of the type Employee. However, it will render other properties, too. The component can be adjusted for each item
* individually or for all items at once by setting {@link OrgChartItem.className} or {@link OrgChartItem.style} in the
* data.
*
* ```ts
* type Employee = {
* status: 'present' | 'busy' | 'travel' | 'unavailable'
* position: string
* name: string
* email: string
* phone: string
* icon: string
* }
* ```
*
* The component is already used as a fallback if no render prop is specified on {@link OrgChart}.
* However, it can be integrated in another component, for example to have different styles for different items.
*
* ```tsx
* function OrganizationChart() {
* const MyOrgChartItem = useMemo(
* () => (props: RenderItemProps<CustomOrgChartItem<Employee>>) => {
* const { dataItem } = props
* if (dataItem?.name === 'Eric Joplin') {
* return (
* <>
* <div
* style={{
* backgroundColor: 'blue',
* width: '100%',
* height: '100%'
* }}
* >
* <div>{dataItem.name}</div>
* </div>
* </>
* )
* } else {
* return <RenderOrgChartItem {...props}></RenderOrgChartItem>
* }
* },
* []
* )
*
* return (
* <OrgChart data={data} renderItem={MyOrgChartItem}></OrgChart>
* )
* }
* ```
*/
export declare function RenderOrgChartItem<TOrgChartItem extends OrgChartItem>({ dataItem, detail, hovered, focused, selected }: RenderItemProps<TOrgChartItem>): react_jsx_runtime.JSX.Element;
/**
* A default template for the organization chart's popup that shows the name property of the data item.
*
* ```tsx
* function OrganizationChart() {
* return (
* <OrgChart data={data} renderPopup={RenderOrgChartPopup}></OrgChart>
* )
* }
* ```
*
* @param data - The data item to show the popup for.
*/
export declare function RenderOrgChartPopup<TOrgChartItem extends OrgChartItem>({ item, onClose }: RenderPopupProps<TOrgChartItem>): react_jsx_runtime.JSX.Element;
/**
* A default template for the organization chart's tooltip that shows the name property of the data item.
*
* ```tsx
* function OrganizationChart() {
* return (
* <OrgChart data={data} renderTooltip={RenderOrgChartTooltip}></OrgChart>
* )
* }
* ```
*
* @param data - The data item to show the tooltip for.
*/
export declare function RenderOrgChartTooltip<TOrgChartItem extends OrgChartItem>({ data }: RenderTooltipProps<TOrgChartItem | OrgChartConnection<TOrgChartItem>>): react_jsx_runtime.JSX.Element | null;
/**
* The props for rendering the popup.
*/
export declare interface RenderPopupProps<TDataItem> {
/**
* The data item for which the popup was opened.
*/
item: TDataItem;
/**
* A function that closes the popup.
*/
onClose: Function;
}
/**
* The props for rendering the tooltip.
*/
export declare interface RenderTooltipProps<TDataItem> {
/**
* The data item for which the tooltip should be rendered.
*/
data: TDataItem;
}
/**
* A function that returns whether the given item matches the search needle.
*/
export declare type SearchFunction<TOrgChartItem extends OrgChartItem, TNeedle = string> = (item: TOrgChartItem, needle: TNeedle) => boolean;
/**
* A hook that provides access to the {@link OrgChartModel} which has various functions that can be used to interact with the {@link OrgChart}.
* It can only be used inside an {@link OrgChart} component or an {@link OrgChartProvider}.
* @returns the {@link OrgChartModel} used in this context.
*
* ```tsx
* function OrgChartWrapper() {
* const { fitContent, zoomToItem } = useOrgChartContext()
*
* return (
* <>
* <OrgChart data={data} contextMenuItems={(item: CustomOrgChartItem | null) => {
* if (item) {
* return [{ title: 'Zoom to Item', action: () => item && zoomToItem(item) }]
* }
* return []
* }}>
* </OrgChart>
* <Sidebar>
* <button onClick={fitContent}>Fit Content</button>
* </Sidebar>
* </>
* )
* }
*
* function OrganizationChart () {
* return (
* <OrgChartProvider>
* <OrgChartWrapper></OrgChartWrapper>
* </OrgChartProvider>
* )
* }
* ```
*/
export declare function useOrgChartContext(): OrgChartModel;
export { }