@visuallyjs/browser-ui-react 1.0.0

package/background-component.d.ts

@@ -0,0 +1,29 @@
+import { type BackgroundOptions, type GeneratedGridBackgroundOptions, type SimpleBackgroundOptions, type TiledBackgroundOptions } from "@visuallyjs/browser-ui";
+/**
+ * Props for the background component. `type` defines the type of background to render, and each background type has its own set of options.
+ * @group Props
+ */
+export interface BackgroundComponentProps extends BackgroundOptions {
+}
+export declare function BackgroundComponent(props: BackgroundComponentProps): JSX.Element;
+/**
+ * Props for the grid background component.
+ * @group Props
+ */
+export interface GridBackgroundComponentProps extends Omit<GeneratedGridBackgroundOptions, "type"> {
+}
+export declare function GridBackgroundComponent(props: GridBackgroundComponentProps): JSX.Element;
+/**
+ * Props for the image background component.
+ * @group Props
+ */
+export interface ImageBackgroundComponentProps extends Omit<SimpleBackgroundOptions, "type"> {
+}
+export declare function ImageBackgroundComponent(props: ImageBackgroundComponentProps): JSX.Element;
+/**
+ * Props for the tiled image background component
+ * @group Props
+ */
+export interface TiledImageBackgroundComponentProps extends Omit<TiledBackgroundOptions, "type"> {
+}
+export declare function TiledImageBackgroundComponent(props: TiledImageBackgroundComponentProps): JSX.Element;

package/browser-ui-react.d.ts

@@ -0,0 +1,14 @@
+import { Surface, BrowserUIModel, SurfaceOptions, ModelOptions } from "@visuallyjs/browser-ui";
+/**
+ * Extension of the VisuallyJsModel for use in React. This is the class you use to manipulate and query the contents of the data model. You will rarely need to create one of these manually, since the UI components will do that for you (unless you have an app in which you wish to share one model among several renderers), but if you wish to perform programmatic operations on the data model this is the class you will interact with.
+ * @group Model
+ */
+export declare class BrowserUIReactModel extends BrowserUIModel {
+    render(container: Element, options?: SurfaceOptions): Surface;
+}
+/**
+ * Creates a new instance of the VisuallyJsModel for use in React. This method is public for the sake of completeness of the api docs, but it is not expected that library users will need to call this method manually, unless you have an app in which you wish to render one model across several different UIs.
+ * @param options
+ * @group Model
+ */
+export declare function newInstance(options?: ModelOptions): BrowserUIReactModel;

package/chart-component.d.ts

@@ -0,0 +1,197 @@
+import { ColumnChartOptions, BarChartOptions, CategoryValueChartOptions, LineChartOptions, AreaChartOptions, ObjectData, PieChartOptions, ScatterChartOptions, BubbleChartOptions, GaugeChartOptions, SankeyOptions, VisuallyJsDefaultJSON, ChartModelFilter } from "@visuallyjs/browser-ui";
+/**
+ * Base interface for chart props
+ * @group Props
+ */
+export interface BaseChartProps {
+    /**
+     * Optional class name to set on the chart's root element.
+     */
+    className?: string;
+    /**
+     * Data to load
+     */
+    data?: Array<ObjectData>;
+    /**
+     * URL to load data from
+     */
+    url?: string;
+    /**
+     * Whether the chart is interactive.
+     */
+    interactive?: boolean;
+    /**
+     * Optional style object
+     */
+    style?: Record<string, any>;
+    /**
+     * Whether or not to respond to changes in the `url` or `data` prop. Defaults to true.
+     */
+    reactive?: boolean;
+    /**
+     * Optional filter to apply to the chart's data source.
+     */
+    dataSourceFilter?: ChartModelFilter;
+}
+/**
+ * {@link ColumnChartComponent} props
+ * @group Props
+ */
+export interface ColumnChartComponentProps extends BaseChartProps {
+    /**
+     * Options for the column chart.
+     */
+    options: Omit<ColumnChartOptions, "data" | "url" | "model">;
+}
+/**
+ * Provides a component that displays a column chart
+ * @group Components
+ */
+export declare function ColumnChartComponent(props: ColumnChartComponentProps): JSX.Element;
+/**
+ * {@link BarChartComponent} props
+ * @group Props
+ */
+export interface BarChartComponentProps extends BaseChartProps {
+    /**
+     * Options for the bar chart
+     */
+    options: Omit<BarChartOptions, "data" | "url" | "model">;
+}
+/**
+ * Provides a component that displays a bar chart
+ * @group Components
+ */
+export declare function BarChartComponent(props: BarChartComponentProps): JSX.Element;
+/**
+ * {@link XYChartComponent} props
+ * @group Props
+ */
+export interface XYChartComponentProps extends BaseChartProps {
+    /**
+     * Options for the XY chart
+     */
+    options: Omit<CategoryValueChartOptions, "data" | "url" | "model">;
+}
+/**
+ * Provides a component that displays an XY chart - a chart containing an X and a Y axis, one of which displays chart categories and the other values. If you want a dual value axis chart (and you dont want to use Scatter or Bubble) you can use the DualValueChartComponent
+ * @group Components
+ */
+export declare function XYChartComponent(props: XYChartComponentProps): JSX.Element;
+/**
+ * {@link LineChartComponent} props
+ * @group Props
+ */
+export interface LineChartComponentProps extends BaseChartProps {
+    /**
+     * Options for the line chart.
+     */
+    options: Omit<LineChartOptions, "data" | "url" | "model">;
+}
+/**
+ * Provides a component that displays a line chart
+ * @group Components
+ */
+export declare function LineChartComponent(props: LineChartComponentProps): JSX.Element;
+/**
+ * {@link AreaChartComponent} props
+ * @group Props
+ */
+export interface AreaChartComponentProps extends BaseChartProps {
+    /**
+     * Options for the area chart.
+     */
+    options: Omit<AreaChartOptions, "data" | "url" | "model">;
+}
+/**
+ * Provides a component that displays an area chart
+ * @group Components
+ */
+export declare function AreaChartComponent(props: AreaChartComponentProps): JSX.Element;
+/**
+ * {@link PieChartComponent} props
+ * @group Props
+ */
+export interface PieChartComponentProps extends BaseChartProps {
+    /**
+     * Options for the pie chart.
+     */
+    options: Omit<PieChartOptions, "data" | "url" | "model">;
+}
+/**
+ * Provides a component that displays a pie chart
+ * @group Components
+ */
+export declare function PieChartComponent(props: PieChartComponentProps): JSX.Element;
+/**
+ * {@link ScatterChartComponent} props
+ * @group Props
+ */
+export interface ScatterChartComponentProps extends BaseChartProps {
+    /**
+     * Options for the scatter chart.
+     */
+    options: Omit<ScatterChartOptions, "data" | "url" | "model">;
+}
+/**
+ * Provides a component that displays a scatter chart
+ * @group Components
+ */
+export declare function ScatterChartComponent(props: ScatterChartComponentProps): JSX.Element;
+/**
+ * {@link BubbleChartComponent} props
+ * @group Props
+ */
+export interface BubbleChartComponentProps extends BaseChartProps {
+    /**
+     * Options for the bubble chart.
+     */
+    options: Omit<BubbleChartOptions, "data" | "url" | "model">;
+}
+/**
+ * Provides a component that displays a bubble chart
+ * @group Components
+ */
+export declare function BubbleChartComponent(props: BubbleChartComponentProps): JSX.Element;
+/**
+ * {@link GaugeChartComponent} props
+ * @group Props
+ */
+export interface GaugeChartComponentProps extends BaseChartProps {
+    /**
+     * Options for the gauge chart
+     */
+    options: Omit<GaugeChartOptions, "data" | "url" | "model">;
+}
+/**
+ * Provides a component that displays a gauge chart
+ * @group Components
+ */
+export declare function GaugeChartComponent(props: GaugeChartComponentProps): JSX.Element;
+/**
+ * {@link SankeyChartComponent} props
+ * @group Props
+ */
+export interface SankeyChartComponentProps extends Omit<BaseChartProps, "data"> {
+    /**
+     * Options for the sankey chart
+     */
+    options: Omit<SankeyOptions, "data" | "url" | "model">;
+    /**
+     * Optional property to pivot the sankey chart on.
+     */
+    pivot?: string;
+    /**
+     * Optional data to load into the chart (in CSV format)
+     */
+    csvData?: string;
+    /**
+     * Optional data to load into the chart (in VisuallyJs default json format)
+     */
+    jsonData?: VisuallyJsDefaultJSON;
+}
+/**
+ * Provides a component that displays a sankey chart
+ * @group Components
+ */
+export declare function SankeyChartComponent(props: SankeyChartComponentProps): JSX.Element;

package/color-picker-component.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Props for the ColorPicker inspector component.
+ * @group Props
+ */
+export interface ColorPickerComponentProps {
+    /**
+     * Maximum color swatches to show. Defaults to 10.
+     */
+    maxColors?: number;
+    /**
+     * Property name in the data that this picker represents. Required.
+     */
+    propertyName: string;
+}
+/**
+ * Provides a color picker plus history, for use in an inspector.
+ * @group Components
+ */
+export declare function ColorPickerComponent(props: ColorPickerComponentProps): JSX.Element;

package/controls-component.d.ts

@@ -0,0 +1,59 @@
+import { ControlsComponentButtons } from "@visuallyjs/browser-ui";
+export declare const ATTRIBUTE_CAN_UNDO = "can-undo";
+export declare const ATTRIBUTE_CAN_REDO = "can-redo";
+export declare const CLASS_SELECTED_MODE = "vjs-selected-mode";
+/**
+ * Props for the controls component.
+ * @group Props
+ */
+export interface ControlsComponentProps {
+    /**
+     * The ID of surface to attach to. Optional. Will be inferred from context if not provided.
+     */
+    surfaceId?: string;
+    /**
+     * Optional message for the alert that the clear button shows by default. Defaults to `Clear dataset?`.
+     */
+    clearMessage?: string;
+    /**
+     * Optional callback to invoke when the user presses the clear button. If you provide this, the component will not show an alert, and instead call this method, passing in a function you can invoke if you wish to continue with the clear operation.
+     */
+    onMaybeClear?: (doClear: () => void) => void;
+    /**
+     * Optional extra buttons to add to the controls component.
+     */
+    buttons?: ControlsComponentButtons;
+    /**
+     * Whether or not to show undo/redo buttons, defaults to true
+     */
+    undoRedo?: boolean;
+    /**
+     * Whether or not to show the zoom to extents button, defaults to true
+     */
+    zoomToExtents?: boolean;
+    /**
+     * Whether or not to show the zoom in/zoom out buttons, defaults to false
+     */
+    zoomButtons?: boolean;
+    /**
+     * Whether or not to show the clear button, defaults to true.
+     */
+    clear?: boolean;
+    /**
+     * Optional orientation for the controls. Defaults to 'row'.
+     */
+    orientation?: 'row' | 'column';
+    /**
+     * Optional class name to append to the root element's class list.
+     */
+    className?: string;
+    /**
+     * Optional style object to apply to the container element.
+     */
+    style?: Record<string, string>;
+}
+/**
+ * Provides a component offering controls for a Surface or Paper component - zoom, lasso, undo/redo, etc.
+ * @group Components
+ */
+export declare function ControlsComponent(props: ControlsComponentProps): JSX.Element;

package/decorator-component.d.ts

@@ -0,0 +1,26 @@
+import { FixedElementConstraints, PointXY } from "@visuallyjs/browser-ui";
+import { ReactElement, ReactNode } from "react";
+/**
+ * Props for the {@link DecoratorComponent}
+ */
+export interface DecoratorComponentProps {
+    /**
+     * Whether to float the element over the UI, so that it does not move with the content (floating), or to place the element onto the canvas, so that it moves/zooms with the content (fixed). Floating is the default.
+     */
+    placement?: 'fixed' | 'floating';
+    /**
+     * For floating placement, this is a point relative to the viewport origin. for fixed placement, this is a point relative to the canvas origin. Defaults to 0,0.
+     */
+    position?: PointXY;
+    /**
+     * Optional constraints when using fixed placement: you can instruct the UI to restrict movement in one or both axes.
+     */
+    constraints?: FixedElementConstraints;
+    /**
+     * You do not pass this prop yourself; React constructs this prop from any elements that are children of the surface component element in the JSX.
+     * @internal
+     */
+    children?: Array<ReactNode | ReactElement<any, any>> | ReactNode | ReactElement<any, any>;
+}
+export default function DecoratorComponent(props: DecoratorComponentProps): JSX.Element;
+export { DecoratorComponent };

package/definitions.d.ts

@@ -0,0 +1,345 @@
+import { Group, ObjectData, Port, Surface, SurfaceOptions, NodeMapping, EdgeMapping, DataGeneratorFunction, Size, BrowserElement, GroupIdentifierFunction, TypeGeneratorFunction, ModelOptions, CanvasDropFilter, OnVertexAddedCallback, OverlaySpec, Edge, Node, GroupMapping, PortMapping, PaletteMode, PreparedShape } from "@visuallyjs/browser-ui";
+import { BrowserUIReactModel } from "./browser-ui-react";
+import { MutableRefObject, ReactElement, ReactNode } from "react";
+import { JsxWrapperProps } from "./jsx-wrapper";
+/**
+ * Render options for a SurfaceComponent. This interface is the same as SurfaceOptions but with several vanilla-only
+ * options removed.
+ */
+export interface ReactSurfaceRenderOptions extends Omit<SurfaceOptions, "directRender" | "enhancedView" | "view" | "templates"> {
+}
+/**
+ * Definition of a node - its jsx, and behaviour.
+ */
+export interface ReactNodeMapping extends Omit<NodeMapping<any>, "template" | "templateId" | "parameters"> {
+    /**
+     * JSX used to render this node type. Optional; if you do not supply it a default template will be used.
+     */
+    jsx?: (ctx: JsxWrapperProps<Node>) => any;
+}
+/**
+ * Definition of a group - its jsx, and behaviour.
+ */
+export interface ReactGroupMapping extends Omit<GroupMapping<any>, "template" | "templateId" | "parameters"> {
+    /**
+     * JSX used to render this group type. Optional; if you do not supply it a default template will be used.
+     */
+    jsx?: (ctx: JsxWrapperProps<Group>) => any;
+}
+/**
+ * Definition of a port - its jsx, and behaviour. This is for advanced use cases.
+ */
+export interface ReactPortMapping extends Omit<PortMapping<any>, "template" | "templateId" | "parameters"> {
+    /**
+     * JSX used to render this port type. Optional; if you do not supply it a default template will be used.
+     */
+    jsx?: (ctx: JsxWrapperProps<Port>) => any;
+}
+/**
+ * Spec for a react component overlay. A ctx object is passed in to your component and you are expected to return JSX.
+ */
+export interface ReactOverlaySpec {
+    /**
+     * Function to invoke to get JSX for the overlay
+     * @param ctx
+     */
+    jsx: (ctx: JsxWrapperProps<Edge>) => any;
+}
+/**
+ * Edge mappings for a view.
+ */
+export interface ReactEdgeMapping extends Omit<EdgeMapping, "overlays"> {
+    overlays: Array<OverlaySpec | ReactOverlaySpec>;
+}
+/**
+ * Options for the view in the react surface component. Maps node/group/port/edge types to JSX and behaviour.
+ */
+export interface ReactSurfaceViewOptions {
+    /**
+     * Optional node mappings
+     */
+    nodes?: Record<string, ReactNodeMapping>;
+    /**
+     * Optional group mappings
+     */
+    groups?: Record<string, ReactGroupMapping>;
+    /**
+     * Optional port mappings. Because of the nature of JSX, separate port mappings are a little rare in VisuallyJs React, but they are supported if you need them.
+     */
+    ports?: Record<string, ReactPortMapping>;
+    /**
+     * Optional edge mappings.
+     */
+    edges?: Record<string, ReactEdgeMapping>;
+}
+/**
+ * Props for the {@link SurfaceComponent}.
+ * @group Props
+ */
+export interface SurfaceComponentProps {
+    /**
+     * Render options such as layout, drag options etc
+     *
+     */
+    renderOptions?: ReactSurfaceRenderOptions;
+    /**
+     * Mappings of vertex types to components/jsx and edge types.
+     *
+     */
+    viewOptions?: ReactSurfaceViewOptions;
+    /**
+     * Any props to pass to children.
+     *
+     */
+    childProps?: any;
+    /**
+     * You do not pass this prop yourself; React constructs this prop from any elements that are children of the surface
+     * component element in the JSX.
+     * @internal
+     */
+    children?: Array<ReactNode | ReactElement<any, any>> | ReactNode | ReactElement<any, any>;
+    /**
+     * Options for the underlying instance.
+     *
+     */
+    modelOptions?: ModelOptions;
+    /**
+     * Optional ID to assign to the surface that is created.
+     *
+     */
+    surfaceId?: string;
+    /**
+     * Optional initial data
+     *
+     */
+    data?: any;
+    /**
+     * Optional URL to load initial data from.
+     *
+     */
+    url?: string;
+    /**
+     * Optional instance to render. You mostly wont need to do this; the SurfaceComponent or PaperComponent will create
+     * an instance.
+     */
+    model?: BrowserUIReactModel;
+    /**
+     * Optional class name to append to the root element's class list.
+     */
+    className?: string;
+    /**
+     * Optional style object to apply to the container element.
+     */
+    style?: Record<string, string>;
+}
+/**
+ * Reference to a SurfaceComponent. Offers methods to get the underlying surface and VisuallyJs instance.
+ * @group Handles
+ */
+export interface SurfaceComponentRef {
+    /**
+     * Gets the Surface canvas component.
+     *
+     */
+    getSurface: () => Surface;
+    /**
+     * Gets the underlying model instance, on which you can manage the model.
+     *
+     */
+    getModel: () => BrowserUIReactModel;
+}
+/**
+ * Props for the {@link ShapePaletteComponent}
+ * @group Props
+ */
+export interface ShapePaletteComponentProps {
+    /**
+     * Optional data generator to allow you to specify initial data for some element to be dragged. Note that you cannot override the object's `type` with this function. The palette will set the new object's type to match the type of the element that the user is dragging from the palette.
+     */
+    dataGenerator?: DataGeneratorFunction<ObjectData>;
+    /**
+     * Optional size to use for dragged elements.
+     */
+    dragSize?: Size;
+    /**
+     * Optional size to use for icons.
+     */
+    iconSize?: Size;
+    /**
+     * Optional fill color to use for dragged elements. This should be in RGB or hex format, _not_ a color like 'white' or 'cyan' etc.
+     */
+    fill?: string;
+    /**
+     * Optional color to use for outline of dragged elements. Should be in RGB or hex format.
+     */
+    outline?: string;
+    /**
+     * Message to use for the 'show all' option in the shape set drop down when there is more than one set of shapes. Defaults to `Show all`.
+     */
+    showAllMessage?: string;
+    /**
+     * When true (which is the default), a newly dropped vertex will be set as the underlying model's selection.
+     */
+    selectAfterDrop?: boolean;
+    /**
+     * Stroke width to use for shapes in palette. Defaults to 1.
+     */
+    paletteStrokeWidth?: number;
+    /**
+     * ID of the initial set to show, if any. When you have multiple shapes in a set you may want the palette to open up showing just one set.
+     */
+    initialSet?: string;
+    /**
+     * Optional class name to append to the root element's class list.
+     */
+    className?: string;
+    /**
+     * Mode to use for the palette.
+     */
+    mode?: PaletteMode;
+    /**
+     * When in tap mode, allow addition of new vertices simply by clicking, instead of requiring a shape be drawn. (When this is true, the drawing method also still works)
+     */
+    allowClickToAdd?: boolean;
+    /**
+     * Optional callback to invoke when a vertex as been dragged onto the canvas
+     */
+    onVertexAdded?: OnVertexAddedCallback;
+    /**
+     * Surface to attach the drag/drop to. Optional; this component can extract the Surface from a SurfaceProvider, or from being a child of a SurfaceComponent. You'd only need to set this in certain advanced scenarios.
+     */
+    surface?: Surface;
+    /**
+     * Optionally show each shape icon's label underneath it
+     */
+    showLabels?: boolean;
+    /**
+     * Indicates two things: first, when one or more vertices are selected, clicking on an entry in the palette will change the type of the selected vertices to that type. Secondly, selecting an element in the canvas will cause its related shape to be selected in the palette. Defaults to true.
+     */
+    inspector?: boolean;
+    /**
+     * Optional set of prepared shapes to show in the palette. When this is provided, the palette will only render these shapes, and not the contents of the shape library.
+     */
+    preparedShapes?: Array<PreparedShape>;
+}
+/**
+ * Ref handle for a {@link ShapePaletteComponent}
+ * @group Handles
+ */
+export interface ShapePaletteComponentRef {
+}
+/**
+ * Props for the `PaletteComponent`
+ * @group Props
+ */
+export interface PaletteComponentProps {
+    /**
+     * Child elements. This is internal - its the child elements.
+     * @internal
+     */
+    children?: Array<ReactNode> | ReactNode;
+    /**
+     * CSS 3 selector identifying what child elements of `container` are draggable/tappable. Optional. If omitted, a default of `[data-vjs-type]` will be used.
+     */
+    selector?: string;
+    /**
+     * Whether or not to allow drop on edge. Defaults to false.
+     */
+    allowDropOnEdge?: boolean;
+    /**
+     * Whether or not to allow drop on whitespace in the canvas. Defaults to true.
+     */
+    allowDropOnCanvas?: boolean;
+    /**
+     * Whether or not to allow drop on existing vertices. Defaults to true.
+     */
+    allowDropOnGroup?: boolean;
+    /**
+     * Defaults to false. Allows items to be dropped onto nodes in the canvas. If this is true and an element is dropped onto a node, the result is the same as if the element has been dropped onto whitespace. Note that when this is false and the user has dragged something over a node, the drag item is still not considered to be over the canvas, and releasing the mouse button at that time will not cause a new node to be added. Use `ignoreDropOnNode` if that's the behaviour you want.
+     */
+    allowDropOnNode?: boolean;
+    /**
+     * Defaults to false. When true, the palette treats nodes as if they are part of the canvas - a user can drag new items on top of existing nodes and the new item will be added to the canvas. If you want to force your users to drop on canvas whitespace, don't set this.  Note that this flag will force `allowDropOnNode` to `false`.
+     */
+    ignoreDropOnNode?: boolean;
+    /**
+     * Function to use to get a dataset for an item that is being dragged or has been tapped. If omitted, Visually JS will use a default data generator that extracts data values from any `data-vjs-***` attribute on the element being dragged.
+     */
+    dataGenerator?: DataGeneratorFunction<BrowserElement>;
+    /**
+     * Function to use to get the type of an item that is being dragged or has been tapped.
+     */
+    typeGenerator?: TypeGeneratorFunction<BrowserElement>;
+    /**
+     * Function to use to determine whether an item that is being dragged or has been tapped represents a group.
+     */
+    groupIdentifier?: GroupIdentifierFunction<BrowserElement>;
+    /**
+     * Optional extra css classes to set on the element
+     */
+    className?: string;
+    /**
+     * Optional callback that will be invoked after a new vertex has been dropped and added to the dataset.
+     * @param v
+     */
+    onVertexAdded?: OnVertexAddedCallback;
+    /**
+     * Defaults to false. When true, a newly added vertex is set as the model's current selection.
+     */
+    selectAfterAdd?: boolean;
+    /**
+     * Optional size to use for elements dragged from the palette, when in "drag" mode
+     */
+    dragSize?: Size;
+    /**
+     * Optional filter to test if objects may be dropped on the canvas.
+     */
+    canvasDropFilter?: CanvasDropFilter<BrowserElement>;
+    /**
+     * The surface to attach to. Optional: this component can derive a surface from a SurfaceProvider or SurfaceComponent. You'll only need this in certain advanced scenarios.
+     */
+    surface?: Surface;
+    /**
+     * Mode to operate in - 'drag', 'tap' or 'draw'. Defaults to 'drag'.
+     */
+    mode?: PaletteMode;
+    /**
+     * When in draw mode, allow addition of new vertices simply by clicking, instead of requiring a shape be drawn. (When this is true, the drag to draw functionality also still works)
+     */
+    allowClickToAdd?: boolean;
+    /**
+     * This flag relates to "draw" mode, and defaults to false. When true, the palette only supports click to draw new vertices, not drag. This flag is forced to true if the associated UI does not have `useModelForSizes` set, since there is no point in allowing a user to drag a vertex to some size if its not going to be honoured. When you set this flag and associated UI does have `useModelForSizes` set, the palette will use default sizes for new nodes/groups.
+     */
+    clickToAddOnly?: boolean;
+}
+/**
+ * Ref handle for a palette component.
+ * @group Handles
+ */
+export interface PaletteComponentRef {
+}
+/**
+ * Handle for a reference to a mutable ref object which holds some object. Subinterfaces currently are SurfaceRef and ShapeLibraryRef
+ * @internal
+ */
+export interface RefHandle<T> {
+    set: (v: T) => any;
+    listen: (l: (v: T) => any) => void;
+    _ref: () => MutableRefObject<T>;
+}
+/**
+ * CSS class set on the root element created by the JSX mapped to some node type when it is rendered, by a {@link SurfaceComponent} or {@link PaperComponent}.
+ * @group CSS Classes
+ */
+export declare const CLASS_REACT_NODE = "vjs-react-node";
+/**
+ * CSS class set on the root element created by the JSX mapped to some group type when it is rendered, by a
+ * {@link SurfaceComponent} or {@link PaperComponent}.
+ * @group CSS Classes
+ */
+export declare const CLASS_REACT_GROUP = "vjs-react-group";
+/**
+ * CSS class set on JSX overlay elements, by a {@link SurfaceComponent} or {@link PaperComponent}.
+ * @group CSS Classes
+ */
+export declare const CLASS_REACT_OVERLAY = "vjs-react-overlay";