Docs: run the api-extractor on master to update docs (#23726)

* regenerated packages docs.

* fixed spelling issues.

* fixed spelling issues.

docs/sources/packages_api/ui/_index.md

@@ -17,39 +17,32 @@ A library containing the different design components of the Grafana ecosystem.
 |  Class | Description |
 |  --- | --- |
 |  [ansicolor](./ansicolor/) | Represents an ANSI-escaped string. |
-|  [AsyncSelect](./asyncselect/) |  |
 |  [BarGauge](./bargauge/) |  |
 |  [BigValue](./bigvalue/) |  |
-|  [ButtonSelect](./buttonselect/) |  |
 |  [Cascader](./cascader/) |  |
 |  [ClickOutsideWrapper](./clickoutsidewrapper/) |  |
+|  [ClipboardButton](./clipboardbutton/) |  |
 |  [CustomScrollbar](./customscrollbar/) | Wraps component into <Scrollbars> component from <code>react-custom-scrollbars</code> |
 |  [ErrorBoundary](./errorboundary/) |  |
 |  [ErrorBoundaryAlert](./errorboundaryalert/) |  |
-|  [FieldDisplayEditor](./fielddisplayeditor/) |  |
 |  [Gauge](./gauge/) |  |
 |  [Graph](./graph/) |  |
 |  [GraphSeriesToggler](./graphseriestoggler/) |  |
-|  [Input](./input/) |  |
 |  [JsonExplorer](./jsonexplorer/) |  JsonExplorer<!-- -->JsonExplorer allows you to render JSON objects in HTML with a \*\*collapsible\*\* navigation. |
 |  [JSONFormatter](./jsonformatter/) |  |
 |  [List](./list/) |  |
+|  [ModalsProvider](./modalsprovider/) |  |
 |  [PieChart](./piechart/) |  |
 |  [Popover](./popover/) |  |
 |  [PopoverController](./popovercontroller/) |  |
 |  [Portal](./portal/) |  |
 |  [QueryField](./queryfield/) | Renders an editor field. Pass initial value as initialQuery and listen to changes in props.onValueChanged. This component can only process strings. Internally it uses Slate Value. Implement props.onTypeahead to use suggestions, see PromQueryField.tsx as an example. |
-|  [Select](./select/) |  |
 |  [SetInterval](./setinterval/) |  |
 |  [StatsPicker](./statspicker/) |  |
-|  [Switch](./switch/) |  |
 |  [TableInputCSV](./tableinputcsv/) | Expects the container div to have size set and will fill it 100% |
 |  [TagsInput](./tagsinput/) |  |
-|  [ThresholdsEditor](./thresholdseditor/) |  |
 |  [ToggleButtonGroup](./togglebuttongroup/) |  |
-|  [TransformationsEditor](./transformationseditor/) |  |
 |  [UnitPicker](./unitpicker/) |  |
-|  [ValueMappingsEditor](./valuemappingseditor/) |  |
 |  [VizRepeater](./vizrepeater/) |  |
 
 ## Enumerations
@@ -62,7 +55,7 @@ A library containing the different design components of the Grafana ecosystem.
 |  [BigValueJustifyMode](./bigvaluejustifymode/) |  |
 |  [CompletionItemKind](./completionitemkind/) |  |
 |  [EventsWithValidation](./eventswithvalidation/) |  |
-|  [InputStatus](./inputstatus/) |  |
+|  [LegacyInputStatus](./legacyinputstatus/) |  |
 |  [LegendDisplayMode](./legenddisplaymode/) |  |
 |  [PieChartType](./piecharttype/) |  |
 
@@ -70,31 +63,40 @@ A library containing the different design components of the Grafana ecosystem.
 
 |  Function | Description |
 |  --- | --- |
+|  [AsyncMultiSelect(props)](./asyncmultiselect/) |  |
+|  [AsyncSelect(props)](./asyncselect/) |  |
 |  [BracesPlugin()](./bracesplugin/) |  |
+|  [ButtonSelect({ placeholder, icon, variant, size, className, disabled, ...selectProps })](./buttonselect/) |  |
 |  [calculateFontSize(text, width, height, lineHeight, maxSize)](./calculatefontsize/) |  |
 |  [ClearPlugin()](./clearplugin/) |  |
 |  [ClipboardPlugin()](./clipboardplugin/) |  |
 |  [convertOldAngularValueMapping(panel)](./convertoldangularvaluemapping/) | Convert the angular single stat mapping to new react style |
 |  [FadeTransition(props)](./fadetransition/) |  |
+|  [Form({ defaultValues, onSubmit, validateOnMount, validateFieldsOnMount, children, validateOn, })](./form/) |  |
 |  [getTagColorsFromName(name)](./gettagcolorsfromname/) | Returns tag badge background and border colors based on hashed tag name. |
 |  [IndentationPlugin()](./indentationplugin/) |  |
 |  [measureText(text, fontSize)](./measuretext/) |  |
+|  [MultiSelect(props)](./multiselect/) |  |
 |  [NewlinePlugin()](./newlineplugin/) |  |
+|  [RadioButtonGroup({ options, value, onChange, disabled, disabledOptions, size, fullWidth, })](./radiobuttongroup/) |  |
+|  [renderOrCallToRender(itemToRender, props)](./renderorcalltorender/) | Given react node or function returns element accordingly |
 |  [resetSelectStyles()](./resetselectstyles/) |  |
 |  [RunnerPlugin({ handler })](./runnerplugin/) |  |
 |  [Segment({ options, value, onChange, Component, className, allowCustomValue, placeholder, })](./segment/) |  |
 |  [SegmentAsync({ value, onChange, loadOptions, Component, className, allowCustomValue, placeholder, })](./segmentasync/) |  |
 |  [SegmentInput({ value: initialValue, onChange, Component, className, placeholder, autofocus, })](./segmentinput/) |  |
 |  [SegmentSelect({ value, options, onChange, onClickOutside, width, noOptionsMessage, allowCustomValue, })](./segmentselect/) |  |
+|  [Select(props)](./select/) |  |
 |  [SelectionShortcutsPlugin()](./selectionshortcutsplugin/) |  |
+|  [SelectValueEditor({ value, onChange, item, })](./selectvalueeditor/) |  |
 |  [sharedSingleStatMigrationHandler(panel)](./sharedsinglestatmigrationhandler/) |  |
-|  [sharedSingleStatPanelChangedHandler(options, prevPluginId, prevOptions)](./sharedsinglestatpanelchangedhandler/) |  |
+|  [sharedSingleStatPanelChangedHandler(panel, prevPluginId, prevOptions)](./sharedsinglestatpanelchangedhandler/) |  |
 |  [SlatePrism(optsParam)](./slateprism/) | A Slate plugin to highlight code syntax. |
 |  [SlideOutTransition(props)](./slideouttransition/) |  |
 |  [stylesFactory(stylesCreator)](./stylesfactory/) | Creates memoized version of styles creator |
 |  [SuggestionsPlugin({ onTypeahead, cleanText, onWillApplySuggestion, portalOrigin, })](./suggestionsplugin/) |  |
 |  [useTheme()](./usetheme/) |  |
-|  [ValuePicker({ label, icon, options, onChange, variant })](./valuepicker/) |  |
+|  [ValuePicker({ label, icon, options, onChange, variant, size, isFullWidth, })](./valuepicker/) |  |
 
 ## Interfaces
 
@@ -113,22 +115,22 @@ A library containing the different design components of the Grafana ecosystem.
 |  [LegendItem](./legenditem/) |  |
 |  [LegendOptions](./legendoptions/) |  |
 |  [LegendRenderOptions](./legendrenderoptions/) |  |
-|  [NumberFieldConfigSettings](./numberfieldconfigsettings/) |  |
-|  [SelectFieldConfigSettings](./selectfieldconfigsettings/) |  |
 |  [SingleStatBaseOptions](./singlestatbaseoptions/) |  |
-|  [StringFieldConfigSettings](./stringfieldconfigsettings/) |  |
+|  [StyleProps](./styleprops/) |  |
 |  [SuggestionsState](./suggestionsstate/) |  |
 |  [Themeable](./themeable/) |  |
 |  [TypeaheadInput](./typeaheadinput/) |  |
 |  [TypeaheadOutput](./typeaheadoutput/) |  |
 |  [ValidationEvents](./validationevents/) |  |
 |  [ValidationRule](./validationrule/) |  |
+|  [VizRepeaterRenderValueProps](./vizrepeaterrendervalueprops/) |  |
 
 ## Namespaces
 
 |  Namespace | Description |
 |  --- | --- |
 |  [DOMUtil](./domutil/) |  |
+|  [RadioButtonGroup](./radiobuttongroup/) |  |
 |  [styleMixins](./stylemixins/) |  |
 
 ## Variables
@@ -142,31 +144,40 @@ A library containing the different design components of the Grafana ecosystem.
 |  [ButtonCascader](./buttoncascader/) |  |
 |  [CallToActionCard](./calltoactioncard/) |  |
 |  [Chart](./chart/) |  |
+|  [Checkbox](./checkbox/) |  |
 |  [Collapse](./collapse/) |  |
 |  [ColorPicker](./colorpicker/) |  |
 |  [colors](./colors/) |  |
 |  [ConfirmButton](./confirmbutton/) |  |
 |  [ConfirmModal](./confirmmodal/) |  |
+|  [Container](./container/) |  |
 |  [ContextMenu](./contextmenu/) |  |
 |  [ControlledCollapse](./controlledcollapse/) |  |
-|  [DataLinkBuiltInVars](./datalinkbuiltinvars/) |  |
+|  [Counter](./counter/) |  |
 |  [DataLinkInput](./datalinkinput/) |  |
 |  [DataLinksContextMenu](./datalinkscontextmenu/) |  |
 |  [DataLinksEditor](./datalinkseditor/) |  |
+|  [DataLinksInlineEditor](./datalinksinlineeditor/) |  |
 |  [DataSourceHttpSettings](./datasourcehttpsettings/) |  |
 |  [DEFAULT\_ANNOTATION\_COLOR](./default_annotation_color/) |  |
 |  [DeleteButton](./deletebutton/) |  |
 |  [Drawer](./drawer/) |  |
 |  [EmptySearchResult](./emptysearchresult/) |  |
 |  [ErrorWithStack](./errorwithstack/) |  |
+|  [Field](./field/) |  |
+|  [FieldConfigItemHeaderTitle](./fieldconfigitemheadertitle/) |  |
 |  [fieldMatchersUI](./fieldmatchersui/) |  |
-|  [FieldPropertiesEditor](./fieldpropertieseditor/) |  |
 |  [FormField](./formfield/) | Default form field including label used in Grafana UI. Default input element is simple <input />. You can also pass custom inputEl if required in which case inputWidth and inputProps are ignored. |
 |  [FormLabel](./formlabel/) |  |
 |  [Forms](./forms/) |  |
 |  [FullWidthButtonContainer](./fullwidthbuttoncontainer/) |  |
+|  [getAvailableIcons](./getavailableicons/) |  |
+|  [getButtonStyles](./getbuttonstyles/) |  |
+|  [getFormStyles](./getformstyles/) |  |
 |  [getLogRowStyles](./getlogrowstyles/) |  |
-|  [getStandardFieldConfigs](./getstandardfieldconfigs/) |  |
+|  [getStandardFieldConfigs](./getstandardfieldconfigs/) | Returns collection of common field config properties definitions |
+|  [getStandardOptionEditors](./getstandardoptioneditors/) | Returns collection of standard option editors definitions |
+|  [getStandardTransformers](./getstandardtransformers/) |  |
 |  [getTheme](./gettheme/) |  |
 |  [GraphContextMenu](./graphcontextmenu/) |  |
 |  [GraphLegend](./graphlegend/) |  |
@@ -174,7 +185,11 @@ A library containing the different design components of the Grafana ecosystem.
 |  [hasValidationEvent](./hasvalidationevent/) |  |
 |  [HorizontalGroup](./horizontalgroup/) |  |
 |  [Icon](./icon/) |  |
-|  [IndicatorsContainer](./indicatorscontainer/) |  |
+|  [IconButton](./iconbutton/) |  |
+|  [Input](./input/) |  |
+|  [Label](./label/) |  |
+|  [LegacyForms](./legacyforms/) |  |
+|  [Legend](./legend/) |  |
 |  [LegendList](./legendlist/) |  |
 |  [LegendTable](./legendtable/) |  |
 |  [LinkButton](./linkbutton/) |  |
@@ -187,12 +202,15 @@ A library containing the different design components of the Grafana ecosystem.
 |  [mockTheme](./mocktheme/) |  |
 |  [mockThemeContext](./mockthemecontext/) | Enables theme context mocking |
 |  [Modal](./modal/) |  |
+|  [ModalHeader](./modalheader/) |  |
+|  [ModalRoot](./modalroot/) |  |
+|  [ModalsController](./modalscontroller/) |  |
+|  [ModalTabContent](./modaltabcontent/) |  |
+|  [ModalTabsHeader](./modaltabsheader/) |  |
 |  [NO\_DATA\_COLOR](./no_data_color/) |  |
-|  [NoOptionsMessage](./nooptionsmessage/) |  |
-|  [NumberOverrideEditor](./numberoverrideeditor/) |  |
-|  [numberOverrideProcessor](./numberoverrideprocessor/) |  |
 |  [NumberValueEditor](./numbervalueeditor/) |  |
 |  [OK\_COLOR](./ok_color/) |  |
+|  [Pagination](./pagination/) |  |
 |  [PALETTE\_COLUMNS](./palette_columns/) |  |
 |  [PALETTE\_ROWS](./palette_rows/) |  |
 |  [PanelOptionsGrid](./paneloptionsgrid/) |  |
@@ -203,30 +221,28 @@ A library containing the different design components of the Grafana ecosystem.
 |  [REGION\_FILL\_ALPHA](./region_fill_alpha/) |  |
 |  [SCHEMA](./schema/) |  |
 |  [SecretFormField](./secretformfield/) | Form field that has 2 states configured and not configured. If configured it will not show its contents and adds a reset button that will clear the input and makes it accessible. In non configured state it behaves like normal form field. This is used for passwords or anything that is encrypted on the server and is later returned encrypted to the user (like datasource passwords). |
-|  [SelectOverrideEditor](./selectoverrideeditor/) |  |
-|  [selectOverrideProcessor](./selectoverrideprocessor/) |  |
 |  [selectThemeVariant](./selectthemevariant/) |  |
-|  [SelectValueEditor](./selectvalueeditor/) |  |
 |  [SeriesColorPicker](./seriescolorpicker/) |  |
 |  [SeriesColorPickerPopover](./seriescolorpickerpopover/) |  |
 |  [SeriesColorPickerPopoverWithTheme](./seriescolorpickerpopoverwiththeme/) |  |
 |  [SeriesIcon](./seriesicon/) |  |
+|  [Slider](./slider/) |  |
 |  [sortedColors](./sortedcolors/) |  |
 |  [Spinner](./spinner/) |  |
-|  [StringOverrideEditor](./stringoverrideeditor/) |  |
-|  [stringOverrideProcessor](./stringoverrideprocessor/) |  |
 |  [StringValueEditor](./stringvalueeditor/) |  |
+|  [Switch](./switch/) |  |
 |  [Tab](./tab/) |  |
 |  [TabContent](./tabcontent/) |  |
 |  [Table](./table/) |  |
 |  [TabsBar](./tabsbar/) |  |
+|  [Tag](./tag/) |  |
+|  [TagList](./taglist/) |  |
+|  [TextArea](./textarea/) |  |
 |  [ThemeContext](./themecontext/) |  |
 |  [TimeOfDayPicker](./timeofdaypicker/) |  |
-|  [TimePicker](./timepicker/) |  |
+|  [TimeRangePicker](./timerangepicker/) |  |
 |  [ToggleButton](./togglebutton/) |  |
 |  [Tooltip](./tooltip/) |  |
-|  [TransformationRow](./transformationrow/) |  |
-|  [transformersUIRegistry](./transformersuiregistry/) |  |
 |  [validate](./validate/) |  |
 |  [VerticalGroup](./verticalgroup/) |  |
 |  [withTheme](./withtheme/) |  |
@@ -236,6 +252,13 @@ A library containing the different design components of the Grafana ecosystem.
 |  Type Alias | Description |
 |  --- | --- |
 |  [AlertVariant](./alertvariant/) |  |
+|  [ButtonProps](./buttonprops/) |  |
+|  [ButtonVariant](./buttonvariant/) |  |
+|  [FormAPI](./formapi/) |  |
+|  [FormInputSize](./forminputsize/) |  |
+|  [IconName](./iconname/) |  |
+|  [IconSize](./iconsize/) |  |
+|  [IconType](./icontype/) |  |
 |  [LegendPlacement](./legendplacement/) |  |
 |  [PopoverContent](./popovercontent/) |  |
 |  [Renderable](./renderable/) |  |

docs/sources/packages_api/ui/ansicolor.md

@@ -62,7 +62,7 @@ constructor(s?: string);
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  s | <code>string</code> |  |
+|  s | <code>string</code> | a string containing ANSI escape codes. |
 
 ### asChromeConsoleLogArguments property
 
@@ -204,7 +204,7 @@ static strip(s: string): string;
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  s | <code>string</code> |  |
+|  s | <code>string</code> | a string containing ANSI escape codes.  {<!-- -->string<!-- -->} clean string. |
 
 <b>Returns:</b>
 

docs/sources/packages_api/ui/asyncmultiselect.md

@@ -0,0 +1,34 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "AsyncMultiSelect"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## AsyncMultiSelect() function
+
+### AsyncMultiSelect() function
+
+<b>Signature</b>
+
+```typescript
+export declare function AsyncMultiSelect<T>(props: AsyncMultiSelectProps<T>): JSX.Element;
+```
+<b>Import</b>
+
+```typescript
+import { AsyncMultiSelect } from '@grafana/ui';
+```
+<b>Parameters</b>
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  props | <code>AsyncMultiSelectProps&lt;T&gt;</code> |  |
+
+<b>Returns:</b>
+
+`JSX.Element`
+

docs/sources/packages_api/ui/asyncselect.md

@@ -8,45 +8,26 @@ type = "docs"
 draft = true
 +++
 
-## AsyncSelect class
+## AsyncSelect() function
+
+### AsyncSelect() function
 
 <b>Signature</b>
 
 ```typescript
-export declare class AsyncSelect<T> extends PureComponent<AsyncProps<T>> 
+export declare function AsyncSelect<T>(props: AsyncSelectProps<T>): JSX.Element;
 ```
 <b>Import</b>
 
 ```typescript
 import { AsyncSelect } from '@grafana/ui';
 ```
-<b>Properties</b>
+<b>Parameters</b>
 
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [defaultProps](#defaultprops-property) | <code>static</code> | <code>Partial&lt;AsyncProps&lt;any&gt;&gt;</code> |  |
-
-<b>Methods</b>
-
-|  Method | Modifiers | Description |
+|  Parameter | Type | Description |
 |  --- | --- | --- |
-|  [render()](#render-method) |  |  |
+|  props | <code>AsyncSelectProps&lt;T&gt;</code> |  |
 
-### defaultProps property
-
-<b>Signature</b>
-
-```typescript
-static defaultProps: Partial<AsyncProps<any>>;
-```
-
-### render method
-
-<b>Signature</b>
-
-```typescript
-render(): JSX.Element;
-```
 <b>Returns:</b>
 
 `JSX.Element`

docs/sources/packages_api/ui/buttonprops.md

@@ -2,23 +2,23 @@
 # -----------------------------------------------------------------------
 # Do not edit this file. It is automatically generated by API Documenter.
 # -----------------------------------------------------------------------
-title = "IndicatorsContainer"
+title = "ButtonProps"
 keywords = ["grafana","documentation","sdk","@grafana/ui"]
 type = "docs"
 draft = true
 +++
 
-## IndicatorsContainer variable
+## ButtonProps type
 
-### IndicatorsContainer variable
+### ButtonProps type
 
 <b>Signature</b>
 
 ```typescript
-IndicatorsContainer: (props: any) => JSX.Element
+export declare type ButtonProps = CommonProps & ButtonHTMLAttributes<HTMLButtonElement>;
 ```
 <b>Import</b>
 
 ```typescript
-import { IndicatorsContainer } from '@grafana/ui';
+import { ButtonProps } from '@grafana/ui';
 ```

docs/sources/packages_api/ui/buttonselect.md

@@ -8,45 +8,26 @@ type = "docs"
 draft = true
 +++
 
-## ButtonSelect class
+## ButtonSelect() function
+
+### ButtonSelect() function
 
 <b>Signature</b>
 
 ```typescript
-export declare class ButtonSelect<T> extends PureComponent<Props<T>> 
+export declare function ButtonSelect<T>({ placeholder, icon, variant, size, className, disabled, ...selectProps }: ButtonSelectProps<T>): JSX.Element;
 ```
 <b>Import</b>
 
 ```typescript
 import { ButtonSelect } from '@grafana/ui';
 ```
-<b>Properties</b>
+<b>Parameters</b>
 
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [onChange](#onchange-property) |  | <code>(item: SelectableValue&lt;T&gt;) =&gt; void</code> |  |
-
-<b>Methods</b>
-
-|  Method | Modifiers | Description |
+|  Parameter | Type | Description |
 |  --- | --- | --- |
-|  [render()](#render-method) |  |  |
+|  { placeholder, icon, variant, size, className, disabled, ...selectProps } | <code>ButtonSelectProps&lt;T&gt;</code> |  |
 
-### onChange property
-
-<b>Signature</b>
-
-```typescript
-onChange: (item: SelectableValue<T>) => void;
-```
-
-### render method
-
-<b>Signature</b>
-
-```typescript
-render(): JSX.Element;
-```
 <b>Returns:</b>
 
 `JSX.Element`

docs/sources/packages_api/ui/buttonvariant.md

@@ -2,23 +2,23 @@
 # -----------------------------------------------------------------------
 # Do not edit this file. It is automatically generated by API Documenter.
 # -----------------------------------------------------------------------
-title = "transformersUIRegistry"
+title = "ButtonVariant"
 keywords = ["grafana","documentation","sdk","@grafana/ui"]
 type = "docs"
 draft = true
 +++
 
-## transformersUIRegistry variable
+## ButtonVariant type
 
-### transformersUIRegistry variable
+### ButtonVariant type
 
 <b>Signature</b>
 
 ```typescript
-transformersUIRegistry: Registry<TransformerUIRegistyItem<any>>
+export declare type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'link';
 ```
 <b>Import</b>
 
 ```typescript
-import { transformersUIRegistry } from '@grafana/ui';
+import { ButtonVariant } from '@grafana/ui';
 ```

docs/sources/packages_api/ui/cascader.md

@@ -34,7 +34,6 @@ import { Cascader } from '@grafana/ui';
 |  [onBlur](#onblur-property) |  | <code>() =&gt; void</code> |  |
 |  [onBlurCascade](#onblurcascade-property) |  | <code>() =&gt; void</code> |  |
 |  [onChange](#onchange-property) |  | <code>(value: string[], selectedOptions: CascaderOption[]) =&gt; void</code> |  |
-|  [onClick](#onclick-property) |  | <code>() =&gt; void</code> |  |
 |  [onCreateOption](#oncreateoption-property) |  | <code>(value: string) =&gt; void</code> |  |
 |  [onInputKeyDown](#oninputkeydown-property) |  | <code>(e: React.KeyboardEvent&lt;HTMLInputElement&gt;) =&gt; void</code> |  |
 |  [onSelect](#onselect-property) |  | <code>(obj: SelectableValue&lt;string[]&gt;) =&gt; void</code> |  |
@@ -93,14 +92,6 @@ onBlurCascade: () => void;
 onChange: (value: string[], selectedOptions: CascaderOption[]) => void;
 ```
 
-### onClick property
-
-<b>Signature</b>
-
-```typescript
-onClick: () => void;
-```
-
 ### onCreateOption property
 
 <b>Signature</b>

docs/sources/packages_api/ui/cascaderoption.md

@@ -27,9 +27,9 @@ import { CascaderOption } from '@grafana/ui';
 |  [children](#children-property) | <code>CascaderOption[]</code> | Children will be shown in a submenu. Use 'items' instead, as 'children' exist to ensure backwards compatibility. |
 |  [disabled](#disabled-property) | <code>boolean</code> |  |
 |  [items](#items-property) | <code>CascaderOption[]</code> | Items will be just flattened into the main list of items recursively. |
-|  [label](#label-property) | <code>string</code> |  |
-|  [title](#title-property) | <code>string</code> |  |
-|  [value](#value-property) | <code>any</code> |  |
+|  [label](#label-property) | <code>string</code> | The label to display in the UI |
+|  [title](#title-property) | <code>string</code> | Avoid using |
+|  [value](#value-property) | <code>any</code> | The value used under the hood |
 
 ### children property
 
@@ -61,6 +61,8 @@ items?: CascaderOption[];
 
 ### label property
 
+The label to display in the UI
+
 <b>Signature</b>
 
 ```typescript
@@ -69,6 +71,8 @@ label: string;
 
 ### title property
 
+Avoid using
+
 <b>Signature</b>
 
 ```typescript
@@ -77,6 +81,8 @@ title?: string;
 
 ### value property
 
+The value used under the hood
+
 <b>Signature</b>
 
 ```typescript

docs/sources/packages_api/ui/clipboardbutton.md

@@ -0,0 +1,77 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "ClipboardButton"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## ClipboardButton class
+
+<b>Signature</b>
+
+```typescript
+export declare class ClipboardButton extends PureComponent<Props> 
+```
+<b>Import</b>
+
+```typescript
+import { ClipboardButton } from '@grafana/ui';
+```
+<b>Properties</b>
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [setRef](#setref-property) |  | <code>(elem: HTMLButtonElement) =&gt; void</code> |  |
+
+<b>Methods</b>
+
+|  Method | Modifiers | Description |
+|  --- | --- | --- |
+|  [componentDidMount()](#componentdidmount-method) |  |  |
+|  [componentWillUnmount()](#componentwillunmount-method) |  |  |
+|  [render()](#render-method) |  |  |
+
+### setRef property
+
+<b>Signature</b>
+
+```typescript
+setRef: (elem: HTMLButtonElement) => void;
+```
+
+### componentDidMount method
+
+<b>Signature</b>
+
+```typescript
+componentDidMount(): void;
+```
+<b>Returns:</b>
+
+`void`
+
+### componentWillUnmount method
+
+<b>Signature</b>
+
+```typescript
+componentWillUnmount(): void;
+```
+<b>Returns:</b>
+
+`void`
+
+### render method
+
+<b>Signature</b>
+
+```typescript
+render(): JSX.Element;
+```
+<b>Returns:</b>
+
+`JSX.Element`
+

docs/sources/packages_api/ui/colorpicker.md

@@ -17,7 +17,7 @@ draft = true
 ```typescript
 ColorPicker: React.FunctionComponent<Pick<import("./ColorPickerPopover").Props<import("./ColorPickerPopover").CustomPickersDescriptor> & {
     children?: ColorPickerTriggerRenderer | undefined;
-}, "onChange" | "color" | "children" | "onColorChange" | "enableNamedColors" | "customPickers" | "updatePopperPosition">>
+}, "onChange" | "color" | "children" | "customPickers" | "onColorChange" | "enableNamedColors" | "updatePopperPosition">>
 ```
 <b>Import</b>
 

docs/sources/packages_api/ui/confirmbutton.md

@@ -15,7 +15,7 @@ draft = true
 <b>Signature</b>
 
 ```typescript
-ConfirmButton: React.FunctionComponent<Pick<Props, "size" | "className" | "disabled" | "onClick" | "confirmText" | "confirmVariant" | "onConfirm" | "onCancel">>
+ConfirmButton: React.FunctionComponent<Pick<Props, "size" | "className" | "onClick" | "disabled" | "confirmText" | "confirmVariant" | "closeOnConfirm" | "onConfirm" | "onCancel">>
 ```
 <b>Import</b>
 

docs/sources/packages_api/ui/container.md

@@ -2,23 +2,23 @@
 # -----------------------------------------------------------------------
 # Do not edit this file. It is automatically generated by API Documenter.
 # -----------------------------------------------------------------------
-title = "NoOptionsMessage"
+title = "Container"
 keywords = ["grafana","documentation","sdk","@grafana/ui"]
 type = "docs"
 draft = true
 +++
 
-## NoOptionsMessage variable
+## Container variable
 
-### NoOptionsMessage variable
+### Container variable
 
 <b>Signature</b>
 
 ```typescript
-NoOptionsMessage: (props: any) => JSX.Element
+Container: React.FC<ContainerProps>
 ```
 <b>Import</b>
 
 ```typescript
-import { NoOptionsMessage } from '@grafana/ui';
+import { Container } from '@grafana/ui';
 ```

docs/sources/packages_api/ui/counter.md

@@ -2,23 +2,23 @@
 # -----------------------------------------------------------------------
 # Do not edit this file. It is automatically generated by API Documenter.
 # -----------------------------------------------------------------------
-title = "FieldPropertiesEditor"
+title = "Counter"
 keywords = ["grafana","documentation","sdk","@grafana/ui"]
 type = "docs"
 draft = true
 +++
 
-## FieldPropertiesEditor variable
+## Counter variable
 
-### FieldPropertiesEditor variable
+### Counter variable
 
 <b>Signature</b>
 
 ```typescript
-FieldPropertiesEditor: React.FC<Props>
+Counter: FC<CounterProps>
 ```
 <b>Import</b>
 
 ```typescript
-import { FieldPropertiesEditor } from '@grafana/ui';
+import { Counter } from '@grafana/ui';
 ```

docs/sources/packages_api/ui/datalinkbuiltinvars.md

@@ -1,36 +0,0 @@
-+++
-# -----------------------------------------------------------------------
-# Do not edit this file. It is automatically generated by API Documenter.
-# -----------------------------------------------------------------------
-title = "DataLinkBuiltInVars"
-keywords = ["grafana","documentation","sdk","@grafana/ui"]
-type = "docs"
-draft = true
-+++
-
-## DataLinkBuiltInVars variable
-
-### DataLinkBuiltInVars variable
-
-<b>Signature</b>
-
-```typescript
-DataLinkBuiltInVars: {
-    keepTime: string;
-    timeRangeFrom: string;
-    timeRangeTo: string;
-    includeVars: string;
-    seriesName: string;
-    fieldName: string;
-    valueTime: string;
-    valueNumeric: string;
-    valueText: string;
-    valueRaw: string;
-    valueCalc: string;
-}
-```
-<b>Import</b>
-
-```typescript
-import { DataLinkBuiltInVars } from '@grafana/ui';
-```

docs/sources/packages_api/ui/datalinksinlineeditor.md

@@ -0,0 +1,24 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "DataLinksInlineEditor"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## DataLinksInlineEditor variable
+
+### DataLinksInlineEditor variable
+
+<b>Signature</b>
+
+```typescript
+DataLinksInlineEditor: React.FC<DataLinksInlineEditorProps>
+```
+<b>Import</b>
+
+```typescript
+import { DataLinksInlineEditor } from '@grafana/ui';
+```

docs/sources/packages_api/ui/domutil.md

@@ -10,13 +10,11 @@ draft = true
 
 ## DOMUtil namespace
 
+> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
 ### DOMUtil namespace
 
-<b>Signature</b>
-
-```typescript
-export declare namespace DOMUtil 
-```
 <b>Import</b>
 
 ```typescript

docs/sources/packages_api/ui/domutil/getnextcharacter.md

@@ -15,7 +15,7 @@ draft = true
 <b>Signature</b>
 
 ```typescript
-function getNextCharacter(global?: any): any;
+export declare function getNextCharacter(global?: any): any;
 ```
 <b>Import</b>
 

docs/sources/packages_api/ui/domutil/getpreviouscousin.md

@@ -15,7 +15,7 @@ draft = true
 <b>Signature</b>
 
 ```typescript
-function getPreviousCousin(node: any, selector: string): any;
+export declare function getPreviousCousin(node: any, selector: string): any;
 ```
 <b>Import</b>
 

docs/sources/packages_api/ui/field.md

@@ -0,0 +1,24 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "Field"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## Field variable
+
+### Field variable
+
+<b>Signature</b>
+
+```typescript
+Field: React.FC<FieldProps>
+```
+<b>Import</b>
+
+```typescript
+import { Field } from '@grafana/ui';
+```

docs/sources/packages_api/ui/fieldconfigitemheadertitle.md

@@ -2,23 +2,23 @@
 # -----------------------------------------------------------------------
 # Do not edit this file. It is automatically generated by API Documenter.
 # -----------------------------------------------------------------------
-title = "NumberOverrideEditor"
+title = "FieldConfigItemHeaderTitle"
 keywords = ["grafana","documentation","sdk","@grafana/ui"]
 type = "docs"
 draft = true
 +++
 
-## NumberOverrideEditor variable
+## FieldConfigItemHeaderTitle variable
 
-### NumberOverrideEditor variable
+### FieldConfigItemHeaderTitle variable
 
 <b>Signature</b>
 
 ```typescript
-NumberOverrideEditor: React.FC<FieldOverrideEditorProps<number, NumberFieldConfigSettings>>
+FieldConfigItemHeaderTitle: React.FC<FieldConfigItemHeaderTitleProps>
 ```
 <b>Import</b>
 
 ```typescript
-import { NumberOverrideEditor } from '@grafana/ui';
+import { FieldConfigItemHeaderTitle } from '@grafana/ui';
 ```

docs/sources/packages_api/ui/fielddisplayeditor.md

@@ -1,80 +0,0 @@
-+++
-# -----------------------------------------------------------------------
-# Do not edit this file. It is automatically generated by API Documenter.
-# -----------------------------------------------------------------------
-title = "FieldDisplayEditor"
-keywords = ["grafana","documentation","sdk","@grafana/ui"]
-type = "docs"
-draft = true
-+++
-
-## FieldDisplayEditor class
-
-<b>Signature</b>
-
-```typescript
-export declare class FieldDisplayEditor extends PureComponent<Props> 
-```
-<b>Import</b>
-
-```typescript
-import { FieldDisplayEditor } from '@grafana/ui';
-```
-<b>Properties</b>
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [onCalcsChange](#oncalcschange-property) |  | <code>(calcs: string[]) =&gt; void</code> |  |
-|  [onDefaultsChange](#ondefaultschange-property) |  | <code>(value: FieldConfig) =&gt; void</code> |  |
-|  [onLimitChange](#onlimitchange-property) |  | <code>(event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void</code> |  |
-|  [onShowValuesChange](#onshowvalueschange-property) |  | <code>(item: SelectableValue&lt;boolean&gt;) =&gt; void</code> |  |
-
-<b>Methods</b>
-
-|  Method | Modifiers | Description |
-|  --- | --- | --- |
-|  [render()](#render-method) |  |  |
-
-### onCalcsChange property
-
-<b>Signature</b>
-
-```typescript
-onCalcsChange: (calcs: string[]) => void;
-```
-
-### onDefaultsChange property
-
-<b>Signature</b>
-
-```typescript
-onDefaultsChange: (value: FieldConfig) => void;
-```
-
-### onLimitChange property
-
-<b>Signature</b>
-
-```typescript
-onLimitChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-```
-
-### onShowValuesChange property
-
-<b>Signature</b>
-
-```typescript
-onShowValuesChange: (item: SelectableValue<boolean>) => void;
-```
-
-### render method
-
-<b>Signature</b>
-
-```typescript
-render(): JSX.Element;
-```
-<b>Returns:</b>
-
-`JSX.Element`
-

docs/sources/packages_api/ui/form.md

@@ -0,0 +1,34 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "Form"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## Form() function
+
+### Form() function
+
+<b>Signature</b>
+
+```typescript
+export declare function Form<T>({ defaultValues, onSubmit, validateOnMount, validateFieldsOnMount, children, validateOn, }: FormProps<T>): JSX.Element;
+```
+<b>Import</b>
+
+```typescript
+import { Form } from '@grafana/ui';
+```
+<b>Parameters</b>
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  { defaultValues, onSubmit, validateOnMount, validateFieldsOnMount, children, validateOn, } | <code>FormProps&lt;T&gt;</code> |  |
+
+<b>Returns:</b>
+
+`JSX.Element`
+

docs/sources/packages_api/ui/formapi.md

@@ -0,0 +1,24 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "FormAPI"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## FormAPI type
+
+### FormAPI type
+
+<b>Signature</b>
+
+```typescript
+export declare type FormAPI<T> = Pick<FormContextValues<T>, 'register' | 'errors' | 'control' | 'formState' | 'getValues'>;
+```
+<b>Import</b>
+
+```typescript
+import { FormAPI } from '@grafana/ui';
+```

docs/sources/packages_api/ui/forminputsize.md

@@ -0,0 +1,24 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "FormInputSize"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## FormInputSize type
+
+### FormInputSize type
+
+<b>Signature</b>
+
+```typescript
+export declare type FormInputSize = 'sm' | 'md' | 'lg' | 'auto';
+```
+<b>Import</b>
+
+```typescript
+import { FormInputSize } from '@grafana/ui';
+```

docs/sources/packages_api/ui/fullwidthbuttoncontainer.md

@@ -0,0 +1,24 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "FullWidthButtonContainer"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## FullWidthButtonContainer variable
+
+### FullWidthButtonContainer variable
+
+<b>Signature</b>
+
+```typescript
+FullWidthButtonContainer: FC<Props>
+```
+<b>Import</b>
+
+```typescript
+import { FullWidthButtonContainer } from '@grafana/ui';
+```

docs/sources/packages_api/ui/getavailableicons.md

@@ -0,0 +1,24 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "getAvailableIcons"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## getAvailableIcons variable
+
+### getAvailableIcons variable
+
+<b>Signature</b>
+
+```typescript
+getAvailableIcons: () => IconName[]
+```
+<b>Import</b>
+
+```typescript
+import { getAvailableIcons } from '@grafana/ui';
+```

docs/sources/packages_api/ui/getbuttonstyles.md

@@ -0,0 +1,28 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "getButtonStyles"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## getButtonStyles variable
+
+### getButtonStyles variable
+
+<b>Signature</b>
+
+```typescript
+getButtonStyles: (props: StyleProps) => {
+    button: string;
+    iconButton: string;
+    iconWrap: string;
+}
+```
+<b>Import</b>
+
+```typescript
+import { getButtonStyles } from '@grafana/ui';
+```

docs/sources/packages_api/ui/getformstyles.md

@@ -0,0 +1,68 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "getFormStyles"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## getFormStyles variable
+
+### getFormStyles variable
+
+<b>Signature</b>
+
+```typescript
+getFormStyles: (theme: GrafanaTheme, options: {
+    variant: ButtonVariant;
+    size: ComponentSize;
+    invalid: boolean;
+}) => {
+    label: {
+        label: string;
+        labelContent: string;
+        description: string;
+        categories: string;
+        chevron: string;
+    };
+    legend: {
+        legend: string;
+    };
+    fieldValidationMessage: {
+        fieldValidationMessage: string;
+        fieldValidationMessageIcon: string;
+    };
+    button: {
+        button: string;
+        iconButton: string;
+        iconWrap: string;
+    };
+    input: {
+        wrapper: string;
+        inputWrapper: string;
+        input: string;
+        inputDisabled: string;
+        addon: string;
+        prefix: string;
+        suffix: string;
+        loadingIndicator: string;
+    };
+    switch: {
+        switch: string;
+    };
+    checkbox: {
+        label: string;
+        description: string;
+        wrapper: string;
+        input: string;
+        checkmark: string;
+    };
+}
+```
+<b>Import</b>
+
+```typescript
+import { getFormStyles } from '@grafana/ui';
+```

docs/sources/packages_api/ui/getstandardfieldconfigs.md

@@ -0,0 +1,26 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "getStandardFieldConfigs"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## getStandardFieldConfigs variable
+
+### getStandardFieldConfigs variable
+
+Returns collection of common field config properties definitions
+
+<b>Signature</b>
+
+```typescript
+getStandardFieldConfigs: () => (FieldConfigPropertyItem<any, string, StringFieldConfigSettings> | FieldConfigPropertyItem<any, number, NumberFieldConfigSettings> | FieldConfigPropertyItem<any, ThresholdsConfig, ThresholdsFieldConfigSettings> | FieldConfigPropertyItem<any, ValueMapping[], ValueMappingFieldConfigSettings> | FieldConfigPropertyItem<any, DataLink[], StringFieldConfigSettings>)[]
+```
+<b>Import</b>
+
+```typescript
+import { getStandardFieldConfigs } from '@grafana/ui';
+```

docs/sources/packages_api/ui/getstandardoptioneditors.md

@@ -0,0 +1,26 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "getStandardOptionEditors"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## getStandardOptionEditors variable
+
+### getStandardOptionEditors variable
+
+Returns collection of standard option editors definitions
+
+<b>Signature</b>
+
+```typescript
+getStandardOptionEditors: () => (StandardEditorsRegistryItem<any, any> | StandardEditorsRegistryItem<string, any> | StandardEditorsRegistryItem<number, any> | StandardEditorsRegistryItem<boolean, any> | StandardEditorsRegistryItem<ValueMapping[], any> | StandardEditorsRegistryItem<ThresholdsConfig, any> | StandardEditorsRegistryItem<DataLink[], any> | StandardEditorsRegistryItem<string[], any>)[]
+```
+<b>Import</b>
+
+```typescript
+import { getStandardOptionEditors } from '@grafana/ui';
+```

docs/sources/packages_api/ui/getstandardtransformers.md

@@ -0,0 +1,24 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "getStandardTransformers"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## getStandardTransformers variable
+
+### getStandardTransformers variable
+
+<b>Signature</b>
+
+```typescript
+getStandardTransformers: () => TransformerRegistyItem<any>[]
+```
+<b>Import</b>
+
+```typescript
+import { getStandardTransformers } from '@grafana/ui';
+```

docs/sources/packages_api/ui/gettagcolorsfromname.md

@@ -17,7 +17,7 @@ Returns tag badge background and border colors based on hashed tag name.
 <b>Signature</b>
 
 ```typescript
-export declare function getTagColorsFromName(name: string): {
+export declare function getTagColorsFromName(name?: string): {
     color: string;
     borderColor: string;
 };
@@ -31,7 +31,7 @@ import { getTagColorsFromName } from '@grafana/ui';
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  name | <code>string</code> |  |
+|  name | <code>string</code> | tag name |
 
 <b>Returns:</b>
 

docs/sources/packages_api/ui/horizontalgroup.md

@@ -0,0 +1,24 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "HorizontalGroup"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## HorizontalGroup variable
+
+### HorizontalGroup variable
+
+<b>Signature</b>
+
+```typescript
+HorizontalGroup: React.FC<Omit<LayoutProps, 'orientation'>>
+```
+<b>Import</b>
+
+```typescript
+import { HorizontalGroup } from '@grafana/ui';
+```

docs/sources/packages_api/ui/icon.md

@@ -15,7 +15,7 @@ draft = true
 <b>Signature</b>
 
 ```typescript
-Icon: React.FC<IconProps>
+Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLDivElement>>
 ```
 <b>Import</b>
 

docs/sources/packages_api/ui/iconbutton.md

@@ -0,0 +1,24 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "IconButton"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## IconButton variable
+
+### IconButton variable
+
+<b>Signature</b>
+
+```typescript
+IconButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>
+```
+<b>Import</b>
+
+```typescript
+import { IconButton } from '@grafana/ui';
+```

docs/sources/packages_api/ui/iconname.md

@@ -0,0 +1,24 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "IconName"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## IconName type
+
+### IconName type
+
+<b>Signature</b>
+
+```typescript
+export declare type IconName = 'fa fa-spinner' | 'grafana' | 'question-circle' | 'angle-up' | 'history' | 'angle-down' | 'filter' | 'angle-left' | 'angle-right' | 'pen' | 'envelope' | 'percentage' | 'rocket' | 'power' | 'trash-alt' | 'slack' | 'download-alt' | 'mobile-android' | 'plus-square' | 'folder-plus' | 'folder-open' | 'file-copy-alt' | 'file-alt' | 'exchange-alt' | 'import' | 'exclamation-triangle' | 'times' | 'signin' | 'cloud-upload' | 'step-backward' | 'square-shape' | 'share-alt' | 'tag-alt' | 'forward' | 'check' | 'check-circle' | 'copy' | 'lock' | 'unlock' | 'panel-add' | 'arrow-random' | 'arrow-down' | 'arrows-h' | 'comment-alt' | 'code-branch' | 'arrow-right' | 'circle' | 'arrow-up' | 'arrow-from-right' | 'keyboard' | 'search' | 'chart-line' | 'search-minus' | 'clock-nine' | 'sync' | 'sign-in-alt' | 'cllud-download' | 'cog' | 'bars' | 'save' | 'apps' | 'link' | 'upload' | 'columns' | 'home-alt' | 'channel-add' | 'calendar-alt' | 'play' | 'pause' | 'calculator-alt' | 'compass' | 'sliders-v-alt' | 'bell' | 'database' | 'user' | 'camera' | 'plug' | 'shield' | 'key-skeleton-alt' | 'users-alt' | 'graph-bar' | 'book' | 'bolt' | 'comments-alt' | 'document-info' | 'info-circle' | 'bug' | 'cube' | 'star' | 'list-ul' | 'edit' | 'eye' | 'eye-slash' | 'monitor' | 'plus-circle' | 'arrow-left' | 'repeat' | 'external-link-alt' | 'minus' | 'signal' | 'search-plus' | 'minus-circle' | 'table' | 'plus' | 'heart' | 'heart-break' | 'ellipsis-v' | 'favorite';
+```
+<b>Import</b>
+
+```typescript
+import { IconName } from '@grafana/ui';
+```

docs/sources/packages_api/ui/iconsize.md

@@ -0,0 +1,24 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "IconSize"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## IconSize type
+
+### IconSize type
+
+<b>Signature</b>
+
+```typescript
+export declare type IconSize = ComponentSize | 'xl' | 'xxl' | 'xxxl';
+```
+<b>Import</b>
+
+```typescript
+import { IconSize } from '@grafana/ui';
+```

docs/sources/packages_api/ui/icontype.md

@@ -0,0 +1,24 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "IconType"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## IconType type
+
+### IconType type
+
+<b>Signature</b>
+
+```typescript
+export declare type IconType = 'mono' | 'default';
+```
+<b>Import</b>
+
+```typescript
+import { IconType } from '@grafana/ui';
+```

docs/sources/packages_api/ui/jsonexplorer.md

@@ -61,10 +61,10 @@ constructor(json: any, open?: number, config?: JsonExplorerConfig, key?: string
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  json | <code>any</code> |  |
-|  open | <code>number</code> |  |
-|  config | <code>JsonExplorerConfig</code> |  |
-|  key | <code>string &#124; undefined</code> |  |
+|  json | <code>any</code> | The JSON object you want to render. It has to be an object or array. Do NOT pass raw JSON string. |
+|  open | <code>number</code> | his number indicates up to how many levels the rendered tree should expand. Set it to <code>0</code> to make the whole tree collapsed or set it to <code>Infinity</code> to expand the tree deeply |
+|  config | <code>JsonExplorerConfig</code> | defaultConfig = { hoverPreviewEnabled: false, hoverPreviewArrayCount: 100, hoverPreviewFieldCount: 5 }<!-- -->Available configurations: \#\#\#\#\#Hover Preview \* <code>hoverPreviewEnabled</code>: enable preview on hover \* <code>hoverPreviewArrayCount</code>: number of array items to show in preview Any array larger than this number will be shown as <code>Array[XXX]</code> where <code>XXX</code> is length of the array. \* <code>hoverPreviewFieldCount</code>: number of object properties to show for object preview. Any object with more properties that thin number will be truncated. |
+|  key | <code>string &#124; undefined</code> | The key that this object in it's parent context |
 
 ### json property
 

docs/sources/packages_api/ui/label.md

@@ -0,0 +1,24 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "Label"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## Label variable
+
+### Label variable
+
+<b>Signature</b>
+
+```typescript
+Label: React.FC<LabelProps>
+```
+<b>Import</b>
+
+```typescript
+import { Label } from '@grafana/ui';
+```

docs/sources/packages_api/ui/legacyforms.md

@@ -0,0 +1,32 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "LegacyForms"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## LegacyForms variable
+
+### LegacyForms variable
+
+<b>Signature</b>
+
+```typescript
+LegacyForms: {
+    Select: typeof Select;
+    AsyncSelect: typeof AsyncSelect;
+    IndicatorsContainer: (props: any) => JSX.Element;
+    NoOptionsMessage: (props: any) => JSX.Element;
+    ButtonSelect: typeof ButtonSelect;
+    Input: typeof Input;
+    Switch: typeof Switch;
+}
+```
+<b>Import</b>
+
+```typescript
+import { LegacyForms } from '@grafana/ui';
+```

docs/sources/packages_api/ui/legacyinputstatus.md

@@ -2,25 +2,25 @@
 # -----------------------------------------------------------------------
 # Do not edit this file. It is automatically generated by API Documenter.
 # -----------------------------------------------------------------------
-title = "InputStatus"
+title = "LegacyInputStatus"
 keywords = ["grafana","documentation","sdk","@grafana/ui"]
 type = "docs"
 draft = true
 +++
 
-## InputStatus enum
+## LegacyInputStatus enum
 
-### InputStatus enum
+### LegacyInputStatus enum
 
 <b>Signature</b>
 
 ```typescript
-export declare enum InputStatus 
+export declare enum LegacyInputStatus 
 ```
 <b>Import</b>
 
 ```typescript
-import { InputStatus } from '@grafana/ui';
+import { LegacyInputStatus } from '@grafana/ui';
 ```
 
 ## Enumeration Members

docs/sources/packages_api/ui/legend.md

@@ -0,0 +1,24 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "Legend"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## Legend variable
+
+### Legend variable
+
+<b>Signature</b>
+
+```typescript
+Legend: React.FC<LabelProps>
+```
+<b>Import</b>
+
+```typescript
+import { Legend } from '@grafana/ui';
+```

docs/sources/packages_api/ui/linkbutton.md

@@ -15,9 +15,7 @@ draft = true
 <b>Signature</b>
 
 ```typescript
-LinkButton: React.ForwardRefExoticComponent<CommonProps & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
-    disabled?: boolean | undefined;
-} & React.RefAttributes<HTMLAnchorElement>>
+LinkButton: React.ForwardRefExoticComponent<CommonProps & React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>
 ```
 <b>Import</b>
 

docs/sources/packages_api/ui/linkmodeltocontextmenuitems.md

@@ -17,7 +17,7 @@ Delays creating links until we need to open the ContextMenu
 <b>Signature</b>
 
 ```typescript
-linkModelToContextMenuItems: (links: LinkModelSupplier<any>) => ContextMenuItem[]
+linkModelToContextMenuItems: (links: () => LinkModel[]) => ContextMenuItem[]
 ```
 <b>Import</b>
 

docs/sources/packages_api/ui/modal.md

@@ -15,7 +15,7 @@ draft = true
 <b>Signature</b>
 
 ```typescript
-Modal: React.FunctionComponent<Pick<Props, "title" | "icon" | "className" | "isOpen" | "onDismiss" | "onClickBackdrop">>
+Modal: React.FunctionComponent<Pick<Props, "title" | "className" | "icon" | "isOpen" | "onDismiss" | "onClickBackdrop">>
 ```
 <b>Import</b>
 

docs/sources/packages_api/ui/modalheader.md

@@ -0,0 +1,24 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "ModalHeader"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## ModalHeader variable
+
+### ModalHeader variable
+
+<b>Signature</b>
+
+```typescript
+ModalHeader: React.FC<Props>
+```
+<b>Import</b>
+
+```typescript
+import { ModalHeader } from '@grafana/ui';
+```

docs/sources/packages_api/ui/modalroot.md

@@ -0,0 +1,24 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "ModalRoot"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## ModalRoot variable
+
+### ModalRoot variable
+
+<b>Signature</b>
+
+```typescript
+ModalRoot: () => JSX.Element
+```
+<b>Import</b>
+
+```typescript
+import { ModalRoot } from '@grafana/ui';
+```

docs/sources/packages_api/ui/modalscontroller.md

@@ -0,0 +1,24 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "ModalsController"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## ModalsController variable
+
+### ModalsController variable
+
+<b>Signature</b>
+
+```typescript
+ModalsController: React.Consumer<ModalsContextState>
+```
+<b>Import</b>
+
+```typescript
+import { ModalsController } from '@grafana/ui';
+```

docs/sources/packages_api/ui/modalsprovider.md

@@ -0,0 +1,83 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "ModalsProvider"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## ModalsProvider class
+
+<b>Signature</b>
+
+```typescript
+export declare class ModalsProvider extends React.Component<ModalsProviderProps, ModalsContextState> 
+```
+<b>Import</b>
+
+```typescript
+import { ModalsProvider } from '@grafana/ui';
+```
+<b>Constructors</b>
+
+|  Constructor | Modifiers | Description |
+|  --- | --- | --- |
+|  [constructor(props)](#constructor-props) |  | Constructs a new instance of the <code>ModalsProvider</code> class |
+
+<b>Properties</b>
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [hideModal](#hidemodal-property) |  | <code>() =&gt; void</code> |  |
+|  [showModal](#showmodal-property) |  | <code>(component: React.ComponentType&lt;any&gt;, props: any) =&gt; void</code> |  |
+
+<b>Methods</b>
+
+|  Method | Modifiers | Description |
+|  --- | --- | --- |
+|  [render()](#render-method) |  |  |
+
+### constructor(props)
+
+Constructs a new instance of the `ModalsProvider` class
+
+<b>Signature</b>
+
+```typescript
+constructor(props: ModalsProviderProps);
+```
+<b>Parameters</b>
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  props | <code>ModalsProviderProps</code> |  |
+
+### hideModal property
+
+<b>Signature</b>
+
+```typescript
+hideModal: () => void;
+```
+
+### showModal property
+
+<b>Signature</b>
+
+```typescript
+showModal: (component: React.ComponentType<any>, props: any) => void;
+```
+
+### render method
+
+<b>Signature</b>
+
+```typescript
+render(): JSX.Element;
+```
+<b>Returns:</b>
+
+`JSX.Element`
+

docs/sources/packages_api/ui/modaltabcontent.md

@@ -0,0 +1,24 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "ModalTabContent"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## ModalTabContent variable
+
+### ModalTabContent variable
+
+<b>Signature</b>
+
+```typescript
+ModalTabContent: React.FC<Props>
+```
+<b>Import</b>
+
+```typescript
+import { ModalTabContent } from '@grafana/ui';
+```

docs/sources/packages_api/ui/modaltabsheader.md

@@ -0,0 +1,24 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "ModalTabsHeader"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## ModalTabsHeader variable
+
+### ModalTabsHeader variable
+
+<b>Signature</b>
+
+```typescript
+ModalTabsHeader: React.FC<Props>
+```
+<b>Import</b>
+
+```typescript
+import { ModalTabsHeader } from '@grafana/ui';
+```

docs/sources/packages_api/ui/multiselect.md

@@ -0,0 +1,34 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "MultiSelect"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## MultiSelect() function
+
+### MultiSelect() function
+
+<b>Signature</b>
+
+```typescript
+export declare function MultiSelect<T>(props: MultiSelectCommonProps<T>): JSX.Element;
+```
+<b>Import</b>
+
+```typescript
+import { MultiSelect } from '@grafana/ui';
+```
+<b>Parameters</b>
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  props | <code>MultiSelectCommonProps&lt;T&gt;</code> |  |
+
+<b>Returns:</b>
+
+`JSX.Element`
+

docs/sources/packages_api/ui/numberfieldconfigsettings.md

@@ -1,71 +0,0 @@
-+++
-# -----------------------------------------------------------------------
-# Do not edit this file. It is automatically generated by API Documenter.
-# -----------------------------------------------------------------------
-title = "NumberFieldConfigSettings"
-keywords = ["grafana","documentation","sdk","@grafana/ui"]
-type = "docs"
-draft = true
-+++
-
-## NumberFieldConfigSettings interface
-
-<b>Signature</b>
-
-```typescript
-export interface NumberFieldConfigSettings 
-```
-<b>Import</b>
-
-```typescript
-import { NumberFieldConfigSettings } from '@grafana/ui';
-```
-<b>Properties</b>
-
-|  Property | Type | Description |
-|  --- | --- | --- |
-|  [integer](#integer-property) | <code>boolean</code> |  |
-|  [max](#max-property) | <code>number</code> |  |
-|  [min](#min-property) | <code>number</code> |  |
-|  [placeholder](#placeholder-property) | <code>string</code> |  |
-|  [step](#step-property) | <code>number</code> |  |
-
-### integer property
-
-<b>Signature</b>
-
-```typescript
-integer?: boolean;
-```
-
-### max property
-
-<b>Signature</b>
-
-```typescript
-max?: number;
-```
-
-### min property
-
-<b>Signature</b>
-
-```typescript
-min?: number;
-```
-
-### placeholder property
-
-<b>Signature</b>
-
-```typescript
-placeholder?: string;
-```
-
-### step property
-
-<b>Signature</b>
-
-```typescript
-step?: number;
-```

docs/sources/packages_api/ui/numberoverrideprocessor.md

@@ -1,24 +0,0 @@
-+++
-# -----------------------------------------------------------------------
-# Do not edit this file. It is automatically generated by API Documenter.
-# -----------------------------------------------------------------------
-title = "numberOverrideProcessor"
-keywords = ["grafana","documentation","sdk","@grafana/ui"]
-type = "docs"
-draft = true
-+++
-
-## numberOverrideProcessor variable
-
-### numberOverrideProcessor variable
-
-<b>Signature</b>
-
-```typescript
-numberOverrideProcessor: (value: any, context: FieldOverrideContext, settings: NumberFieldConfigSettings) => number
-```
-<b>Import</b>
-
-```typescript
-import { numberOverrideProcessor } from '@grafana/ui';
-```

docs/sources/packages_api/ui/pagination.md

@@ -0,0 +1,24 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "Pagination"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## Pagination variable
+
+### Pagination variable
+
+<b>Signature</b>
+
+```typescript
+Pagination: React.FC<Props>
+```
+<b>Import</b>
+
+```typescript
+import { Pagination } from '@grafana/ui';
+```

docs/sources/packages_api/ui/queryfield.md

@@ -51,7 +51,6 @@ import { QueryField } from '@grafana/ui';
 |  [componentDidUpdate(prevProps, prevState)](#componentdidupdate-method) |  |  |
 |  [componentWillUnmount()](#componentwillunmount-method) |  |  |
 |  [render()](#render-method) |  |  |
-|  [UNSAFE\_componentWillReceiveProps(nextProps)](#unsafe_componentwillreceiveprops-method) |  |  |
 
 ### constructor(props, context)
 
@@ -204,20 +203,3 @@ render(): JSX.Element;
 
 `JSX.Element`
 
-### UNSAFE\_componentWillReceiveProps method
-
-<b>Signature</b>
-
-```typescript
-UNSAFE_componentWillReceiveProps(nextProps: QueryFieldProps): void;
-```
-<b>Parameters</b>
-
-|  Parameter | Type | Description |
-|  --- | --- | --- |
-|  nextProps | <code>QueryFieldProps</code> |  |
-
-<b>Returns:</b>
-
-`void`
-

docs/sources/packages_api/ui/radiobuttongroup.md

@@ -0,0 +1,31 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "RadioButtonGroup"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## RadioButtonGroup namespace
+
+### RadioButtonGroup namespace
+
+<b>Signature</b>
+
+```typescript
+export declare namespace RadioButtonGroup 
+```
+<b>Import</b>
+
+```typescript
+import { RadioButtonGroup } from '@grafana/ui';
+```
+
+## Variables
+
+|  Variable | Description |
+|  --- | --- |
+|  [displayName](./displayname/) |  |
+

docs/sources/packages_api/ui/radiobuttongroup/displayname.md

@@ -0,0 +1,25 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "displayName"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## RadioButtonGroup.displayName variable
+
+### RadioButtonGroup.displayName variable
+
+<b>Signature</b>
+
+```typescript
+displayName: string
+```
+<b>Import</b>
+
+```typescript
+import { RadioButtonGroup } from '@grafana/ui';
+const { displayName } = RadioButtonGroup;
+```

docs/sources/packages_api/ui/renderorcalltorender.md

@@ -0,0 +1,37 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "renderOrCallToRender"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## renderOrCallToRender() function
+
+### renderOrCallToRender() function
+
+Given react node or function returns element accordingly
+
+<b>Signature</b>
+
+```typescript
+export declare function renderOrCallToRender<TProps = any>(itemToRender: ((props?: TProps) => React.ReactNode) | React.ReactNode, props?: TProps): React.ReactNode;
+```
+<b>Import</b>
+
+```typescript
+import { renderOrCallToRender } from '@grafana/ui';
+```
+<b>Parameters</b>
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  itemToRender | <code>((props?: TProps) =&gt; React.ReactNode) &#124; React.ReactNode</code> |  |
+|  props | <code>TProps</code> | props to be passed to the function if item provided as such |
+
+<b>Returns:</b>
+
+`React.ReactNode`
+

docs/sources/packages_api/ui/select.md

@@ -8,45 +8,26 @@ type = "docs"
 draft = true
 +++
 
-## Select class
+## Select() function
+
+### Select() function
 
 <b>Signature</b>
 
 ```typescript
-export declare class Select<T> extends PureComponent<LegacySelectProps<T>> 
+export declare function Select<T>(props: SelectCommonProps<T>): JSX.Element;
 ```
 <b>Import</b>
 
 ```typescript
 import { Select } from '@grafana/ui';
 ```
-<b>Properties</b>
+<b>Parameters</b>
 
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [defaultProps](#defaultprops-property) | <code>static</code> | <code>Partial&lt;LegacySelectProps&lt;any&gt;&gt;</code> |  |
-
-<b>Methods</b>
-
-|  Method | Modifiers | Description |
+|  Parameter | Type | Description |
 |  --- | --- | --- |
-|  [render()](#render-method) |  |  |
+|  props | <code>SelectCommonProps&lt;T&gt;</code> |  |
 
-### defaultProps property
-
-<b>Signature</b>
-
-```typescript
-static defaultProps: Partial<LegacySelectProps<any>>;
-```
-
-### render method
-
-<b>Signature</b>
-
-```typescript
-render(): JSX.Element;
-```
 <b>Returns:</b>
 
 `JSX.Element`

docs/sources/packages_api/ui/selectvalueeditor.md

@@ -0,0 +1,34 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "SelectValueEditor"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## SelectValueEditor() function
+
+### SelectValueEditor() function
+
+<b>Signature</b>
+
+```typescript
+export declare function SelectValueEditor<T>({ value, onChange, item, }: FieldConfigEditorProps<T, SelectFieldConfigSettings<T>>): JSX.Element;
+```
+<b>Import</b>
+
+```typescript
+import { SelectValueEditor } from '@grafana/ui';
+```
+<b>Parameters</b>
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  { value, onChange, item, } | <code>FieldConfigEditorProps&lt;T, SelectFieldConfigSettings&lt;T&gt;&gt;</code> |  |
+
+<b>Returns:</b>
+
+`JSX.Element`
+

docs/sources/packages_api/ui/sharedsinglestatpanelchangedhandler.md

@@ -15,7 +15,7 @@ draft = true
 <b>Signature</b>
 
 ```typescript
-export declare function sharedSingleStatPanelChangedHandler(options: Partial<SingleStatBaseOptions> | any, prevPluginId: string, prevOptions: any): any;
+export declare function sharedSingleStatPanelChangedHandler(panel: PanelModel<Partial<SingleStatBaseOptions>> | any, prevPluginId: string, prevOptions: any): any;
 ```
 <b>Import</b>
 
@@ -26,7 +26,7 @@ import { sharedSingleStatPanelChangedHandler } from '@grafana/ui';
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  options | <code>Partial&lt;SingleStatBaseOptions&gt; &#124; any</code> |  |
+|  panel | <code>PanelModel&lt;Partial&lt;SingleStatBaseOptions&gt;&gt; &#124; any</code> |  |
 |  prevPluginId | <code>string</code> |  |
 |  prevOptions | <code>any</code> |  |
 

docs/sources/packages_api/ui/singlestatbaseoptions.md

@@ -24,16 +24,8 @@ import { SingleStatBaseOptions } from '@grafana/ui';
 
 |  Property | Type | Description |
 |  --- | --- | --- |
-|  [fieldOptions](#fieldoptions-property) | <code>FieldDisplayOptions</code> |  |
 |  [orientation](#orientation-property) | <code>VizOrientation</code> |  |
-
-### fieldOptions property
-
-<b>Signature</b>
-
-```typescript
-fieldOptions: FieldDisplayOptions;
-```
+|  [reduceOptions](#reduceoptions-property) | <code>ReduceDataOptions</code> |  |
 
 ### orientation property
 
@@ -42,3 +34,11 @@ fieldOptions: FieldDisplayOptions;
 ```typescript
 orientation: VizOrientation;
 ```
+
+### reduceOptions property
+
+<b>Signature</b>
+
+```typescript
+reduceOptions: ReduceDataOptions;
+```

docs/sources/packages_api/ui/slider.md

@@ -0,0 +1,24 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "Slider"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## Slider variable
+
+### Slider variable
+
+<b>Signature</b>
+
+```typescript
+Slider: FunctionComponent<Props>
+```
+<b>Import</b>
+
+```typescript
+import { Slider } from '@grafana/ui';
+```

docs/sources/packages_api/ui/statspicker.md

@@ -25,7 +25,7 @@ import { StatsPicker } from '@grafana/ui';
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
 |  [checkInput](#checkinput-property) |  | <code>() =&gt; void</code> |  |
-|  [defaultProps](#defaultprops-property) | <code>static</code> | <code>{</code><br/><code>        width: number;</code><br/><code>        allowMultiple: boolean;</code><br/><code>    }</code> |  |
+|  [defaultProps](#defaultprops-property) | <code>static</code> | <code>Partial&lt;Props&gt;</code> |  |
 |  [onSelectionChange](#onselectionchange-property) |  | <code>(item: SelectableValue&lt;string&gt;) =&gt; void</code> |  |
 
 <b>Methods</b>
@@ -49,10 +49,7 @@ checkInput: () => void;
 <b>Signature</b>
 
 ```typescript
-static defaultProps: {
-        width: number;
-        allowMultiple: boolean;
-    };
+static defaultProps: Partial<Props>;
 ```
 
 ### onSelectionChange property

docs/sources/packages_api/ui/stringfieldconfigsettings.md

@@ -1,53 +0,0 @@
-+++
-# -----------------------------------------------------------------------
-# Do not edit this file. It is automatically generated by API Documenter.
-# -----------------------------------------------------------------------
-title = "StringFieldConfigSettings"
-keywords = ["grafana","documentation","sdk","@grafana/ui"]
-type = "docs"
-draft = true
-+++
-
-## StringFieldConfigSettings interface
-
-<b>Signature</b>
-
-```typescript
-export interface StringFieldConfigSettings 
-```
-<b>Import</b>
-
-```typescript
-import { StringFieldConfigSettings } from '@grafana/ui';
-```
-<b>Properties</b>
-
-|  Property | Type | Description |
-|  --- | --- | --- |
-|  [expandTemplateVars](#expandtemplatevars-property) | <code>boolean</code> |  |
-|  [maxLength](#maxlength-property) | <code>number</code> |  |
-|  [placeholder](#placeholder-property) | <code>string</code> |  |
-
-### expandTemplateVars property
-
-<b>Signature</b>
-
-```typescript
-expandTemplateVars?: boolean;
-```
-
-### maxLength property
-
-<b>Signature</b>
-
-```typescript
-maxLength?: number;
-```
-
-### placeholder property
-
-<b>Signature</b>
-
-```typescript
-placeholder?: string;
-```

docs/sources/packages_api/ui/stringoverrideeditor.md

@@ -1,24 +0,0 @@
-+++
-# -----------------------------------------------------------------------
-# Do not edit this file. It is automatically generated by API Documenter.
-# -----------------------------------------------------------------------
-title = "StringOverrideEditor"
-keywords = ["grafana","documentation","sdk","@grafana/ui"]
-type = "docs"
-draft = true
-+++
-
-## StringOverrideEditor variable
-
-### StringOverrideEditor variable
-
-<b>Signature</b>
-
-```typescript
-StringOverrideEditor: React.FC<FieldOverrideEditorProps<string, StringFieldConfigSettings>>
-```
-<b>Import</b>
-
-```typescript
-import { StringOverrideEditor } from '@grafana/ui';
-```

docs/sources/packages_api/ui/stringoverrideprocessor.md

@@ -1,24 +0,0 @@
-+++
-# -----------------------------------------------------------------------
-# Do not edit this file. It is automatically generated by API Documenter.
-# -----------------------------------------------------------------------
-title = "stringOverrideProcessor"
-keywords = ["grafana","documentation","sdk","@grafana/ui"]
-type = "docs"
-draft = true
-+++
-
-## stringOverrideProcessor variable
-
-### stringOverrideProcessor variable
-
-<b>Signature</b>
-
-```typescript
-stringOverrideProcessor: (value: any, context: FieldOverrideContext, settings: StringFieldConfigSettings) => string
-```
-<b>Import</b>
-
-```typescript
-import { stringOverrideProcessor } from '@grafana/ui';
-```

docs/sources/packages_api/ui/stylemixins.md

@@ -10,13 +10,11 @@ draft = true
 
 ## styleMixins namespace
 
+> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
 ### styleMixins namespace
 
-<b>Signature</b>
-
-```typescript
-export declare namespace styleMixins 
-```
 <b>Import</b>
 
 ```typescript
@@ -28,5 +26,7 @@ import { styleMixins } from '@grafana/ui';
 |  Function | Description |
 |  --- | --- |
 |  [cardChrome(theme)](./cardchrome/) |  |
+|  [hoverColor(color, theme)](./hovercolor/) |  |
 |  [listItem(theme)](./listitem/) |  |
+|  [listItemSelected(theme)](./listitemselected/) |  |
 

docs/sources/packages_api/ui/stylemixins/cardchrome.md

@@ -15,7 +15,7 @@ draft = true
 <b>Signature</b>
 
 ```typescript
-function cardChrome(theme: GrafanaTheme): string;
+export declare function cardChrome(theme: GrafanaTheme): string;
 ```
 <b>Import</b>
 

docs/sources/packages_api/ui/stylemixins/hovercolor.md

@@ -0,0 +1,36 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "hoverColor"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## styleMixins.hoverColor() function
+
+### styleMixins.hoverColor() function
+
+<b>Signature</b>
+
+```typescript
+export declare function hoverColor(color: string, theme: GrafanaTheme): string;
+```
+<b>Import</b>
+
+```typescript
+import { styleMixins } from '@grafana/ui';
+const { hoverColor } = styleMixins;
+```
+<b>Parameters</b>
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  color | <code>string</code> |  |
+|  theme | <code>GrafanaTheme</code> |  |
+
+<b>Returns:</b>
+
+`string`
+

docs/sources/packages_api/ui/stylemixins/listitem.md

@@ -15,7 +15,7 @@ draft = true
 <b>Signature</b>
 
 ```typescript
-function listItem(theme: GrafanaTheme): string;
+export declare function listItem(theme: GrafanaTheme): string;
 ```
 <b>Import</b>
 

docs/sources/packages_api/ui/stylemixins/listitemselected.md

@@ -0,0 +1,35 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "listItemSelected"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## styleMixins.listItemSelected() function
+
+### styleMixins.listItemSelected() function
+
+<b>Signature</b>
+
+```typescript
+export declare function listItemSelected(theme: GrafanaTheme): string;
+```
+<b>Import</b>
+
+```typescript
+import { styleMixins } from '@grafana/ui';
+const { listItemSelected } = styleMixins;
+```
+<b>Parameters</b>
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  theme | <code>GrafanaTheme</code> |  |
+
+<b>Returns:</b>
+
+`string`
+

docs/sources/packages_api/ui/styleprops.md

@@ -0,0 +1,71 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "StyleProps"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## StyleProps interface
+
+<b>Signature</b>
+
+```typescript
+export interface StyleProps 
+```
+<b>Import</b>
+
+```typescript
+import { StyleProps } from '@grafana/ui';
+```
+<b>Properties</b>
+
+|  Property | Type | Description |
+|  --- | --- | --- |
+|  [hasIcon](#hasicon-property) | <code>boolean</code> |  |
+|  [hasText](#hastext-property) | <code>boolean</code> |  |
+|  [size](#size-property) | <code>ComponentSize</code> |  |
+|  [theme](#theme-property) | <code>GrafanaTheme</code> |  |
+|  [variant](#variant-property) | <code>ButtonVariant</code> |  |
+
+### hasIcon property
+
+<b>Signature</b>
+
+```typescript
+hasIcon: boolean;
+```
+
+### hasText property
+
+<b>Signature</b>
+
+```typescript
+hasText: boolean;
+```
+
+### size property
+
+<b>Signature</b>
+
+```typescript
+size: ComponentSize;
+```
+
+### theme property
+
+<b>Signature</b>
+
+```typescript
+theme: GrafanaTheme;
+```
+
+### variant property
+
+<b>Signature</b>
+
+```typescript
+variant: ButtonVariant;
+```

docs/sources/packages_api/ui/stylesfactory.md

@@ -28,7 +28,7 @@ import { stylesFactory } from '@grafana/ui';
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  stylesCreator | <code>ResultFn</code> |  |
+|  stylesCreator | <code>ResultFn</code> | function accepting dependencies based on which styles are created |
 
 <b>Returns:</b>
 

docs/sources/packages_api/ui/table.md

@@ -15,7 +15,7 @@ draft = true
 <b>Signature</b>
 
 ```typescript
-Table: ({ data, height, onCellClick, width }: Props) => JSX.Element
+Table: FC<Props>
 ```
 <b>Import</b>
 

docs/sources/packages_api/ui/tag.md

@@ -0,0 +1,24 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "Tag"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## Tag variable
+
+### Tag variable
+
+<b>Signature</b>
+
+```typescript
+Tag: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>
+```
+<b>Import</b>
+
+```typescript
+import { Tag } from '@grafana/ui';
+```

docs/sources/packages_api/ui/taglist.md

@@ -0,0 +1,24 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "TagList"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## TagList variable
+
+### TagList variable
+
+<b>Signature</b>
+
+```typescript
+TagList: FC<Props>
+```
+<b>Import</b>
+
+```typescript
+import { TagList } from '@grafana/ui';
+```

docs/sources/packages_api/ui/thresholdseditor.md

@@ -1,137 +0,0 @@
-+++
-# -----------------------------------------------------------------------
-# Do not edit this file. It is automatically generated by API Documenter.
-# -----------------------------------------------------------------------
-title = "ThresholdsEditor"
-keywords = ["grafana","documentation","sdk","@grafana/ui"]
-type = "docs"
-draft = true
-+++
-
-## ThresholdsEditor class
-
-<b>Signature</b>
-
-```typescript
-export declare class ThresholdsEditor extends PureComponent<Props, State> 
-```
-<b>Import</b>
-
-```typescript
-import { ThresholdsEditor } from '@grafana/ui';
-```
-<b>Constructors</b>
-
-|  Constructor | Modifiers | Description |
-|  --- | --- | --- |
-|  [constructor(props)](#constructor-props) |  | Constructs a new instance of the <code>ThresholdsEditor</code> class |
-
-<b>Properties</b>
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [onAddThresholdAfter](#onaddthresholdafter-property) |  | <code>(threshold: ThresholdWithKey) =&gt; void</code> |  |
-|  [onBlur](#onblur-property) |  | <code>() =&gt; void</code> |  |
-|  [onChange](#onchange-property) |  | <code>() =&gt; void</code> |  |
-|  [onChangeThresholdColor](#onchangethresholdcolor-property) |  | <code>(threshold: ThresholdWithKey, color: string) =&gt; void</code> |  |
-|  [onChangeThresholdValue](#onchangethresholdvalue-property) |  | <code>(event: React.ChangeEvent&lt;HTMLInputElement&gt;, threshold: ThresholdWithKey) =&gt; void</code> |  |
-|  [onModeChanged](#onmodechanged-property) |  | <code>(item: SelectableValue&lt;ThresholdsMode&gt;) =&gt; void</code> |  |
-|  [onRemoveThreshold](#onremovethreshold-property) |  | <code>(threshold: ThresholdWithKey) =&gt; void</code> |  |
-|  [renderInput](#renderinput-property) |  | <code>(threshold: ThresholdWithKey) =&gt; JSX.Element</code> |  |
-
-<b>Methods</b>
-
-|  Method | Modifiers | Description |
-|  --- | --- | --- |
-|  [render()](#render-method) |  |  |
-
-### constructor(props)
-
-Constructs a new instance of the `ThresholdsEditor` class
-
-<b>Signature</b>
-
-```typescript
-constructor(props: Props);
-```
-<b>Parameters</b>
-
-|  Parameter | Type | Description |
-|  --- | --- | --- |
-|  props | <code>Props</code> |  |
-
-### onAddThresholdAfter property
-
-<b>Signature</b>
-
-```typescript
-onAddThresholdAfter: (threshold: ThresholdWithKey) => void;
-```
-
-### onBlur property
-
-<b>Signature</b>
-
-```typescript
-onBlur: () => void;
-```
-
-### onChange property
-
-<b>Signature</b>
-
-```typescript
-onChange: () => void;
-```
-
-### onChangeThresholdColor property
-
-<b>Signature</b>
-
-```typescript
-onChangeThresholdColor: (threshold: ThresholdWithKey, color: string) => void;
-```
-
-### onChangeThresholdValue property
-
-<b>Signature</b>
-
-```typescript
-onChangeThresholdValue: (event: React.ChangeEvent<HTMLInputElement>, threshold: ThresholdWithKey) => void;
-```
-
-### onModeChanged property
-
-<b>Signature</b>
-
-```typescript
-onModeChanged: (item: SelectableValue<ThresholdsMode>) => void;
-```
-
-### onRemoveThreshold property
-
-<b>Signature</b>
-
-```typescript
-onRemoveThreshold: (threshold: ThresholdWithKey) => void;
-```
-
-### renderInput property
-
-<b>Signature</b>
-
-```typescript
-renderInput: (threshold: ThresholdWithKey) => JSX.Element;
-```
-
-### render method
-
-<b>Signature</b>
-
-```typescript
-render(): JSX.Element;
-```
-<b>Returns:</b>
-
-`JSX.Element`
-

docs/sources/packages_api/ui/timepicker.md

@@ -1,24 +0,0 @@
-+++
-# -----------------------------------------------------------------------
-# Do not edit this file. It is automatically generated by API Documenter.
-# -----------------------------------------------------------------------
-title = "TimePicker"
-keywords = ["grafana","documentation","sdk","@grafana/ui"]
-type = "docs"
-draft = true
-+++
-
-## TimePicker variable
-
-### TimePicker variable
-
-<b>Signature</b>
-
-```typescript
-TimePicker: React.FunctionComponent<Pick<Props, "onChange" | "history" | "value" | "timeZone" | "hideText" | "timeSyncButton" | "isSynced" | "onMoveBackward" | "onMoveForward" | "onZoom">>
-```
-<b>Import</b>
-
-```typescript
-import { TimePicker } from '@grafana/ui';
-```

docs/sources/packages_api/ui/timerangepicker.md

@@ -0,0 +1,24 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "TimeRangePicker"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## TimeRangePicker variable
+
+### TimeRangePicker variable
+
+<b>Signature</b>
+
+```typescript
+TimeRangePicker: React.FunctionComponent<Pick<Props, "onChange" | "history" | "value" | "timeZone" | "hideText" | "timeSyncButton" | "isSynced" | "onMoveBackward" | "onMoveForward" | "onZoom">>
+```
+<b>Import</b>
+
+```typescript
+import { TimeRangePicker } from '@grafana/ui';
+```

docs/sources/packages_api/ui/transformationrow.md

@@ -1,24 +0,0 @@
-+++
-# -----------------------------------------------------------------------
-# Do not edit this file. It is automatically generated by API Documenter.
-# -----------------------------------------------------------------------
-title = "TransformationRow"
-keywords = ["grafana","documentation","sdk","@grafana/ui"]
-type = "docs"
-draft = true
-+++
-
-## TransformationRow variable
-
-### TransformationRow variable
-
-<b>Signature</b>
-
-```typescript
-TransformationRow: ({ onRemove, editor, name, input }: TransformationRowProps) => JSX.Element
-```
-<b>Import</b>
-
-```typescript
-import { TransformationRow } from '@grafana/ui';
-```

docs/sources/packages_api/ui/transformationseditor.md

@@ -1,91 +0,0 @@
-+++
-# -----------------------------------------------------------------------
-# Do not edit this file. It is automatically generated by API Documenter.
-# -----------------------------------------------------------------------
-title = "TransformationsEditor"
-keywords = ["grafana","documentation","sdk","@grafana/ui"]
-type = "docs"
-draft = true
-+++
-
-## TransformationsEditor class
-
-<b>Signature</b>
-
-```typescript
-export declare class TransformationsEditor extends React.PureComponent<TransformationsEditorProps, TransformationsEditorState> 
-```
-<b>Import</b>
-
-```typescript
-import { TransformationsEditor } from '@grafana/ui';
-```
-<b>Properties</b>
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [onTransformationAdd](#ontransformationadd-property) |  | <code>() =&gt; void</code> |  |
-|  [onTransformationChange](#ontransformationchange-property) |  | <code>(idx: number, config: DataTransformerConfig&lt;any&gt;) =&gt; void</code> |  |
-|  [onTransformationRemove](#ontransformationremove-property) |  | <code>(idx: number) =&gt; void</code> |  |
-|  [renderTransformationEditors](#rendertransformationeditors-property) |  | <code>() =&gt; JSX.Element &#124; undefined</code> |  |
-|  [state](#state-property) |  | <code>{</code><br/><code>        updateCounter: number;</code><br/><code>    }</code> |  |
-
-<b>Methods</b>
-
-|  Method | Modifiers | Description |
-|  --- | --- | --- |
-|  [render()](#render-method) |  |  |
-
-### onTransformationAdd property
-
-<b>Signature</b>
-
-```typescript
-onTransformationAdd: () => void;
-```
-
-### onTransformationChange property
-
-<b>Signature</b>
-
-```typescript
-onTransformationChange: (idx: number, config: DataTransformerConfig<any>) => void;
-```
-
-### onTransformationRemove property
-
-<b>Signature</b>
-
-```typescript
-onTransformationRemove: (idx: number) => void;
-```
-
-### renderTransformationEditors property
-
-<b>Signature</b>
-
-```typescript
-renderTransformationEditors: () => JSX.Element | undefined;
-```
-
-### state property
-
-<b>Signature</b>
-
-```typescript
-state: {
-        updateCounter: number;
-    };
-```
-
-### render method
-
-<b>Signature</b>
-
-```typescript
-render(): JSX.Element;
-```
-<b>Returns:</b>
-
-`JSX.Element`
-

docs/sources/packages_api/ui/valuemappingseditor.md

@@ -1,110 +0,0 @@
-+++
-# -----------------------------------------------------------------------
-# Do not edit this file. It is automatically generated by API Documenter.
-# -----------------------------------------------------------------------
-title = "ValueMappingsEditor"
-keywords = ["grafana","documentation","sdk","@grafana/ui"]
-type = "docs"
-draft = true
-+++
-
-## ValueMappingsEditor class
-
-<b>Signature</b>
-
-```typescript
-export declare class ValueMappingsEditor extends PureComponent<Props, State> 
-```
-<b>Import</b>
-
-```typescript
-import { ValueMappingsEditor } from '@grafana/ui';
-```
-<b>Constructors</b>
-
-|  Constructor | Modifiers | Description |
-|  --- | --- | --- |
-|  [constructor(props)](#constructor-props) |  | Constructs a new instance of the <code>ValueMappingsEditor</code> class |
-
-<b>Properties</b>
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [onAddMapping](#onaddmapping-property) |  | <code>() =&gt; void</code> |  |
-|  [onRemoveMapping](#onremovemapping-property) |  | <code>(id: number) =&gt; void</code> |  |
-|  [updateGauge](#updategauge-property) |  | <code>(mapping: ValueMapping) =&gt; void</code> |  |
-
-<b>Methods</b>
-
-|  Method | Modifiers | Description |
-|  --- | --- | --- |
-|  [getMaxIdFromValueMappings(mappings)](#getmaxidfromvaluemappings-method) |  |  |
-|  [render()](#render-method) |  |  |
-
-### constructor(props)
-
-Constructs a new instance of the `ValueMappingsEditor` class
-
-<b>Signature</b>
-
-```typescript
-constructor(props: Props);
-```
-<b>Parameters</b>
-
-|  Parameter | Type | Description |
-|  --- | --- | --- |
-|  props | <code>Props</code> |  |
-
-### onAddMapping property
-
-<b>Signature</b>
-
-```typescript
-onAddMapping: () => void;
-```
-
-### onRemoveMapping property
-
-<b>Signature</b>
-
-```typescript
-onRemoveMapping: (id: number) => void;
-```
-
-### updateGauge property
-
-<b>Signature</b>
-
-```typescript
-updateGauge: (mapping: ValueMapping) => void;
-```
-
-### getMaxIdFromValueMappings method
-
-<b>Signature</b>
-
-```typescript
-getMaxIdFromValueMappings(mappings: ValueMapping[]): number;
-```
-<b>Parameters</b>
-
-|  Parameter | Type | Description |
-|  --- | --- | --- |
-|  mappings | <code>ValueMapping[]</code> |  |
-
-<b>Returns:</b>
-
-`number`
-
-### render method
-
-<b>Signature</b>
-
-```typescript
-render(): JSX.Element;
-```
-<b>Returns:</b>
-
-`JSX.Element`
-

docs/sources/packages_api/ui/valuepicker.md

@@ -15,7 +15,7 @@ draft = true
 <b>Signature</b>
 
 ```typescript
-export declare function ValuePicker<T>({ label, icon, options, onChange, variant }: ValuePickerProps<T>): JSX.Element;
+export declare function ValuePicker<T>({ label, icon, options, onChange, variant, size, isFullWidth, }: ValuePickerProps<T>): JSX.Element;
 ```
 <b>Import</b>
 
@@ -26,7 +26,7 @@ import { ValuePicker } from '@grafana/ui';
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  { label, icon, options, onChange, variant } | <code>ValuePickerProps&lt;T&gt;</code> |  |
+|  { label, icon, options, onChange, variant, size, isFullWidth, } | <code>ValuePickerProps&lt;T&gt;</code> |  |
 
 <b>Returns:</b>
 

docs/sources/packages_api/ui/verticalgroup.md

@@ -0,0 +1,24 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "VerticalGroup"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## VerticalGroup variable
+
+### VerticalGroup variable
+
+<b>Signature</b>
+
+```typescript
+VerticalGroup: React.FC<Omit<LayoutProps, 'orientation'>>
+```
+<b>Import</b>
+
+```typescript
+import { VerticalGroup } from '@grafana/ui';
+```

docs/sources/packages_api/ui/vizrepeater.md

@@ -39,6 +39,7 @@ import { VizRepeater } from '@grafana/ui';
 |  [componentDidUpdate(prevProps)](#componentdidupdate-method) |  |  |
 |  [getOrientation()](#getorientation-method) |  |  |
 |  [render()](#render-method) |  |  |
+|  [renderGrid()](#rendergrid-method) |  |  |
 
 ### constructor(props)
 
@@ -102,3 +103,14 @@ render(): JSX.Element;
 
 `JSX.Element`
 
+### renderGrid method
+
+<b>Signature</b>
+
+```typescript
+renderGrid(): JSX.Element;
+```
+<b>Returns:</b>
+
+`JSX.Element`
+

docs/sources/packages_api/ui/vizrepeaterrendervalueprops.md

@@ -0,0 +1,71 @@
++++
+# -----------------------------------------------------------------------
+# Do not edit this file. It is automatically generated by API Documenter.
+# -----------------------------------------------------------------------
+title = "VizRepeaterRenderValueProps"
+keywords = ["grafana","documentation","sdk","@grafana/ui"]
+type = "docs"
+draft = true
++++
+
+## VizRepeaterRenderValueProps interface
+
+<b>Signature</b>
+
+```typescript
+export interface VizRepeaterRenderValueProps<V, D = {}> 
+```
+<b>Import</b>
+
+```typescript
+import { VizRepeaterRenderValueProps } from '@grafana/ui';
+```
+<b>Properties</b>
+
+|  Property | Type | Description |
+|  --- | --- | --- |
+|  [alignmentFactors](#alignmentfactors-property) | <code>D</code> |  |
+|  [height](#height-property) | <code>number</code> |  |
+|  [orientation](#orientation-property) | <code>VizOrientation</code> |  |
+|  [value](#value-property) | <code>V</code> |  |
+|  [width](#width-property) | <code>number</code> |  |
+
+### alignmentFactors property
+
+<b>Signature</b>
+
+```typescript
+alignmentFactors: D;
+```
+
+### height property
+
+<b>Signature</b>
+
+```typescript
+height: number;
+```
+
+### orientation property
+
+<b>Signature</b>
+
+```typescript
+orientation: VizOrientation;
+```
+
+### value property
+
+<b>Signature</b>
+
+```typescript
+value: V;
+```
+
+### width property
+
+<b>Signature</b>
+
+```typescript
+width: number;
+```