@grafana/ui
Version:
Grafana Components Library
1,274 lines (1,208 loc) • 510 kB
TypeScript
/// <reference types="react" />
/// <reference types="lodash" />
/// <reference types="jquery" />
import * as _popperjs_core from '@popperjs/core';
import { Placement as Placement$1 } from '@popperjs/core';
import * as react_select from 'react-select';
import { NoticeProps, GroupBase, ActionMeta as ActionMeta$1, OptionsOrGroups, CommonProps as CommonProps$2, CSSObjectWithLabel, ContainerProps as ContainerProps$1 } from 'react-select';
import * as _grafana_data from '@grafana/data';
import { SelectableValue, GrafanaTheme, GrafanaTheme2, Field as Field$1, IconName, FieldType, LinkTarget, LinkModel, ThemeContext, FieldReducerInfo, TimeRange, TimeZone, DateTime, InternalTimeZones, VariableSuggestion, NavModelItem, DataFrame, FieldConfigSource, KeyValue, CSVConfig, DisplayValue, FieldSparkline, DisplayValueAlignmentFactors, DecimalCount, ThresholdsConfig, FieldColorMode, DataFrameFieldIndex, FieldConfig, DisplayProcessor, VizOrientation as VizOrientation$1, Dimensions, GraphSeriesValue, LoadingState, EventBus, DashboardCursorSync, CoreApp, AnnotationEventUIModel, DataLinkPostProcessor, GraphSeriesXY, ReduceDataOptions, PanelModel, ValueMapping, DataLink, FeatureState, DataSourceJsonData, DataSourceSettings, DataSourcePluginOptionsEditorProps, SliderMarks, RegistryItem, FieldMatcherInfo, Registry, ThemeTypographyVariantTypes, ThemeSpacingTokens, ThemeShape, ThemeShadows, RelativeTimeRange, FormattedValue, PluginSignatureStatus, DateTimeInput, Dimension, FlotDataPoint, FieldMatcher, DataHoverEvent, LegacyGraphHoverEvent, FieldConfigEditorBuilder, StandardEditorProps, PanelOptionsEditorBuilder, BootData } from '@grafana/data';
export { IconName, ThemeContext, toIconName } from '@grafana/data';
import * as React$1 from 'react';
import React__default, { Component, InputHTMLAttributes, ReactElement, AriaRole, CSSProperties, ReactNode, PureComponent, ChangeEvent, ButtonHTMLAttributes, HTMLAttributes, PropsWithChildren, RefCallback, HTMLProps, FC, ComponentType, ErrorInfo, MouseEvent as MouseEvent$1, AnchorHTMLAttributes, ElementType, FormEvent, DetailedHTMLProps } from 'react';
import { Placement, Side } from '@floating-ui/react';
import { Editor, Plugin, EventHook } from 'slate-react';
import { SchemaProperties, Document as Document$1, Value, Node, Mark } from 'slate';
import * as react_hook_form from 'react-hook-form';
import { FieldValues, UseFormReturn, FieldErrors, FieldArrayMethodProps, Mode, DefaultValues, SubmitHandler, UseFieldArrayProps } from 'react-hook-form';
export { FieldErrors as FormFieldErrors, SubmitHandler as FormsOnSubmit } from 'react-hook-form';
import { Row, IdType, CellProps, DefaultSortTypes, SortByFn, SortingRule, TableOptions } from 'react-table';
export { CellProps, SortByFn } from 'react-table';
export { ansicolor } from 'ansicolor';
import * as micro_memoize from 'micro-memoize';
import * as schema from '@grafana/schema';
import { VizTextDisplayOptions, PercentChangeColorMode, AxisPlacement, ScaleDistribution, ScaleOrientation, ScaleDirection, LineConfig, BarConfig, FillConfig, PointsConfig, GraphGradientMode, GraphDrawStyle, GraphThresholdsStyleConfig, VizOrientation, GraphFieldConfig, BarGaugeDisplayMode, BarGaugeValueMode, BarGaugeNamePlacement, TooltipDisplayMode, LegendPlacement, LineStyle, LegendDisplayMode, OptionsWithTextFormatting, LineInterpolation, BarAlignment, VisibilityMode, StackingMode, GraphThresholdsStyleMode, VizLegendOptions, DashboardCursorSync as DashboardCursorSync$1, SortOrder, AxisConfig, ScaleDistributionConfig, HideableFieldConfig, OptionsWithLegend, OptionsWithTooltip, StackingConfig } from '@grafana/schema';
export { AxisConfig, AxisPlacement, BarAlignment, BarConfig, BarGaugeDisplayMode, VisibilityMode as BarValueVisibility, GraphDrawStyle as DrawStyle, FieldTextAlignment, FillConfig, GraphFieldConfig, GraphGradientMode, GraphThresholdsStyleConfig, GraphThresholdsStyleMode, HideSeriesConfig, HideableFieldConfig, LegendDisplayMode, LegendPlacement, LineConfig, LineInterpolation, LineStyle, OptionsWithLegend, OptionsWithTextFormatting, OptionsWithTooltip, VisibilityMode as PointVisibility, PointsConfig, ScaleDirection, ScaleDistribution, ScaleDistributionConfig, ScaleOrientation, StackableFieldConfig, StackingConfig, StackingMode, TableAutoCellOptions, TableBarGaugeCellOptions, TableCellDisplayMode, TableColorTextCellOptions, TableColoredBackgroundCellOptions, TableImageCellOptions, TableJsonViewCellOptions, TableSparklineCellOptions, TooltipDisplayMode, VizLegendOptions, VizTextDisplayOptions, VizTooltipOptions } from '@grafana/schema';
import Prism from 'prismjs';
import * as _emotion_serialize from '@emotion/serialize';
import * as csstype from 'csstype';
import { Property } from 'csstype';
import { positionValues } from 'react-custom-scrollbars-2';
import { BaseOptionType } from 'rc-cascader';
import { EditorProps } from '@monaco-editor/react';
import * as monacoType from 'monaco-editor/esm/vs/editor/editor.api';
export { monacoType as monacoTypes };
import uPlot, { Options, AlignedData, Axis, Scale, Series, Hooks, Cursor, Select as Select$2, Band, Padding, Range } from 'uplot';
import { AsyncState } from 'react-use/lib/useAsync';
import { DropzoneOptions, Accept } from 'react-dropzone';
type Props$1h<T> = NoticeProps<SelectableValue<T>, boolean, GroupBase<SelectableValue<T>>>;
interface PopoverContentProps {
/**
* @deprecated
* This prop is deprecated and no longer has any effect as popper position updates automatically.
* It will be removed in a future release.
*/
updatePopperPosition?: () => void;
}
type PopoverContent = string | React.ReactElement | ((props: PopoverContentProps) => JSX.Element);
type TooltipPlacement = Placement | 'auto' | 'auto-start' | 'auto-end';
interface TooltipProps {
theme?: 'info' | 'error' | 'info-alt';
show?: boolean;
placement?: TooltipPlacement;
content: PopoverContent;
children: JSX.Element;
/**
* Set to true if you want the tooltip to stay long enough so the user can move mouse over content to select text or click a link
*/
interactive?: boolean;
}
declare const Tooltip: React__default.ForwardRefExoticComponent<TooltipProps & React__default.RefAttributes<HTMLElement>>;
type PopperControllerRenderProp = (showPopper: () => void, hidePopper: () => void, popperProps: {
show: boolean;
placement: Placement$1;
content: PopoverContent;
}) => JSX.Element;
interface Props$1g {
placement?: Placement$1;
content: PopoverContent;
className?: string;
children: PopperControllerRenderProp;
hideAfter?: number;
}
interface State$6 {
show: boolean;
}
declare class PopoverController extends Component<Props$1g, State$6> {
private hideTimeout;
state: {
show: boolean;
};
showPopper: () => void;
hidePopper: () => void;
render(): JSX.Element;
}
interface Props$1f extends InputHTMLAttributes<HTMLInputElement> {
label: string;
tooltip?: PopoverContent;
labelWidth?: number;
inputWidth?: number | null;
inputEl?: React__default.ReactNode;
/** Make tooltip interactive */
interactive?: boolean;
}
interface Props$1e extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onReset'> {
onReset: (event: React__default.SyntheticEvent<HTMLButtonElement>) => void;
isConfigured: boolean;
label?: string;
tooltip?: PopoverContent;
labelWidth?: number;
inputWidth?: number;
placeholder?: string;
interactive?: boolean;
}
interface Themeable {
theme: GrafanaTheme;
}
interface Themeable2 {
theme: GrafanaTheme2;
}
interface ValidationRule {
rule: (valueToValidate: string) => boolean;
errorMessage: string;
}
interface ValidationEvents {
[eventName: string]: ValidationRule[];
}
declare function getPreviousCousin(node: any, selector: string): any;
declare function getNextCharacter(global?: any): any;
declare const dom_d_getPreviousCousin: typeof getPreviousCousin;
declare const dom_d_getNextCharacter: typeof getNextCharacter;
declare namespace dom_d {
export {
dom_d_getPreviousCousin as getPreviousCousin,
dom_d_getNextCharacter as getNextCharacter,
};
}
/** Returns the ID value of the first, and only, child element */
declare function getChildId(children: ReactElement): string | undefined;
/**
* Given react node or function returns element accordingly
*
* @param itemToRender
* @param props props to be passed to the function if item provided as such
*/
declare function renderOrCallToRender<TProps = {}>(itemToRender: ((props: TProps) => React__default.ReactNode) | React__default.ReactNode, props?: TProps): React__default.ReactNode;
declare const reactUtils_d_getChildId: typeof getChildId;
declare const reactUtils_d_renderOrCallToRender: typeof renderOrCallToRender;
declare namespace reactUtils_d {
export {
reactUtils_d_getChildId as getChildId,
reactUtils_d_renderOrCallToRender as renderOrCallToRender,
};
}
/**
* @alpha
*/
declare const DEFAULT_ANNOTATION_COLOR = "rgba(0, 211, 255, 1)";
/**
* @alpha
*/
declare const OK_COLOR = "rgba(11, 237, 50, 1)";
/**
* @alpha
*/
declare const ALERTING_COLOR = "rgba(237, 46, 24, 1)";
/**
* @alpha
*/
declare const NO_DATA_COLOR = "rgba(150, 150, 150, 1)";
/**
* @alpha
*/
declare const PENDING_COLOR = "rgba(247, 149, 32, 1)";
/**
* @alpha
*/
declare const REGION_FILL_ALPHA = 0.09;
declare const colors: string[];
declare function getTextColorForBackground(color: string): "rgb(32, 34, 38)" | "rgb(247, 248, 250)";
declare function getTextColorForAlphaBackground(color: string, themeIsDark: boolean): "rgb(32, 34, 38)" | "rgb(247, 248, 250)";
declare let sortedColors: boolean[];
declare enum EventsWithValidation {
onBlur = "onBlur",
onFocus = "onFocus",
onChange = "onChange"
}
declare const validate: (value: string, validationRules: ValidationRule[]) => string[] | null;
declare const hasValidationEvent: (event: EventsWithValidation, validationEvents: ValidationEvents | undefined) => ValidationRule[] | undefined;
declare const regexValidation: (pattern: string | RegExp, errorMessage?: string) => ValidationRule;
declare const SCHEMA: SchemaProperties;
declare const makeFragment: (text: string, syntax?: string) => Document$1;
declare const makeValue: (text: string, syntax?: string) => Value;
type ComponentSize = 'xs' | 'sm' | 'md' | 'lg';
type IconType = 'mono' | 'default' | 'solid';
type IconSize = ComponentSize | 'xl' | 'xxl' | 'xxxl';
declare const isIconSize: (value: string) => value is IconSize;
declare const getAvailableIcons: () => string[];
/**
* Get the icon for a given field
*/
declare function getFieldTypeIcon(field?: Field$1): IconName;
/** Get an icon for a given field type */
declare function getFieldTypeIconName(type?: FieldType): IconName;
/** @internal */
type MenuItemElement = HTMLAnchorElement & HTMLButtonElement & HTMLDivElement;
/** @internal */
interface MenuItemProps<T = unknown> {
/** Label of the menu item */
label: string;
/** Description of item */
description?: string;
/** Aria label for accessibility support */
ariaLabel?: string;
/** Aria checked for accessibility support */
ariaChecked?: boolean;
/** Target of the menu item (i.e. new window) */
target?: LinkTarget;
/** Icon of the menu item */
icon?: IconName;
/** Role of the menu item */
role?: AriaRole;
/** Url of the menu item */
url?: string;
/** Handler for the click behaviour */
onClick?: (event: React__default.MouseEvent<HTMLElement>, payload?: T) => void;
/** Custom MenuItem styles*/
className?: string;
/** Active */
active?: boolean;
/** Disabled */
disabled?: boolean;
/** Show in destructive style (error color) */
destructive?: boolean;
tabIndex?: number;
/** List of menu items for the subMenu */
childItems?: Array<ReactElement<MenuItemProps>>;
/** Custom style for SubMenu */
customSubMenuContainerStyles?: CSSProperties;
/** Shortcut key combination */
shortcut?: string;
/** Test id for e2e tests and fullstory*/
testId?: string;
component?: React__default.ComponentType;
}
/** @internal */
declare const MenuItem: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<MenuItemProps<unknown> & React__default.RefAttributes<MenuItemElement>>>;
/**
* Delays creating links until we need to open the ContextMenu
*/
declare const linkModelToContextMenuItems: (links: () => LinkModel[]) => MenuItemProps[];
declare const isCompactUrl: (url: string) => boolean;
declare function getTagColorIndexFromName(name?: string): number;
/**
* Returns tag badge background and border colors based on hashed tag name.
* @param name tag name
*/
declare function getTagColorsFromName(name?: string): {
color: string;
borderColor: string;
};
declare function getTagColor(index: number): {
color: string;
borderColor: string;
};
declare function getScrollbarWidth(): number;
/**
* @internal
*/
declare const getCellLinks: (field: Field$1, row: Row) => LinkModel<unknown>[] | undefined;
/**
* @internal
*/
declare function getCanvasContext(): CanvasRenderingContext2D;
/**
* @beta
*/
declare function measureText(text: string, fontSize: number, fontWeight?: number): TextMetrics;
/**
* @beta
*/
declare function calculateFontSize(text: string, width: number, height: number, lineHeight: number, maxSize?: number, fontWeight?: number): number;
/** @internal */
declare function useForceUpdate(): () => void;
/**
* List of auto-complete search function used by SuggestionsPlugin.handleTypeahead()
* @alpha
*/
declare enum SearchFunctionType {
Word = "Word",
Prefix = "Prefix",
Fuzzy = "Fuzzy"
}
/**
* @internal
*/
interface Logger {
logger: (...t: any[]) => void;
enable: () => void;
disable: () => void;
isEnabled: () => boolean;
}
/** @internal */
declare const createLogger: (name: string) => Logger;
/**
* Allows debug helpers attachement to the window object
* @internal
*/
declare function attachDebugger(key: string, thebugger?: any, logger?: Logger): void;
/**
* @deprecated use it from @grafana/data. Kept here for backward compatibility.
*/
declare enum NodeGraphDataFrameFieldNames {
id = "id",
title = "title",
subTitle = "subTitle",
mainStat = "mainStat",
secondaryStat = "secondaryStat",
source = "source",
target = "target",
detail = "detail__",
arc = "arc__",
color = "color"
}
type FuzzyMatch = {
/**
* Total number of unmatched letters between matched letters
*/
distance: number;
ranges: HighlightPart[];
found: boolean;
};
/**
* Attempts to do a partial input search, e.g. allowing to search for a text (needle)
* in another text (stack) by skipping some letters in-between. All letters from
* the needle must exist in the stack in the same order to find a match.
*
* The search is case sensitive. Convert stack and needle to lower case
* to make it case insensitive.
*
* @param stack - main text to be searched
* @param needle - partial text to find in the stack
*
* @internal
*/
declare function fuzzyMatch(stack: string, needle: string): FuzzyMatch;
/**
* @internal
*/
type SearchFunction = (items: CompletionItem[], prefix: string) => CompletionItem[];
interface CompletionItemGroup {
/**
* Label that will be displayed for all entries of this group.
*/
label: string;
/**
* List of suggestions of this group.
*/
items: CompletionItem[];
/**
* If true, match only by prefix (and not mid-word).
* @deprecated use searchFunctionType instead
*/
prefixMatch?: boolean;
/**
* Function type used to create auto-complete list
* @alpha
*/
searchFunctionType?: SearchFunctionType;
/**
* If true, do not filter items in this group based on the search.
*/
skipFilter?: boolean;
/**
* If true, do not sort items.
*/
skipSort?: boolean;
}
declare enum CompletionItemKind {
GroupTitle = "GroupTitle"
}
/**
* @internal
*/
type HighlightPart = {
start: number;
end: number;
};
interface CompletionItem {
/**
* The label of this completion item. By default
* this is also the text that is inserted when selecting
* this completion.
*/
label: string;
/**
* The kind of this completion item. An icon is chosen
* by the editor based on the kind.
*/
kind?: CompletionItemKind | string;
/**
* A human-readable string with additional information
* about this item, like type or symbol information.
*/
detail?: string;
/**
* A human-readable string, can be Markdown, that represents a doc-comment.
*/
documentation?: string;
/**
* A string that should be used when comparing this item
* with other items. When `falsy` the `label` is used.
* @deprecated use sortValue instead
*/
sortText?: string;
/**
* A string or number that should be used when comparing this
* item with other items. When `undefined` then `label` is used.
* @alpha
*/
sortValue?: string | number;
/**
* Parts of the label to be highlighted
* @internal
*/
highlightParts?: HighlightPart[];
/**
* A string that should be used when filtering a set of
* completion items. When `falsy` the `label` is used.
*/
filterText?: string;
/**
* A string or snippet that should be inserted in a document when selecting
* this completion. When `falsy` the `label` is used.
*/
insertText?: string;
/**
* Delete number of characters before the caret position,
* by default the letters from the beginning of the word.
*/
deleteBackwards?: number;
/**
* Number of steps to move after the insertion, can be negative.
*/
move?: number;
}
interface TypeaheadOutput {
context?: string;
suggestions: CompletionItemGroup[];
}
interface TypeaheadInput {
text: string;
prefix: string;
wrapperClasses: string[];
labelKey?: string;
value?: Value;
editor?: Editor;
}
interface SuggestionsState {
groupedItems: CompletionItemGroup[];
typeaheadPrefix: string;
typeaheadContext: string;
typeaheadText: string;
}
/**
* @deprecated use the types from react-hook-form instead
*/
type FormAPI<T extends FieldValues> = Omit<UseFormReturn<T>, 'handleSubmit'> & {
errors: FieldErrors<T>;
};
type FieldArrayValue = Partial<FieldValues> | Array<Partial<FieldValues>>;
/**
* @deprecated use the types from react-hook-form instead
*/
interface FieldArrayApi {
fields: Array<Record<string, any>>;
append: (value: FieldArrayValue, options?: FieldArrayMethodProps) => void;
prepend: (value: FieldArrayValue) => void;
remove: (index?: number | number[]) => void;
swap: (indexA: number, indexB: number) => void;
move: (from: number, to: number) => void;
insert: (index: number, value: FieldArrayValue) => void;
}
type SelectValue<T> = T | SelectableValue<T> | T[] | Array<SelectableValue<T>>;
type ActionMeta = ActionMeta$1<{}>;
type InputActionMeta = {
action: 'set-value' | 'input-change' | 'input-blur' | 'menu-close';
};
type LoadOptionsCallback<T> = (options: Array<SelectableValue<T>>) => void;
interface SelectCommonProps<T> {
/** Aria label applied to the input field */
['aria-label']?: string;
['data-testid']?: string;
allowCreateWhileLoading?: boolean;
allowCustomValue?: boolean;
/** Focus is set to the Select when rendered*/
autoFocus?: boolean;
backspaceRemovesValue?: boolean;
blurInputOnSelect?: boolean;
captureMenuScroll?: boolean;
className?: string;
closeMenuOnSelect?: boolean;
/** Used for custom components. For more information, see `react-select` */
components?: any;
/** Sets the position of the createOption element in your options list. Defaults to 'last' */
createOptionPosition?: 'first' | 'last';
defaultValue?: any;
disabled?: boolean;
filterOption?: (option: SelectableValue<T>, searchQuery: string) => boolean;
formatOptionLabel?: (item: SelectableValue<T>, formatOptionMeta: FormatOptionLabelMeta<T>) => React__default.ReactNode;
/** Function for formatting the text that is displayed when creating a new value*/
formatCreateLabel?: (input: string) => React__default.ReactNode;
getOptionLabel?: (item: SelectableValue<T>) => React__default.ReactNode;
getOptionValue?: (item: SelectableValue<T>) => T | undefined;
hideSelectedOptions?: boolean;
inputValue?: string;
invalid?: boolean;
isClearable?: boolean;
/** The id to set on the SelectContainer component. To set the id for a label (with htmlFor), @see inputId instead */
id?: string;
isLoading?: boolean;
isMulti?: boolean;
/** The id of the search input. Use this to set a matching label with htmlFor */
inputId?: string;
isOpen?: boolean;
/** Disables the possibility to type into the input*/
isSearchable?: boolean;
showAllSelectedWhenOpen?: boolean;
maxMenuHeight?: number;
minMenuHeight?: number;
maxVisibleValues?: number;
menuPlacement?: 'auto' | 'bottom' | 'top';
menuPosition?: 'fixed' | 'absolute';
/**
* Setting to false will prevent the menu from portalling to the body.
*/
menuShouldPortal?: boolean;
/** The message to display when no options could be found */
noOptionsMessage?: string;
onBlur?: () => void;
onChange: (value: SelectableValue<T>, actionMeta: ActionMeta) => {} | void;
onCloseMenu?: () => void;
/** allowCustomValue must be enabled. Function decides what to do with that custom value. */
onCreateOption?: (value: string) => void;
onInputChange?: (value: string, actionMeta: InputActionMeta) => void;
onKeyDown?: (event: React__default.KeyboardEvent) => void;
/** Callback which fires when the user scrolls to the bottom of the menu */
onMenuScrollToBottom?: (event: WheelEvent | TouchEvent) => void;
/** Callback which fires when the user scrolls to the top of the menu */
onMenuScrollToTop?: (event: WheelEvent | TouchEvent) => void;
onOpenMenu?: () => void;
onFocus?: () => void;
openMenuOnFocus?: boolean;
options?: Array<SelectableValue<T>>;
placeholder?: string;
/** item to be rendered in front of the input */
prefix?: JSX.Element | string | null;
/** Use a custom element to control Select. A proper ref to the renderControl is needed if 'portal' isn't set to null*/
renderControl?: ControlComponent<T>;
tabSelectsValue?: boolean;
value?: T | SelectValue<T> | null;
/** Will wrap the MenuList in a react-window FixedSizeVirtualList for improved performance, does not support options with "description" properties */
virtualized?: boolean;
/** Sets the width to a multiple of 8px. Should only be used with inline forms. Setting width of the container is preferred in other cases.*/
width?: number | 'auto';
isOptionDisabled?: (option: SelectableValue<T>) => boolean;
/** allowCustomValue must be enabled. Determines whether the "create new" option should be displayed based on the current input value, select value and options array. */
isValidNewOption?: (inputValue: string, value: SelectableValue<T> | null, options: OptionsOrGroups<SelectableValue<T>, GroupBase<SelectableValue<T>>>) => boolean;
/** Message to display isLoading=true*/
loadingMessage?: string;
/** Disables wrapping of multi value values when closed */
noMultiValueWrap?: boolean;
}
interface SelectAsyncProps<T> {
/** When specified as boolean the loadOptions will execute when component is mounted */
defaultOptions?: boolean | Array<SelectableValue<T>>;
/** Asynchronously load select options */
loadOptions?: (query: string, cb?: LoadOptionsCallback<T>) => Promise<Array<SelectableValue<T>>> | void;
/** If cacheOptions is true, then the loaded data will be cached. The cache will remain until cacheOptions changes value. */
cacheOptions?: boolean;
/** Message to display when options are loading */
loadingMessage?: string;
}
/** The VirtualizedSelect component uses a slightly different SelectableValue, description and other props are not supported */
interface VirtualizedSelectProps<T> extends Omit<SelectCommonProps<T>, 'virtualized'> {
options?: Array<Pick<SelectableValue<T>, 'label' | 'value'>>;
}
/** The AsyncVirtualizedSelect component uses a slightly different SelectableValue, description and other props are not supported */
interface VirtualizedSelectAsyncProps<T> extends Omit<SelectCommonProps<T>, 'virtualized'>, SelectAsyncProps<T> {
}
interface MultiSelectCommonProps<T> extends Omit<SelectCommonProps<T>, 'onChange' | 'isMulti' | 'value'> {
value?: Array<SelectableValue<T>> | T[];
onChange: (item: Array<SelectableValue<T>>, actionMeta: ActionMeta) => {} | void;
}
interface SelectBaseProps<T> extends SelectCommonProps<T>, SelectAsyncProps<T> {
invalid?: boolean;
}
interface CustomControlProps<T> {
ref: React__default.Ref<any>;
isOpen: boolean;
/** Currently selected value */
value?: SelectableValue<T>;
/** onClick will be automatically passed to custom control allowing menu toggle */
onClick: () => void;
/** onBlur will be automatically passed to custom control closing the menu on element blur */
onBlur: () => void;
disabled: boolean;
invalid: boolean;
}
type ControlComponent<T> = React__default.ComponentType<CustomControlProps<T>>;
interface SelectableOptGroup<T = any> {
label: string;
options: Array<SelectableValue<T>>;
[key: string]: any;
}
type SelectOptions<T = any> = SelectableValue<T> | Array<SelectableValue<T> | SelectableOptGroup<T> | Array<SelectableOptGroup<T>>>;
type FormatOptionLabelMeta<T> = {
context: string;
inputValue: string;
selectValue: Array<SelectableValue<T>>;
};
type ReactSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = CommonProps$2<Option, IsMulti, Group>['selectProps'] & {
invalid: boolean;
};
interface CustomComponentProps<Option, isMulti extends boolean, Group extends GroupBase<Option>> {
selectProps: ReactSelectProps<Option, isMulti, Group>;
}
interface Column<TableData extends object> {
/**
* ID of the column. Must be unique among all other columns
*/
id: IdType<TableData>;
/**
* Custom render function for te cell
*/
cell?: (props: CellProps<TableData>) => ReactNode;
/**
* Header name. if `undefined` the header will be empty. Useful for action columns.
*/
header?: string;
/**
* Column sort type. If `undefined` the column will not be sortable.
* */
sortType?: DefaultSortTypes | SortByFn<TableData>;
/**
* If `true` prevents the column from growing more than its content.
*/
disableGrow?: boolean;
/**
* If the provided function returns `false` the column will be hidden.
*/
visible?: (data: TableData[]) => boolean;
}
/** @deprecated Please use the `Input` component, which does not require this enum. */
declare enum LegacyInputStatus {
Invalid = "invalid",
Valid = "valid"
}
interface Props$1d extends React__default.HTMLProps<HTMLInputElement> {
validationEvents?: ValidationEvents;
hideErrorMessage?: boolean;
inputRef?: React__default.LegacyRef<HTMLInputElement>;
onBlur?: (event: React__default.FocusEvent<HTMLInputElement>, status?: LegacyInputStatus) => void;
onFocus?: (event: React__default.FocusEvent<HTMLInputElement>, status?: LegacyInputStatus) => void;
onChange?: (event: React__default.ChangeEvent<HTMLInputElement>, status?: LegacyInputStatus) => void;
}
interface State$5 {
error: string | null;
}
/** @deprecated Please use the `Input` component. {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-input--simple See Storybook for example.} */
declare class Input$1 extends PureComponent<Props$1d, State$5> {
static defaultProps: {
className: string;
};
state: State$5;
get status(): LegacyInputStatus;
get isInvalid(): boolean;
validatorAsync: (validationRules: ValidationRule[]) => (evt: ChangeEvent<HTMLInputElement>) => void;
populateEventPropsWithStatus: (restProps: any, validationEvents: ValidationEvents | undefined) => any;
render(): React__default.JSX.Element;
}
/**
* Changes in new selects:
* - noOptionsMessage & loadingMessage is of string type
* - isDisabled is renamed to disabled
*/
type LegacyCommonProps<T> = Omit<SelectCommonProps<T>, 'noOptionsMessage' | 'disabled' | 'value' | 'loadingMessage'>;
interface AsyncProps<T> extends LegacyCommonProps<T>, Omit<SelectAsyncProps<T>, 'loadingMessage'> {
loadingMessage?: () => string;
noOptionsMessage?: () => string;
tooltipContent?: PopoverContent;
isDisabled?: boolean;
value?: SelectableValue<T>;
}
interface LegacySelectProps<T> extends LegacyCommonProps<T> {
tooltipContent?: PopoverContent;
noOptionsMessage?: () => string;
isDisabled?: boolean;
value?: SelectableValue<T>;
}
/** @deprecated Please use the `Select` component, as seen {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-select--basic in Storybook}. */
declare class Select$1<T> extends PureComponent<LegacySelectProps<T>> {
context: React__default.ContextType<typeof ThemeContext>;
static contextType: React__default.Context<_grafana_data.GrafanaTheme2>;
static defaultProps: Partial<LegacySelectProps<unknown>>;
render(): React__default.JSX.Element;
}
/** @deprecated Please use the `Select` component with async functionality, as seen {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-select--basic-select-async in Storybook}. */
declare class AsyncSelect$1<T> extends PureComponent<AsyncProps<T>> {
static contextType: React__default.Context<_grafana_data.GrafanaTheme2>;
static defaultProps: Partial<AsyncProps<unknown>>;
render(): React__default.JSX.Element;
}
interface IconProps extends Omit<React__default.SVGProps<SVGElement>, 'onLoad' | 'onError' | 'ref'> {
name: IconName;
size?: IconSize;
type?: IconType;
/**
* Give your icon a semantic meaning. The icon will be hidden from screen readers, unless this prop or an aria-label is provided.
*/
title?: string;
}
declare const Icon: React__default.ForwardRefExoticComponent<IconProps & React__default.RefAttributes<SVGElement>>;
type IconButtonVariant = 'primary' | 'secondary' | 'destructive';
interface BaseProps$2 extends Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label'> {
/** Name of the icon **/
name: IconName;
/** Icon size - sizes xxl and xxxl are deprecated and when used being decreased to xl*/
size?: IconSize;
/** Type of the icon - mono or default */
iconType?: IconType;
/** Variant to change the color of the Icon */
variant?: IconButtonVariant;
}
interface BasePropsWithTooltip extends BaseProps$2 {
/** Tooltip content to display on hover and as the aria-label */
tooltip: PopoverContent;
/** Position of the tooltip */
tooltipPlacement?: TooltipPlacement;
}
interface BasePropsWithAriaLabel extends BaseProps$2 {
/** @deprecated use aria-label instead*/
ariaLabel?: string;
/** Text available only for screen readers. No tooltip will be set in this case. */
['aria-label']: string;
}
type Props$1c = BasePropsWithTooltip | BasePropsWithAriaLabel;
declare const IconButton: React__default.ForwardRefExoticComponent<Props$1c & React__default.RefAttributes<HTMLButtonElement>>;
type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'success';
type ButtonFill = 'solid' | 'outline' | 'text';
type CommonProps$1 = {
size?: ComponentSize;
variant?: ButtonVariant;
fill?: ButtonFill;
icon?: IconName | React__default.ReactElement;
className?: string;
children?: React__default.ReactNode;
fullWidth?: boolean;
type?: string;
/** Tooltip content to display on hover */
tooltip?: PopoverContent;
/** Position of the tooltip */
tooltipPlacement?: TooltipPlacement;
};
type ButtonProps = CommonProps$1 & ButtonHTMLAttributes<HTMLButtonElement>;
declare const Button: React__default.ForwardRefExoticComponent<CommonProps$1 & React__default.ButtonHTMLAttributes<HTMLButtonElement> & React__default.RefAttributes<HTMLButtonElement>>;
declare const LinkButton: React__default.ForwardRefExoticComponent<CommonProps$1 & React__default.ButtonHTMLAttributes<HTMLButtonElement> & React__default.AnchorHTMLAttributes<HTMLAnchorElement> & React__default.RefAttributes<HTMLAnchorElement>>;
declare const clearButtonStyles: (theme: GrafanaTheme2) => string;
interface Props$1b extends HTMLAttributes<HTMLDivElement> {
className?: string;
}
declare const ButtonGroup: React__default.ForwardRefExoticComponent<Props$1b & React__default.RefAttributes<HTMLDivElement>>;
interface Props$1a {
/** Confirm action callback */
onConfirm(): void;
children: string | ReactElement;
/** Custom button styles */
className?: string;
/** Button size */
size?: ComponentSize;
/** Text for the Confirm button */
confirmText?: string;
/** Disable button click action */
disabled?: boolean;
/** Variant of the Confirm button */
confirmVariant?: ButtonVariant;
/** Hide confirm actions when after of them is clicked */
closeOnConfirm?: boolean;
/** Optional on click handler for the original button */
onClick?(): void;
/** Callback for the cancel action */
onCancel?(): void;
}
declare const ConfirmButton: {
({ children, className, closeOnConfirm, confirmText, confirmVariant, disabled, onCancel, onClick, onConfirm, size, }: Props$1a): React__default.JSX.Element;
displayName: string;
};
interface Props$19 {
/** Confirm action callback */
onConfirm(): void;
/** Button size */
size?: ComponentSize;
/** Disable button click action */
disabled?: boolean;
'aria-label'?: string;
/** Close after delete button is clicked */
closeOnConfirm?: boolean;
}
declare const DeleteButton: ({ size, disabled, onConfirm, "aria-label": ariaLabel, closeOnConfirm }: Props$19) => React__default.JSX.Element;
interface Props$18 extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'content'> {
show: boolean;
placement?: TooltipPlacement;
content: PopoverContent;
referenceElement: HTMLElement;
wrapperClassName?: string;
renderArrow?: boolean;
}
declare function Popover({ content, show, placement, className, wrapperClassName, referenceElement, renderArrow, ...rest }: Props$18): React__default.JSX.Element | undefined;
interface ToggletipContentProps {
/**
* @deprecated
* This prop is deprecated and no longer has any effect as popper position updates automatically.
* It will be removed in a future release.
*/
update?: () => void;
}
type ToggletipContent = string | React.ReactElement | ((props: ToggletipContentProps) => JSX.Element);
interface ToggletipProps {
/** The theme used to display the toggletip */
theme?: 'info' | 'error';
/** The title to be displayed on the header */
title?: JSX.Element | string;
/** determine whether to show or not the close button **/
closeButton?: boolean;
/** Callback function to be called when the toggletip is closed */
onClose?: () => void;
/** The preferred placement of the toggletip */
placement?: Placement$1;
/** The text or component that houses the content of the toggleltip */
content: ToggletipContent;
/** The text or component to be displayed on the toggletip's bottom */
footer?: JSX.Element | string;
/** The UI control users interact with to display toggletips */
children: JSX.Element;
/** Determine whether the toggletip should fit its content or not */
fitContent?: boolean;
/** Determine whether the toggletip should be shown or not */
show?: boolean;
/** Callback function to be called when the toggletip is opened */
onOpen?: () => void;
}
declare const Toggletip: React__default.MemoExoticComponent<({ children, theme, placement, content, title, closeButton, onClose, footer, fitContent, onOpen, show, }: ToggletipProps) => React__default.JSX.Element>;
interface Props$17 {
className?: string;
root?: HTMLElement;
forwardedRef?: React__default.ForwardedRef<HTMLDivElement>;
}
declare function Portal(props: PropsWithChildren<Props$17>): React__default.ReactPortal;
/** @internal */
declare function getPortalContainer(): HTMLElement;
/** @internal */
declare function PortalContainer(): React__default.JSX.Element;
type ScrollbarPosition = positionValues;
interface Props$16 {
className?: string;
testId?: string;
autoHide?: boolean;
autoHideTimeout?: number;
autoHeightMax?: string;
hideTracksWhenNotNeeded?: boolean;
hideHorizontalTrack?: boolean;
hideVerticalTrack?: boolean;
scrollRefCallback?: RefCallback<HTMLDivElement>;
scrollTop?: number;
setScrollTop?: (position: ScrollbarPosition) => void;
showScrollIndicators?: boolean;
autoHeightMin?: number | string;
updateAfterMountMs?: number;
onScroll?: React__default.UIEventHandler;
divId?: string;
}
/**
* Wraps component into <Scrollbars> component from `react-custom-scrollbars`
*/
declare const CustomScrollbar: ({ autoHide, autoHideTimeout, setScrollTop, className, testId, autoHeightMin, autoHeightMax, hideTracksWhenNotNeeded, hideHorizontalTrack, hideVerticalTrack, scrollRefCallback, showScrollIndicators, updateAfterMountMs, scrollTop, onScroll, children, divId, }: React__default.PropsWithChildren<Props$16>) => React__default.JSX.Element;
interface TabConfig {
label: string;
value: string;
content: React__default.ReactNode;
icon: IconName;
}
interface TabbedContainerProps {
tabs: TabConfig[];
defaultTab?: string;
closeIconTooltip?: string;
onClose: () => void;
testId?: string;
}
declare function TabbedContainer({ tabs, defaultTab, closeIconTooltip, onClose, testId }: TabbedContainerProps): React__default.JSX.Element;
interface Props$15 extends ButtonProps {
/** A function that returns text to be copied */
getText(): string;
/** Callback when the text has been successfully copied */
onClipboardCopy?(copiedText: string): void;
/** Callback when there was an error copying the text */
onClipboardError?(copiedText: string, error: unknown): void;
}
declare function ClipboardButton({ onClipboardCopy, onClipboardError, children, getText, icon, variant, ...buttonProps }: Props$15): React__default.JSX.Element;
interface CascaderOption {
/**
* The value used under the hood
*/
value: string;
/**
* The label to display in the UI
*/
label: string;
/** Items will be just flattened into the main list of items recursively. */
items?: CascaderOption[];
disabled?: boolean;
/** Avoid using */
title?: string;
/** Children will be shown in a submenu. Use 'items' instead, as 'children' exist to ensure backwards compatibility.*/
children?: CascaderOption[];
}
declare const Cascader: React__default.FunctionComponent<{
width?: number | undefined;
options: CascaderOption[];
id?: string | undefined;
disabled?: boolean | undefined;
onBlur?: (() => void) | undefined;
onSelect: (val: string) => void;
separator?: string | undefined;
placeholder?: string | undefined;
autoFocus?: boolean | undefined;
allowCustomValue?: boolean | undefined;
formatCreateLabel?: ((val: string) => string) | undefined;
isClearable?: boolean | undefined;
changeOnSelect?: boolean | undefined;
initialValue?: string | undefined;
displayAllSelectedLevels?: boolean | undefined;
alwaysOpen?: boolean | undefined;
hideActiveLevelLabel?: boolean | undefined;
}>;
interface ButtonCascaderProps {
options: CascaderOption[];
children?: string;
icon?: IconName;
disabled?: boolean;
value?: string[];
fieldNames?: {
label: keyof BaseOptionType;
value: keyof BaseOptionType;
children: keyof BaseOptionType;
};
loadData?: (selectedOptions: CascaderOption[]) => void;
onChange?: (value: string[], selectedOptions: CascaderOption[]) => void;
onPopupVisibleChange?: (visible: boolean) => void;
className?: string;
variant?: ButtonProps['variant'];
buttonProps?: ButtonProps;
hideDownIcon?: boolean;
}
declare const ButtonCascader: {
(props: ButtonCascaderProps): React__default.JSX.Element;
displayName: string;
};
interface InlineToastProps {
children: React__default.ReactNode;
suffixIcon?: IconName;
referenceElement: HTMLElement | null;
placement: Side;
/**
* @deprecated
* Placement to use if there is not enough space to show the full toast with the original placement
* This is now done automatically.
*/
alternativePlacement?: Side;
}
declare function InlineToast({ referenceElement, children, suffixIcon, placement }: InlineToastProps): React__default.JSX.Element;
/**
* @public
*/
interface LoadingPlaceholderProps extends HTMLAttributes<HTMLDivElement> {
text: React__default.ReactNode;
}
/**
* @public
*/
declare const LoadingPlaceholder: ({ text, className, ...rest }: LoadingPlaceholderProps) => React__default.JSX.Element;
interface LoadingBarProps {
width: number;
delay?: number;
ariaLabel?: string;
}
declare function LoadingBar({ width, delay, ariaLabel }: LoadingBarProps): React__default.JSX.Element;
type ColorPickerChangeHandler = (color: string) => void;
interface ColorPickerProps extends Themeable2 {
color: string;
onChange: ColorPickerChangeHandler;
enableNamedColors?: boolean;
}
/**
* If you need custom trigger for the color picker you can do that with a render prop pattern and supply a function
* as a child. You will get show/hide function which you can map to desired interaction (like onClick or onMouseLeave)
* and a ref which needs to be passed to an HTMLElement for correct positioning. If you want to use class or functional
* component as a custom trigger you will need to forward the reference to first HTMLElement child.
*/
type ColorPickerTriggerRenderer = (props: {
ref: React__default.RefObject<any>;
showColorPicker: () => void;
hideColorPicker: () => void;
}) => React__default.ReactNode;
declare const ColorPicker: React__default.FunctionComponent<{
color: string;
onChange: ColorPickerChangeHandler;
children?: ColorPickerTriggerRenderer | undefined;
enableNamedColors?: boolean | undefined;
}>;
declare const SeriesColorPicker: React__default.FunctionComponent<{
color: string;
onChange: ColorPickerChangeHandler;
children?: ColorPickerTriggerRenderer | undefined;
enableNamedColors?: boolean | undefined;
updatePopperPosition?: (() => void) | undefined;
yaxis?: number | undefined;
onToggleAxis?: (() => void) | undefined;
}>;
interface Props$14 extends Omit<HTMLProps<HTMLInputElement>, 'prefix' | 'size'> {
/** Sets the width to a multiple of 8px. Should only be used with inline forms. Setting width of the container is preferred in other cases.*/
width?: number;
/** Show an invalid state around the input */
invalid?: boolean;
/** Show an icon as a prefix in the input */
prefix?: ReactNode;
/** Show an icon as a suffix in the input */
suffix?: ReactNode;
/** Show a loading indicator as a suffix in the input */
loading?: boolean;
/** Add a component as an addon before the input */
addonBefore?: ReactNode;
/** Add a component as an addon after the input */
addonAfter?: ReactNode;
}
interface StyleDeps {
theme: GrafanaTheme2;
invalid?: boolean;
width?: number;
}
declare const Input: React__default.ForwardRefExoticComponent<Omit<Props$14, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
declare const getInputStyles: micro_memoize.Memoized<({ theme, invalid, width }: StyleDeps) => {
wrapper: string;
inputWrapper: string;
input: string;
inputDisabled: string;
addon: string;
prefix: string;
suffix: string;
loadingIndicator: string;
}>;
interface ColorPickerInputProps extends Omit<Props$14, 'value' | 'onChange'> {
value?: string;
onChange: (color: string) => void;
/** Format for returning the color in onChange callback, defaults to 'rgb' */
returnColorAs?: 'rgb' | 'hex';
}
declare const ColorPickerInput: React__default.ForwardRefExoticComponent<Omit<ColorPickerInputProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
interface SeriesColorPickerPopoverProps extends ColorPickerProps, PopoverContentProps {
yaxis?: number;
onToggleAxis?: () => void;
}
declare const SeriesColorPickerPopover: (props: SeriesColorPickerPopoverProps) => React__default.JSX.Element;
declare const SeriesColorPickerPopoverWithTheme: React__default.FunctionComponent<{
color: string;
onChange: ColorPickerChangeHandler;
enableNamedColors?: boolean | undefined;
updatePopperPosition?: (() => void) | undefined;
yaxis?: number | undefined;
onToggleAxis?: (() => void) | undefined;
}>;
interface Props$13 {
children: JSX.Element | string;
}
declare const EmptySearchResult: ({ children }: Props$13) => React__default.JSX.Element;
interface Props$12 {
/**
* Provide a button to render below the message
*/
button?: ReactNode;
hideImage?: boolean;
/**
* Override the default image for the variant
*/
image?: ReactNode;
/**
* Message to display to the user
*/
message: string;
/**
* Which variant to use. Affects the default image shown.
*/
variant: 'call-to-action' | 'not-found' | 'completed';
/**
* Use to set `alert` when needed. See documentation for the use case
*/
role?: AriaRole;
}
declare const EmptyState: ({ button, children, image, message, hideImage, variant, role, }: React__default.PropsWithChildren<Props$12>) => React__default.JSX.Element;
interface UnitPickerProps {
onChange: (item?: string) => void;
value?: string;
width?: number;
}
declare class UnitPicker extends PureComponent<UnitPickerProps> {
onChange: (value: SelectableValue<string>) => void;
render(): React__default.JSX.Element;
}
interface Props$11 {
placeholder?: string;
onChange: (stats: string[]) => void;
stats: string[];
allowMultiple?: boolean;
defaultStat?: string;
className?: string;
width?: number;
menuPlacement?: 'auto' | 'bottom' | 'top';
inputId?: string;
filterOptions?: (ext: FieldReducerInfo) => boolean;
}
declare class StatsPicker extends PureComponent<Props$11> {
static defaultProps: Partial<Props$11>;
componentDidMount(): void;
componentDidUpdate(prevProps: Props$11): void;
checkInput: () => void;
onSelectionChange: (item: SelectableValue<string>) => void;
render(): React__default.JSX.Element;
}
type CommonProps = {
/** Icon name */
icon?: IconName | React__default.ReactNode;
/** Icon size */
iconSize?: IconSize;
/** Tooltip */
tooltip?: string;
/** For image icons */
imgSrc?: string;
/** Alt text for imgSrc */
imgAlt?: string;
/** if true or false will show angle-down/up */
isOpen?: boolean;
/** Controls flex-grow: 1 */
fullWidth?: boolean;
/** reduces padding to xs */
narrow?: boolean;
/** variant */
variant?: ToolbarButtonVariant;
/** Hide any children and only show icon */
iconOnly?: boolean;
/** Show highlight dot */
isHighlighted?: boolean;
};
type ToolbarButtonVariant = 'default' | 'primary' | 'destructive' | 'active' | 'canvas';
declare const ToolbarButton: React__default.ForwardRefExoticComponent<CommonProps & React__default.ButtonHTMLAttributes<HTMLButtonElement> & React__default.RefAttributes<HTMLButtonElement>>;
interface Props$10 extends HTMLAttributes<HTMLDivElement> {
className?: string;
/** Determine flex-alignment of child buttons. Needed for overflow behaviour. */
alignment?: 'left' | 'right';
}
declare const ToolbarButtonRow: React__default.ForwardRefExoticComponent<Props$10 & React__default.RefAttributes<HTMLDivElement>>;
declare const defaultIntervals: string[];
interface Props$$ {
intervals?: string[];
onRefresh?: () => void;
onIntervalChanged: (interval: string) => void;
value?: string;
tooltip?: string;
isLoading?: boolean;
isLive?: boolean;
text?: string;
noIntervalPicker?: boolean;
showAutoInterval?: boolean;
width?: string;
primary?: boolean;
isOnCanvas?: boolean;
}
declare class RefreshPicker extends PureComponent<Props$$> {
static offOption: {
label: string;
value: string;
ariaLabel: string;
};
static liveOption: {
label: string;
value: string;
ariaLabel: string;
};
static autoOption: {
label: string;
value: string;
ariaLabel: string;
};
static isLive: (refreshInterval?: string) => boolean;
constructor(props: Props$$);
onChangeSelect: (item: SelectableValue<string>) => void;
getVariant(): ToolbarButtonVariant;
render(): React__default.JSX.Element;
}
/** @public */
interface TimeRangePickerProps {
hideText?: boolean;
value: TimeRange;
timeZone?: TimeZone;
fiscalYearStartMonth?: number;
timeSyncButton?: JSX.Element;
isSynced?: boolean;
onChange: (timeRange: TimeRange) => void;
onChangeTimeZone: (timeZone: TimeZone) => void;
onChangeFiscalYearStartMonth?: (month: number) => void;
onMoveBackward: () => vo