@yworks/react-yfiles-company-ownership/dist/index.d.ts

yFiles React Company Ownership Component - A powerful and versatile React component based on the yFiles library, allows you to seamlessly incorporate dynamic and interactive company ownership diagrams into your applications.

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';
}

/**
 * The CompanyOwnership component visualizes the given data as a company ownership chart.
 * All data items have to be included in the [data]{@link CompanyOwnershipProps.data}.
 *
 * ```tsx
 * function CompanyOwnershipChart() {
 *   return (
 *     <CompanyOwnership data={data}> </CompanyOwnership>
 *   )
 * }
 * ```
 */
export declare function CompanyOwnership<TEntity extends Entity = UserEntity, TConnection extends Connection = UserConnection, TNeedle = string>(props: CompanyOwnershipProps<TEntity, TConnection, TNeedle> & PropsWithChildren): react_jsx_runtime.JSX.Element;

/**
 * The company ownership data consisting of {@link Entity}s and {@link Connection}s.
 */
export declare type CompanyOwnershipData<TEntity extends Entity = Entity, TConnection extends Connection = Connection> = {
    companies: TEntity[];
    connections: TConnection[];
};

/**
 * The CompanyOwnershipModel provides common functionality to interact with the {@link CompanyOwnership} component.
 */
export declare interface CompanyOwnershipModel {
    /**
     * The [yFiles GraphComponent]{@link http://docs.yworks.com/yfileshtml/#/api/GraphComponent} used
     * by the {@link CompanyOwnership} 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;
    /**
     * Whether the item is a connection.
     */
    isConnection(item: any): item is Connection;
    /**
     * Highlights an item and all other items connected to it.
     * Two items are connected when there exists an edge path
     * between them, even if there are several hops (items)
     * on the path.
     */
    highlightConnectedItems(item: Entity): void;
    /**
     * Whether there is currently a connected items
     * highlight visualized in the graph that can be cleared.
     */
    canClearConnectedItemsHighlight(): boolean;
    /**
     * Clears the connected items highlight visualization.
     */
    clearConnectedItemsHighlight(): void;
    /**
     * Shows all items in the company ownership.
     */
    showAll(): void;
    /**
     * Whether there are any hidden items to show.
     */
    canShowAll(): boolean;
    /**
     * Refreshes the company ownership 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?: Entity[], fixedItem?: Entity, fitViewport?: boolean): Promise<void>;
    /**
     * Pans the viewport to the center of the given items.
     */
    zoomTo(items: (Entity | Connection)[]): void;
    /**
     * Increases the zoom level.
     */
    zoomIn(): void;
    /**
     * Decreases the zoom level.
     */
    zoomOut(): void;
    /**
     * Fits the chart inside the viewport.
     */
    fitContent(insets?: number): void;
    /**
     * Resets the zoom level to 1.
     */
    zoomToOriginal(): void;
    /**
     * Retrieves the items that match the search currently.
     */
    getSearchHits: () => Entity[];
    /**
     * Exports the company ownership 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 company ownership 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 company ownership 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;
    /**
     * Filters the graph for all items that are connected to
     * the given item.
     * Connections can be over multiple hops.
     */
    showGenealogy(item: Entity): void;
    /**
     * Adds a listener called whenever companies are shown or hidden.
     */
    addGraphUpdatedListener(listener: () => void): void;
    /**
     * Removes a listener added in {@link CompanyOwnershipModel.addGraphUpdatedListener}.
     */
    removeGraphUpdatedListener(listener: () => void): void;
    /**
     * Returns the currently visible items of the company ownership chart.
     */
    getVisibleItems(): Entity[];
    /**
     * Shows the predecessors of the given item.
     */
    showPredecessors(item: Entity): Promise<void>;
    /**
     * Whether the predecessors of the given item is hidden.
     */
    canShowPredecessors(item: Entity): boolean;
    /**
     * Hides the predecessors of the given item.
     */
    hidePredecessors(item: Entity): Promise<void>;
    /**
     * Whether the predecessors of the given item is visible.
     */
    canHidePredecessors(item: Entity): boolean;
    /**
     * Shows the successors of the given item.
     */
    showSuccessors(item: Entity): Promise<void>;
    /**
     * Whether the successors of the given item are hidden.
     */
    canShowSuccessors(item: Entity): boolean;
    /**
     * Hides the successors of the given item.
     */
    hideSuccessors(item: Entity): Promise<void>;
    /**
     * Whether the successors of the given item are visible.
     */
    canHideSuccessors(item: Entity): boolean;
}

/**
 * The props for the {@link CompanyOwnership} component.
 */
export declare interface CompanyOwnershipProps<TEntity extends Entity, TConnection extends Connection, TNeedle> {
    /**
     * The data items visualized by the company ownership.
     */
    data: CompanyOwnershipData<TEntity, TConnection>;
    /**
     * 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<TEntity | TConnection>;
    /**
     * An optional callback that's called when an item is selected or deselected.
     */
    onItemSelect?: ItemSelectedListener<TEntity | TConnection>;
    /**
     * An optional callback that's called when the hovered item has changed.
     */
    onItemHover?: ItemHoveredListener<TEntity | TConnection>;
    /**
     * 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 CompanyOwnership.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<TEntity | TConnection, TNeedle>;
    /**
     * A custom render component used for rendering the given data item.
     */
    renderEntity?: ComponentType<RenderEntityProps<TEntity>>;
    /**
     * A function that provides a style configuration for the given connection.
     */
    connectionStyleProvider?: ConnectionStyleProvider<TEntity, TConnection>;
    /**
     * Specifies the CSS class used for the {@link CompanyOwnership} component.
     */
    className?: string;
    /**
     * Specifies the CSS style used for the {@link CompanyOwnership} 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<TEntity | TConnection>>;
    /**
     * An optional function specifying the context menu items for a data item.
     */
    contextMenuItems?: ContextMenuItemProvider<TEntity | TConnection>;
    /**
     * An optional component that renders a custom context menu.
     */
    renderContextMenu?: ComponentType<RenderContextMenuProps<TEntity>>;
    /**
     * Options for configuring the layout style and behavior.
     */
    layoutOptions?: LayoutOptions;
    /**
     * State setter used to indicate whether the layout is running.
     */
    setLayoutRunning?: React.Dispatch<React.SetStateAction<boolean>>;
    /**
     * Provides a label description for connections.
     */
    connectionLabelProvider?: ConnectionLabelProvider<TConnection>;
    /**
     * Provides a label description for entities.
     * The label is not added if renderEntity is set.
     */
    entityLabelProvider?: EntityLabelProvider<TEntity>;
    /**
     * Optional Web Worker to run the layout calculation.
     * This requires the initialization of a Web Worker, see {@link initializeWebWorker}.
     */
    layoutWorker?: Worker;
    /**
     * Sets the styling options for the different highlight indicators.
     */
    highlightOptions?: HighlightOptions;
}

/**
 * The CompanyOwnershipProvider component is a [context provider]{@link https://react.dev/learn/passing-data-deeply-with-context},
 * granting external access to the company ownership chart beyond the {@link CompanyOwnership} component itself.
 *
 * This functionality proves particularly valuable when there's a toolbar or sidebar housing elements that require
 * interaction with the company ownership 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 CompanyOwnershipProvider, enabling a component featuring both a {@link CompanyOwnership}
 * and a sidebar to utilize the {@link useCompanyOwnershipContext} hook.
 *
 * ```tsx
 * function CompanyOwnershipWrapper() {
 *   const { fitContent, zoomTo } = useCompanyOwnershipContext()
 *
 *   return (
 *     <>
 *       <CompanyOwnership data={data} contextMenuItems={item => {
 *           if (item) {
 *             return [{ title: 'Zoom to Item', action: () => zoomTo([item]) }]
 *           }
 *           return []
 *         }}>
 *       </CompanyOwnership>
 *       <div style={{position: 'absolute', top: '20px', left: '20px'}}>
 *         <button onClick={() => fitContent()}>Fit Content</button>
 *       </div>
 *     </>
 *   )
 * }
 *
 * function CompanyOwnershipComponent () {
 *   return (
 *     <CompanyOwnershipProvider>
 *       <CompanyOwnershipWrapper></CompanyOwnershipWrapper>
 *     </CompanyOwnershipProvider>
 *   )
 * }
 * ```
 */
export declare const CompanyOwnershipProvider: (props: {
    children?: react.ReactNode | undefined;
}) => react_jsx_runtime.JSX.Element;

/**
 * The basic data type for the connections between entities visualized by the {@link CompanyOwnership} component.
 */
export declare interface Connection {
    /**
     * The id of the connection source entity
     */
    sourceId: EntityId;
    /**
     * The id of the connection target entity
     */
    targetId: EntityId;
    /**
     * The optional type of the connection.
     * The type determines the default visualization of the connection.
     */
    type?: ConnectionType;
}

/**
 * A function that provides text to display as a label on a connection.
 */
export declare type ConnectionLabelProvider<TConnection extends Connection> = (item: TConnection, companyOwnershipModel: CompanyOwnershipModel) => SimpleLabel | undefined;

/**
 * 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 for company ownership links.
 *
 * The connection property is the {@link Connection}, the source and target properties
 * represent the start and end {@link Entity} of the connection, respectively.
 */
export declare type ConnectionStyleProvider<TEntity extends Entity = Entity, TConnection extends Connection = Connection> = (data: {
    source: TEntity;
    target: TEntity;
    connection: TConnection;
}) => ConnectionStyle | undefined;

/**
 * A connection can either be a simple "Relation" or an "Ownership" connection, which additionally
 * has a numerical ownership property.
 */
export declare type ConnectionType = 'Ownership' | 'Relation';

/**
 * 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>;
}

/**
 * Default [context menu items]{@link ContextMenuProps.menuItems} for the context menu component that include the
 * standard company ownership actions.
 *
 * ```tsx
 * function CompanyOwnership() {
 *   return (
 *     <CompanyOwnership data={data} contextMenuItems={DefaultContextMenuItems}></CompanyOwnership>
 *   )
 * }
 * ```
 *
 * @param item - The item to provide the items for.
 * @returns an array of [context menu items]{@link ContextMenuProps.menuItems}.
 */
export declare function DefaultContextMenuItems(item: Entity | Connection | null): ContextMenuItem<Entity | Connection>[];

/**
 * Default [buttons]{@link ControlsProps.buttons} for the {@link Controls} component that provide
 * actions to interact with the viewport of the company ownership.
 *
 * This includes the following buttons: zoom in, zoom out, zoom to the original size and fit the graph into the viewport.
 *
 * @returns an array of [control buttons]{@link ControlsProps.buttons}.
 *
 * ```tsx
 * function CompanyOwnership() {
 *   return (
 *     <CompanyOwnership data={data}>
 *       <Controls buttons={DefaultControlButtons}></Controls>
 *     </CompanyOwnership>
 *   )
 * }
 * ```
 */
export declare function DefaultControlButtons(): ControlButton[];

/**
 * Style describing the visual representation of an edge in the graph.
 * See {@link https://docs.yworks.com/yfileshtml/#/api/HierarchicLayoutEdgeRoutingStyle}
 */
export declare type EdgeRoutingStyle = 'orthogonal' | 'curved' | 'octilinear' | 'polyline';

/**
 * The basic actor in a company ownership chart. This could be (among others) a company, a bank, or
 * an individual. See the {@link EntityType} for the available types.
 */
export declare interface Entity {
    /**
     * The item's unique id.
     */
    id: EntityId;
    /**
     * The entity's optional type.
     * The type determines the color and shape of an entity in the default visualization.
     */
    type?: EntityType;
    /**
     * 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 CompanyOwnershipProps.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 CompanyOwnershipProps.nodeSize}.
     */
    height?: number;
    /**
     * An optional name of the entity. The default visualization renders the name as a label on the entity.
     */
    name?: string;
    /**
     * 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 EntityId = string | number;

/**
 * A function that provides text to display as a label on an entity.
 */
export declare type EntityLabelProvider<TEntity extends Entity> = (item: TEntity, companyOwnershipModel: CompanyOwnershipModel) => SimpleLabel | undefined;

/**
 * The various types an entity can have.
 * Every type is mapped to a default node visualization.
 */
export declare type EntityType = 'Asset' | 'Bank' | 'Branch' | 'CTB' | 'Corporation' | 'Disregarded' | 'Dual Resident' | 'Individual' | 'Multiple' | 'Octagon' | 'PE_Risk' | 'Partnership' | 'RCTB' | 'Third Party' | 'Trapezoid' | 'Trust' | 'Unknown';

/**
 * 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;
}

/**
 * Configuration options for styling the hover, selection and neighborhood highlight
 */
export declare type HighlightOptions = {
    /**
     * The stroke color of the neighborhood highlight
     */
    neighborhoodHighlightColor?: string;
    /**
     * A CSS class that can be used to style the neighborhood highlight
     */
    neighborhoodHighlightCssClass?: string;
    /**
     * The stroke color of the hover highlight
     */
    hoverHighlightColor?: string;
    /**
     * A CSS class that can be used to style the hover highlight
     */
    hoverHighlightCssClass?: string;
    /**
     * The stroke color of the selection highlight
     */
    selectionHighlightColor?: string;
    /**
     * A CSS class that can be used to style the selection highlight
     */
    selectionHighlightCssClass?: string;
};

/**
 * Initializes the Web Worker for the layout calculation.
 *
 * Web Workers must be provided by the application using the company ownership component,
 * if worker layout is required. The Worker itself is very bare-bones and the Worker
 * layout feature can be used as follows:
 *
 * ```ts
 * // in LayoutWorker.ts
 * import { initializeWebWorker } from '@yworks/react-yfiles-company-ownership/WebWorkerSupport'
 * initializeWebWorker(self)
 * ```
 *
 * ```tsx
 * // in index.tsx
 * const layoutWorker = new Worker(new URL('./LayoutWorker', import.meta.url), {
 *   type: 'module'
 * })
 *
 * // ...
 *
 * return <CompanyOwnership data={data} layoutWorker={layoutWorker}></CompanyOwnership>
 * ```
 */
export declare function initializeWebWorker(self: Window): void;

/**
 * A callback type invoked when an item has been focused.
 */
export declare type ItemFocusedListener<TEntity extends Entity | Connection> = (item: TEntity | null) => void;

/**
 * A callback type invoked when the hovered item has changed.
 */
export declare type ItemHoveredListener<TEntity extends Entity | Connection> = (item: TEntity | null, oldItem?: TEntity | null) => void;

/**
 * A callback type invoked when an item has been selected or deselected.
 */
export declare type ItemSelectedListener<TEntity extends Entity | Connection> = (selectedItems: TEntity[]) => void;

/**
 * Configures the direction of the flow for the layout.
 */
export declare type LayoutDirection = 'left-to-right' | 'right-to-left' | 'top-to-bottom' | 'bottom-to-top';

/**
 * Configuration options for the Company Ownership diagram layout.
 */
export declare interface LayoutOptions {
    /**
     * The direction for the flow in the graph.
     */
    direction?: LayoutDirection;
    /**
     * The style edges are routed in.
     */
    routingStyle?: EdgeRoutingStyle;
    /**
     * The minimum distance between the layers in the hierarchy.
     */
    minimumLayerDistance?: number;
    /**
     * The minimum length for the first segment of an edge.
     */
    minimumFirstSegmentLength?: number;
    /**
     * The minimum length for the last segment of an edge.
     */
    minimumLastSegmentLength?: number;
    /**
     * Limits the time the layout algorithm can use to the provided number of milliseconds.
     * This is an expert option. The main application is for graphs with many edges, where usually
     * the part of the layout calculations that takes the longest time is the edge routing.
     */
    maximumDuration?: number;
}

/**
 * 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';
}

/**
 * A connection representing an ownership relation.
 */
export declare interface Ownership extends Connection {
    type: 'Ownership';
    ownership?: number;
}

/**
 * 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';
}

/**
 * A default component that visualizes entities in the company ownership diagram.
 * The detail view displays a data grid of all available properties
 * on the entity. The overview visualization only shows the entities `name` or `id`.
 * The component can be adjusted for each entity individually or for all entities at
 * once by setting {@link Entity.className} or {@link Entity.style} in the
 * data.
 *
 * The component is used as the default visualization if no `renderEntity` prop is specified on {@link CompanyOwnership}.
 * However, it can be integrated in another component, for example, to have different styles for different items.
 *
 * ```tsx
 * function CompanyOwnershipComponent() {
 *     const MyCompanyOwnershipItem = useMemo(
 *       () => (props: RenderEntityProps<CompanyOwnershipItem>) => {
 *         const { dataItem } = props
 *         if (dataItem?.name?.includes('Plate')) {
 *           return (
 *             <>
 *               <div
 *                 style={{
 *                   backgroundColor: 'lightblue',
 *                   width: '100%',
 *                   height: '100%'
 *                 }}
 *               >
 *                 <div>{dataItem.name}</div>
 *               </div>
 *             </>
 *           )
 *         } else {
 *           return <RenderEntity {...props}></RenderEntity>
 *         }
 *       },
 *       []
 *     )
 *
 *     return (
 *       <CompanyOwnership data={data} renderEntity={MyCompanyOwnershipItem}></CompanyOwnership>
 *     )
 *   }
 * ```
 */
export declare function RenderEntity<TEntity extends Entity>({ dataItem, detail, hovered, focused, selected }: RenderEntityProps<TEntity>): react_jsx_runtime.JSX.Element;

/**
 * The interface of the props passed to the HTML react component for rendering the node contents.
 */
export declare interface RenderEntityProps<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 template for the company ownership's tooltip that shows the `name` or `id` property of the data item
 * and a data-grid of the properties.
 *
 * ```tsx
 * function CompanyOwnershipComponent() {
 *   return (
 *     <CompanyOwnership data={data} renderTooltip={RenderCompanyOwnershipTooltip}></CompanyOwnership>
 *   )
 * }
 * ```
 *
 * @param data - The data item to show the tooltip for.
 */
export declare function RenderTooltip<TEntity extends Entity, TConnection extends Connection>({ data }: RenderTooltipProps<TEntity | TConnection>): react_jsx_runtime.JSX.Element | null;

/**
 * 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<TEntity extends Entity | Connection, TNeedle = string> = (item: TEntity, needle: TNeedle) => boolean;

/**
 * A simple label description.
 */
export declare type SimpleLabel = {
    /**
     * The CSS class name to be used for the label.
     */
    className?: string;
    /**
     * The text to be displayed on the label.
     */
    text: string;
    /**
     * The basic shape of the label. The default is 'round-rectangle'.
     */
    labelShape?: 'hexagon' | 'pill' | 'rectangle' | 'round-rectangle';
};

/**
 * A hook that provides access to the {@link CompanyOwnershipModel} which has various functions that can
 * be used to interact with the {@link CompanyOwnership}.
 * It can only be used inside a {@link CompanyOwnership} component or a {@link CompanyOwnershipProvider}.
 *
 * @returns the {@link CompanyOwnershipModel} used in this context.
 *
 * ```tsx
 * function CompanyOwnershipWrapper() {
 *   const { fitContent, zoomTo } = useCompanyOwnershipContext()
 *
 *   return (
 *     <>
 *       <CompanyOwnership data={data} contextMenuItems={item => {
 *           if (item) {
 *             return [{ title: 'Zoom to Item', action: () => zoomTo([item]) }]
 *           }
 *           return []
 *         }}>
 *       </CompanyOwnership>
 *       <div style={{position: 'absolute', top: '20px', left: '20px'}}>
 *         <button onClick={() => fitContent()}>Fit Content</button>
 *       </div>
 *     </>
 *   )
 * }
 *
 * function CompanyOwnershipComponent () {
 *   return (
 *     <CompanyOwnershipProvider>
 *       <CompanyOwnershipWrapper></CompanyOwnershipWrapper>
 *     </CompanyOwnershipProvider>
 *   )
 * }
 * ```
 */
export declare function useCompanyOwnershipContext(): CompanyOwnershipModel;

/**
 * A data type that combines custom data props with the {@link Connection}. Data needs to fit in
 * this type so the component can handle the structure of the company ownership chart correctly.
 */
export declare type UserConnection<TCustomProps = Record<string, unknown>> = TCustomProps & Connection;

/**
 * A data type that combines custom data props with the {@link Entity}. Data needs to fit in
 * this type so the component can handle the structure of the company ownership chart correctly.
 */
export declare type UserEntity<TCustomProps = Record<string, unknown>> = TCustomProps & Entity;

export { }