///
// Libraries
import React from "react";
import { Component, CSSProperties, ReactNode, MouseEvent, FunctionComponent, PureComponent, UIEvent, RefObject, FC, ChangeEvent, KeyboardEvent } from "react";
import { ScrollState } from "react-scrollbars-custom/dist/types/types";
// Utilities
type Omit = Pick>;
// Standardized prop definitons
interface StandardFunctionProps {
/** Unique identifier for getting an element */
id?: string;
/** Useful for setting common attributes like width or height */
style?: CSSProperties;
/** ID for Integration Tests */
testID?: string;
/** Children */
children?: ReactNode;
/** Useful for overriding styles of the component and its constituent elements */
className?: string;
}
// Standard Validation Function
type ValidationFunction = (input: string) => string | null;
// Passing in link elements
type RenderLinkElement = (className: string) => JSX.Element;
// Shared Data Types
declare enum ComponentColor {
Default = "default",
Primary = "primary",
Secondary = "secondary",
Tertiary = "tertiary",
Success = "success",
Warning = "warning",
Danger = "danger",
Colorless = "colorless"
}
declare enum ComponentSize {
ExtraSmall = "xs",
Small = "sm",
Medium = "md",
Large = "lg"
}
declare enum ComponentStatus {
Default = "default",
Loading = "loading",
Error = "error",
Valid = "valid",
Disabled = "disabled"
}
declare enum ComponentOrientation {
Horizontal = "horizontal",
Vertical = "vertical"
}
interface Color {
hex: string;
name: string;
}
interface Gradient {
start: InfluxColors;
stop: InfluxColors;
}
declare enum Gradients {
BeijingEclipse = "BeijingEclipse",
DistantNebula = "DistantNebula",
SpirulinaSmoothie = "SpirulinaSmoothie",
CephalopodInk = "CephalopodInk",
DarkChocolate = "DarkChocolate",
LASunset = "LASunset",
PolarExpress = "PolarExpress",
RebelAlliance = "RebelAlliance",
JungleDusk = "JungleDusk",
SavannaHeat = "SavannaHeat",
DocScott = "DocScott",
GundamPilot = "GundamPilot",
TropicalTourist = "TropicalTourist",
JalapenoTaco = "JalapenoTaco",
FuyuPersimmon = "FuyuPersimmon",
DesertFestival = "DesertFestival",
MiyazakiSky = "MiyazakiSky",
GarageBand = "GarageBand",
MangoGrove = "MangoGrove",
ScotchBonnet = "ScotchBonnet",
BrooklynCowboy = "BrooklynCowboy",
PastelGothic = "PastelGothic",
LowDifficulty = "LowDifficulty",
CitrusSodapop = "CitrusSodapop",
CaliforniaCampfire = "CaliforniaCampfire",
SynthPop = "SynthPop",
CottonCandy = "CottonCandy",
HotelBreakfast = "HotelBreakfast",
CandyApple = "CandyApple",
JustPeachy = "JustPeachy",
MagicCarpet = "MagicCarpet",
CruisingAltitude = "CruisingAltitude",
CoconutLime = "CoconutLime",
MillennialAvocado = "MillennialAvocado",
GoldenHour = "GoldenHour",
PastryCafe = "PastryCafe",
KawaiiDesu = "KawaiiDesu",
RobotLogic = "RobotLogic",
MintyFresh = "MintyFresh",
SimpleCream = "SimpleCream",
// Brand Gradients
WarpSpeed = "WarpSpeed",
PowerStone = "PowerStone",
MilkyWay = "MilkyWay",
LazyAfternoon = "LazyAfternoon",
NineteenEightyFour = "NineteenEightyFour",
RadioactiveWarning = "RadioactiveWarning",
LostGalaxy = "LostGalaxy",
GrapeSoda = "GrapeSoda",
LavenderLatte = "LavenderLatte",
OminousFog = "OminousFog",
// Single Hue Gradients
DefaultLight = "DefaultLight",
Default = "Default",
DefaultDark = "DefaultDark",
PrimaryLight = "PrimaryLight",
Info = "Info",
PrimaryDark = "PrimaryDark",
SecondaryLight = "SecondaryLight",
Secondary = "Secondary",
SecondaryDark = "SecondaryDark",
SuccessLight = "SuccessLight",
Success = "Success",
SuccessDark = "SuccessDark",
WarningLight = "WarningLight",
Warning = "Warning",
WarningDark = "WarningDark",
DangerLight = "DangerLight",
Danger = "Danger",
DangerDark = "DangerDark"
}
declare enum DropdownMenuTheme {
Amethyst = "amethyst",
Malachite = "malachite",
Sapphire = "sapphire",
Onyx = "onyx",
None = "none"
}
interface DropdownMenuScrollbarColors {
thumbStartColor: InfluxColors;
thumbStopColor: InfluxColors;
}
declare enum DropdownItemType {
Dot = "dot",
Checkbox = "checkbox",
None = "none"
}
declare enum Direction {
Left = "left",
Right = "right",
None = "none"
}
declare enum ButtonShape {
Default = "none",
Square = "square",
StretchToFit = "stretch"
}
declare enum ButtonType {
Button = "button",
Submit = "submit"
}
declare enum InfluxColors {
// Grey
Grey5 = "#07070e",
Grey15 = "#1a1a2a",
Grey25 = "#333346",
Grey35 = "#4d4d60",
Grey45 = "#68687b",
Grey55 = "#828294",
Grey65 = "#9e9ead",
Grey75 = "#b9b9c5",
Grey85 = "#d5d5dd",
Grey95 = "#f1f1f3",
White = "#ffffff",
// Neutrals
Obsidian = "#07070e",
// Grey5
Raven = "#07070e",
// Grey5
Kevlar = "#07070e",
// Grey5
Castle = "#1a1a2a",
// Grey15
Onyx = "#1a1a2a",
// Grey15
Pepper = "#333346",
// Grey25
Smoke = "#333346",
// Grey25
Graphite = "#4d4d60",
// Grey35
Storm = "#68687b",
// Grey45
Mountain = "#68687b",
// Grey45
Wolf = "#828294",
// Grey55
Sidewalk = "#9e9ead",
// Grey65
Forge = "#9e9ead",
// Grey65
Mist = "#b9b9c5",
// Grey75
Chromium = "#b9b9c5",
// Grey75
Platinum = "#d5d5dd",
// Grey85
Pearl = "#d5d5dd",
// Grey85
Whisper = "#f1f1f3",
// Grey95
Cloud = "#f1f1f3",
// Grey95
Ghost = "#f1f1f3",
// Blues
Abyss = "#120653",
Sapphire = "#0b3a8d",
Ocean = "#066fc5",
Pool = "#00a3ff",
Laser = "#00C9FF",
Hydrogen = "#6BDFFF",
Neutrino = "#BEF0FF",
Yeti = "#F0FCFF",
// Purples
Shadow = "#2b007e",
Void = "#5c10a0",
Amethyst = "#8e1fc3",
Star = "#be2ee4",
Comet = "#ce58eb",
Potassium = "#dd84f1",
Moonstone = "#ebadf8",
Twilight = "#fad9ff",
// Greens
Gypsy = "#003e34",
Emerald = "#006f49",
Viridian = "#009f5f",
Rainforest = "#34bb55",
Honeydew = "#67d74e",
Krypton = "#9bf445",
Wasabi = "#c6f98e",
Mint = "#f3ffd6",
// Yellows
Oak = "#3F241F",
Topaz = "#E85B1C",
Tiger = "#F48D38",
Pineapple = "#FFB94A",
Thunder = "#FFD255",
Sulfur = "#FFE480",
Daisy = "#FFF6B8",
Banana = "#FFFDDE",
// Reds
Basalt = "#2F1F29",
Ruby = "#BF3D5E",
Fire = "#DC4E58",
Curacao = "#F95F53",
Dreamsicle = "#FF8564",
Tungsten = "#FFB6A0",
Marmelade = "#FFDCCF",
Flan = "#FFF7F4",
// Brand Colors
Chartreuse = "#D6F622",
DeepPurple = "#13002D",
Magenta = "#BF2FE5",
Galaxy = "#9394FF",
Pulsar = "#513CC6",
CetaceanBlue = "#020A47",
DogwoodRose = "#D30971",
PurpleX = "#9B2AFF"
}
declare enum IconFont {
AddCell_New = "AddCell_New",
AlertTriangle = "AlertTriangle",
Annotate_New = "Annotate_New",
ArrowDown_New = "ArrowDown_New",
ArrowLeft_New = "ArrowLeft_New",
ArrowRight_New = "ArrowRight_New",
BarChart_New = "BarChart_New",
Bell = "Bell",
Bill = "Bill",
BookCode = "BookCode",
BookOutline = "BookOutline",
Braces = "Braces",
BucketSolid = "BucketSolid",
Calendar = "Calendar",
CaretDown_New = "CaretDown_New",
CaretLeft_New = "CaretLeft_New",
CaretOutlineRight = "CaretOutlineRight",
CaretRight_New = "CaretRight_New",
CaretUp_New = "CaretUp_New",
Chat = "Chat",
CheckMark_New = "Checkmark_New",
DoubleCaretVertical = "DoubleCaretVertical",
CircleThick = "CircleThick",
Clipboard_New = "Clipboard_New",
Clock_New = "Clock_New",
Cloud = "Cloud",
CogOutline_New = "CogOutline_New",
CogSolid_New = "CogSolid_New",
CollapseLeft = "CollapseLeft",
CollapseRight = "CollapseRight",
CopperCoin = "Coppercoin",
CrownSolid_New = "CrownSolid_New",
Cube = "Cube",
CuboSolid = "CuboSolid",
CuboUniform = "Cubouniform",
CurrencyDollar = "CurrencyDollar",
Darkmode_New = "Darkmode_New",
DashH = "DashH",
Download_New = "Download_New",
Duplicate_New = "Duplicate_New",
ExpandB = "ExpandB",
Export_New = "Export_New",
EyeClosed = "EyeClosed",
EyeOpen = "EyeOpen",
Flask = "Flask",
FolderOpen = "FolderOpen",
FunnelSolid = "FunnelSolid",
GraphLine_New = "GraphLine_New",
Group = "Group",
History = "History",
Info_New = "Info_New",
Install = "Install",
Layers = "Layers",
Lightmode_New = "Lightmode_New",
Link = "Link",
Lock = "Lock",
Logout = "Logout",
More = "More",
OrganizationChart = "OrganizationChart",
Pause = "Pause",
Pencil = "Pencil",
PieChart = "PieChart",
Play = "Play",
Plus_New = "Plus_New",
QuestionMark = "QuestionMark",
QuestionMark_Outline = "QuestionMark_Outline",
Refresh_New = "Refresh_New",
Remove_New = "Remove_New",
Save = "Save",
SaveOutline = "SaveOutline",
Search_New = "Search_New",
Share = "Share",
Shield = "Shield",
SidebarClose = "SidebarClose",
SidebarOpen = "SidebarOpen",
Star = "Star",
StarSmile = "StarSmile",
Subscribe = "Subscribe",
Subtract = "Subtract",
Switch_New = "Switch_New",
Sync = "Sync",
Timer = "Timer",
Text_New = "Text_New",
Trash_New = "Trash_New",
Undo = "Undo",
Upload_New = "Upload_New",
Upload_Outline = "Upload_Outline",
User = "User",
Zap = "Zap"
}
declare enum LogoAuxiliaryText {
None = "None",
Cloud = "Cloud",
Enterprise = "Enterprise",
OpenSource = "OpenSource"
}
declare enum LogoBaseText {
None = "None",
InfluxData = "InfluxData",
InfluxDb = "InfluxDb",
Telegraf = "Telegraf"
}
declare enum LogoMarks {
Kubo = "Kubo",
KuboOld = "KuboOld"
}
declare enum LogoSymbols {
None = "None",
Trademark = "Trademark",
Registered = "Registered"
}
declare enum Columns {
One = 1,
Two = 2,
Three = 3,
Four = 4,
Five = 5,
Six = 6,
Seven = 7,
Eight = 8,
Nine = 9,
Ten = 10,
Eleven = 11,
Twelve = 12
}
declare enum Sort {
Descending = "desc",
Ascending = "asc",
None = "none"
}
declare enum Alignment {
Left = "left",
Center = "center",
Right = "right"
}
declare enum VerticalAlignment {
Top = "top",
Middle = "middle",
Bottom = "bottom"
}
declare enum JustifyContent {
FlexStart = "flex-start",
Center = "center",
FlexEnd = "flex-end",
SpaceBetween = "space-between",
SpaceAround = "space-around"
}
declare enum AlignItems {
FlexStart = "flex-start",
Center = "center",
FlexEnd = "flex-end",
Stretch = "stretch"
}
declare enum FlexDirection {
Row = "row",
RowReverse = "row-reverse",
Column = "column",
ColumnReverse = "column-reverse"
}
declare enum RemoteDataState {
NotStarted = "NotStarted",
Loading = "Loading",
Done = "Done",
Error = "Error"
}
declare enum AutoComplete {
On = "on",
Off = "off"
}
declare enum Orientation {
Vertical = "vertical",
Horizontal = "horizontal"
}
declare enum BorderType {
None = "none",
Horizontal = "horizontal",
Vertical = "vertical",
Both = "both",
All = "all"
}
interface TimeRange {
lower: string;
upper?: string | null;
seconds?: number;
format?: string;
label?: string;
duration?: string;
}
declare enum InputType {
Text = "text",
Number = "number",
Password = "password",
Email = "email",
Checkbox = "checkbox",
Range = "range"
}
declare enum InputToggleType {
Checkbox = "checkbox",
Radio = "radio"
}
declare enum AutoInputMode {
Auto = "auto",
Custom = "custom"
}
declare enum PopoverInteraction {
Hover = "hover",
Click = "click",
None = "none"
}
declare enum PopoverPosition {
Above = "above",
Below = "below",
ToTheLeft = "to-left",
ToTheRight = "to-right",
ToTheRightTop = "to-right-top"
}
declare enum Appearance {
Solid = "solid",
Outline = "outline"
}
declare enum EncType {
Application = "application/x-www-form-urlencoded",
Multipart = "multipart/form-data",
Text = "text/plain"
}
declare enum Method {
Post = "post",
Get = "get",
Dialog = "dialog"
}
declare enum Wrap {
Hard = "hard",
Soft = "soft",
Off = "off"
}
interface Coordinates {
x: number;
y: number;
}
declare enum LinkTarget {
Blank = "_blank",
Parent = "_parent",
Self = "_self",
Top = "_top"
}
declare enum LinkRel {
Alternate = "alternate",
Author = "author",
Bookmark = "bookmark",
External = "external",
Help = "help",
License = "license",
Next = "next",
NoFollow = "nofollow",
NoOpener = "noopener",
NoReferrer = "noreferrer",
Prev = "prev",
Search = "search",
Tag = "tag"
}
declare enum Typeface {
RobotoMono = "Roboto Mono",
ProximaNova = "Proxima Nova"
}
declare enum HeadingElement {
H1 = "h1",
H2 = "h2",
H3 = "h3",
H4 = "h4",
H5 = "h5",
H6 = "h6",
Span = "span",
Div = "div",
P = "p"
}
declare enum FontWeight {
Light = "300",
Regular = "400",
Medium = "500",
Bold = "700",
Black = "900"
}
declare enum Breakpoint {
None = 0,
Small,
Medium,
Large
}
interface AccordionProps extends StandardFunctionProps {
/** Determines whether the expand Icon is at the left, right or doesn't exist. If there is no accordionBody, no icons are shown*/
iconPlacement?: Direction;
/** Determines whether the accordion is expanded by default or not */
expanded?: boolean;
/** Prevents any interaction with this element, including the onClick function */
disabled?: boolean;
/** Function to be called when the accordion is expanded or collapsed */
onChange?: () => void;
}
type AccordionRef = HTMLDivElement;
interface AccordionHeaderProps extends StandardFunctionProps {
}
interface AccordionBodyItemProps extends StandardFunctionProps {
}
declare class Accordion extends Component {
static readonly displayName = "Accordion";
static Accordion: React.ForwardRefExoticComponent>;
static AccordionHeader: React.ForwardRefExoticComponent>;
static AccordionBodyItem: React.ForwardRefExoticComponent>;
render(): JSX.Element;
}
interface Props extends StandardFunctionProps {
/** Alert color */
color: ComponentColor;
/** Icon to be displayed to the left of text */
icon?: IconFont;
}
type AlertRef = HTMLDivElement;
declare const Alert: React.ForwardRefExoticComponent>;
interface AppHeaderProps extends StandardFunctionProps {
/** Height of header bar */
size?: ComponentSize;
}
type AppHeaderRef = HTMLDivElement;
interface AppHeaderLogoProps extends StandardFunctionProps {
/** Image source url */
src?: string;
/** Size of logo */
size?: ComponentSize;
}
type AppHeaderLogoRef = HTMLDivElement;
declare const AppHeaderLogo: React.ForwardRefExoticComponent>;
declare class AppHeader extends Component {
static readonly displayName = "AppHeader";
static AppHeader: React.ForwardRefExoticComponent>;
static Logo: React.ForwardRefExoticComponent>;
render(): JSX.Element;
}
type AppWrapperType = "standard" | "funnel";
interface AppWrapperProps extends StandardFunctionProps {
/** Hides the page header and nav menu so that the contents can take up the whole screen */
presentationMode?: boolean;
/** Controls responsive layout (can be either "page" for "funnel") */
type?: AppWrapperType;
}
type AppWrapperRef = HTMLDivElement;
declare const AppWrapper: React.ForwardRefExoticComponent>;
interface ButtonBaseProps extends StandardFunctionProps {
/** Function to be called on button click */
onClick?: (e?: MouseEvent) => void;
/** Function to be called on mouse over */
onMouseOver?: (e?: MouseEvent) => void;
/** Function to be called on mouse out */
onMouseOut?: (e?: MouseEvent) => void;
/** Function to be called on mouse enter */
onMouseEnter?: (e?: MouseEvent) => void;
/** Function to be called on mouse leave */
onMouseLeave?: (e?: MouseEvent) => void;
/** Text to be displayed on hover tooltip */
titleText?: string;
/** Text to be displayed on hover tooltip when the button is disabled */
disabledTitleText?: string;
/** Keyboard control tab order */
tabIndex?: number;
/** Button color */
color?: ComponentColor;
/** Button size */
size?: ComponentSize;
/** Square or rectangle */
shape?: ButtonShape;
/** Button status state default, loading, or disabled */
status?: ComponentStatus;
/** Toggles button highlighted active state */
active?: boolean;
/** Button type of 'button' or 'submit' */
type?: ButtonType;
}
type ButtonBaseRef = HTMLButtonElement;
declare const ButtonBase: React.ForwardRefExoticComponent>;
interface ButtonProps extends ButtonBaseProps {
/** Text to be displayed on button */
text?: string;
/** Icon to be displayed to the left of text or in place of text */
icon?: IconFont;
/** Reverse ordering of text and icon */
placeIconAfterText?: boolean;
}
type ButtonRef = ButtonBaseRef;
declare const Button: React.ForwardRefExoticComponent>;
interface ButtonGroupProps extends StandardFunctionProps {
/** Stacking axis of buttons */
orientation?: Orientation;
}
type ButtonGroupRef = HTMLDivElement;
declare const ButtonGroup: React.ForwardRefExoticComponent>;
interface ConfirmationButtonProps extends Omit {
/** Text to appear in confirmation popover */
confirmationLabel: string;
/** Text to appear in confirmation button */
confirmationButtonText: string;
/** Color of confirmation button */
confirmationButtonColor?: ComponentColor;
/** Popover dialog color */
popoverColor?: ComponentColor;
/** Means of applying color to popover */
popoverAppearance?: Appearance;
/** Allows customization of Popover */
popoverClassName?: string;
/** Allows customization of Popover */
popoverStyle?: CSSProperties;
/** Callback function fired when state changes to "show" */
onShow?: () => void;
/** Callback function fired when state changes to "hide" */
onHide?: () => void;
/** Function to call when confirmation is clicked, passes 'value' prop in */
onConfirm: (returnValue?: any) => void;
/** Optional value to have passed back via onConfirm */
returnValue?: any;
}
declare const ConfirmationButton: FunctionComponent;
interface CTAButtonProps extends Omit {
/** Text to be displayed on button */
text?: string;
/** Icon to be displayed to the left of text or in place of text */
icon?: IconFont;
/** Reverse ordering of text and icon */
placeIconAfterText?: boolean;
}
type CTAButtonRef = ButtonBaseRef;
declare const CTAButton: React.ForwardRefExoticComponent>;
interface DismissButtonProps extends ButtonBaseProps {
}
type DismissButtonRef = ButtonBaseRef;
declare const DismissButton: React.ForwardRefExoticComponent>;
interface SquareButtonProps extends Omit {
/** Icon to be displayed to the left of text or in place of text */
icon: IconFont;
}
type SquareButtonRef = ButtonBaseRef;
declare const SquareButton: React.ForwardRefExoticComponent>;
interface LinkButtonProps extends Omit {
/** Destination for link button */
href: string;
/** Where to open to the link */
target?: LinkTarget | string;
/** Describes the relationship between this document and the linked document */
rel?: LinkRel;
disabledTitleText?: string;
}
type LinkButtonRef = HTMLAnchorElement;
declare const LinkButton: React.ForwardRefExoticComponent>;
interface CTALinkButtonProps extends Omit {
}
type CTALinkButtonRef = LinkButtonRef;
declare const CTALinkButton: React.ForwardRefExoticComponent>;
interface Props$0 {
/** Function to call when click outside is detected */
onClickOutside: (e: any) => void;
}
declare class ClickOutside extends PureComponent {
static readonly displayName = "ClickOutside";
componentDidMount(): void;
componentWillUnmount(): void;
render(): React.ReactNode;
private handleClickOutside;
}
interface ColorPickerProps extends StandardFunctionProps {
/** currently selected color */
color: string;
/** Function to be called on color select */
onChange: (color: string, status?: ComponentStatus) => void;
/** Array of colors to be displayed in color picker */
colors?: Color[];
/** Prevent focus from leaving the input */
maintainInputFocus?: boolean;
/** How many color swatches to render in each row */
swatchesPerRow?: number;
/** Enforces hexcode format by defult, pass in your own function to customize */
validationFunc?: ValidationFunction;
/** Characters matching this expression will be stripped out of the value before being passed into onChange */
invalidChars?: RegExp;
}
type ColorPickerRef = HTMLDivElement;
declare const ColorPicker: React.ForwardRefExoticComponent>;
interface ColorPickerSwatchProps extends StandardFunctionProps {
/** Color name */
name: string;
/** Color hex value */
hex: string;
/** Function to be called on color click */
onClick: (hex: string) => void;
/** Used to determine percentage width of parent to take up */
swatchesPerRow: number;
/** Index - used to determine if corners are rounded or not */
index: number;
/** Number of colors used in Color Picker, used to determine rounded corners */
swatchesCount: number;
}
type ColorPickerSwatchRef = HTMLDivElement;
declare const ColorPickerSwatch: React.ForwardRefExoticComponent>;
interface ColorPreviewProps extends StandardFunctionProps {
/** Any CSS color value is good */
color: string;
}
declare const ColorPreview: FunctionComponent;
// react-scrollbars-custom uses a highly unusual type
// to presumably handle touch and mouse events simultaneously
type FusionScrollEvent = UIEvent & ScrollState;
// Using this custom type makes typescript happy
// and exposes enough typing to properly interface
// with the onScroll and onUpdate props
type FusionScrollHandler = (scrollValues: FusionScrollEvent, prevScrollValues?: ScrollState) => void;
interface DapperScrollbarsProps extends StandardFunctionProps {
/** Toggle display of tracks when no scrolling is necessary */
removeTracksWhenNotUsed?: boolean;
/** Toggle display of vertical track when no scrolling is necessary */
removeTrackYWhenNotUsed?: boolean;
/** Toggle display of horizontal track when no scrolling is necessary */
removeTrackXWhenNotUsed?: boolean;
/** Disable scrolling horizontally */
noScrollX?: boolean;
/** Disable scrolling vertically */
noScrollY?: boolean;
/** Disable scrolling */
noScroll?: boolean;
/** Gradient start color */
thumbStartColor?: string | InfluxColors;
/** Gradient end color */
thumbStopColor?: string | InfluxColors;
/** Hide scrollbar when not actively scrolling */
autoHide?: boolean;
/** Scroll container will grow to fit the content width and height */
autoSize?: boolean;
/** Scroll container will grow to fit the content width */
autoSizeWidth?: boolean;
/** Scroll container will grow to fit the content height */
autoSizeHeight?: boolean;
/** Vertical scroll position in pixels */
scrollTop?: number;
/** Horizontal scroll position in pixels */
scrollLeft?: number;
/** Function to be called when called scroll event fires */
onScroll?: FusionScrollHandler;
/** Function called after component updated */
onUpdate?: FusionScrollHandler;
/** Component Size **/
size?: ComponentSize;
}
declare const DapperScrollbars: FunctionComponent;
interface DatePickerProps extends StandardFunctionProps {
/** Label for input field */
label: string;
/** Date value */
dateTime?: string | null;
/** Function called once a date is selected */
onSelectDate: (date: string) => void;
}
type DatePickerRef = HTMLDivElement;
declare const DatePicker: React.ForwardRefExoticComponent>;
interface FlexBoxProps extends StandardFunctionProps {
/** Vertical or horizontal flex alignment */
direction?: FlexDirection;
/** Inserted margin between children */
margin?: ComponentSize;
/** Can be FlexStart, FlexEnd, Center, SpaceBetween, or SpaceAround */
justifyContent?: JustifyContent;
/** Can be FlexStart, FlexEnd, Center, or Stretch */
alignItems?: AlignItems;
/** stretches component spacer to fit parent width */
stretchToFitWidth?: boolean;
/** stretches component spacer to fit parent height */
stretchToFitHeight?: boolean;
onClick?: (e: MouseEvent) => void;
}
type FlexBoxRef = HTMLDivElement;
interface FlexBoxChildProps extends StandardFunctionProps {
/** Optional fixed width of element */
basis?: number;
/** Maximumn proportional width to grow until */
grow?: number;
/** Minimum proportional width to shrink until */
shrink?: number;
onClick?: (e: MouseEvent) => void;
}
type FlexBoxChildRef = HTMLDivElement;
declare const FlexBoxChild: React.ForwardRefExoticComponent>;
declare class FlexBox extends Component {
static readonly displayName = "FlexBox";
static FlexBox: React.ForwardRefExoticComponent>;
static Child: React.ForwardRefExoticComponent>;
render(): JSX.Element;
}
interface DateRangePickerProps extends StandardFunctionProps {
/** Object of {upper: string, lower: string | null, seconds: number, format: string, label: string, duration: string} */
timeRange: TimeRange;
/** Function called when time range is set */
onSetTimeRange: (timeRange: TimeRange) => void;
}
type DateRangePickerRef = FlexBoxRef;
declare const DateRangePicker: React.ForwardRefExoticComponent>;
interface DraggableResizerProps extends StandardFunctionProps {
/** Orientation the draggable panels stack in */
handleOrientation: Orientation;
/** Expects and array of numbers between 0 - 1 */
handlePositions: number[];
/** Returns the updated array of numbers between 0 - 1, used to manage state */
onChangePositions: (positions: number[]) => void;
/** Gradient theme for handle */
handleGradient?: Gradients;
backgroundStyle?: CSSProperties;
handleBarStyle?: CSSProperties;
}
interface DraggableResizerPanelProps extends StandardFunctionProps {
/** Checks if the current panel is collapsible or not */
isCollapsible?: boolean;
/** Panel will not shrink past this size (experimental, not guaranteed to work) */
minSizePixels?: number;
/** Does not have a value initially, gets passed a value by being a child of DraggableResizer */
sizePercent?: number;
}
type DraggableResizerPanelRef = HTMLDivElement;
declare const DraggableResizerPanel: React.ForwardRefExoticComponent>;
declare class DraggableResizer extends Component {
static readonly displayName = "DraggableResizer";
static DraggableResizer: React.FunctionComponent;
static Panel: React.ForwardRefExoticComponent>;
render(): JSX.Element;
}
declare enum MenuStatus {
Open = "open",
Closed = "closed"
}
interface DropdownProps extends StandardFunctionProps {
/** Component to render as the button (use Dropdown.Button) */
button: (active: boolean, onClick: (e: MouseEvent) => void) => JSX.Element;
/** Component to render as the menu (use Dropdown.Menu) */
menu: (onCollapse?: () => void) => JSX.Element;
/** Renders the menu element above the button instead of below */
dropUp?: boolean;
/** Disable Dropdown's out of the box focus behavior if you have a custom behavior */
disableAutoFocus?: boolean;
/** Optional method that is triggered when the user clicks outside of/away from the dropdown */
onClickAway?: () => void;
/**
* optional way for the owner of this dropdown to set the menu to be open or closed:
* 'open': the menu will be open
* 'closed': the menu will be closed
* any other string will be ignored.
*
* and the menu (open/closed) only changes programmatically when this value changes.
* so the owner is responsible for resetting this value
* (if the string is set to 'open', and then the user closes it, and the code sets it to open again,
* unless the code sets it to something else in between (like null or 'close'),
* then nothing will happen- the menu will not open)
* */
menuOpen?: MenuStatus;
}
type DropdownRef = HTMLDivElement;
interface DropdownMenuProps extends StandardFunctionProps {
/** Pixel height after which the dropdown menu will scroll */
maxHeight?: number;
/** Controls coloration of the dropdown menu and all subcomponents */
theme?: DropdownMenuTheme;
/** Disable scrolling horizontally */
noScrollX?: boolean;
/** Disable scrolling vertically */
noScrollY?: boolean;
/** Automatically scroll to selected item when dropdown is opened */
scrollToSelected?: boolean;
/** Function to handle closing the menu when a child item is clicked */
onCollapse?: () => void;
/** Pass through ref for contents element within scrollbars */
contentsRef?: RefObject;
/** Useful for customizing appearance of the contents element within scrollbars */
contentsStyle?: CSSProperties;
/** Controls autoHide behavior of scrollbars within the menu */
autoHideScrollbars?: boolean;
}
type DropdownMenuRef = HTMLDivElement;
type DropdownMenuContentsRef = HTMLDivElement;
declare const DropdownMenu: React.ForwardRefExoticComponent>;
interface DropdownButtonProps extends StandardFunctionProps {
/** Function to be called on click of dropdown button */
onClick: (e: MouseEvent) => void;
/** Button status state default, loading, or disabled */
status?: ComponentStatus;
/** Button color */
color?: ComponentColor;
/** Button size */
size?: ComponentSize;
/** Toggles button highlighted active state */
active?: boolean;
/** Icon to be displayed to the left of text or in place of text */
icon?: IconFont;
/** Icon to be displayed to the right of text */
trailingIcon?: IconFont;
/** Text to be displayed on hover tooltip */
title?: string;
disabledTitleText?: string;
}
type DropdownButtonRef = ButtonBaseRef;
declare const DropdownButton: React.ForwardRefExoticComponent>;
interface DropdownItemProps extends StandardFunctionProps {
/** Value to be returned via the onClick function */
value?: any;
/** Whether or not the item should have selected styling */
selected?: boolean;
/** Controls which style of dropdown item is rendered */
type?: DropdownItemType;
/** When a dropdown item is clicked, its `value` prop is returned via `onChange` */
onClick?: (value?: any) => void;
/** Controls whether the text contents of this item wrap or not */
wrapText?: boolean;
/** Title attribute */
title?: string;
/** Prevents any interaction with this element, including the onClick function */
disabled?: boolean;
trailingIconOnSelected?: boolean;
}
type DropdownItemRef = HTMLButtonElement;
declare const DropdownItem: React.ForwardRefExoticComponent>;
interface DropdownItemEmptyProps extends StandardFunctionProps {
/** Controls whether the text contents of this item wrap or not */
wrapText?: boolean;
}
type DropdownItemEmptyRef = HTMLDivElement;
declare const DropdownItemEmpty: React.ForwardRefExoticComponent>;
interface DropdownLinkItemProps extends StandardFunctionProps {
/** Whether or not the item should have selected styling */
selected: boolean;
/** Controls which style of dropdown item is rendered */
type?: DropdownItemType;
/** Controls whether the text contents of this item wrap or not */
wrapText?: boolean;
/** Renders the element in a disabled state, does not affect functionality */
disabled?: boolean;
}
type DropdownLinkItemRef = HTMLDivElement;
declare const DropdownLinkItem: React.ForwardRefExoticComponent>;
interface DropdownDividerProps extends StandardFunctionProps {
/** Text to be displayed on divider, a line will be displayed if no text is provided */
text?: string;
}
type DropdownDividerRef = HTMLDivElement;
declare const DropdownDivider: React.ForwardRefExoticComponent>;
interface DropdownHrefItemProps extends StandardFunctionProps {
/** Value to be returned via the onClick function */
value?: any;
/** Whether or not the item should have selected styling */
selected?: boolean;
/** Controls which style of dropdown item is rendered */
type?: DropdownItemType;
/** Controls whether the text contents of this item wrap or not */
wrapText?: boolean;
/** Title attribute */
title?: string;
/** Whether or not the item should have selected styling */
href: string | undefined;
/** Prevents any interaction with this element, including the onClick function */
disabled?: boolean;
}
type DropdownHrefItemRef = HTMLButtonElement;
declare const DropdownHrefItem: React.ForwardRefExoticComponent>;
declare class Dropdown extends Component {
static readonly displayName = "Dropdown";
static Dropdown: React.ForwardRefExoticComponent>;
static Menu: React.ForwardRefExoticComponent>;
static Button: React.ForwardRefExoticComponent>;
static Item: React.ForwardRefExoticComponent>;
static ItemEmpty: React.ForwardRefExoticComponent>;
static LinkItem: React.ForwardRefExoticComponent>;
static Divider: React.ForwardRefExoticComponent>;
static HrefItem: React.ForwardRefExoticComponent>;
render(): JSX.Element;
}
interface MultiSelectDropdownProps extends StandardFunctionProps {
/** Text to render in button as currently selected option */
selectedOptions: string[];
/** List of options to render in menu */
options: string[];
/** Fires when an option is clicked, used to update state */
onSelect: (option: string) => void;
/** Text to display when no options are selected */
emptyText?: string;
/** Optional status of button */
buttonStatus?: ComponentStatus;
/** Optional color of button */
buttonColor?: ComponentColor;
/** Optional size of button */
buttonSize?: ComponentSize;
/** Optional icon to render in button */
buttonIcon?: IconFont;
/** Optional choice of item indicator */
indicator?: DropdownItemType;
/** Optional theme of menu */
menuTheme?: DropdownMenuTheme;
/** Optional maximum pixel height menu */
menuMaxHeight?: number;
/** Renders the menu element above the button instead of below */
dropUp?: boolean;
/** Enables the search bar in the dropdown menu */
isSearchable?: boolean;
searchbarInputPlaceholder?: string;
}
type MultiSelectDropdownRef = DropdownRef;
declare const MultiSelectDropdown: React.ForwardRefExoticComponent>;
interface SelectDropdownProps extends StandardFunctionProps {
/** Text to render in button as currently selected option */
selectedOption: string;
/** List of options to render in menu */
options: string[];
/** Fires when an option is clicked, used to update state */
onSelect: (option: string) => void;
/** Optional status of button */
buttonStatus?: ComponentStatus;
/** Optional color of button */
buttonColor?: ComponentColor;
/** Optional size of button */
buttonSize?: ComponentSize;
/** Optional icon to render in button */
buttonIcon?: IconFont;
/** Optional choice of item indicator */
indicator?: DropdownItemType;
/** Optional theme of menu */
menuTheme?: DropdownMenuTheme;
/** Optional maximum pixel height menu */
menuMaxHeight?: number;
/** Renders the menu element above the button instead of below */
dropUp?: boolean;
}
type SelectDropdownRef = DropdownRef;
declare const SelectDropdown: React.ForwardRefExoticComponent>;
interface SelectableItem {
id: string;
name?: string;
}
interface OwnProps extends StandardFunctionProps {
items: SelectableItem[];
onSelect: (item: SelectableItem | null) => void;
/** what shows in the input when nothing is selected */
placeholderText?: string;
/** used for generating test ids */
testIdSuffix?: string;
/**optional pre-selected option, must match exactly (name and id) an item in the items array */
selectedOption?: SelectableItem | null;
/** which theme to apply */
menuTheme?: DropdownMenuTheme;
buttonTestId?: string;
menuTestID?: string;
itemTestIdPrefix?: string;
/** the name/label to show in the dropdown where there is an item with an id but without a name; defaults to the empty string */
defaultNameText?: string;
sortNames?: boolean;
/** status state: default, loading, or disabled */
status?: ComponentStatus;
}
declare const TypeAheadDropDown: FC;
interface CreatableTypeAheadDropdownProps extends StandardFunctionProps {
/** Text to render in input field as currently selected or typed option */
selectedOption: string;
/** List of options to render in dropdown menu */
options: string[];
onSelect: (option: string) => void;
placeholder?: string;
inputStatus?: ComponentStatus;
inputSize?: ComponentSize;
/** Optional icon to be displayed to the left of text in input */
inputIcon?: IconFont;
/** Optional color preview to be displayed to the left of text.
* The color is determined by the selected or typed option in #000000 format.
* If both icon and this props are set, icon will take priority */
inputColorPreviewOn?: boolean;
menuTheme?: DropdownMenuTheme;
menuMaxHeight?: number;
/** Customize the layout of dropdown items */
customizedDropdownItem?: (displayText: string) => JSX.Element;
}
type CreatableTypeAheadDropdownReadmeRef = DropdownRef;
declare const CreatableTypeAheadDropdown: React.ForwardRefExoticComponent>;
interface EmptyStateProps extends StandardFunctionProps {
/** Controls vertical padding in container and font size of children */
size?: ComponentSize;
}
type EmptyStateRef = HTMLDivElement;
declare class EmptyState extends Component {
static readonly displayName = "EmptyState";
static EmptyState: React.ForwardRefExoticComponent>;
static Text: React.ForwardRefExoticComponent>;
static SubText: React.ForwardRefExoticComponent>;
render(): JSX.Element;
}
type EmptyStateTextRef = HTMLHeadingElement;
declare const EmptyStateText: React.ForwardRefExoticComponent>;
type EmptyStateSubTextRef = HTMLParagraphElement;
declare const EmptyStateSubText: React.ForwardRefExoticComponent>;
interface FunnelPageProps extends StandardFunctionProps {
/** Places a logo in the top left corner */
logo?: JSX.Element;
/** Primary page background color */
backgroundColor?: InfluxColors | string;
/** First background accent color */
accentColorA?: InfluxColors | string;
/** Second background accent color */
accentColorB?: InfluxColors | string;
/** Control inline styles of the outermost elemment */
pageStyle?: CSSProperties;
/** Renders a graphic in the funnel page */
enableGraphic?: boolean;
}
type FunnelPageRef = HTMLDivElement;
interface FunnelPageFooterProps extends StandardFunctionProps {
}
type FunnelPageFooterRef = HTMLDivElement;
declare const FunnelPageFooter: React.ForwardRefExoticComponent>;
interface FunnelPageFooterSectionProps extends StandardFunctionProps {
}
type FunnelPageFooterSectionRef = HTMLDivElement;
declare const FunnelPageFooterSection: React.ForwardRefExoticComponent>;
declare class FunnelPage extends Component {
static readonly displayName = "FunnelPage";
static FunnelPage: React.ForwardRefExoticComponent>;
static Footer: React.ForwardRefExoticComponent>;
static FooterSection: React.ForwardRefExoticComponent>;
render(): JSX.Element;
}
interface FormProps extends StandardFunctionProps {
/** Form submit URI */
action?: string;
/** A space-delimited list of character encodings. */
acceptCharset?: string;
/** Allows or disallows browser autocomplete functionality */
autoComplete?: AutoComplete;
/** Type of content to be submitted to the server */
encType?: EncType;
/** HTTP Method to be used on form submit */
method?: Method;
/** Input field name attribute */
name?: string;
/** Enable or disable form validation */
noValidate?: boolean;
/** Function to be called on form submit */
onSubmit?: (e: React.FormEvent) => void;
/** Context name or keyword */
target?: string;
/** If true prevents default event during onSubmit */
preventDefault?: boolean;
}
type FormRef = HTMLFormElement;
interface FormBoxProps extends StandardFunctionProps {
}
type FormBoxRef = HTMLDivElement;
declare const FormBox: React.ForwardRefExoticComponent>;
interface FormDividerProps extends StandardFunctionProps {
/** Optional coloration for horizontal rule in divider */
lineColor?: InfluxColors | string;
}
type FormDividerRef = HTMLDivElement;
declare const FormDivider: React.ForwardRefExoticComponent>;
interface FormElementProps extends StandardFunctionProps {
/** Label Text */
label: string;
/** Input instruction text */
helpText?: string;
/** Text to be displayed on error */
errorMessage?: string;
/** Element to be displayed along with label */
labelAddOn?: () => JSX.Element;
/** Whether this field is required to submit form, adds red required asterisk */
required?: boolean;
/** Useful for associating a label with an input */
htmlFor?: string;
/** ID for Error Message for Integration Tests */
errorMessageTestId?: string;
}
type FormElementRef = HTMLLabelElement & HTMLDivElement;
declare const FormElement: React.ForwardRefExoticComponent>;
interface FormElementErrorProps extends StandardFunctionProps {
/** Text to be displayed on error */
message?: string;
}
type FormElementErrorRef = HTMLSpanElement;
declare const FormElementError: React.ForwardRefExoticComponent>;
interface FormFooterProps extends StandardFunctionProps {
}
type FormFooterRef = HTMLDivElement;
declare const FormFooter: React.ForwardRefExoticComponent>;
interface FormHelpTextProps extends StandardFunctionProps {
/** Input discription or instruction text */
text: string;
}
type FormHelpTextRef = HTMLSpanElement;
declare const FormHelpText: React.ForwardRefExoticComponent>;
interface FormLabelProps extends StandardFunctionProps {
/** Label Text */
label: string;
/** Whether this field is required to submit form, adds red required asterisk */
required?: boolean;
/** Useful for associating a label with an input */
htmlFor?: string;
}
type FormLabelRef = HTMLDivElement & HTMLLabelElement;
declare const FormLabel: React.ForwardRefExoticComponent>;
interface FormValidationElementProps extends StandardFunctionProps {
/** Child components */
children: (status: ComponentStatus) => React.ReactNode;
/** Function used for validation check */
validationFunc: ValidationFunction;
/** Function called when validation status */
onStatusChange?: (newStatus: ComponentStatus) => void;
/** Element to be displayed along with label */
labelAddOn?: () => JSX.Element;
/** Label Text */
label: string;
/** Field value */
value: string;
/** Input instruction text */
helpText?: string;
/** Whether this field is required to submit form, adds red required asterisk */
required?: boolean;
/** Useful for associating a label with an input */
htmlFor?: string;
/** Pre-validation mode ( Validation happens ) */
prevalidate?: boolean;
}
type FormValidationElementRef = HTMLLabelElement;
declare const FormValidationElement: React.ForwardRefExoticComponent>;
declare class Form extends Component {
static readonly displayName = "Form";
static Form: React.ForwardRefExoticComponent>;
static Box: React.ForwardRefExoticComponent>;
static Divider: React.ForwardRefExoticComponent>;
static Element: React.ForwardRefExoticComponent>;
static ElementError: React.ForwardRefExoticComponent>;
static Footer: React.ForwardRefExoticComponent>;
static HelpText: React.ForwardRefExoticComponent>;
static Label: React.ForwardRefExoticComponent>;
static ValidationElement: React.ForwardRefExoticComponent>;
render(): JSX.Element;
}
interface GridProps extends StandardFunctionProps {
}
type GridRef = HTMLDivElement;
interface GridColumnProps extends StandardFunctionProps {
/** Number of columns spanned when viewport width is less than 750px */
widthXS?: Columns;
/** Number of columns spanned when viewport width is greater than 750px */
widthSM?: Columns;
/** Number of columns spanned when viewport width is greater than 1080px */
widthMD?: Columns;
/** Number of columns spanned when viewport width is greater than 1500px */
widthLG?: Columns;
/** Number of columns shifted when viewport width is less than 750px */
offsetXS?: Columns;
/** Number of columns shifted when viewport width is greater than 750px */
offsetSM?: Columns;
/** Number of columns shifted when viewport width is greater than 1080px */
offsetMD?: Columns;
/** Number of columns shifted when viewport width is greater than 1500px */
offsetLG?: Columns;
}
type GridColumnRef = HTMLDivElement;
declare const GridColumn: React.ForwardRefExoticComponent>;
interface GridRowProps extends StandardFunctionProps {
}
type GridRowRef = HTMLDivElement;
declare const GridRow: React.ForwardRefExoticComponent>;
declare class Grid extends Component {
static readonly displayName = "Grid";
static Grid: React.ForwardRefExoticComponent>;
static Column: React.ForwardRefExoticComponent>;
static Row: React.ForwardRefExoticComponent>;
render(): JSX.Element;
}
interface IconProps extends StandardFunctionProps {
/** Icon to display */
glyph: IconFont | string;
}
type IconRef = HTMLSpanElement;
declare const Icon: React.ForwardRefExoticComponent>;
interface BulletProps extends StandardFunctionProps {
/** Icon to display */
glyph?: IconFont | string;
/** Text to display */
text?: string | number;
/** Coloration of bullet circle */
backgroundColor?: InfluxColors | string;
/** Coloration of bullet text or icon */
color?: InfluxColors | string;
/** Size of bullet */
size?: ComponentSize;
}
type BulletRef = HTMLSpanElement;
declare const Bullet: React.ForwardRefExoticComponent>;
interface IndexListProps extends StandardFunctionProps {
}
type IndexListRef = HTMLTableElement;
interface IndexListBodyProps extends StandardFunctionProps {
/** Rendered when no children are passed in */
emptyState: JSX.Element;
/** Used to ensure the empty state takes up the full width of the table */
columnCount: number;
}
type IndexListBodyRef = HTMLTableSectionElement;
declare const IndexListBody: React.ForwardRefExoticComponent>;
interface IndexListHeaderProps extends StandardFunctionProps {
}
type IndexListHeaderRef = HTMLTableSectionElement;
declare const IndexListHeader: React.ForwardRefExoticComponent>;
interface IndexListHeaderCellProps extends StandardFunctionProps {
/** Can be a % or px */
width: string;
/** Text to display as column header */
columnName?: string;
/** Text alignment of column header */
alignment?: Alignment;
/** Controls appearance of sort indicator (arrow) */
sort?: Sort;
/** Unique identifier for use in managing sort state */
sortKey?: string;
/** Useful for triggering a change in sort state */
onClick?: (nextSort: Sort, sortKey: string | undefined) => void;
}
type IndexListHeaderCellRef = HTMLTableHeaderCellElement;
declare const IndexListHeaderCell: React.ForwardRefExoticComponent>;
interface IndexListRowProps extends StandardFunctionProps {
/** Renders the row with disabled styles */
disabled?: boolean;
/** Brightens the row so it can contrast with components such as Panel or Tabs */
brighten?: boolean;
}
type IndexListRowRef = HTMLTableRowElement;
declare const IndexListRow: React.ForwardRefExoticComponent>;
interface IndexListRowCellProps extends StandardFunctionProps {
/** Text alignment of contents */
alignment?: Alignment;
/** If true the contents of this cell will be hidden until the containing row is hovered */
revealOnHover?: boolean;
}
type IndexListRowCellRef = HTMLTableDataCellElement;
declare const IndexListRowCell: React.ForwardRefExoticComponent>;
declare class IndexList extends Component {
static readonly displayName = "IndexList";
static IndexList: React.ForwardRefExoticComponent>;
static Body: React.ForwardRefExoticComponent>;
static Header: React.ForwardRefExoticComponent>;
static HeaderCell: React.ForwardRefExoticComponent>;
static Row: React.ForwardRefExoticComponent>;
static Cell: React.ForwardRefExoticComponent>;
render(): JSX.Element;
}
interface InputProps extends StandardFunctionProps {
/** Minimum value for number & range types */
min?: number;
/** Maximum value for number & range types */
max?: number;
/** Stepping interval granularity for range type */
step?: number;
/** Determines whether checkbox is checked */
checked?: boolean;
/** Function to be called on field value change */
onChange?: (e: ChangeEvent) => void;
/** Function to be called on focus loss */
onBlur?: (e?: ChangeEvent) => void;
/** Function to be called on focus gain */
onFocus?: (e?: ChangeEvent) => void;
/** Function to be called on key press */
onKeyPress?: (e: KeyboardEvent) => void;
/** Function to be called on key up */
onKeyUp?: (e: KeyboardEvent) => void;
/** Function to be called on key down */
onKeyDown?: (e: KeyboardEvent) => void;
/** Icon to be displayed to the left of text */
icon?: IconFont;
/** Maximum string length for input value */
maxLength?: number;
/** Keyboard control tab order */
tabIndex?: number;
/** Input type (text, number, password, email, checkbox) */
type?: InputType;
/** Input field name attribute */
name?: string;
/** Input field value to be updated with 'on X' functions */
value?: string | number;
/** Placeholder text when no value is present */
placeholder?: string;
/** Allows or disallows browser autocomplete functionality */
autocomplete?: AutoComplete;
/** Text to be displayed on hover tooltip */
titleText?: string;
/** Text to be displayed on hover tooltip when radio button is disabled */
disabledTitleText?: string;
/** Input Component size */
size?: ComponentSize;
/** Input status state */
status?: ComponentStatus;
/** Whether or not the input receives autofocus when mounted */
autoFocus?: boolean;
/** Allows or disallows browser spellcheck functionality */
spellCheck?: boolean;
/** CSS attributes for the input element */
inputStyle?: CSSProperties;
/** For use within a form, marks the input as required */
required?: boolean;
/**
* Function to be called when the input field is cleared;
* if not included then the 'x' clear button will NOT be added
*/
onClear?: () => void;
/** Pass in a RegEx matcher for best results */
pattern?: string;
/** Pass through for container ref */
containerRef?: RefObject;
/** Render input using monospace font */
monospace?: boolean;
/** Color preview to be displayed to the left of text.
* Value should be in #000000 format.
* If both icon and colorPreview props are set, icon will take priority */
colorPreview?: string;
}
type InputRef = HTMLInputElement;
type InputContainerRef = HTMLDivElement;
declare const Input: React.ForwardRefExoticComponent>;
interface InputLabelProps extends StandardFunctionProps {
/** Used to match the state of the associated SlideToggle */
active?: boolean;
/** Button size */
size?: ComponentSize;
/** Controls text wrapping */
wrapText?: boolean;
/** Associate this label with a specific input */
htmlFor?: string;
/** Keyboard control tab order */
tabIndex?: number;
}
type InputLabelRef = HTMLLabelElement;
declare const InputLabel: React.ForwardRefExoticComponent>;
interface TextAreaProps extends StandardFunctionProps {
/** TextArea Component size */
size?: ComponentSize;
/** TextArea status state */
status?: ComponentStatus;
/** Function to be called on field value change */
onChange?: (e: ChangeEvent) => void;
/** Function to be called on focus loss */
onBlur?: (e?: ChangeEvent) => void;
/** Function to be called on focus gain */
onFocus?: (e?: ChangeEvent) => void;
/** Function to be called on key press */
onKeyPress?: (e: KeyboardEvent) => void;
/** Function to be called on key up */
onKeyUp?: (e: KeyboardEvent) => void;
/** Function to be called on key down */
onKeyDown?: (e: KeyboardEvent) => void;
/** Allows or disallows browser autocomplete functionality */
autocomplete?: AutoComplete;
/** Whether or not the input receives autofocus when mounted */
autoFocus?: boolean;
/** Associates the text area with a form even if outside the form */
form?: string;
/** Maximum string length for input value */
maxLength?: number;
/** Minimum string length for input value */
minLength?: number;
/** TextArea field name attribute */
name?: string;
/** Placeholder text when no value is present */
placeholder?: string;
/** Toggles read-only state of text area */
readOnly?: boolean;
/** Specified text area as a required field */
required?: boolean;
/** Sets width in columns */
cols?: number;
/** sets height in rows */
rows?: number;
/** Allows or disallows browser spellcheck functionality */
spellCheck?: boolean;
/** Sets text wrap */
wrap?: Wrap;
/** TextArea field value to be updated with 'on X' functions */
value?: string;
/** Container ref */
containerRef?: RefObject;
/** Use a monospace font */
monospace?: boolean;
}
type TextAreaRef = HTMLTextAreaElement;
type TextAreaContainerRef = HTMLDivElement;
declare const TextArea: React.ForwardRefExoticComponent>;
/**
* To have a clickable label (clicking on the label clicks/unclicks the toggle) add a 'htmlFor'
* property to the label that matches the buttonId.
*
* for example:
*
*
* handleSetOrientation(LEGEND_ORIENTATION_THRESHOLD_VERTICAL)
* }
* type={InputToggleType.Radio}
* size={ComponentSize.ExtraSmall}
* color={ComponentColor.Primary}
* appearance={Appearance.Outline}
* >
*
* Vertical
*
*
*
* and all radiobuttons in the same group should have the same name, as well.
*
*
* */
interface ToggleProps extends Omit {
/** Unique identifier for this toggle */
id: string;
/** Determines whether checkbox is checked */
checked?: boolean;
/** Choose either "Radio" or "Checkbox" */
type: InputToggleType;
/** Function to be called on change */
onChange: (value?: string) => void;
/** Function to be called on focus loss */
onBlur?: (e?: ChangeEvent) => void;
/** Function to be called on focus gain */
onFocus?: (e?: ChangeEvent) => void;
/** Function to be called on key press */
onKeyPress?: (e: KeyboardEvent) => void;
/** Function to be called on key up */
onKeyUp?: (e: KeyboardEvent) => void;
/** Function to be called on key down */
onKeyDown?: (e: KeyboardEvent) => void;
/** Icon to be displayed to the left of text */
icon?: IconFont;
/** Keyboard control tab order */
tabIndex?: number;
/** Used to group toggles together in a form */
name?: string;
/** Togle field value to be updated with 'on X' functions */
value?: string;
/** Text to be displayed on hover tooltip */
titleText?: string;
/** Text to be displayed on hover tooltip when radio button is disabled */
disabledTitleText?: string;
/** Toggle Component size */
size?: ComponentSize;
/** Prevents the user from interacting with this component */
disabled?: boolean;
/** Whether or not the input receives autofocus when mounted */
autoFocus?: boolean;
/** Refers to the visible element rather than the hidden input that ref refers to */
containerRef?: RefObject;
/** Controls color of toggle */
color?: ComponentColor;
/** Deprecated */
appearance?: Appearance;
/** Renders the toggle as "Solid" */
fill?: Appearance;
}
type ToggleRef = HTMLInputElement;
type ToggleContainerRef = HTMLDivElement;
declare const Toggle: React.ForwardRefExoticComponent>;
interface SelectGroupProps extends StandardFunctionProps {
/** SelectGroup color */
color?: ComponentColor;
/** SelectGroup size */
size?: ComponentSize;
/** Shape... */
shape?: ButtonShape;
}
type SelectGroupRef = HTMLDivElement;
interface SelectGroupOptionProps extends Omit {
/** Unique identifier for this radio button */
id: string;
/** Toggles radio button active state */
active: boolean;
/** Input value of the selected radio button */
value: any;
/** Keyboard control tab order */
tabIndex?: number;
/** Used to group toggles together in a form */
name?: string;
/** Function to be called on radio button click */
onClick: (value: any) => void;
/** Function to be called on key up */
onKeyUp?: (e: KeyboardEvent) => void;
/** Text to be displayed on hover tooltip */
titleText?: string;
/** Prevents the user from interacting with this component */
disabled?: boolean;
/** Text to be displayed on hover tooltip when radio button is disabled */
disabledTitleText?: string;
/** Choose either "SelectGroup" or "Checkbox" */
type?: InputToggleType;
/** Refers to the visible element rather than the hidden input that ref refers to */
containerRef?: RefObject;
}
type SelectGroupOptionRef = HTMLInputElement;
type SelectGroupOptionContainerRef = HTMLLabelElement;
declare const SelectGroupOption: React.ForwardRefExoticComponent>;
declare class SelectGroup extends Component {
static readonly displayName = "SelectGroup";
static SelectGroup: React.ForwardRefExoticComponent>;
static Option: React.ForwardRefExoticComponent>;
render(): JSX.Element;
}
interface AutoInputProps extends StandardFunctionProps {
/** Pass in a component of type "Input" */
inputComponent: JSX.Element;
/** Fires when the radio is toggled and the mode changes */
onChangeMode: (mode: AutoInputMode) => void;
/** Modality of radio, either "Auto" or "Custom" */
mode: AutoInputMode;
/** SelectGroup color */
color?: ComponentColor;
/** Controls size of SelectGroup & Input sub-components */
size?: ComponentSize;
/** Pass through ref for SelectGroup */
radioRef?: RefObject;
/** Pass through ref for "Auto" SelectGroupOption */
radioButtonAutoRef?: RefObject;
/** Pass through ref for "Custom" SelectGroupOption */
radioButtonCustomRef?: RefObject;
}
type AutoInputRef = HTMLDivElement;
declare const AutoInput: React.ForwardRefExoticComponent>;
interface RangeSliderProps extends StandardFunctionProps {
/** Minimum value */
min: number;
/** Maximum value */
max: number;
/** Stepping interval granularity for range type */
step?: number;
/** Input field value to be updated with 'on X' functions */
value: number;
/** Function to be called on field value change */
onChange: (e: ChangeEvent) => void;
/** Allows or disallows browser autocomplete functionality */
autocomplete?: AutoComplete;
/** Input status state */
status?: ComponentStatus;
/** Size of handle and track */
size?: ComponentSize;
/** Color of slider handle */
color?: ComponentColor;
/** Fill the track before the handle to indicate percentage */
fill?: boolean;
/** Displays the min and max values below the slider */
hideLabels?: boolean;
/** Adds a prefix to labels */
labelPrefix?: string;
/** Adds a suffix to labels */
labelSuffix?: string;
/** Determines orientation of range slider */
orientation?: ComponentOrientation;
/** Determines whether to display value */
displayValue?: boolean;
}
type RangeSliderRef = HTMLInputElement;
declare const RangeSlider: React.ForwardRefExoticComponent>;
interface VisibilityInputProps extends StandardFunctionProps {
/** Function to be called on field value change */
onChange?: (e: ChangeEvent) => void;
/** Function to be called on focus loss */
onBlur?: (e?: ChangeEvent) => void;
/** Function to be called on focus gain */
onFocus?: (e?: ChangeEvent) => void;
/** Function to be called on key press */
onKeyPress?: (e: KeyboardEvent) => void;
/** Function to be called on key up */
onKeyUp?: (e: KeyboardEvent) => void;
/** Function to be called on key down */
onKeyDown?: (e: KeyboardEvent) => void;
/** Icon to be displayed to the left of text */
icon?: IconFont;
/** Maximum string length for input value */
maxLength?: number;
/** Keyboard control tab order */
tabIndex?: number;
/** Input field name attribute */
name?: string;
/** Input field value to be updated with 'on X' functions */
value?: string;
/** Placeholder text when no value is present */
placeholder?: string;
/** Allows or disallows browser autocomplete functionality */
autocomplete?: AutoComplete;
/** Text to be displayed on hover tooltip */
titleText?: string;
/** Text to be displayed on hover tooltip when radio button is disabled */
disabledTitleText?: string;
/** Input Component size */
size?: ComponentSize;
/** Input status state */
status?: ComponentStatus;
/** Whether or not the input receives autofocus when mounted */
autoFocus?: boolean;
/** Allows or disallows browser spellcheck functionality */
spellCheck?: boolean;
/** For use within a form, marks the input as required */
required?: boolean;
/** Pass in a RegEx matcher for best results */
pattern?: string;
/** Toggle Visibility of text */
visible?: boolean;
/** Function to be called on button click */
onToggleClick?: (e?: MouseEvent) => void;
}
type VisibilityInputRef = HTMLInputElement;
declare const VisibilityInput: React.ForwardRefExoticComponent>;
type TimeInputRef = InputRef;
interface TimeInputProps extends Omit {
/** Callback for input changes */
onChange: (value: string, e?: ChangeEvent) => void;
/** Currently selected unit */
selectedUnit: string;
/** Available units (in Dropdown) */
units?: string[];
/** Callback for when time unit is changed */
onSelectUnit: (unit: string) => void;
}
declare const TimeInput: React.ForwardRefExoticComponent>;
interface LabelProps extends StandardFunctionProps {
/** Unique value to be returned when Label is clicked */
id: string;
/** Name of the Label, appears inside the label */
name: string;
/** Description of Label, appears on hover */
description: string;
/** Used to colorize the label, can be hexcode or rgba */
color: InfluxColors | string;
/** Optional click handler */
onClick?: (id: string) => void;
/** Optional delete handler, if passed in the delete button is rendered */
onDelete?: (id: string) => void;
/** Size of Label */
size?: ComponentSize;
}
type LabelRef = HTMLDivElement;
declare const Label: React.ForwardRefExoticComponent>;
type NavMenuProps = StandardFunctionProps;
type NavMenuRef = HTMLElement;
interface NavMenuItemProps extends StandardFunctionProps {
/** Render prop for linked title text */
titleLink: RenderLinkElement;
/** Render prop for linked icon component */
iconLink: RenderLinkElement;
/** Controls highlighting of the menu item */
active: boolean;
}
type NavMenuItemRef = HTMLDivElement;
declare const NavMenuItem: React.ForwardRefExoticComponent>;
interface NavMenuSubItemProps extends StandardFunctionProps {
/** Controls highlighting of the menu item */
active: boolean;
/** Render prop for linked title text (suggested or ) */
titleLink: (className: string, testID?: string, style?: CSSProperties) => JSX.Element;
}
declare const NavMenuSubItem: FunctionComponent;
declare class NavMenu extends Component {
static readonly displayName = "NavMenu";
static NavMenu: React.ForwardRefExoticComponent>;
static Item: React.ForwardRefExoticComponent>;
static SubItem: React.FunctionComponent;
render(): JSX.Element;
}
interface NotificationDialogProps extends StandardFunctionProps {
/** Icon to display before notification content */
icon?: IconFont;
/** Controls if the notification is showing or hidden */
visible?: boolean;
/** Optional gradient theme of panel, supercedes backgroundColor prop */
gradient?: Gradients;
/** Notification color */
backgroundColor?: InfluxColors | string;
/** If a function is passed in a dismiss button will appear on the notification */
onDismiss?: (id?: string) => void;
/** Controls padding and font size of the notification */
size: ComponentSize;
/** Notification theme */
color?: ComponentColor;
}
type NotificationDialogRef = HTMLDivElement;
declare const NotificationDialog: React.ForwardRefExoticComponent>;
interface NotificationProps extends NotificationDialogProps {
/** Positioning the notification left, center, or right on the window */
horizontalAlignment?: Alignment;
/** Positioning the notification top, middle, or bottom on the window */
verticalAlignment?: VerticalAlignment;
/** If a function is passed in a dismiss button will appear on the notification */
onDismiss?: (id?: string) => void;
/** Function called when duration expires */
onTimeout?: (id?: string) => void;
/** Duration before notification calls onTimeout function */
duration?: number;
}
type NotificationRef = NotificationDialogRef;
declare class Notification extends Component {
static readonly displayName = "Notification";
static Notification: React.ForwardRefExoticComponent>;
static Dialog: React.ForwardRefExoticComponent>;
render(): JSX.Element;
}
interface OverlayProps extends StandardFunctionProps {
/** Controls visibility of the overlay */
visible: boolean;
/** Will replace the mask element with a custom element, useful for customizing the mask appearance */
renderMaskElement?: (style: CSSProperties) => JSX.Element;
/** Controls the transition timing */
transitionDuration?: number;
/** Accepts state handler for visible prop to enable escape press functionality */
onEscape?: (visible: boolean) => void;
}
interface OverlayContainerProps extends StandardFunctionProps {
/** Pixel width maximum for overlay */
maxWidth?: number;
/** Margins on all sides of overlay */
margin?: ComponentSize;
fullScreen?: boolean;
}
type OverlayContainerRef = HTMLDivElement;
declare const OverlayContainer: React.ForwardRefExoticComponent>;
interface OverlayHeaderProps extends StandardFunctionProps {
/** Title of the Overlay */
title: string;
/** Passing a function into this prop will cause the Dismiss "X" to render in the header */
onDismiss?: () => void;
/** Wrap text */
wrapText?: boolean;
}
type OverlayHeaderRef = HTMLDivElement;
declare const OverlayHeader: React.ForwardRefExoticComponent>;
interface OverlayMaskProps extends StandardFunctionProps {
/** Optional gradient theme of panel*/
gradient?: Gradients;
/** Optional background color of panel, supercedes gradient prop */
backgroundColor?: InfluxColors | string;
}
type OverlayMaskRef = HTMLDivElement;
declare const OverlayMask: React.ForwardRefExoticComponent>;
interface OverlayBodyProps extends StandardFunctionProps {
}
type OverlayBodyRef = HTMLDivElement;
declare const OverlayBody: React.ForwardRefExoticComponent>;
interface OverlayFooterProps extends StandardFunctionProps {
justifyContent?: JustifyContent;
}
type OverlayFooterRef = HTMLDivElement;
declare const OverlayFooter: React.ForwardRefExoticComponent>;
declare class Overlay extends Component {
static readonly displayName = "Overlay";
static Overlay: React.FunctionComponent;
static Container: React.ForwardRefExoticComponent>;
static Header: React.ForwardRefExoticComponent>;
static Mask: React.ForwardRefExoticComponent>;
static Body: React.ForwardRefExoticComponent>;
static Footer: React.ForwardRefExoticComponent>;
render(): JSX.Element;
}
type ListItemRef = HTMLDivElement;
interface ListProps extends StandardFunctionProps {
/** Disable scrolling horizontally */
noScrollX?: boolean;
/** Disable scrolling vertically */
noScrollY?: boolean;
/** Automatically scroll to selected item when dropdown is opened */
scrollToSelected?: boolean;
/** Pass through ref for contents element within scrollbars */
contentsRef?: RefObject;
/** Useful for customizing appearance of the contents element within scrollbars */
contentsStyle?: CSSProperties;
/** Controls autoHide behavior of scrollbars within the menu */
autoHideScrollbars?: boolean;
/** Gradient start color */
thumbStartColor?: string | InfluxColors;
/** Gradient end color */
thumbStopColor?: string | InfluxColors;
/** Colorizes the background of the list */
backgroundColor?: InfluxColors | string;
/** Overrides backgroundColor, fills background with gradient */
gradient?: Gradients;
/** Pixel height after which the list will scroll */
maxHeight?: string;
}
type ListRef = HTMLDivElement;
type ListContentsRef = HTMLDivElement;
interface ListItemSharedProps {
/** Whether or not the item should have selected styling */
selected?: boolean;
/** Size of this component */
size?: ComponentSize;
}
interface ListItemContextProps extends ListItemSharedProps {
listItemContrastColor?: string;
listItemBackgroundColor?: InfluxColors | string;
listItemGradient?: Gradients;
}
type CombinedListItemProps = ListItemSharedProps & StandardFunctionProps;
interface ListItemProps extends CombinedListItemProps {
/** Value to be returned via the onClick function */
value?: any;
/** When a dropdown item is clicked, its `value` prop is returned via `onChange` */
onClick?: (value?: any, e?: MouseEvent) => void;
/** Controls whether the text contents of this item wrap or not */
wrapText?: boolean;
/** Title attribute */
title?: string;
/** Prevents any interaction with this element, including the onClick function */
disabled?: boolean;
/** Pass in an or element as an alternative to onClick */
linkElement?: JSX.Element;
/** Colorizes the background of the list item in hover and selected state */
backgroundColor?: InfluxColors | string;
/** Overrides backgroundColor, fills background with gradient */
gradient?: Gradients;
}
type ListItemRef$0 = HTMLButtonElement;
declare const ListItemContext: React.Context;
declare const ListItem: React.ForwardRefExoticComponent>;
interface ListEmptyStateProps extends StandardFunctionProps {
/** Controls whether the text contents of this item wrap or not */
wrapText?: boolean;
/** Size of this component */
size?: ComponentSize;
}
type ListEmptyStateRef = HTMLDivElement;
declare const ListEmptyState: React.ForwardRefExoticComponent>;
interface ListDividerProps extends StandardFunctionProps {
/** Text to be displayed on divider, a line will be displayed if no text is provided */
text?: string;
/** Size of this component */
size?: ComponentSize;
}
type ListDividerRef = HTMLDivElement;
declare const ListDivider: React.ForwardRefExoticComponent>;
type ListIndicatorType = "checkbox" | "dot";
interface ListIndicatorProps {
/** Controls appearance of indicator */
type: ListIndicatorType;
}
declare const ListIndicator: FunctionComponent;
interface ListIconProps {
/** Icon to display */
glyph: IconFont | string;
}
declare const ListIcon: FunctionComponent;
declare class List extends Component {
static readonly displayName = "List";
static List: React.ForwardRefExoticComponent>;
static Item: React.ForwardRefExoticComponent>;
static EmptyState: React.ForwardRefExoticComponent>;
static Divider: React.ForwardRefExoticComponent>;
static Indicator: React.FunctionComponent;
static Icon: React.FunctionComponent;
render(): JSX.Element;
}
interface InfluxDataLogoProps extends StandardFunctionProps {
/** Coloration of the SVG image */
fill?: InfluxColors | string;
/** Remove 'Act in time' from the logo */
simplified?: boolean;
}
type InfluxDataLogoRef = SVGSVGElement;
declare const InfluxDataLogo: React.ForwardRefExoticComponent>;
interface InfluxDBCloudLogoProps extends StandardFunctionProps {
/** Coloration of the SVG image */
fill?: InfluxColors | string;
/** Controls rendering of optional "cloud" suffix */
cloud: boolean;
}
type InfluxDBCloudLogoRef = SVGSVGElement;
declare const InfluxDBCloudLogo: React.ForwardRefExoticComponent>;
interface InfluxLogoProps extends StandardFunctionProps {
/** Coloration of the SVG image */
fill?: InfluxColors | string;
/** Kubo, KuboOld */
logoMark?: LogoMarks | string;
/** InfluxData, InfluxDb, Telegraf */
baseText?: LogoBaseText | string;
/** Cloud, Enterprise, Open Source */
auxiliaryText?: LogoAuxiliaryText | string;
/** Registered, Trademark */
symbol?: LogoSymbols | string;
/** Enables a centered logo on its own line */
centeredLogo: boolean;
}
type InfluxLogoRef = HTMLDivElement;
declare const InfluxLogo: React.ForwardRefExoticComponent>;
interface PageProps extends StandardFunctionProps {
/** Use this prop to update document.title when the page first renders & on subsequent updates */
titleTag?: string;
}
type PageRef = HTMLDivElement;
interface PageHeaderProps extends StandardFunctionProps {
/** Allows the control bar to fill the width of the screen */
fullWidth: boolean;
/** Controls the gutters (left and right margins) */
gutters?: ComponentSize;
}
type PageHeaderRef = HTMLDivElement;
declare const PageHeader: React.ForwardRefExoticComponent>;
interface PageTitleProps extends StandardFunctionProps {
/** Text to display in title */
title: string;
/** Alternate text for screen readers */
altText?: string;
}
type PageTitleRef = HTMLHeadingElement;
declare const PageTitle: React.ForwardRefExoticComponent>;
interface PageControlBarProps extends StandardFunctionProps {
/** Allows the control bar to fill the width of the screen */
fullWidth: boolean;
/** Controls the gutters (left and right margins) */
gutters?: ComponentSize;
}
type PageControlBarRef = HTMLDivElement;
declare const PageControlBar: React.ForwardRefExoticComponent>;
interface PageControlBarLeftProps extends StandardFunctionProps {
}
type PageControlBarLeftRef = HTMLDivElement;
declare const PageControlBarLeft: React.ForwardRefExoticComponent>;
interface PageControlBarCenterProps extends StandardFunctionProps {
}
type PageControlBarCenterRef = HTMLDivElement;
declare const PageControlBarCenter: React.ForwardRefExoticComponent>;
interface PageControlBarRightProps extends StandardFunctionProps {
}
type PageControlBarRightRef = HTMLDivElement;
declare const PageControlBarRight: React.ForwardRefExoticComponent>;
interface PageContentsProps extends StandardFunctionProps {
/** Allows the page contents to fill the width of the screen */
fullWidth?: boolean;
/** Allows contents to scroll on overflow */
scrollable?: boolean;
/** Scrollbar size */
scrollbarSize?: ComponentSize;
/** If scrollable is true, this toggles whether the scrollbar is always visible */
autoHideScrollbar?: boolean;
/** Controls the gutters (left and right margins) */
gutters?: ComponentSize;
}
type PageContentsRef = HTMLDivElement;
declare const PageContents: React.ForwardRefExoticComponent>;
declare class Page extends Component {
static readonly displayName = "Page";
static Page: React.ForwardRefExoticComponent>;
static Header: React.ForwardRefExoticComponent>;
static Title: React.ForwardRefExoticComponent>;
static ControlBar: React.ForwardRefExoticComponent>;
static ControlBarLeft: React.ForwardRefExoticComponent>;
static ControlBarCenter: React.ForwardRefExoticComponent>;
static ControlBarRight: React.ForwardRefExoticComponent>;
static Contents: React.ForwardRefExoticComponent>;
render(): JSX.Element;
}
interface PaginationNavProps extends StandardFunctionProps {
/** Total nuber of pages there exists */
totalPages: number;
/** currently active page */
currentPage: number;
/** Function to be called on page change */
onChange: (page: number) => void;
/** Determines how many pages are displayed within the nav.
* For Example, pageRangeOffset =1 will result in 7 items -> {1,...,(4),5,(6),...20},
* pageRangeOffset = 2 will result in 9 items -> {1,...,(4,5),6,(7,8)...20},
* pageRangeOffset = 3 will result in 11 items -> {1,...,(4,5,6),7,(8,9,10)...20} and so on
* The compute functions will need to be refactored to provide more flexible range*/
pageRangeOffset: number;
hideDirectionIcon?: boolean;
size?: ComponentSize;
enableArrowPaginate?: boolean;
enablePageInput?: boolean;
}
type PaginationNavRef = HTMLElement;
declare const Pagination: React.ForwardRefExoticComponent>;
interface PaginationItemProps extends StandardFunctionProps {
page?: string;
isActive: boolean;
onClick?: (e?: MouseEvent) => void;
size?: ComponentSize;
}
type PaginationItemRef = HTMLLIElement;
declare const PaginationItem: React.ForwardRefExoticComponent>;
interface PaginationTruncationItemProps extends StandardFunctionProps {
onClick?: (e?: MouseEvent) => void;
size?: ComponentSize;
}
type PaginationTruncationItemRef = HTMLLIElement;
declare const PaginationTruncationItem: React.ForwardRefExoticComponent>;
interface PaginationDirectionItemProps extends StandardFunctionProps {
/** Caret Left or Caret Right on button */
direction: Direction;
onClick?: (e?: MouseEvent) => void;
size?: ComponentSize;
isActive: boolean;
}
type PaginationDirectionItemRef = HTMLLIElement;
declare const PaginationDirectionItem: React.ForwardRefExoticComponent>;
interface PaginationInputProps extends StandardFunctionProps {
currentPage: number;
onChange?: (e: ChangeEvent) => void | undefined;
onClick?: (e?: MouseEvent) => void;
size?: ComponentSize;
}
type PaginationInputRef = HTMLInputElement;
declare const PaginationInput: React.ForwardRefExoticComponent>;
declare class PaginationNav extends Component {
static readonly displayName = "PaginationNav";
static PaginationNav: React.ForwardRefExoticComponent>;
static Item: React.ForwardRefExoticComponent>;
static TruncationItem: React.ForwardRefExoticComponent>;
static DirectionItem: React.ForwardRefExoticComponent>;
static Input: React.ForwardRefExoticComponent>;
render(): JSX.Element;
}
interface PanelProps extends StandardFunctionProps {
/** Optional gradient theme of panel, supercedes backgroundColor prop */
gradient?: Gradients;
/** Optional background color of panel */
backgroundColor?: InfluxColors | string;
/** If a function is passed in a dismiss button will appear on the Panel */
onDismiss?: () => void;
/** Applies to the dismiss button rendered when onDismiss is present */
dismissButtonColor?: ComponentColor;
/** Renders a border based on the background color or gradient */
border?: boolean;
}
type PanelRef = HTMLDivElement;
interface PanelHeaderProps extends Omit {
/** Controls padding */
size?: ComponentSize;
}
type PanelHeaderRef = FlexBoxRef;
declare const PanelHeader: React.ForwardRefExoticComponent>;
interface PanelSymbolHeaderProps extends PanelHeaderProps {
/** Element to display before header text (Bullet or Icon) */
symbol?: JSX.Element;
/** Panel title */
title?: JSX.Element;
}
type PanelSymbolHeaderRef = PanelHeaderRef;
declare const PanelSymbolHeader: React.ForwardRefExoticComponent>;
interface PanelBodyProps extends Omit {
/** Controls padding */
size?: ComponentSize;
}
type PanelBodyRef = FlexBoxRef;
declare const PanelBody: React.ForwardRefExoticComponent>;
interface PanelFooterProps extends Omit {
/** Controls padding */
size?: ComponentSize;
}
type PanelFooterRef = FlexBoxRef;
declare const PanelFooter: React.ForwardRefExoticComponent>;
declare class Panel extends Component {
static readonly displayName = "Panel";
static Panel: React.ForwardRefExoticComponent>;
static Header: React.ForwardRefExoticComponent