Home > @uniformdev/mesh-sdk-react

mesh-sdk-react package

Classes

Class

Description

DelegationDisabledError

Thrown by reacquire() when sdk.getSessionToken() returns undefined, meaning identity delegation is not enabled for this integration. Distinct from transient errors so callers can avoid showing an error state.

VariableNode

Renders a variable reference node within a Lexical editor

Functions

Function

Description

$createVariableNode(variableReference, state)

$isVariableNode(node)

ControlledValuePlugin({ enabled, value, extraDependencies, }, input)

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)

convertConnectedDataToVariable(bindExpression, value)

Converts a connected data map entry to a VariablesProvider-format variable

createDelegationFetch(options)

fetch wrapper that injects the Mesh CSRF header, and on a BFF delegation_expired 401 calls reacquire() once then retries. A second expiry after reacquire is returned as-is.

createLocationValidator(setValue, validate)

Creates a validation interceptor between useMeshLocation's setValue function and your code. You can use this utility to write cleaner validation logic for your Mesh Location UIs.

DataRefreshButton({ buttonText, isLoading, onRefreshData, ...props }, input)

The data refresh button is a UI component to indicate to users a request for data is taking place

DataResourceDynamicInputProvider(props)

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).

DataResourceVariablesList(props)

Renders a list of Data Type-provided variables that can be set on a Data Resource. Intended to provide a solid base for data resource editors that need to edit a list of variables. Using the optional type attribute of variables, one can use custom components to render different variables using this component, enabling flexibility for more than just text inputs.

DataResourceVariablesListExplicit({ setVariables, noVariables: NoVariablesComponent, typeRenderers, dataType, dynamicInputs, value, }, input)

Renders a list of Data Type-provided variables that can be set on a Data Resource.

This is a version of DataResourceVariablesList that does not use any Mesh context data. For most uses you will want to use DataResourceVariablesList instead.

DataSourceEditor({ onChange, children, editVariableComponent }, input)

Wrapper for editing a data source using Uniform Mesh SDK components that rely on useRequest() or useVariables(), or custom components that use the same hooks.

DataTypeEditor({ onChange, children, editVariableComponent }, input)

Wrapper for editing a data type using Uniform Mesh SDK components that rely on useRequest() or useVariables(), or custom components that use the same hooks.

DateEditor({ onChange, ariaLabel, disabled, value, readOnly, valueTestId, }, input)

Renders a date input field for filtering

DateRangeEditor({ ariaLabel, onChange, disabled, value, readOnly, valueTestId, }, input)

Renders a date range input field for filtering

DelegationGate({ children, loadingComponent, disabledComponent, errorComponent, }, input)

Renders children only when the delegation session is active. Shows appropriate fallback UI for loading, disabled, and error states.

Sensible defaults use the design system (loading overlay, callouts). Pass loadingComponent, or errorComponent to customize; pass null to render nothing for that state.

DelegationProvider({ sdk, onSessionToken, checkActive, revalidateOnFocus, revalidateAfterMs, children, }, input)

Manages the identity delegation lifecycle: checks for an existing session, acquires a session token from the dashboard parent if needed, and delegates exchange to the caller.

Should ONLY be used to wrap locations which actually needed delegation and not the entire app like .

Also handles stale-session recovery: when the tab becomes visible again after being hidden for longer than revalidateAfterMs, the provider silently re-checks via checkActive and re-runs the session exchange only if the server says the session is no longer active. This covers the "returned after a long time" case where the stored access token has expired and the refresh token is also gone or no longer valid.

Mid-session expiry (visible tab, BFF returns delegation_expired, which awaits re-exchange and retries the failed request once.

FilterButton({ text, icon, filterCount, hasSelectedValue, dataTestId, showDropdownIcon, ...props }, input)

A filter button component used to display filter menu options

FilterControls({ children, hideSearchInput, }, input)

Default filter controls for search and filter

FilterEditorRenderer({ editorType, ...props }, input)

Renders a filter editor component

FilterItem({ index, operatorOptions, valueOptions, onFilterOptionChange, onFilterDynamicChange, onOperatorChange, onValueChange, initialCriteriaTitle, criteriaGroupOperator, onCriteriaGroupOperatorChange, }, input)

A filter item component used to display filter options

FilterItems({ addButtonText, additionalFiltersContainer, filterTitle, resetButtonText, initialCriteriaTitle, criteriaGroupOperator, onCriteriaGroupOperatorChange, }, input)

A filter items component used to display filter options

FilterMenu({ id, filterTitle, menuControls, additionalFiltersContainer, children, dataTestId, resetButtonText, }, input)

A filter menu component used to display filter options

FilterMultiChoiceEditor({ value, options, disabled, readOnly, valueTestId, ...props }, input)

Multi select filter component

FilterSingleChoiceEditor({ options, value, disabled, readOnly, onChange, valueTestId, }, input)

Single select filter component

InputVariables(props)

An input box that enables insertion of 'variables', provided by VariablesProvider, into its value.

isDelegationExpiredResponse(response)

Default expiry check: 401 whose JSON body has code === DELEGATION_EXPIRED_CODE.

LinkButton({ text, icon, ...props }, input)

An opinionated link component styled the same of the ObjectSearchResultItemButton component, that automatically sets the target and rel attributes. Best used within the ObjectSearchResultItem component

NumberEditor({ ariaLabel, onChange, disabled, value, readOnly, valueTestId, }, input)

Renders a number input field for filtering

NumberRangeEditor({ onChange, disabled, ariaLabel, value, readOnly, valueTestId, }, input)

Renders a number range input field for filtering

ObjectSearchContainer({ label, enableDynamicInputToResultId, searchFilters, resultList, children, }, input)

Object search container is an opinionated layout for search parameters and retrieved results

ObjectSearchFilter({ requireContentType, typeSelectorAllTypesOptionText, searchInputName, searchInputPlaceholderText, selectLabel, selectOptions, }, input)

Object search filter is an opinionated filter that has pre-defined query and setQuery functions that can be extended with custom functions

ObjectSearchFilterContainer({ children }, input)

an opinionated layout for search filters

ObjectSearchListItem({ id, title, contentType, imageUrl, popoverData, onSelect, isMulti, disabled, children, ...props }, input)

entry search list item is an opinionated UI component best used for initial retrieved results

ObjectSearchListItemLoadingSkeleton()

An opinionated loading skeleton component best used with ObjectSearchListItem

ObjectSearchProvider({ currentlySelectedItems, isMulti, children, defaultQuery, }, input)

ObjectSearchResultItem({ id, title, contentType, popoverData, publishStatus, editLinkIcon, editLink, imageUrl, onRemove, createdAt, publishedAt, hideRemoveButton, disableDnD, children, onClick, }, input)

An opinionated result item, best used for selected results

ObjectSearchResultItemButton({ text, icon, ...props }, input)

An opinionated button component best used within the ObjectSearchResultItem component

ObjectSearchResultList({ resultLabelText, removeButtonText, onRemoveAllSelected, hideRemoveButton, resultLabelOverride, additionalButtons, renderResultComponent, multiSelectId, disableDnD, getContainerForDnDReparenting, whenNothingSelected, }, input)

An opinionated result list UI component that has built in drag and drop functionality and removal of all selected items from context. The result item component defaults to <, however this can be overridden with any other UI component and still maintain drag and drop functionality

ParameterConnectionIndicator({ children, value, menuOptions, disabled, menuTooltip, overrideMenuButtonParentMargin, renderMenuInPortal, }, input)

An input box that enables insertion of 'variables', provided by VariablesProvider, into its value. Designed specifically for use in the Canvas Parameter Editor.

ParameterOrSingleVariable(props)

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.

ParameterVariables(props)

An input box that enables insertion of 'variables', provided by VariablesProvider, into its value. Designed visually for use in the Canvas Parameter Editor.

ParamTypeDynamicDataProvider(props)

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).

prettifyBindExpression(bindExpression)

QueryFilter({ requireContentType, queryFilterTitle, contentTypeLabel, typeSelectorAllTypesOptionText, contentTypeOptions, searchInputName, searchInputPlaceholderText, searchInputLabel, countLabel, sortLabel, sortOptions, sortOrderLabel, sortOrderOptions, children, }, input)

An opinionated multi query filter UI component, best used for querying product data or more complex scenarios

RequestBody()

Editor component to let you write a request body for POST requests

RequestHeaders({ disableVariables, addOmitIfEmpty, }, input)

Editor component to manage HTTP headers on a request

RequestMethodSelect(props)

Dropdown to pick a HTTP method for a request

RequestParameters({ disableVariables, addOmitIfEmpty, }, input)

Component to manage query parameters on a request

RequestProvider({ value, onChange, children }, input)

Provides a mutable HTTP request object context. Components such as RequestBody and RequestUrl use this context to render.

RequestTypeContainer({ bgColor, children, ...props }, input)

a container to layout content in a 2 column grid format = 12ch 1fr

RequestUrl()

Displays the current full URL of the request, including the base URL if one is set

RequestUrlInput(props)

Editor to modify the current URL of the request Note: entering query string parameters automatically converts them and syncs the request state with them

SearchAndFilter({ filters, filterOptions, filterVisible, filterControls, viewSwitchControls, resultsContainerView, filterMapper, additionalFiltersContainer, onChange, defaultSearchTerm, onSearchChange, totalResults, isLoading, allowBindingSearchTerm, resetFilterValues, onResetFilterValues, }, input)

Search and filter component

SearchAndFilterOptionsContainer({ buttonRow, additionalFiltersContainer, children, }, input)

A container component for search and filter options

SearchAndFilterProvider({ filters, filterOptions, filterVisible, alwaysVisible, defaultSearchTerm, onSearchChange, onChange, resetFilterValues, onResetFilterValues, totalResults, isLoading, filterMapper, children, allowBindingSearchTerm, }, input)

Search and filter provider

SearchAndFilterResultContainer({ buttonText, clearButtonLabel, calloutTitle, calloutText, onHandleClear, hideClearButton, }, input)

Search and filter results container

SearchOnlyFilter({ onSearchChange, maxWidth }, input)

serializeVariablesEditorSerializedState(serializedEditorState)

serializeVariablesEditorState(editorState)

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.

setVariablesEditorValue(editor, newValue, tag)

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.

SortItems({ sortByLabel, localeLabel, sortOptions, sortByValue, onSortChange, localeValue, localeOptions, onLocaleChange, disableSortBinding, }, input)

Copy of Design System component with ability to bind variables to inputs.

StatusMultiEditor({ options, value, disabled, readOnly, onChange, valueTestId, }, input)

Status multi select filter component that renders a custom dropdown menu

StatusSingleEditor({ options, value, disabled, readOnly, onChange, valueTestId, }, input)

Status single select filter component that renders a custom dropdown menu

TextEditor({ onChange, ariaLabel, value, readOnly, valueTestId, }, input)

Renders a text input field for filtering

TextMultiChoiceEditor({ value, disabled, readOnly, valueTestId, ...props }, input)

Text value multi select filter component

TextVariableRenderer({ definition, value, setValue }, input)

Default data resource variable renderer, uses a text input that supports dynamic input binding

urlEncodeRequestParameter(parameter, varValues)

urlEncodeRequestUrl(url, varValues)

useConnectedDataAsVariables(connectedData)

Converts connected data map into VariablesProvider-format variables

useContentDataResourceLocaleInfo({ locale, defaultLocale, setLocale, dynamicInputs, }, input)

useDelegation()

Delegation session state (status. Prefer useDelegationFetch() for BFF calls.

useDelegationFetch(options)

fetch for BFF calls: injects the Mesh CSRF header, and on delegation_expired 401 reacquires via useDelegation() then retries once. Requires DelegationProvider.

useDynamicInputsAsVariables(dynamicInputs)

Converts dynamic inputs into VariablesProvider-format variables

useMeshLocation(expectedLocation)

Provides convenient access to the current Uniform Mesh location via React hook. Intended to be used within .

There are three primary ways to invoke this hook: 1. Without any arguments, this hook will return the current location regardless of its type. The result will be a union of all possible locations you can discriminate between i.e. with an if statement on the type const location = useMeshLocation(); if (location.type === 'paramType') { // location is now known to be a paramType } 2. With a string argument, this hook will assert that the current location is the expected one and return the correct typings for that location. const location = useMeshLocation('settings'); 3. With an explicit generic to set the expected param type data or param type settings data. This is useful because (2) will return unknown as the value type for param types. const location = useMeshLocation();

You can also combine (2) and (3) to get both explicit value typing and assertion of the location.

useObjectSearchContext()

useRequest()

useRequestHeader(headerName)

Hook to make it simple to read and write a specific request header by name, instead of supporting multiple values in an array like native dispatch.

NOTE: if multiple values are added for the named header, this hook will bind to the FIRST instance of the header and leave the other values alone.

useRequestParameter(paramName)

Hook to make it simple to read and write a specific request query string parameter by name, instead of supporting multiple values in an array like native dispatch.

NOTE: if multiple values are added for the named parameter, this hook will bind to the FIRST instance of the parameter and leave the other values alone.

useSearchAndFilter()

Search and filter hook

useUniformMeshSdk()

Provides convenient access to the current Uniform Mesh SDK instance via React hook. Intended to be used within .

useVariableEditor()

useVariables(returnEmptyWithoutProvider)

useVariablesMenu({ showAddVariableMenuOption, enableEditingVariables, filterVariable, getEditorContext, }, input)

Hook to use the lexical variables typeahead/dropdown menu

VariableChip({ displayName, referenceIsValid, tooltip, reference, onClick, clickToEdit, isFresh, selected, disabled, errorMessage, }, input)

Chip to display a reference to a variable in a variables-supporting input or other reference display

variableDefaultTextValue(defaultValue)

VariableEditor({ variable, onSubmit, onCancel, showDisplayName, disableMeshTip, }, input)

VariablesList()

VariablesPlugin({ disableVariables, showAddVariableMenuOption, enableEditingVariables, getEditorContext, replaceValueOnVariableInsert, filterVariable, disableVariableDisplayNames, }, input)

Enables variables auto-complete and reference management to a Lexical editor. Must also activate the VariableNode node to make this work.

VariablesProvider({ value, onChange, editVariableComponent, readOnly, isLoading, children, knownUndefinedValues, onChangeKnownUndefinedValue, }, input)

variablesToGroupedList(variables, filterFn, context)

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.

variablesToList(variables)

Converts variable definitions stored in a map into a flat list, respecting their order property if set, and sorting by display name otherwise.

Interfaces

Interface

Description

CreateDelegationFetchOptions

Options for createDelegationFetch().

DelegationContextValue

Value provided by DelegationProvider via React context.

DelegationGateProps

DelegationProviderProps

Namespaces

Namespace

Description

Icons

Variables

Variable

Description

bindableFiltersMapper

CHECKBOX_OPERATORS

uniform checkbox operators

DATE_OPERATORS

uniform date operators

DATE_TIME_OPERATORS

uniform system date operators

DelegationContext

DISCONNECT_VARIABLE_COMMAND

Disconnects a variable node from its binding, leaving the current value of the binding behind

EDIT_VARIABLE_COMMAND

Opens the variable editor for an existing variable node

filterMapper

A mapper for filter editor components

INSERT_VARIABLE_COMMAND

Inserts a new variable node at the current selection, or replacing a specific node key

MeshApp

MULTI_SELECT_OPERATORS

uniform multi-select field operators

NUMBER_OPERATORS

uniform number operators

OPEN_INSERT_VARIABLE_COMMAND

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.

OPTIONAL_SYSTEM_FIELD_OPERATORS

uniform optional system field operators

PUBLISH_STATUS_FIELD_OPERATORS

uniform publish status field operators

readOnlyAttributes

RICHTEXT_OPERATORS

uniform rich text operators

SearchAndFilterContext

SearchOnlyContext

SELECT_OPERATORS

uniform select field operators

SYSTEM_FIELD_OPERATORS

uniform system field operators

TEXTBOX_OPERATORS

uniform textbox operators

USER_OPERATORS

uniform user operators

variablePrefix

Expected prefix for variable expressions

variableSuffix

Expected suffix for variable expressions

Type Aliases

Type Alias

Description

BadgeThemeProps

BaseRequestData

ContentDataResourceLocaleInfoProps

ContentDataResourceLocaleInfoResult

DataRefreshButtonProps

DataResourceDynamicInputProviderProps

DataResourceVariableRendererProps

DataResourceVariablesListProps

DataSourceEditorProps

DataTypeEditorProps

DataVariableDefinitionWithName

DelegationStatus

Status of the delegation session as seen from the React provider.

DisconnectVariableCommandArguments

DispatchResult

EditVariableCommandArguments

Filter

Filter selected and query value props

FilterButtonProps

FilterEditor

Filter editor component names

FilterEditorRendererProps

FilterItemProps

FilterItemsProps

FilterMapper

FilterOption

Filter option props

FilterOptionGroup

Filter option props

FilterOptionLeftHandComponentProps

Filter option props

FiltersProps

InputOption

Input option props

InputOptionGroup

Input option group props

InputOptionValue

Input option props

InputVariablesProps

InsertVariableCommandArguments

ItemListProps

KnownUndefinedVariableInfo

Provides information for an undefined variable that might be referenced in data, but is undefined in the variables context due to some sort of error or informational message.

If an undefined variable matches one of these, the error or info message will be shown instead of the generic "undefined variable" message.

KnownUndefinedVariableInfoWithName

MeshAppProps

MeshDataVariableDefinition

ObjectSearchContainerProps

ObjectSearchContextProps

ObjectSearchFilterContainerProps

ObjectSearchFilterProps

ObjectSearchListItemProps

ObjectSearchProviderProps

ObjectSearchResultItemButtonProps

ObjectSearchResultItemProps

ObjectSearchResultListProps

Operator

Operator option props

OperatorType

a list of possible operator types

OperatorValue

a list of possible operator values that sync with uniform search api

OperatorValueType

ParameterConnectionIndicatorProps

ParameterConnectOptions

Context to tell the binding UI what types are allowed for the current binding expression

ParameterOrSingleVariableProps

ParameterVariablesProps

ParamTypeDynamicDataProviderProps

QueryFilterProps

QueryFilterSearchProps

RequestAction

RequestActionContext

RequestContext

RequestData

RequestParameter

RequestParametersProps

RequestProviderProps

RequestTypeContainerProps

SearchAndFilterContextProps

SearchAndFilterOptionsContainerProps

SearchAndFilterProps

SearchAndFilterProviderProps

SearchAndFilterResultContainerProps

SearchOnlyProviderProps

SearchQueryProps

SelectedItemProps

SerializedVariableNode

SetLocationValueDispatch

SetLocationValueFunction

SortItemsProps

UseVariablesMenu

UseVariablesMenuInput

VariableEditorCompleteEvent

Response from parent when creating a dynamic token expression

VariableEditorProps

VariableNodeState

VariablesAction

VariablesContext

VariablesEvents

VariableSourceGroup

VariablesPluginProps

VariablesProviderProps