@uniformdev/mesh-sdk-react 19.36.1-alpha.4 → 19.36.1-alpha.61

package/dist/index.d.mts

@@ -1,15 +1,18 @@
 import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
 import * as React$1 from 'react';
-import React__default, { SVGProps, PropsWithChildren, ComponentType, HTMLAttributes, ReactNode, AnchorHTMLAttributes } from 'react';
+import React__default, { SVGProps, ReactNode, MutableRefObject, ComponentType, PropsWithChildren, HTMLAttributes, AnchorHTMLAttributes } from 'react';
 import { TDate } from 'timeago.js';
 import * as _emotion_react from '@emotion/react';
 import * as _uniformdev_mesh_sdk from '@uniformdev/mesh-sdk';
-import { DynamicInput, MeshLocation, SetValueOptions, DynamicInputs, DataSourceLocationValue, DataTypeLocationValue } from '@uniformdev/mesh-sdk';
+import { DynamicInput, MeshLocation, SetValueOptions, DynamicInputs, DataSourceLocationValue, DataTypeLocationValue, BindableTypes } from '@uniformdev/mesh-sdk';
 export * from '@uniformdev/mesh-sdk';
 import { DataVariableDefinition, DataResourceVariables, DataType } from '@uniformdev/canvas';
 import { Emitter } from 'mitt';
 import { BadgeThemeProps, InputSelectProps } from '@uniformdev/design-system';
 export { AddListButton, AddListButtonProps, Button, ButtonProps, Callout, CalloutProps, DrawerContent, Heading, HeadingProps, Input, InputComboBox, InputComboBoxProps, InputKeywordSearch, InputProps, InputSelect, InputToggle, InputToggleProps, Label, LabelProps, LoadingIndicator, LoadingOverlay, Menu, MenuItem, MenuItemProps, MenuProps, ParameterGroup, ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImageProps, ParameterInput, ParameterInputInner, ParameterInputProps, ParameterLabel, ParameterLabelProps, ParameterMenuButton, ParameterMenuButtonProps, ParameterSelect, ParameterSelectInner, ParameterSelectProps, ParameterShell, ParameterShellContext, ParameterShellProps, ParameterTextarea, ParameterTextareaInner, ParameterTextareaProps, ParameterToggle, ParameterToggleInner, ParameterToggleProps, ScrollableList, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, Switch, SwitchProps, Textarea, TextareaProps, Theme, ThemeProps, useParameterShell } from '@uniformdev/design-system';
+import * as lexical from 'lexical';
+import { SerializedEditorState, SerializedLexicalNode, Spread, DecoratorNode, NodeKey, LexicalEditor, LexicalNode, EditorState } from 'lexical';
+import { MenuOption } from '@lexical/react/LexicalTypeaheadMenuPlugin';
 
 declare const SvgCaution: (props: SVGProps<SVGSVGElement>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
@@ -369,16 +372,18 @@ declare const damSelectItemImage: _emotion_react.SerializedStyles;
 
 type MinimalDynamicInput = Omit<DynamicInput, 'source'>;
 type MinimalDynamicInputs = Record<string, MinimalDynamicInput>;
-type DataResourceDynamicInputProviderProps = PropsWithChildren<{
+type DataResourceDynamicInputProviderProps = {
     /** Explicitly provide dynamic input values. If not set, Mesh location will be used */
     dynamicInputs?: MinimalDynamicInputs;
-}>;
+    /** Child components of the provider. Variables-using components, such as InputVariables, can be used here. */
+    children: ReactNode;
+};
 /**
  * Wrapper for data resource locations. Provides read-only access to dynamic inputs as if they were variables,
  * using variables-aware components (i.e. InputVariables). This simplifies building dynamic-input-aware editors,
  * where a data resource variable could be a static value or bound to a dynamic input from the route (project map).
  */
-declare function DataResourceDynamicInputProvider({ children, dynamicInputs, }: DataResourceDynamicInputProviderProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare function DataResourceDynamicInputProvider(props: DataResourceDynamicInputProviderProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 /**
  * Provides convenient access to the current Uniform Mesh location via React hook.
@@ -441,6 +446,195 @@ type DispatchResult<TSetValue> = {
     newValue: TSetValue;
 };
 
+/**
+ * Updates the Lexical editor state automatically when a controlled value changes, effectively
+ * turning the Lexical editor into a controlled component.
+ *
+ * DO NOT USE THIS when actually editing with Lexical as it will cause performance problems.
+ * This is intended to be used:
+ * * To simplify a read-only "preview" editor, where the user can't edit the value
+ * * To sync an external state with the Lexical editor state under certain conditions (i.e. composer mounted, but editor hidden)
+ */
+declare function ControlledValuePlugin({ enabled, value, extraDependencies, }: {
+    /** Whether to enable the controlled value plugin. Defaults to false. The value is only controlled when set to true. */
+    enabled: boolean;
+    value: string | undefined | SerializedEditorState<SerializedLexicalNode>;
+    extraDependencies?: unknown[];
+}): JSX.Element | null;
+
+type SerializedVariableNode = Spread<{
+    reference: string;
+    type: 'variable';
+    version: 1;
+}, SerializedLexicalNode>;
+type VariableNodeState = {
+    /** Display name to show on the variable */
+    displayName: string;
+    /**
+     * Whether the variable reference is currently pointing to a known variable in the variables context
+     * Note that this is ignored if `isFresh` is true, which is set for the result of edits or insertions
+     * made after the editor has mounted (which we know are good and don't validate to prevent flicker or false errors)
+     */
+    referenceIsValid: boolean;
+    /**
+     * Whether the variable node has been inserted or edited during this editing session
+     * Fresh nodes are always considered "valid" because they are the result of a user action
+     */
+    isFresh: boolean;
+    /** Whether clicking the node has an effect (dispatching an edit event) */
+    hasClickEvent: boolean | undefined;
+    /** Tooltip of the node on hove */
+    tooltip: string | undefined;
+};
+/** Renders a variable reference node within a Lexical editor */
+declare class VariableNode extends DecoratorNode<JSX.Element> {
+    reference: Readonly<string>;
+    private __state;
+    static getType(): string;
+    static clone(node: VariableNode): VariableNode;
+    /** Imports the node from serialized JSON (i.e. the data provided to the editor's initial state) */
+    static importJSON(serializedNode: SerializedVariableNode): VariableNode;
+    constructor(reference: Readonly<string>, state: VariableNodeState, key?: NodeKey);
+    /** Gets the node's current state */
+    getState(): VariableNodeState;
+    /**
+     * Updates the node's variables state so it knows its current validity, display name, etc
+     * The plugin updates this whenever the variables prop changes.
+     */
+    setState(state: VariableNodeState): void;
+    /**
+     * Serializes the node to JSON for editor initial state
+     */
+    exportJSON(): {
+        reference: string;
+        type: string;
+        version: number;
+    };
+    /**
+     * Copy variable to clipboard in a format we will read back if pasted
+     * (albeit it won't get the fancy chip-node)
+     */
+    getTextContent(): string;
+    /** Creates the DOM wrapper that hosts the node */
+    createDOM(): HTMLSpanElement;
+    updateDOM(): boolean;
+    /**
+     * Render the variable node using React.
+     * NOTE: this is effectively an island of React, and you may not call hooks,
+     * rely on Context, etc in this renderer.
+     */
+    decorate(editor: LexicalEditor): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    /** Enables keyboard navigation to hop over the node to previous text */
+    isIsolated(): boolean;
+}
+declare function $createVariableNode(variableReference: string, state: VariableNodeState): VariableNode;
+declare function $isVariableNode(node: LexicalNode | null | undefined): node is VariableNode;
+
+type MeshDataVariableDefinition = Omit<DataVariableDefinition, 'default'> & {
+    /** When used in code, variables may have non-string defaults */
+    default: unknown;
+    /**
+     * If true the variable will not be shown in variables listings and menus, but can still be resolved
+     * Useful for variables that are defined by their presence in a value, and disappear when deleted from the value,
+     * like bindings.
+     */
+    ephemeral?: boolean;
+    /**
+     * Prevents editing the variable if set to true. If the variable context is set to read only,
+     * this is ignored and is always effectively true.
+     */
+    readOnly?: boolean;
+    /**
+     * Tooltip for the variable when rendered in content UI.
+     * If not passed, defaults to helpText.
+     */
+    tooltip?: string;
+};
+type DataVariableDefinitionWithName = {
+    name: string;
+} & MeshDataVariableDefinition;
+/**
+ * Converts variable definitions stored in a map into a flat list,
+ * respecting their `order` property if set, and sorting by display name otherwise.
+ */
+declare function variablesToList(variables: Record<string, MeshDataVariableDefinition> | undefined): Array<DataVariableDefinitionWithName>;
+
+type VariableSourceGroup = {
+    name: string | undefined;
+    variables: Array<DataVariableDefinitionWithName>;
+};
+/**
+ * Groups variable definitions by their `source` property, and sorts the groups using `variablesToList`.
+ * Returns a flat list of groups and variables. Groups are sorted alphabetically.
+ */
+declare function variablesToGroupedList(variables: Record<string, MeshDataVariableDefinition> | undefined): Array<VariableSourceGroup>;
+
+type EditVariableCommandArguments = {
+    /** Lexical node key that is being edited */
+    sourceKey: string | undefined;
+    /** The variable reference to edit */
+    reference: string;
+};
+type InsertVariableCommandArguments = {
+    reference: string;
+    /**
+     * Optionally pass in display name if you have it
+     * avoids a flash of the reference name
+     */
+    initialDisplayName?: string;
+    /**
+     * If specified, the lexical node with this key is overwritten by the insert.
+     * If unspecified, the current selection is overwritten, or inserted to if a single location.
+     */
+    targetKey: string | undefined;
+    /**
+     * If true, the existing value of the editor should be replaced with this variable
+     * Used when inserting a variable during an input state transition.
+     */
+    overwriteExistingValue?: boolean;
+};
+/**
+ * Opens the variable editor and when a result is selected, inserts it at the current cursor location
+ * NOTE: differs from INSERT_VARIABLE_COMMAND because this opens a variable picker, and that command inserts a known variable reference with no picker.
+ */
+declare const OPEN_INSERT_VARIABLE_COMMAND: lexical.LexicalCommand<unknown>;
+/** Opens the variable editor for an existing variable node */
+declare const EDIT_VARIABLE_COMMAND: lexical.LexicalCommand<EditVariableCommandArguments>;
+/** Inserts a new variable node at the current selection, or replacing a specific node key */
+declare const INSERT_VARIABLE_COMMAND: lexical.LexicalCommand<InsertVariableCommandArguments>;
+type VariablesPluginProps<TEditorContext = unknown> = {
+    /** Disables adding variable references via autocomplete. Any existing variables will be rendered as variables. */
+    disableVariables?: boolean;
+    /** Enables 'add variable' option in autocomplete */
+    showAddVariableMenuOption?: boolean | string;
+    /** Enables clicking a variable reference to edit the variable */
+    enableEditingVariables?: boolean;
+    /** Computes the editor context when a variable is added or edited from this composer */
+    getEditorContext?: () => TEditorContext;
+    /** If true, the whole value of the editor is replaced when a variable is inserted */
+    replaceValueOnVariableInsert: boolean;
+};
+type UseVariablesMenuInput = Pick<VariablesPluginProps, 'showAddVariableMenuOption' | 'enableEditingVariables'>;
+type OnVariableSelectInput = {
+    value: string;
+    queryString?: string;
+    nodeToReplace?: LexicalNode;
+    editor: LexicalEditor;
+    overwriteExistingValue: boolean;
+};
+type UseVariablesMenu = (input: UseVariablesMenuInput) => {
+    groupedVariables: VariableSourceGroup[];
+    menuOptions: MenuOption[];
+    onSelect: (input: OnVariableSelectInput) => void;
+};
+/** Hook to use the lexical variables typeahead/dropdown menu */
+declare const useVariablesMenu: UseVariablesMenu;
+/**
+ * Enables variables auto-complete and reference management to a Lexical editor.
+ * Must also activate the VariableNode node to make this work.
+ */
+declare function VariablesPlugin<TEditorContext = unknown>({ disableVariables, showAddVariableMenuOption, enableEditingVariables, getEditorContext, replaceValueOnVariableInsert, }: VariablesPluginProps<TEditorContext>): JSX.Element | null;
+
 type PasteTransformerPluginProps = {
     /**
      * Transforms pasted contents before inserting them.
@@ -449,23 +643,48 @@ type PasteTransformerPluginProps = {
     transformPaste?: (pastedText: string) => string | undefined;
 };
 
-type InputToken = {
-    name: string;
-    value: string;
+type UseInputVariablesStateProps<TEditorContext = unknown> = {
+    /** Unique ID for the value being edited. */
+    id?: string;
+    /**
+     * Sets the value of the input
+     * NOTE: this is NOT reactive after mount
+     */
+    value: string | undefined;
+    /** Callback to receive changes to the value of the variables input */
+    onChange: (newValue: string | undefined) => void;
+    /**
+     * The value to set the field to when it's "reset" from a variables-input to a custom component.
+     * Defaults to undefined.
+     */
+    valueToResetTo?: string | undefined;
+    /** Disables using variables in the input */
+    disableVariables?: boolean;
+    /**
+     * Enables adding variables from the menu. If a string is passed,
+     * the option is enabled and the string is used as the menu label.
+     */
+    showAddVariableMenuOption?: boolean | string;
+    /**
+     * When no variables are referenced in the value, and this prop is provided,
+     * the variables-injection input will be replaced with this component.
+     *
+     * NOTE: When this prop is provided, the and a variable is inserted, any existing value
+     * in the input will be replaced with the variable reference. Once in variables-mode, additional
+     * insertions are inserted at the current selection (or end) of the variables value.
+     */
+    inputWhenNoVariables?: JSX.Element;
+    /** Computes the editor context when a variable is added or edited from this composer */
+    getEditorContext?: () => TEditorContext;
 };
-type InputVariablesProps = {
+
+type InputVariablesProps<TEditorContext = unknown> = {
     /** Sets a HTML ID for the variables input and label */
     id?: string;
     /** Enables a label for the input */
     label?: string;
     /** sets the input aria-label value. */
     'aria-label'?: string;
-    /** sets the value of the input */
-    value: string;
-    /** sets the passed down function call */
-    onChange: (newValue: string) => void;
-    /** Disables using variables in the input */
-    disableVariables?: boolean;
     /**
      * Turns off the 'Reset' menu option that is added when:
      * - inputWhenNoVariables is passed in
@@ -473,20 +692,18 @@ type InputVariablesProps = {
      *
      * The reset button returns the editor to the inputWithNoVariables state
      *
-     * @deprecated not usually necessary to set this, it's automatic
+     * @deprecated this is ignored if passed, computation is now automatic
      */
     disableReset?: boolean;
-    /** Enables adding variables from the menu */
-    showAddVariableMenuOption?: boolean;
+    /** Enables mutliple lines in the input (\n in the value) */
+    multiLine?: boolean;
     /** Disables the inline variable selection menu when rendering a variables input */
     disableInlineMenu?: boolean;
-    /** Enables clicking a variable reference to edit the variable */
-    enableEditingVariables?: boolean;
     /**
-     * When no variables are referenced in the value, and this prop is provided,
-     * the variables-injection input will be replaced with this component.
+     * Enables clicking a variable reference to edit the variable
+     * Note: automatically disabled if `disabled` or `disableVariables` is set
      */
-    inputWhenNoVariables?: JSX.Element;
+    enableEditingVariables?: boolean;
     /** (optional) sets and shows the the error message value */
     errorMessage?: string;
     /** (optional) sets and shows the the warning message value */
@@ -495,37 +712,97 @@ type InputVariablesProps = {
     infoMessage?: string;
     /** (optional) sets caption text value */
     caption?: string;
+    /** Disables editing the value of the input, editing variables, and adding variables */
+    disabled?: boolean;
     /** Sets the test ID of the input */
     'data-test-id'?: string;
-} & PasteTransformerPluginProps;
-declare function InputVariables({ id, 'aria-label': ariaLabel, label, value, disableVariables, disableReset, enableEditingVariables, disableInlineMenu, onChange, transformPaste, showAddVariableMenuOption, inputWhenNoVariables, caption, errorMessage, warningMessage, infoMessage, 'data-test-id': dataTestId, }: InputVariablesProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    /** If set the editor will auto-focus on mount */
+    autoFocus?: boolean;
+    /**
+     * Optional ref to get a handle to the variables editor.
+     * This can be useful for situations such as:
+     * * Once initially set, `value` prop is no longer reactive and the editor owns its state. The ref can be used to set the editor state after load.
+     * * Performing other custom mutations to the variables editor, such as inserting text from a button click.
+     */
+    editorRef?: MutableRefObject<LexicalEditor | null>;
+} & PasteTransformerPluginProps & UseInputVariablesStateProps<TEditorContext>;
+/**
+ * An input box that enables insertion of 'variables', provided by VariablesProvider,
+ * into its value.
+ */
+declare function InputVariables<TEditorContext = unknown>(props: InputVariablesProps<TEditorContext>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-/** Expected prefix for variable expressions */
-declare const variablePrefix = "${";
-/** Expected suffix for variable expressions */
-declare const variableSuffix = "}";
+type ParameterConnectionIndicatorProps = {
+    disabled?: boolean;
+    value: unknown;
+    children: ReactNode;
+    menuOptions: ReactNode;
+};
+/**
+ * An input box that enables insertion of 'variables', provided by VariablesProvider,
+ * into its value. Designed specifically for use in the Canvas Parameter Editor.
+ */
+declare function ParameterConnectionIndicator({ children, value, menuOptions, disabled, }: ParameterConnectionIndicatorProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-type DataVariableDefinitionWithName = {
-    name: string;
-} & DataVariableDefinition;
+type ParameterOrSingleVariableProps<TEditorContext = unknown> = {
+    disabled?: boolean;
+    inputWhenNoVariables: JSX.Element;
+    enableEditingVariables?: boolean;
+    /**
+     * Optional ref to get a handle to the variables editor.
+     * This can be useful for situations such as performing custom mutations to the variables editor,
+     * such as imperatively inserting a new variable using OPEN_INSERT_VARIABLE_COMMAND.
+     */
+    editorRef?: MutableRefObject<LexicalEditor | null>;
+} & Omit<UseInputVariablesStateProps<TEditorContext>, 'inputWhenNoVariables'>;
 /**
- * Converts variable definitions stored in a map into a flat list,
- * respecting their `order` property if set, and sorting by display name otherwise.
+ * A parameter which can be one of a custom parameter editor (`inputWhenNoVariables`),
+ * or one single variable value (not multiple). Use for parameters which can only have one variable value,
+ * possibly because they bind to objects or arrays.
+ * Designed visually for use in the Canvas Parameter Editor.
+ */
+declare function ParameterOrSingleVariable<TEditorContext = unknown>(props: ParameterOrSingleVariableProps<TEditorContext>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+
+type ParameterVariablesProps<TEditorContext = unknown> = {
+    /** sets the input aria-label value. */
+    'aria-label'?: string;
+    /** Sets the test ID of the input */
+    'data-test-id'?: string;
+    /**
+     * Enables mutliple lines in the input (\n in the value).
+     * If a number is passed, the height of the editor is set to that number of lines and overflow scrolls.
+     * If a boolean true is passed, the editor auto-sizes to the content.
+     */
+    multiLine?: boolean | number;
+    /** Disables editing the value of the input, editing variables, and adding variables */
+    disabled?: boolean;
+    /**
+     * Optional ref to get a handle to the variables editor.
+     * This can be useful for situations such as:
+     * * Once initially set, `value` prop is no longer reactive and the editor owns its state. The ref can be used to set the editor state after load.
+     * * Performing other custom mutations to the variables editor, such as inserting text from a button click.
+     */
+    editorRef?: MutableRefObject<LexicalEditor | null>;
+    /** If set the editor will auto-focus on mount */
+    autoFocus?: boolean;
+} & UseInputVariablesStateProps<TEditorContext>;
+/**
+ * An input box that enables insertion of 'variables', provided by VariablesProvider,
+ * into its value. Designed visually for use in the Canvas Parameter Editor.
  */
-declare function variablesToList(variables: Record<string, DataVariableDefinition> | undefined): Array<DataVariableDefinitionWithName>;
+declare function ParameterVariables<TEditorContext = unknown>(props: ParameterVariablesProps<TEditorContext>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-type VariableEditorProps = {
+type VariableEditorProps<TEditorContext = unknown> = {
     variable: string;
     onSubmit: (values: DataVariableDefinitionWithName) => void | Promise<void>;
     /** Disables the tip about Mesh integrations. Intended for use when this is placed on a custom Mesh integration to edit variables. */
     disableMeshTip?: boolean;
     onCancel: () => void;
+    context: TEditorContext | undefined;
 };
-declare function VariableEditor({ variable, onSubmit, onCancel, disableMeshTip }: VariableEditorProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare function VariableEditor({ variable, onSubmit, onCancel, disableMeshTip }: VariableEditorProps<any>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-declare function VariablesList(): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-
-type VariablesProviderProps = React$1.PropsWithChildren<{
+type VariablesProviderProps<TEditVariableContext = unknown> = React$1.PropsWithChildren<{
     /**
      * Signals that components in this variables context are not intended to allow mutation
      * of the variable values (i.e. editing, adding, or deleting variable definitions).
@@ -534,18 +811,20 @@ type VariablesProviderProps = React$1.PropsWithChildren<{
      */
     readOnly?: boolean;
     /** Variable values to load into the context */
-    value: Record<string, DataVariableDefinition>;
+    value: Record<string, MeshDataVariableDefinition>;
     /** Function to handle mutations to the variable values (optional when readOnly is true) */
-    onChange?: (newValue: Record<string, DataVariableDefinition>) => void;
+    onChange?: (newValue: Record<string, MeshDataVariableDefinition>) => void;
     /**
      * Provide a component to handle editing a variable definition (e.g. a modal wrapper)
      * If not passed, the editor will be rendered inline, with potentially strange results.
      */
-    editVariableComponent?: React$1.ComponentType<VariableEditorProps>;
+    editVariableComponent?: React$1.ComponentType<VariableEditorProps<TEditVariableContext>>;
 }>;
-type VariablesAction = {
+type VariablesAction<TEditVariableContext> = {
     type: 'edit';
     variable: string;
+    /** Context that will be passed in a prop to the variables context editing component */
+    context?: TEditVariableContext;
 } | {
     type: 'remove';
     variable: string;
@@ -553,14 +832,22 @@ type VariablesAction = {
     type: 'set';
     variable: DataVariableDefinitionWithName;
     openEditor?: boolean;
+    /** Context that will be passed in a prop to the variables context editing component. Only has an effect when openEditor = true */
+    context?: TEditVariableContext;
 } | {
     type: 'reorder';
     result: Record<string, DataVariableDefinitionWithName>;
+} | {
+    type: 'cancelEdit';
+};
+type VariablesUpdateEvent = {
+    name: string;
+    latestValue: Record<string, MeshDataVariableDefinition>;
 };
 type VariablesEvents = {
-    update: string;
+    update: VariablesUpdateEvent;
 };
-type VariablesContext = {
+type VariablesContext<TEditVariableContext> = {
     /**
      * Signals that components in this variables context are not intended to allow mutation
      * of the variable values (i.e. editing, adding, or deleting variable definitions).
@@ -569,9 +856,9 @@ type VariablesContext = {
      */
     readOnly?: boolean;
     /** Dispatch update events to the variables */
-    dispatch: (event: VariablesAction) => void;
+    dispatch: (event: VariablesAction<TEditVariableContext>) => void;
     /** The current variables value */
-    variables: Readonly<Record<string, DataVariableDefinition>>;
+    variables: Readonly<Record<string, MeshDataVariableDefinition>>;
     /** Whether the context is editing a variable value currently */
     isEditing: boolean;
     /** Add event handles (don't forget to unhook) */
@@ -582,10 +869,54 @@ type VariablesContext = {
      * A flattened version of `variables` that is a plain key-value object.
      * Used when binding the variables to a value.
      */
-    flatVariables: Readonly<Record<string, string>>;
+    flatVariables: Readonly<Record<string, unknown>>;
 };
-declare function VariablesProvider({ value, onChange, editVariableComponent, readOnly, children, }: VariablesProviderProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-declare function useVariables(returnEmptyWithoutProvider?: boolean): VariablesContext;
+declare function VariablesProvider<TEditComponentContext = never>({ value, onChange, editVariableComponent, readOnly, children, }: VariablesProviderProps<TEditComponentContext>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare function useVariables<TEditComponentContext = unknown>(returnEmptyWithoutProvider?: boolean): VariablesContext<TEditComponentContext>;
+
+declare function useOnVariableUpdated(fn: (event: VariablesUpdateEvent) => void, disabled?: boolean): void;
+
+/** Converts a connected data map entry to a VariablesProvider-format variable */
+declare function convertConnectedDataToVariable(bindExpression: string, value: unknown): MeshDataVariableDefinition;
+
+/**
+ * Returns true if the string expression has variable references in it
+ */
+declare function hasReferencedVariables(value: string): boolean;
+
+declare function prettifyBindExpression(bindExpression: string): string;
+
+/**
+ * Serializes a Lexical variables-editor state (as a Lexical AST) to a Uniform-variable-reference formatted string
+ * Note: if no content is in the editor state, undefined will be returned.
+ */
+declare function serializeVariablesEditorState(editorState: EditorState): string | undefined;
+
+/**
+ * Programmatically sets the current value of a variables editor after it has already initialized
+ * and become an uncontrolled component. Passing the `editorRef` prop to the component will give
+ * a reference to `editor`, or use `ControlledValuePlugin` to manage this automatically.
+ *
+ * If newValue is undefined, the editor will be set to an empty state.
+ * If newValue is a string, it will be treated as a variable-reference-containing string, and parsed to a Lexical AST
+ * If newValue is a serialized Lexical AST, it will be used as-is. If the AST is invalid, the editor will be set to an empty state.
+ */
+declare function setVariablesEditorValue(editor: LexicalEditor, newValue: string | undefined | SerializedEditorState<SerializedLexicalNode>): void;
+
+declare function variableDefaultTextValue(defaultValue: unknown): string;
+
+/**
+ * Expected prefix for variable expressions
+ * @deprecated
+ */
+declare const variablePrefix = "${";
+/**
+ * Expected suffix for variable expressions
+ * @deprecated
+ */
+declare const variableSuffix = "}";
+
+declare function VariablesList(): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type DataResourceVariablesListProps = {
     /**
@@ -1025,6 +1356,25 @@ type QueryFilterProps<TSelectOptions extends QuertFilterSelectionOptionProps = Q
  */
 declare const QueryFilter: ({ requireContentType, queryFilterTitle, contentTypeLabel, typeSelectorAllTypesOptionText, contentTypeOptions, searchInputName, searchInputPlaceholderText, searchInputLabel, countLabel, countValue, sortLabel, sortOptions, sortOrderLabel, sortOrderOptions, children, }: QueryFilterProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
+type ParamTypeDynamicDataProviderProps = {
+    /** Child components of the provider. Variables-using components, such as ParameterVariables, can be used here. */
+    children: ReactNode;
+};
+/** Context to tell the binding UI what types are allowed for the current binding expression */
+type ParameterConnectOptions = {
+    /**
+     * Which JSON primitive types can be connected to this parameter.
+     * Note that if the only value of the parameter is a complex dynamic token connection (object or array), then the connected data will be the literal value, not a string.
+     */
+    connectsTo: BindableTypes[];
+};
+/**
+ * Wrapper for data resource locations. Provides read-only access to dynamic inputs as if they were variables,
+ * using variables-aware components (i.e. InputVariables). This simplifies building dynamic-input-aware editors,
+ * where a data resource variable could be a static value or bound to a dynamic input from the route (project map).
+ */
+declare function ParamTypeDynamicDataProvider(props: ParamTypeDynamicDataProviderProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+
 /** Editor component to let you write a request body for POST requests */
 declare function RequestBody(): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
@@ -1116,10 +1466,10 @@ declare function RequestUrl(): _emotion_react_types_jsx_namespace.EmotionJSX.Ele
  * Editor to modify the current URL of the request
  * Note: entering query string parameters automatically converts them and syncs the request state with them
  */
-declare function RequestUrlInput(props: Omit<InputVariablesProps, 'value' | 'onChange'>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare function RequestUrlInput(props: Omit<InputVariablesProps, 'value' | 'onChange'> & Pick<InputVariablesProps, 'showAddVariableMenuOption' | 'enableEditingVariables'>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-declare function urlEncodeRequestUrl(url: string, varValues?: Record<string, DataVariableDefinition>): string;
-declare function urlEncodeRequestParameter(parameter: RequestParameter, varValues?: Record<string, DataVariableDefinition>): RequestParameter;
+declare function urlEncodeRequestUrl(url: string, varValues?: Record<string, MeshDataVariableDefinition>): string;
+declare function urlEncodeRequestParameter(parameter: RequestParameter, varValues?: Record<string, MeshDataVariableDefinition>): RequestParameter;
 
 /**
  * Hook to make it simple to read and write a specific request header by name,
@@ -1145,6 +1495,12 @@ declare function useRequestParameter(paramName: string): {
     update: (value: string) => void;
 };
 
+/** Converts connected data map into VariablesProvider-format variables */
+declare function useConnectedDataAsVariables(connectedData: Record<string, unknown> | undefined): Record<string, MeshDataVariableDefinition>;
+
+/** Converts dynamic inputs into VariablesProvider-format variables */
+declare function useDynamicInputsAsVariables(dynamicInputs: MinimalDynamicInputs): Record<string, MeshDataVariableDefinition>;
+
 /**
  * Provides convenient access to the current Uniform Mesh SDK instance via React hook.
  * Intended to be used within <MeshApp />.
@@ -1160,4 +1516,4 @@ declare function useUniformMeshSdk(): _uniformdev_mesh_sdk.UniformMeshSDK;
  */
 declare function createLocationValidator<TSetValue>(setValue: SetLocationValueDispatch<TSetValue>, validate: (newValue: TSetValue, currentResult: SetValueOptions | undefined) => SetValueOptions): SetLocationValueDispatch<TSetValue>;
 
-export { BaseRequestData, Brand, DamItem, DamSelectedItem, DamSelectedItemProps, DataRefreshButton, DataRefreshButtonProps, DataResourceDynamicInputProvider, DataResourceDynamicInputProviderProps, DataResourceVariableRendererProps, DataResourceVariablesList, DataResourceVariablesListExplicit, DataResourceVariablesListProps, DataSourceEditor, DataSourceEditorProps, DataTypeEditor, DataTypeEditorProps, DataVariableDefinitionWithName, DefaultSearchRow, DefaultSelectedItem, DispatchResult, EntrySearch, EntrySearchContentType, EntrySearchProps, EntrySearchQueryOptions, EntrySearchResult, EntrySearchRowProps, EntrySearchSelectedItemProps, GetProductOptions, GetProductsOptions, index as Icons, InputToken, InputVariables, InputVariablesProps, ItemListProps, LinkButton, MeshApp, MeshAppProps, MinimalDynamicInput, MinimalDynamicInputs, NoResultsProps, ObjectSearchContainer, ObjectSearchContainerProps, ObjectSearchContextProps, ObjectSearchFilter, ObjectSearchFilterContainer, ObjectSearchFilterContainerProps, ObjectSearchFilterProps, ObjectSearchListItem, ObjectSearchListItemLoadingSkeleton, ObjectSearchListItemProps, ObjectSearchProvider, ObjectSearchProviderProps, ObjectSearchResultItem, ObjectSearchResultItemButton, ObjectSearchResultItemButtonProps, ObjectSearchResultItemProps, ObjectSearchResultList, ObjectSearchResultListProps, ProductCategory, ProductDynamicSelectorValue, ProductPreviewList, ProductQuery, ProductQueryCategory, ProductQueryContext, ProductQueryContextValue, ProductQueryProps, ProductSearch, ProductSearchContext, ProductSearchContextValue, ProductSearchProps, ProductSearchResult, ProductSearchResults, ProductSearchRow, ProductSelectedItem, QueryFilter, QueryFilterProps, QueryFilterSearchProps, RequestAction, RequestBody, RequestContext, RequestData, RequestHeaders, RequestMethodSelect, RequestParameter, RequestParameters, RequestParametersProps, RequestProvider, RequestProviderProps, RequestTypeContainer, RequestTypeContainerProps, RequestUrl, RequestUrlInput, ResolvableLoadingValue, SearchQueryProps, SelectedItemProps, SelectionField, SelectionFieldValue, SetLocationValueDispatch, SetLocationValueFunction, TextVariableRenderer, VariableEditor, VariableEditorProps, VariablesAction, VariablesContext, VariablesEvents, VariablesList, VariablesProvider, VariablesProviderProps, badgeIcon, createLocationValidator, damSelectItemImage, damSelectedItemContainer, damSelectedItemCopy, damSelectedItemDetails, damSelectedItemIcon, damSelectedItemInfoBtn, damSelectedItemInner, damSelectedItemLinkBtn, damSelectedItemLinkContainer, damSelectedItemMediaContainer, damSelectedItemPopover, damSelectedItemPopoverLabel, damSelectedItemSmallText, damSelectedItemTitle, draggableContainer, draggableIcon, draggableIconOffset, draggableIconWrapper, entrySearchBtn, entrySearchConfig, entrySearchConfigHidden, entrySearchLoadMoreBtn, entrySearchResultList, entrySearchSelectIcon, entrySearchSelectImg, entrySearchSelectInput, entrySearchSelectOption, entrySearchWrapper, productSearchRowActiveIcon, productSearchRowCategory, productSearchRowContainer, productSearchRowContent, productSearchRowContentActive, productSearchRowDetails, productSearchRowTitle, productSelectedItemContainer, productSelectedItemContent, productSelectedItemDetails, productSelectedItemIcon, productSelectedItemImage, productSelectedItemLinkContainer, productedSelectedItemLinkBtn, productedSelectedItemSmallText, searchRowBtn, searchRowContainer, searchRowContainerActive, searchRowContainerWithPopover, searchRowPopover, searchRowText, searchRowTextSmall, selectItemLinkBtn, selectItemLinkContainer, selectItemPopover, selectItemPopoverLabel, selectItemSmallText, selectedItemContainer, selectedItemCopy, selectedItemDetails, selectedItemIcon, selectedItemInner, selectedItemTitle, urlEncodeRequestParameter, urlEncodeRequestUrl, useMeshLocation, useObjectSearchContext, useProductQueryContext, useProductSearchContext, useRequest, useRequestHeader, useRequestParameter, useUniformMeshSdk, useVariables, variablePrefix, variableSuffix, variablesToList };
+export { $createVariableNode, $isVariableNode, BaseRequestData, Brand, ControlledValuePlugin, DamItem, DamSelectedItem, DamSelectedItemProps, DataRefreshButton, DataRefreshButtonProps, DataResourceDynamicInputProvider, DataResourceDynamicInputProviderProps, DataResourceVariableRendererProps, DataResourceVariablesList, DataResourceVariablesListExplicit, DataResourceVariablesListProps, DataSourceEditor, DataSourceEditorProps, DataTypeEditor, DataTypeEditorProps, DataVariableDefinitionWithName, DefaultSearchRow, DefaultSelectedItem, DispatchResult, EDIT_VARIABLE_COMMAND, EditVariableCommandArguments, EntrySearch, EntrySearchContentType, EntrySearchProps, EntrySearchQueryOptions, EntrySearchResult, EntrySearchRowProps, EntrySearchSelectedItemProps, GetProductOptions, GetProductsOptions, INSERT_VARIABLE_COMMAND, index as Icons, InputVariables, InputVariablesProps, InsertVariableCommandArguments, ItemListProps, LinkButton, MeshApp, MeshAppProps, MeshDataVariableDefinition, MinimalDynamicInput, MinimalDynamicInputs, NoResultsProps, OPEN_INSERT_VARIABLE_COMMAND, ObjectSearchContainer, ObjectSearchContainerProps, ObjectSearchContextProps, ObjectSearchFilter, ObjectSearchFilterContainer, ObjectSearchFilterContainerProps, ObjectSearchFilterProps, ObjectSearchListItem, ObjectSearchListItemLoadingSkeleton, ObjectSearchListItemProps, ObjectSearchProvider, ObjectSearchProviderProps, ObjectSearchResultItem, ObjectSearchResultItemButton, ObjectSearchResultItemButtonProps, ObjectSearchResultItemProps, ObjectSearchResultList, ObjectSearchResultListProps, ParamTypeDynamicDataProvider, ParamTypeDynamicDataProviderProps, ParameterConnectOptions, ParameterConnectionIndicator, ParameterConnectionIndicatorProps, ParameterOrSingleVariable, ParameterOrSingleVariableProps, ParameterVariables, ParameterVariablesProps, ProductCategory, ProductDynamicSelectorValue, ProductPreviewList, ProductQuery, ProductQueryCategory, ProductQueryContext, ProductQueryContextValue, ProductQueryProps, ProductSearch, ProductSearchContext, ProductSearchContextValue, ProductSearchProps, ProductSearchResult, ProductSearchResults, ProductSearchRow, ProductSelectedItem, QueryFilter, QueryFilterProps, QueryFilterSearchProps, RequestAction, RequestBody, RequestContext, RequestData, RequestHeaders, RequestMethodSelect, RequestParameter, RequestParameters, RequestParametersProps, RequestProvider, RequestProviderProps, RequestTypeContainer, RequestTypeContainerProps, RequestUrl, RequestUrlInput, ResolvableLoadingValue, SearchQueryProps, SelectedItemProps, SelectionField, SelectionFieldValue, SerializedVariableNode, SetLocationValueDispatch, SetLocationValueFunction, TextVariableRenderer, UseVariablesMenu, UseVariablesMenuInput, VariableEditor, VariableEditorProps, VariableNode, VariableNodeState, VariableSourceGroup, VariablesAction, VariablesContext, VariablesEvents, VariablesList, VariablesPlugin, VariablesPluginProps, VariablesProvider, VariablesProviderProps, VariablesUpdateEvent, badgeIcon, convertConnectedDataToVariable, createLocationValidator, damSelectItemImage, damSelectedItemContainer, damSelectedItemCopy, damSelectedItemDetails, damSelectedItemIcon, damSelectedItemInfoBtn, damSelectedItemInner, damSelectedItemLinkBtn, damSelectedItemLinkContainer, damSelectedItemMediaContainer, damSelectedItemPopover, damSelectedItemPopoverLabel, damSelectedItemSmallText, damSelectedItemTitle, draggableContainer, draggableIcon, draggableIconOffset, draggableIconWrapper, entrySearchBtn, entrySearchConfig, entrySearchConfigHidden, entrySearchLoadMoreBtn, entrySearchResultList, entrySearchSelectIcon, entrySearchSelectImg, entrySearchSelectInput, entrySearchSelectOption, entrySearchWrapper, hasReferencedVariables, prettifyBindExpression, productSearchRowActiveIcon, productSearchRowCategory, productSearchRowContainer, productSearchRowContent, productSearchRowContentActive, productSearchRowDetails, productSearchRowTitle, productSelectedItemContainer, productSelectedItemContent, productSelectedItemDetails, productSelectedItemIcon, productSelectedItemImage, productSelectedItemLinkContainer, productedSelectedItemLinkBtn, productedSelectedItemSmallText, searchRowBtn, searchRowContainer, searchRowContainerActive, searchRowContainerWithPopover, searchRowPopover, searchRowText, searchRowTextSmall, selectItemLinkBtn, selectItemLinkContainer, selectItemPopover, selectItemPopoverLabel, selectItemSmallText, selectedItemContainer, selectedItemCopy, selectedItemDetails, selectedItemIcon, selectedItemInner, selectedItemTitle, serializeVariablesEditorState, setVariablesEditorValue, urlEncodeRequestParameter, urlEncodeRequestUrl, useConnectedDataAsVariables, useDynamicInputsAsVariables, useMeshLocation, useObjectSearchContext, useOnVariableUpdated, useProductQueryContext, useProductSearchContext, useRequest, useRequestHeader, useRequestParameter, useUniformMeshSdk, useVariables, useVariablesMenu, variableDefaultTextValue, variablePrefix, variableSuffix, variablesToGroupedList, variablesToList };