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 { }