| $createVariableNode(variableReference, state) | |
| $isVariableNode(node) | |
| ControlledValuePlugin({ enabled, value, extraDependencies, }) | <p>Updates the Lexical editor state automatically when a controlled value changes, effectively turning the Lexical editor into a controlled component.</p><p>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)</p> |
| convertConnectedDataToVariable(bindExpression, value) | Converts a connected data map entry to a VariablesProvider-format variable |
| 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. |
| DamSelectedItem({ selectedItem, onDeselect, onEditClosed, logoIcon, itemDetailsRendererComponent, }) | |
| DataRefreshButton({ buttonText, isLoading, onRefreshData, ...props }) | 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 <code>type</code> 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, }) | <p>Renders a list of Data Type-provided variables that can be set on a Data Resource.</p><p>This is a version of DataResourceVariablesList that does not use any Mesh context data. For most uses you will want to use DataResourceVariablesList instead.</p> |
| DataSourceEditor({ onChange, children, editVariableComponent }) | Wrapper for editing a data source using Uniform Mesh SDK components that rely on <code>useRequest()</code> or <code>useVariables()</code>, or custom components that use the same hooks. |
| DataTypeEditor({ onChange, children, editVariableComponent }) | Wrapper for editing a data type using Uniform Mesh SDK components that rely on <code>useRequest()</code> or <code>useVariables()</code>, or custom components that use the same hooks. |
| DateEditor({ onChange, ariaLabel, disabled, value, readOnly, valueTestId, }) | |
| DateRangeEditor({ ariaLabel, onChange, disabled, value, readOnly, valueTestId, }) | |
| EntrySearch({ search, results, contentTypes, selectedItems, logoIcon, select, multiSelect, multiSelectId, rowComponent, selectedItemComponent, totalResults, cursor, resultsLoading, requireContentType, onAddNew, onEditClosed, onCancel, noResultsComponent, helpComponent, onSort, typeSelectorLabel, typeSelectorAllTypesOptionText, loadingIndicatorDelay, }) | |
| FilterButton({ text, icon, filterCount, hasSelectedValue, dataTestId, showDropdownIcon, ...props }) | |
| FilterControls({ children, hideSearchInput, }) | |
| FilterEditorRenderer({ editorType, ...props }) | |
| FilterItem({ index, operatorOptions, valueOptions, onFilterOptionChange, onFilterDynamicChange, onOperatorChange, onValueChange, initialCriteriaTitle, criteriaGroupOperator, }) | |
| FilterItems({ addButtonText, additionalFiltersContainer, filterTitle, resetButtonText, initialCriteriaTitle, criteriaGroupOperator, }) | |
| FilterMenu({ id, filterTitle, menuControls, additionalFiltersContainer, children, dataTestId, resetButtonText, }) | |
| FilterMultiChoiceEditor({ value, options, disabled, readOnly, valueTestId, ...props }) | |
| FilterSingleChoiceEditor({ options, value, disabled, readOnly, onChange, valueTestId, }) | |
| hasReferencedVariables(value) | Returns true if the string expression has variable references in it |
| InputVariables(props) | An input box that enables insertion of 'variables', provided by VariablesProvider, into its value. |
| LinkButton({ text, icon, ...props }) | 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, }) | |
| NumberRangeEditor({ onChange, disabled, ariaLabel, value, readOnly, valueTestId, }) | |
| ObjectSearchContainer({ label, enableDynamicInputToResultId, searchFilters, resultList, children, }) | Object search container is an opinionated layout for search parameters and retrieved results |
| ObjectSearchFilter({ requireContentType, typeSelectorAllTypesOptionText, searchInputName, searchInputPlaceholderText, selectLabel, selectOptions, }) | Object search filter is an opinionated filter that has pre-defined query and setQuery functions that can be extended with custom functions |
| ObjectSearchFilterContainer({ label, children }) | an opinionated layout for search filters |
| ObjectSearchListItem({ id, title, contentType, image, imageUrl, popoverData, onSelect, isMulti, disabled, children, ...props }) | 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, }) | |
| ObjectSearchResultItem({ id, title, name, contentType, popoverData, publishStatus, editLinkIcon, editLink, imageUrl, onRemove, createdAt, publishedAt, hideRemoveButton, disableDnD, children, }) | An opinionated result item, best used for selected results |
| ObjectSearchResultItemButton({ text, icon, ...props }) | An opinionated button component best used within the ObjectSearchResultItem component |
| ObjectSearchResultList({ resultLabelText, removeButtonText, onRemoveAllSelected, hideRemoveButton, resultLabelOverride, additionalButtons, renderResultComponent, multiSelectId, disableDnD, getContainerForDnDReparenting, whenNothingSelected, }) | 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, }) | 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 (<code>inputWhenNoVariables</code>), 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) | |
| ProductPreviewList({ products, }) | |
| ProductQuery({ value, setValue, brands, categories, loading, categoriesLoading, brandsLoading, logoIcon, onGetProducts, sortOptions, sortOrderOptions, categoryLabel, brandLabel, disableBrands, restrictToSingleCategory, }) | |
| ProductSearch({ selectedProducts, setSelectedProducts, onGetCategories, onSearchProducts, logoIcon, multiSelect, multiSelectId, selectedItemComponent, rowComponent, errorComponent, helpComponent, noResultsComponent, onSort, typeSelectorAllTypesOptionText, typeSelectorLabel, }) | |
| ProductSearchRow({ result, isSelected, triggerSelection, }) | |
| ProductSelectedItem({ selectedItem, onDeselect, }) | |
| QueryFilter({ requireContentType, queryFilterTitle, contentTypeLabel, typeSelectorAllTypesOptionText, contentTypeOptions, searchInputName, searchInputPlaceholderText, searchInputLabel, countLabel, countValue, sortLabel, sortOptions, sortOrderLabel, sortOrderOptions, children, }) | 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, }) | Editor component to manage HTTP headers on a request |
| RequestMethodSelect(props) | Dropdown to pick a HTTP method for a request |
| RequestParameters({ disableVariables, addOmitIfEmpty, }) | Component to manage query parameters on a request |
| RequestProvider({ value, onChange, children }) | Provides a mutable HTTP request object context. Components such as RequestBody and RequestUrl use this context to render. |
| RequestTypeContainer({ bgColor, children, ...props }) | 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 |
| ResolvableLoadingValue({ value, text, loading, }) | |
| SearchAndFilter({ filters, filterOptions, filterVisible, filterControls, viewSwitchControls, resultsContainerView, filterMapper, additionalFiltersContainer, onChange, defaultSearchTerm, onSearchChange, totalResults, allowBindingSearchTerm, resetFilterValues, }) | |
| SearchAndFilterOptionsContainer({ buttonRow, additionalFiltersContainer, children, }) | |
| SearchAndFilterProvider({ filters, filterOptions, filterVisible, alwaysVisible, defaultSearchTerm, onSearchChange, onChange, resetFilterValues, totalResults, filterMapper, children, allowBindingSearchTerm, }) | |
| SearchAndFilterResultContainer({ buttonText, clearButtonLabel, calloutTitle, calloutText, onHandleClear, hideClearButton, }) | |
| SearchOnlyFilter({ onSearchChange, maxWidth }) | |
| SelectionField({ id, label, loading, selectedValues, values, onAdd, onRemove, }) | |
| 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) | <p>Programmatically sets the current value of a variables editor after it has already initialized and become an uncontrolled component. Passing the <code>editorRef</code> prop to the component will give a reference to <code>editor</code>, or use <code>ControlledValuePlugin</code> to manage this automatically.</p><p>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.</p> |
| SortItems({ sortByLabel, localeLabel, sortOptions, sortByValue, onSortChange, localeValue, localeOptions, onLocaleChange, disableSortBinding, }) | Copy of Design System <SortItems > component with ability to bind variables to inputs. |
| StatusMultiEditor({ options, value, disabled, readOnly, onChange, valueTestId, }) | |
| StatusSingleEditor({ options, value, disabled, readOnly, onChange, valueTestId, }) | |
| TextEditor({ onChange, ariaLabel, value, readOnly, valueTestId, }) | |
| TextMultiChoiceEditor({ value, disabled, readOnly, valueTestId, ...props }) | |
| TextVariableRenderer({ definition, value, setValue }) | 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, }) | |
| useDynamicInputsAsVariables(dynamicInputs) | Converts dynamic inputs into VariablesProvider-format variables |
| useMeshLocation(expectedLocation) | <p>Provides convenient access to the current Uniform Mesh location via React hook. Intended to be used within <MeshApp />.</p><p>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 <code>type</code> 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();</p><p>You can also combine (2) and (3) to get both explicit value typing and assertion of the location.</p> |
| useObjectSearchContext() | |
| useProductQueryContext() | |
| useProductSearchContext() | |
| useRequest() | |
| useRequestHeader(headerName) | <p>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.</p><p>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.</p> |
| useRequestParameter(paramName) | <p>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.</p><p>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.</p> |
| useSearchAndFilter() | |
| useUniformMeshSdk() | Provides convenient access to the current Uniform Mesh SDK instance via React hook. Intended to be used within <MeshApp />. |
| useVariableEditor() | |
| useVariables(returnEmptyWithoutProvider) | |
| useVariablesMenu({ showAddVariableMenuOption, enableEditingVariables, filterVariable, getEditorContext, }) | Hook to use the lexical variables typeahead/dropdown menu |
| VariableChip({ displayName, referenceIsValid, tooltip, reference, onClick, clickToEdit, isFresh, selected, disabled, errorMessage, }) | 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, }) | |
| VariablesList() | |
| VariablesPlugin({ disableVariables, showAddVariableMenuOption, enableEditingVariables, getEditorContext, replaceValueOnVariableInsert, filterVariable, }) | 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, }) | |
| variablesToGroupedList(variables, filterFn, context) | Groups variable definitions by their <code>source</code> property, and sorts the groups using <code>variablesToList</code>. 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 <code>order</code> property if set, and sorting by display name otherwise. |