import { ButtonHTMLAttributes } from 'react';
import type { ChangeEvent } from 'react';
import type { ClipboardEvent as ClipboardEvent_2 } from 'react';
import { ComponentPropsWithRef } from 'react';
import { CountryCode } from 'libphonenumber-js';
import type { FormEvent } from 'react';
import type { KeyboardEvent as KeyboardEvent_2 } from 'react';
import type { MouseEvent as MouseEvent_2 } from 'react';
import { MutableRefObject } from 'react';
import { default as React_2 } from 'react';
import * as React_3 from 'react';
import { ReactEventHandler } from 'react';
import { ReactNode } from 'react';
import { RefAttributes } from 'react';
import type { TouchEvent as TouchEvent_2 } from 'react';
export declare const Accordion: React_2.ForwardRefExoticComponent>;
export declare const AccordionHeader: React_2.ForwardRefExoticComponent>;
export declare interface AccordionHeaderProps {
/** The content to display in the header button */
children: React_2.ReactNode;
}
export declare const AccordionPanel: React_2.ForwardRefExoticComponent>;
export declare interface AccordionPanelProps {
/** The content to display in the panel */
children: React_2.ReactNode;
/** Forwarded to `AccordionPanel` `div` for applying styles */
className?: string;
}
export declare interface AccordionProps {
/** List of `AccordionSection` components */
children: React_2.ReactNode;
/** The heading level assigned to the header of each section */
headingLevel: 1 | 2 | 3 | 4 | 5 | 6 | null;
/** Specifies a styling theme
* @defaultValue 'default'*/
variant?: 'default' | 'outlined' | 'block';
/** Allows multiple sections to be open at the same time
* @defaultValue false */
isMultiOpen?: boolean;
/** An array of section ids that should be open by default
* @defaultValue [] */
initialOpenSectionIds?: string[];
/** An array of section ids that are currently open */
openSectionIds?: string[];
/** Handler to be called whenever a section opens or closes */
onOpenSectionIdsChange?: (newOpenSectionIds: string[]) => void;
/** Controls the overflow behavior of accordion panels, allows for custom overflow styles to be applied to the accordion panel
* @defaultValue 'auto' */
overflow?: 'auto' | 'visible' | 'hidden' | 'clip' | 'scroll';
/** Added to the containing `div` element and to each
* `AccordionHeader` and `AccordionPanel` component with a suffix:
* - `AccordionHeader`: `-section-0-header`
* - `AccordionPanel`: `-section-0-panel`
*
* Note: the number in each `data-testid` will correspond with that section's position in the `Accordion` */
'data-testid'?: string;
}
export declare const AccordionSection: React_2.ForwardRefExoticComponent>;
export declare interface AccordionSectionProps {
/** The `AccordionHeader` and `AccordionPanel` components */
children: React_2.ReactNode;
/** Unique identifier for an `AccordionSection`. Used with `openSectionIds`
* and `onOpenSectionIdsChange` to manually control `Accordion` state. */
id?: string;
/** @internal */
position?: number;
/** Disables interaction with the section's header
* @defaultValue false */
isDisabled?: boolean;
}
export declare const Banner: React_2.ForwardRefExoticComponent>;
export declare const BannerBody: {
({ children }: BannerBodyProps): React_2.ReactElement;
displayName: string;
};
export declare interface BannerBodyProps {
/** The contents of the banner body. The `BannerBody` component is expected inside `Banner`. */
children: React_2.ReactNode;
}
export declare const BannerFooter: {
({ children }: BannerFooterProps): React_2.ReactElement;
displayName: string;
};
export declare interface BannerFooterProps {
/**
* The contents of the banner footer. Any interactive elements
* present in the banner should be placed in the footer.
* The `BannerFooter` component is optional inside `Banner`.
*/
children: React_2.ReactNode;
}
export declare interface BannerProps extends React_2.AllHTMLAttributes {
/** The banner parts provided as children. */
children: React_2.ReactNode;
/** The function to be called when close button is pressed. Exclude this property to make a non-dismissible banner. */
onClose?: () => void;
/** The status of the UI banner. Each status automatically sets a default icon. The `icon` prop is not required. */
status?: 'info' | 'warn' | 'error' | 'success';
/** Icon to use in banner.*/
icon?: IconComponent;
/**
* Added to the containing `div` element and to each `BannerTitle`, `BannerBody`, and `BannerFooter` component with a suffix:
* - `BannerTitle`: `-title`
* - `BannerBody`: `-body`
* - `BannerFooter`: `-footer`
*/
'data-testid'?: string;
}
export declare const BannerTitle: {
({ children }: BannerTitleProps): React_2.ReactElement;
displayName: string;
};
export declare interface BannerTitleProps {
/** The contents of the banner title. The `BannerTitle` component is optional inside `Banner`. */
children: React_2.ReactNode;
}
declare interface BaseNavLinkProps {
children?: React_2.ReactNode;
to: string;
'aria-label'?: string;
'data-testid'?: string;
}
export declare function Breakpoint({ size, children, }: BreakpointProps): null;
export declare interface BreakpointProps {
/** The content to display when the breakpoint threshold is met. */
children: React.ReactNode;
/** The breakpoint size threshold to use. */
size: DefaultBreakpoints;
}
export declare function BreakpointSwitch({ children }: BreakpointSwitchProps): React_2.ReactElement;
export declare interface BreakpointSwitchProps {
/** List of `Breakpoint` components */
children: React_2.ReactNode;
}
export declare const Button: React_2.ForwardRefExoticComponent>;
export declare const ButtonGroup: React_2.ForwardRefExoticComponent>;
export declare interface ButtonGroupProps extends React_2.AllHTMLAttributes {
/** List of `Button` components or other React nodes. */
children: React_2.ReactNode;
/** Makes the `ButtonGroup` take the width of its parent and makes its children grow to fill the space.
* @defaultValue false */
full?: boolean;
/** Makes the `ButtonGroup` and all of its children smaller.
* @defaultValue false */
small?: boolean;
/** Appended to internal classes on the containing `span` element. */
className?: string;
[prop: string]: any;
}
export declare interface ButtonProps extends React_2.AllHTMLAttributes {
/** The contents of the button. */
children?: React_2.ReactNode;
/** Specifies the use of the button and customizes its color.
* @defaultValue 'default'*/
kind?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'link' | 'danger';
/** Disables click events on the button and styles it to look as though it cannot be clicked.
* @defaultValue false */
disabled?: boolean;
/** Makes the button take up the full width of its container.
* @defaultValue false */
full?: boolean;
/** Makes the button smaller.
* @defaultValue false */
small?: boolean;
/** Appended to internal classes on the `button` element. */
className?: string;
/** Specifies the type of the button.
* @defaultValue 'button' */
type?: 'button' | 'submit' | 'reset';
/** Handler to be called when the button is clicked. Use to handle user interaction with the button. */
onClick?: (event: React_2.MouseEvent) => void;
/** Handler to be called when a keyboard key is pressed down while button has focus. */
onKeyDown?: (event: React_2.KeyboardEvent) => void;
/** Causes the button to be declared as disabled by screen readers. If not defined, `aria-disabled` defaults to the value of the `disabled` prop. */
'aria-disabled'?: boolean;
[prop: string]: any;
}
export declare const Checkbox: React_2.ForwardRefExoticComponent>;
export declare const CheckboxField: React_2.ForwardRefExoticComponent>;
export declare interface CheckboxFieldProps extends Omit, 'label' | 'onChange' | 'checked' | 'defaultChecked'> {
/** Label to accompany the checkbox. */
label: React_2.ReactNode;
/** The state of whether the checkbox is checked or not.
* Requires use of `onChange` prop. Cannot be used with `defaultChecked`. */
checked?: CheckboxProps['checked'];
/** The initial value of an uncontrolled checkbox. Cannot be used with `checked` prop. */
defaultChecked?: CheckboxProps['defaultChecked'];
/** Disables change events on the checkbox and styles it to look as though it cannot be clicked.
* @defaultValue false */
disabled?: CheckboxProps['disabled'];
/** Identifier for the `input` element. Commonly used in forms with a label. */
id?: CheckboxProps['id'];
/** Change handler to be fired when the checkbox state changes. */
onChange?: CheckboxProps['onChange'];
/** The value of the component. */
value?: CheckboxProps['value'];
/** Appended to internal classes on the containing `Label` component. */
className?: CheckboxProps['className'];
/** Props forwarded to the `input` element. */
inputProps?: CheckboxProps['inputProps'];
/** The id of an element that describes the `Checkbox`. */
'aria-describedby'?: CheckboxProps['aria-describedby'];
}
export declare interface CheckboxProps extends Omit, 'checked' | 'defaultChecked'> {
/** The state of whether the checkbox is checked or not.
* Requires use of 'onChange' prop. Cannot be used with 'defaultChecked'. */
checked?: boolean | 'mixed';
/** The initial value of an uncontrolled checkbox. Cannot be used with 'checked' prop. */
defaultChecked?: boolean | 'mixed';
/** Disables change events on the checkbox and styles it to look as though it cannot be clicked.
* @defaultValue false */
disabled?: boolean;
/** Identifier for the input element. Commonly used in forms with a label. */
id?: string;
/** Change handler to be fired when the checkbox state changes.
* The event that triggers the change is passed as the first parameter. */
onChange?: (event: React_2.ChangeEvent) => void;
/** The value of the component. */
value?: string;
/** Appended to internal classes on the containing `span` element. */
className?: string;
/**
* Unique name for use with forms.
*
* See [Form API](../../form/getting-started) for more information.
*/
name?: string;
/** Provides a label for the `Checkbox` */
label?: string;
/** Props forwarded to the `input` element. */
inputProps?: Omit, 'type'>;
/** Adds an error message directly below the `Checkbox` */
errorText?: ReactNode;
/** Adds additional information directly below the `Checkbox` */
helperText?: ReactNode;
/** An accessible label for the `Checkbox` that is used by screen readers. */
'aria-label'?: string;
/** The id of an element that acts as a label for the `Checkbox`. */
'aria-labelledby'?: string;
/** The id of an element that describes the `Checkbox`. */
'aria-describedby'?: string;
[prop: string]: any;
}
export declare interface Color {
hex: string;
alpha?: number;
name?: string;
}
export declare function ColorPicker({ color: externalColor, onChange, palette, isAlphaEnabled, hideHSVSelector, hideFlyoutInputs, isDisabled, id, buttonRef: externalButtonRef, inputRef: externalInputRef, elementRefToFocusOnClose, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, zIndex, 'data-testid': dataTestId, CustomAnchor, hexInputHidden, hasSelection, noColorHandlers, noColorSet, }: ColorPickerProps): React_2.ReactElement;
export declare interface ColorPickerProps {
/** An object containing the current color state.
* - `hex`: A 6-character hexadecimal color code, prefixed with `#`
* - `name`: An accessible name for the color
* - `alpha`: A number between 0 and 100 representing the opacity of the color
*/
color: Color;
/** Handler to be called whenever color changes */
onChange: (newColor: Color) => void;
/** A list of pre-configured color objects presented as swatches
* @defaultValue DEFAULT_COLOR_PALETTE
*/
palette?: Color[];
/** Adds controls for setting color transparency
* @defaultValue false
*/
isAlphaEnabled?: boolean;
/** Removes HSV selector from the flyout
* @defaultValue false
*/
hideHSVSelector?: boolean;
/** Removes hex and RGB inputs from the flyout
* @defaultValue false
*/
hideFlyoutInputs?: boolean;
/** Disables user interactions with the component
* @defaultValue false
*/
isDisabled?: boolean;
/** Unique identifier for the `ColorPicker`
* @defaultValue false
*/
id?: string;
/** Ref to be assigned to the `ColorPicker`'s anchor button
*/
buttonRef?: React_2.Ref;
/** Ref to be assigned to the `ColorPicker`'s input field
*/
inputRef?: React_2.Ref;
/** An element ref to focus when the color picker flyout closes. If this prop is not used, the element that was focused prior to the flyout opening will receive focus when the flyout closes.
*/
elementRefToFocusOnClose?: React_2.RefObject;
/** The z-index of the flyout
* @defaultValue 1000
*/
zIndex?: number;
/** Accessible label for the `ColorPicker`
*/
'aria-label'?: string;
/** Id of the element that serves as the accessible label for the `ColorPicker`
* @defaultValue false
*/
'aria-labelledby'?: string;
/** Id of the element that serves as the description for the `ColorPicker`
* @defaultValue false
*/
'aria-describedby'?: string;
/** Added to the containing `span`, and to main sub-components with the following suffixes
* - `-anchor-button`: assigned to the top level button that opens the flyout
* - `-hex-input`: assigned to the top level hex text input
* - `-flyout`: assigned to the flyout container
* - `-saturation-grid`: assigned to the saturation slider container
* - `-saturation-thumb`: assigned to the moveable saturation slider element
* - `-flyout-color-preview`: assigned to the color swatch in the flyout next to the hue slider
* - `-hue-rail`: assigned to the hue slider container
* - `-hue-thumb`: assigned to the moveable hue slider element
* - `-alpha-rail`: assied to the alpha slider container
* - `-alpha-thumb`: assigned to the moveable alpha slider element. Only available while `isAlphaEnabled`
* - `-flyout-hex-input`: assigned to the hex text input inside the flyout
* - `-R-channel`: assigned to the red channel text input
* - `-G-channel`: assigned to the green channel text input
* - `-B-channel`: assigned to the blue channel text input
* - `-alpha-channel`: assigned to the alpha channel text input. Only available while `isAlphaEnabled`
* - `-palette`: assigned to the palette container
* - `-__HEX__-swatch`: assigned to each individual swatch. `__HEX__` should be replaced by
* the color's 6-character hex with the leading `#` removed.
*/
'data-testid'?: string;
/** A custom element that will be used as the anchor for the color picker flyout.
* When provided, this will replace the default color swatch button.
*/
CustomAnchor?: React_2.ReactElement> & React_2.RefAttributes;
/** Hides the hex input field that appears below the color picker button.
* @defaultValue false
*/
hexInputHidden?: boolean;
/** @internal
*/
hasSelection?: boolean;
/** Handler to be called when the user selects "No color"
* @internal
* */
noColorHandlers?: {
noColorHandler: () => void;
transparentHandler: () => void;
};
/** @internal */
noColorSet?: boolean;
}
export declare function ColorPickerWithNoColor({ color: externalColor, onChange: externalOnChange, hasSelection, ...rest }: ColorPickerWIthNoColorProps): React_2.ReactElement;
export declare interface ColorPickerWIthNoColorProps extends Omit {
/** An object containing the current color state (undefined means no color selected).
* - `hex`: A 6-character hexadecimal color code, prefixed with `#`
* - `name`: An accessible name for the color
* - `alpha`: A number between 0 and 100 representing the opacity of the color
*/
color: Color | undefined;
/** Handler to be called whenever color changes, it might be called with undefined to indicate no color selected */
onChange: (newColor: Color | undefined) => void;
/** Shows the clear selection button
*/
hasSelection?: boolean;
}
export declare const Combobox: React_2.ForwardRefExoticComponent & React_2.RefAttributes>;
export declare const ComboboxHeader: React_2.ForwardRefExoticComponent>;
export declare interface ComboboxHeaderProps extends React_2.AllHTMLAttributes {
/** The name of the header for grouping options. */
title: string;
/** The relevant `ComboboxOption` components for the group. */
children?: ReactNode;
[prop: string]: any;
}
export declare const ComboboxInput: React_2.ForwardRefExoticComponent>;
export declare interface ComboboxInputProps extends Omit, 'type'> {
/** Overrides the `aria-label` prop passed into `Combobox`. */
'aria-label'?: string;
/** Overrides the `aria-labelledby` prop passed into `Combobox`. */
'aria-labelledby'?: string;
[prop: string]: any;
}
export declare const ComboboxList: React_2.ForwardRefExoticComponent>;
export declare interface ComboboxListProps extends React_2.AllHTMLAttributes {
/** The displayed `ComboboxOption`s and `ComboboxHeader`s in the list. */
children?: React_2.ReactNode;
/** Where to prioritize placement of the `ComboboxList` relative to the `ComboboxInput`.
* @defaultValue 'bottom-start'
*/
placement?: Placement;
/** The container element where the `ComboboxList` should be rendered. Overrides the default set by [`UIProvider`](/components/ui-provider). */
portalTarget?: HTMLElement;
[prop: string]: any;
}
export declare const ComboboxOption: React_2.ForwardRefExoticComponent>;
export declare interface ComboboxOptionProps extends React_2.AllHTMLAttributes {
/** Used to display non-string options to the user. */
children?: React_2.ReactNode;
/** The unique value associated with the option. */
value: string | number;
/** The string representation to display the option to the user. */
label: string;
/** Handler to be called when the option is selected by a click on the option itself or by a keyboard event on the `ComboboxInput`. */
onSelect?: React_2.ReactEventHandler;
[prop: string]: any;
}
export declare interface ComboboxProps extends Omit, 'onChange' | 'value' | 'defaultValue'> {
/** The `ComboboxInput` and `ComboboxList`.
*/
children?: React_2.ReactNode;
/** The initially selected value of the Combobox.
* @defaultValue ''
*/
defaultValue?: string | number | null;
/** The selected value of the Combobox. */
value?: string | number | null;
/** Handler to be called whenever a new value is selected for the combobox. */
onChange?: (value: string | number | null) => void;
/** Disable the combobox input and icon button. */
disabled?: boolean;
/** The valid state of the combobox
* @defaultValue false
*/
isInvalid?: boolean;
/** If false, options/headers will be filtered by a case-insenstitive comparison to the current input value. If true, options/headers will not be filtered.
* @defaultValue false
*/
isFilteringDisabled?: boolean;
/** Used to control the opened/closed state of the list of options. */
isOpen?: boolean;
/** Handler to be called whenever the combobox list is opened/closed. */
onIsOpenChange?: (isOpen: boolean) => void;
/** If true, an option will automatically be selected when the combobox loses focus if the current input value matches one of the options.
* @defaultValue true
*/
unstable_autoSelect?: boolean;
/** If true, don't require the text input to match an option when it loses focus. This allows the input to have any value.
* @defaultValue false
*/
unstable_freeForm?: boolean;
/** Show a loading spinner instead of options. Useful for asynchrously getting options.
* @defaultValue false
*/
unstable_isLoading?: boolean;
/** If true, highlighting an option using the keyboard will select the option. This prop sets `isFilteringDisabled` to `true`.
* @defaultValue false
*/
unstable_isOptionSelectedOnKeyboardHighlight?: boolean;
/** Forwarded to `ComboboxInput` and `ComboboxList`. */
'aria-label'?: string;
/** Forwarded to `ComboboxInput` and `ComboboxList`. */
'aria-labelledby'?: string;
/** Appended to internal classes on the containing `div` element.
*/
className?: string;
[prop: string]: any;
}
export declare const ConfigPane: React_2.FunctionComponent;
export declare interface ConfigPaneProps {
/** The content of the config pane */
children?: ReactNode;
/** Title for the config pane */
title?: ReactNode;
/** Adds controls for setting open state
* @defaultValue true */
isOpen?: boolean;
/** Handler to be called whenever `isOpen` changes */
onIsOpenChange?: (newIsOpen: boolean) => void;
/** Hides the button that opens and closes the pane
* @defaultValue false */
hideOpenButton?: boolean;
/** Adds controls for setting pinned state
* @defaultValue true */
isPinned?: boolean;
/** Handler to be called whenever `isPinned` changes */
onIsPinnedChange?: (newIsPinned: boolean) => void;
/** Hides the button that pins the pane
* @defaultValue false */
hidePinButton?: boolean;
/** Leaves a little extra white space when the panel is closed.
* Meant to be used when the panel is placed on the far left side of the view port
* (i.e. when used without a navigation sidebar)
* @defaultValue false */
shouldShowPanelPreview?: boolean;
/** Id applied to the config pane container aside */
id?: string;
/** A string used as the name of the `ConfigPane` for accessibility contexts */
'aria-label'?: string;
/** The id of an element that contains the accessible name for the `ConfigPane` */
'aria-labelledby'?: string;
/** The id of an element that adds additional information about the `ConfigPane` for accessibility contexts */
'aria-describedby'?: string;
/** Added to the containing aside, and to main sub-components with the following suffixes:
* - `-title`: assigned to the title container
* - `-pin-unpin-button`: assigned to the pin/unpin button
* - `-body`: assigned to the body content container
* - `-expand-collapse-button`: assigned to the expand/collapse button
*/
'data-testid'?: string;
}
export declare const createTranslationProvider: () => {
TranslationProvider: React_2.FunctionComponent>;
useTranslationContext: () => TranslationContextType;
};
declare const _default: {
"chat.inputLabel": string;
"chat.sendMessageButtonLabel": string;
"chat.botLabel": string;
"chat.userLabel": string;
"chat.inputCharacterCounter": string;
"chat.loaderLabel": string;
"chat.cancelButtonLabel": string;
"chat.accessibleMessageLabel": string;
"chat.maxCharacterLimit": string;
"chat.inputHelperText": string;
"filePicker.single": string;
"filePicker.multiple": string;
"logicEditor.all": string;
"logicEditor.any": string;
"logicEditor.insertConditionBelow": string;
"logicEditor.insertSetBelow": string;
"logicEditor.delete": string;
"logicEditor.conditionActions": string;
"menu.noItemsToDisplay": string;
pagination: string;
previousPage: string;
nextPage: string;
searchText: string;
clearSearchInput: string;
noMatchesFound: string;
close: string;
"configPane.showPanel": string;
"configPane.hidePanel": string;
"configPane.pinPanel": string;
"configPane.unpinPanel": string;
increment: string;
decrement: string;
"collapsibleSearchInput.openSearchField": string;
"toolbar.showToolbar": string;
selectOne: string;
selectOneOrMore: string;
selectedItems: string;
"toolbar.hideToolbar": string;
showPanel: string;
hidePanel: string;
showLabels: string;
hideLabels: string;
loading: string;
colorPickerAnchorDesc: string;
saturation: string;
slider2D: string;
saturationPercent: string;
valuePercent: string;
hue: string;
degrees: string;
alpha: string;
hex: string;
redChannel: string;
greenChannel: string;
blueChannel: string;
alphaChannel: string;
palette: string;
selectColor: string;
"colorPicker.noColor": string;
"colorPicker.clearSelection": string;
checked: string;
unchecked: string;
mixed: string;
"advancedTable.arrowKeyDescription": string;
"advancedTable.rowActionDescription": string;
"advancedTable.rowCheckboxDescription": string;
"advancedTable.pinColumn": string;
"advancedTable.unpinColumn": string;
"advancedTable.moveColumnLeft": string;
"advancedTable.moveColumnRight": string;
"advancedTable.expandRow": string;
"advancedTable.collapseRow": string;
readOnly: string;
newOptionsLoading: string;
newOptionsLoaded: string;
locked: string;
currentPage: string;
firstPage: string;
lastPage: string;
currentPageNumber: string;
currentPageNumberOf: string;
rowDisplayCount: string;
buttonLabel: string;
splitButtonMoreOptionLabel: string;
};
export declare const DEFAULT_BREAKPOINTS: {
xs: number;
sm: number;
md: number;
lg: number;
xl: number;
};
export declare type DefaultBreakpoints = keyof typeof DEFAULT_BREAKPOINTS;
export declare interface deprecated_ColorHsb {
h: number;
s: number;
b: number;
a: number;
}
export declare interface deprecated_ColorHsl {
h: number;
s: number;
l: number;
a: number;
}
/**
* @deprecated Instead, use:
* ```
* import { ColorPicker } from '@qualtrics/ui-react';
* ```
*/
export declare const deprecated_ColorPicker: React_2.ForwardRefExoticComponent>;
export declare interface deprecated_ColorPickerProps extends Omit {
/** Added to the [Button](/components/button) component and to the hex sub-component, with its own suffix:
* Hex input: `-Hex`
* */
'data-testid'?: string;
/** Set a default color for the color picker. See [Color Formats](/deprecated/color-picker/#color-formats) for acceptable formats.
* @defaultValue '#000000'
*/
defaultColor?: string | deprecated_ColorHsb | deprecated_ColorHsl | deprecated_ColorRgb;
/** The color value for the color picker. Used for controlled component behavior. See [Color Formats](/deprecated/color-picker/#color-formats) for acceptable formats. */
color?: string | deprecated_ColorHsb | deprecated_ColorHsl | deprecated_ColorRgb;
/** Appended to internal classes on the [Button](/components/button) component. */
className?: string;
/** Adds an alpha slider to the color picker.
* @defaultValue false
*/
enableAlpha?: boolean;
/** Change handler to be called every time the color changes. */
onChange?: (color: deprecated_ColorResult, event: Event | MouseEvent_2 | TouchEvent_2 | KeyboardEvent_2 | ChangeEvent) => void;
/** Customize the swatches to be shown in the color picker.
* @defaultValue See 'Default Swatches' section above
*/
swatches?: string[];
/** The z-index of the color picker's popover content.
* @defaultValue 1000
*/
zIndex?: number;
[prop: string]: any;
}
export declare interface deprecated_ColorResult {
hex: string;
hsb: deprecated_ColorHsb;
hsl: deprecated_ColorHsl;
hslString: string;
hslaString: string;
rgb: deprecated_ColorRgb;
rgbString: string;
rgbaString: string;
}
export declare interface deprecated_ColorRgb {
r: number;
g: number;
b: number;
a: number;
}
export declare const deprecated_DEFAULT_SWATCH_COLORS: string[];
/**
* Renders the NumberStepper component.
* This component is offered as a "default" (aka simple) component or an "advanced" (aka composite) component.
*
* @deprecated Instead, use:
* ```
* import { NumberStepper } from '@qualtrics/ui-react';
* ```
*/
export declare const deprecated_NumberStepper: React_2.ForwardRefExoticComponent>;
export declare interface deprecated_NumberStepperButtonProps extends React_2.AllHTMLAttributes {
/** Will not include the suffix from the NumberStepper component. */
'data-testid'?: string;
/** Appended to internal classes on the `button` element. */
className?: string;
/** Handler to be called when the button is clicked. */
onClick?: React_2.MouseEventHandler;
[prop: string]: any;
}
/**
* Renders the NumberStepperDecrement component.
* Either `NumberStepper` renders this component automatically or the consumer renders this component explicitly.
*
* @deprecated Instead, use:
* ```
* import { NumberStepperDecrement } from '@qualtrics/ui-react';
* ```
*/
export declare const deprecated_NumberStepperDecrement: React_2.ForwardRefExoticComponent>;
/**
* Renders the NumberStepperIncrement component.
* Either `NumberStepper` renders this component automatically or the consumer renders this component explicitly.
*
* @deprecated Instead, use:
* ```
* import { NumberStepperIncrement } from '@qualtrics/ui-react';
* ```
*/
export declare const deprecated_NumberStepperIncrement: React_2.ForwardRefExoticComponent>;
/**
* Renders the NumberStepperInput component.
* Either `NumberStepper` renders this component automatically or the consumer renders this component explicitly.
*
* @deprecated Instead, use:
* ```
* import { NumberStepperInput } from '@qualtrics/ui-react';
* ```
*/
export declare const deprecated_NumberStepperInput: React_2.ForwardRefExoticComponent>;
export declare interface deprecated_NumberStepperInputProps extends React_2.AllHTMLAttributes {
/** Will not include the suffix from the NumberStepper component. */
'data-testid'?: string;
/** Appended to internal classes on the input element. */
className?: string;
/** An accessible label for the input to be used by screen readers. This prop overrides the `aria-label` prop in `NumberStepper`. */
'aria-label'?: string;
/** The id of an element that acts as a label for the input. This prop overrides the `aria-labelledby` prop in `NumberStepper`. */
'aria-labelledby'?: string;
/** The id of an element that describes the input. This prop overrides the `aria-describedby` prop in `NumberStepper`. */
'aria-describedby'?: string;
[prop: string]: any;
}
export declare interface deprecated_NumberStepperProps extends Omit, 'onChange'> {
/** Disables default interaction.
* @defaultValue false
*/
isDisabled?: boolean;
/** Added to the containing `span` element and to the main sub-components, each with their own suffix:
* NumberStepperDecrement: `-Decrement`
* NumberStepperIncrement: `-Increment`
* NumberStepperInput: `-Input` */
'data-testid'?: string;
/** Forwarded to `NumberStepperInput` as an id.
*/
inputId?: string;
/** Initial value of `NumberStepper`.
* @defaultValue 0
*/
defaultValue?: number | '';
/** Value of NumberStepper. Overrides defaultValue.
*/
value?: number | '';
/** A stepping interval to use when incrementing and decrementing.
* @defaultValue 1
*/
step?: number;
/** The minimum value to accept. Must be less than or equal to the max property. */
min?: number;
/** The maximum value to accept. Must be greater than or equal to the min property. */
max?: number;
/** The width of the component. Added to the containing span element.
* @defaultValue 120
*/
width?: number | string;
/** Appended to internal classes on the containing `span` element. */
className?: string;
/** An accessible label for NumberStepper to be used by screen readers. This prop is forwarded to the `NumberStepperInput`. */
'aria-label'?: string;
/** The id of an element that acts as a label for NumberStepper. This prop is forwarded to the `NumberStepperInput`. */
'aria-labelledby'?: string;
/** The id of an element that describes the NumberStepper. This prop is forwarded to the `NumberStepperInput`. */
'aria-describedby'?: string;
/** Appended to internal styles on the containing `span` element. */
style?: React_2.CSSProperties;
/** For advanced use cases when needing to access sub-components directly. Must contain `NumberStepperIncrement`, `NumberStepperDecrement`, and `NumberStepperInput` */
children?: React_2.ReactNode;
/** Handler to be called when the value changes */
onChange?: (value: number | '') => void;
[prop: string]: any;
}
/**
* @deprecated Instead, use:
* ```
* import { Tab } from '@qualtrics/ui-react';
* ```
*/
export declare const deprecated_Tab: React_2.ForwardRefExoticComponent>;
export declare interface deprecated_TabProps extends React_2.AllHTMLAttributes {
/** The label to be displayed on the tab control. */
label?: string;
/** The contents to be displayed in the tab panel when the tab is selected. */
children?: React_2.ReactNode;
/** Identifier of the tab control for the tab panel to direct aria-labelledby to the proper control.
* When not provided, will default to the key or fallback to the index of the tab in the tab list.
* @defaultValue key | index */
id?: string;
/** Appended to internal classes on the containing div element. */
className?: string;
[prop: string]: any;
}
/**
* @deprecated Instead, use:
* ```
* import { Tabs } from '@qualtrics/ui-react';
* ```
*/
export declare const deprecated_Tabs: React_2.ForwardRefExoticComponent>;
export declare interface deprecated_TabsProps extends Omit, 'onChange'> {
/** The key of the tab to be selected. */
activeKey: string;
/** The tabs to display. Must only be composed of the Tab component. */
children: React_2.ReactNode;
/** Appended to internal classes on the containing div element. */
className?: string;
/** Change handler that is called every time a tab is selected. */
onChange?: (key: string) => any;
[prop: string]: any;
}
/**
* @deprecated Instead, use:
* ```
* import { SidebarNav, SidebarNavLink, ConfigPane } from '@qualtrics/ui-react';
* ```
*/
export declare const deprecated_Toolbar: React_2.ForwardRefExoticComponent>;
/**
* @deprecated Instead, use:
* ```
* import { ConfigPane } from '@qualtrics/ui-react';
* ```
*/
export declare const deprecated_ToolbarPanel: React_2.FunctionComponent;
export declare interface deprecated_ToolbarPanelProps extends React_2.AllHTMLAttributes {
/** The content for the panel. */
children: React_2.ReactNode;
/** Adds the panel container into the page tab order. This should be set to true when the panel does not contain any tabbable elements.
* @defaultValue false
*/
isContainerInTabOrder?: boolean;
/** Will not include the suffix from the `Toolbar` component. */
'data-testid'?: string;
/** Appended to internal classes on the containing `div` element. */
className?: string;
[prop: string]: any;
}
/**
* @deprecated Instead, use:
* ```
* import { ConfigPane } from '@qualtrics/ui-react';
* ```
*/
export declare const deprecated_ToolbarPanels: React_2.ForwardRefExoticComponent>;
export declare interface deprecated_ToolbarPanelsProps extends React_2.AllHTMLAttributes {
/** The `ToolbarPanel` components. */
children: React_2.ReactNode;
/** Indicates if the `ToolbarPanel`s can be collapsed.
* @defaultValue true
*/
isCollapsible?: boolean;
/** The initial collapsed state.
* @defaultValue false
*/
defaultIsCollapsed?: boolean;
/** The collapsed state. */
isCollapsed?: boolean;
/** Handler to be called whenever the panels expand or collapse. */
onIsCollapsedChange?: (newIsCollapsed: boolean) => void;
/** Appended to internal classes on the containing `div` element. */
className?: string;
[prop: string]: any;
}
export declare interface deprecated_ToolbarProps extends React_2.AllHTMLAttributes {
/** The `ToolbarTabs` and `ToolbarPanels` */
children: React_2.ReactNode;
/** The index of the initially selected `ToolbarTab`.
* @defaultValue 0
*/
defaultSelectedIndex?: number;
/** The index of the selected `ToolbarTab`. */
selectedIndex?: number;
/** Handler to be called whenever the selected `ToolbarTab` changes.
*/
onSelectedIndexChange?: (newSelectedIndex: number) => void;
/** A unique id for the toolbar. If no id is passed, a randomly-generated id will be used.*/
id?: string;
/** Added to the containing div element and to the following sub-components, each with their own suffix:
* * `ToolbarTab`: `-tab-`
* * `ToolbarTabs` Expand/Collapse Button: `-tabs-expand-collapse-button`
* * `ToolbarPanel`: `-panel-`
* * `ToolbarPanels` Expand/Collapse Button: `-panels-expand-collapse-button` */
'data-testid'?: string;
/** Appended to internal classes on the containing `div` element.
*/
className?: string;
[prop: string]: any;
}
/**
* @deprecated Instead, use:
* ```
* import { SidebarNav, SidebarNavLink } from '@qualtrics/ui-react';
* ```
*/
export declare const deprecated_ToolbarTab: React_2.ForwardRefExoticComponent>;
export declare interface deprecated_ToolbarTabProps extends Omit, 'aria-disabled' | 'type'> {
/** The icon to render. See the [Icon](/components/icon) page for available icons.*/
icon?: IconComponent;
/** The name of the `ToolbarTab`. The label will be displayed when the `ToolbarTab`s are expanded, and will also be used for screen readers. */
label: string;
/** Will not include the suffix from the `Toolbar` component. */
'data-testid'?: string;
/** Appended to internal classes on the `button` element. */
className?: string;
[prop: string]: any;
}
/**
* @deprecated Instead, use:
* ```
* import { SidebarNav, SidebarNavLink } from '@qualtrics/ui-react';
* ```
*/
export declare const deprecated_ToolbarTabs: React_2.ForwardRefExoticComponent>;
export declare interface deprecated_ToolbarTabsProps extends React_2.AllHTMLAttributes {
/** The `ToolbarTab` components.
*/
children: React_2.ReactNode;
/** Indicates if the `ToolbarTab`s can be collapsed into icons without a label. If any `ToolbarTab` component is not provided with an icon, this prop should be set to false.
* @defaultValue true
*/
isCollapsible?: boolean;
/** The initial collapsed state.
* @defaultValue false
*/
defaultIsCollapsed?: boolean;
/** The collapsed state. */
isCollapsed?: boolean;
/** Handler to be called whenever the tabs expand or collapse.
*/
onIsCollapsedChange?: (newIsCollapsed: boolean) => void;
/** An accessible label for the list of tabs. */
'aria-label'?: string;
/** The id of an element that acts as a label for the list of tabs. */
'aria-labelledby'?: string;
/** The id of an element that describes the list of tabs. */
'aria-describedby'?: string;
/** Appended to internal classes on the containing `div` element. */
className?: string;
[prop: string]: any;
}
export declare const Divider: React_2.ForwardRefExoticComponent>;
export declare interface DividerProps {
className?: string;
[prop: string]: any;
}
export declare const Dropdown: React_2.ForwardRefExoticComponent>;
export declare const DropdownButton: React_2.ForwardRefExoticComponent>;
export declare interface DropdownButtonProps extends Omit, 'label'> {
/** The component that should render as the dropdown button. */
children?: React_2.ReactElement & {
ref?: React_2.Ref;
};
/**
* The text to display when no option is selected.
* @defaultValue ''
*/
defaultLabel?: string | React_2.ReactNode;
/** The label to display. */
label?: React_2.ReactNode;
/**
* The unique identifier for the button, used for linking accessible labels throughout the component.
* @defaultValue random
*/
id?: string;
/** @internal */
disabled?: boolean;
/** @internal */
isInvalid?: boolean;
/** @internal */
onLabelChange?: (string: any) => void;
/**
* The `id` of the element that acts as a label for the button.
* Overrides any `aria-labelledby` value received from the top-level
* `Dropdown` component.
*/
'aria-labelledby'?: string;
/**
* An accessible label for the dropdown that is used by screen readers.
* Overrides any `aria-label` value received from the top-level `Dropdown` component.
*/
'aria-label'?: string;
/**
* The `id` of the element that acts as a description for the button.
* Overrides any `aria-describedby` value received from the top-level
* `Dropdown` component.
*/
'aria-describedby'?: string;
/** Appended to internal classes on the `button` element. */
className?: string;
/** Appended to the internal `button` element. Overwrites `data-testid` from parent, if present. */
'data-testid'?: string;
[prop: string]: any;
}
export declare const DropdownHeader: React_2.ForwardRefExoticComponent>;
export declare interface DropdownHeaderProps extends React_2.AllHTMLAttributes {
/** The text to display to the user. */
title: string;
/** The relevant `DropdownOption` components for the group. */
children?: React_2.ReactNode;
[prop: string]: any;
}
export declare const DropdownList: React_2.ForwardRefExoticComponent>;
export declare interface DropdownListProps extends React_2.AllHTMLAttributes {
/** The displayed `DropdownOption` components. */
children?: React_2.ReactNode;
/**
* Where to prioritize placement of the `DropdownList` relative to the `DropdownButton`.
* @defaultValue 'bottom-start'
*/
placement?: Placement;
/** Handler to be called when a keyboard key is pressed down. */
onKeyDown?: (event: React_2.KeyboardEvent) => void;
/**
* The unique identifier for the `DropdownList`, used for linking it to the `DropdownButton`.
* @defaultValue random
*/
id?: string;
/**
* The container element where the `DropdownList` should be rendered.
* Overrides the default set by `UIProvider`.
*/
portalTarget?: HTMLElement;
/**
* The id of the element that acts as a label for the listbox.
* Used to override the `DropdownButton` serving as its label.
* @defaultValue button id
*/
'aria-labelledby'?: string;
/** Appended to internal classes on the containing `div` element. */
className?: string;
/** Appended to the internal `div` element. Overwrites `data-testid` from parent, if present. */
'data-testid'?: string;
[prop: string]: any;
}
export declare const DropdownOption: React_2.ForwardRefExoticComponent>;
export declare interface DropdownOptionProps extends React_2.AllHTMLAttributes {
/** The unique value associated with the option. */
value: string | number;
/** The string representation to display the option to the user. */
label: string;
/** Used to display non-string options to the user. */
children?: React_2.ReactNode;
/**
* Handler to be called when the option is selected by a click on the option
* itself or by a keyboard event on the `DropdownButton`
*/
onSelect?: ReactEventHandler;
/** @internal */
onMouseDown?: React_2.MouseEventHandler;
/** @internal */
onMouseEnter?: React_2.MouseEventHandler;
/** @internal */
onMouseLeave?: React_2.MouseEventHandler;
/**
* When true, disables the option so that it cannot be selected.
* @defaultValue false
*/
disabled?: boolean;
/** Appended to internal classes on the containing `div` element. */
className?: string;
[prop: string]: any;
}
export declare interface DropdownProps extends Omit, 'value' | 'defaultValue'> {
/** The `DropdownButton` and `DropdownList`. */
children: React_2.ReactNode;
/** Provides a label for the `Dropdown` */
label?: string;
/**
* Unique name for use with forms.
*
* See [Form API](../../form/getting-started) for more information.
*/
name?: string;
/** The initially selected value. */
defaultValue?: string | number | Array;
/** The selected value. */
value?: string | number | Array;
/**
* Disable the dropdown button.
* @defaultValue false
*/
disabled?: boolean;
/**
* The validity state.
* @defaultValue false
*/
isInvalid?: boolean;
/**
* Whether or not multiple values can be selected.
* `value` or `defaultValue` should be passed in as an array of values.
* @defaultValue false
*/
isMultiSelect?: boolean;
/** Handler to be called whenever a new value is selected. */
onChange?: (value: any) => void;
/**
* Used to control the opened/closed state of the list of options.
* @defaultValue false
*/
isOpen?: boolean;
/** Handler to be called whenever the dropdown list is opened/closed. */
onIsOpenChange?: (isOpen: boolean) => void;
/** Adds an error message directly below `Dropdown` */
errorText?: ReactNode;
/** Adds additional information directly below `Dropdown` */
helperText?: ReactNode;
/**
* Determines whether or not to show the search input and allow searching functionality.
* Note that only those `DropdownHeader`s with children will appear in the search results.
* @defaultValue false
*/
isSearchable?: boolean;
/**
* Allows controlling of the search input.
* @defaultValue ''
*/
searchValue?: string;
/** Handler to be called whenever the search value is changed. */
onSearchValueChange?: (newValue: string) => void;
/**
* Disables filtering even when `isSearchable` is used.
* This is used to wait for async loading of content before applying filter.
* @defaultValue false
*/
isSearchFilteringDisabled?: boolean;
/**
* The unique identifier used for linking accessibility properties within the component.
* Adding this will assign the value to the containing `div` and to main sub-components
* with the following suffixes:
* - `-button`
* - `-list`
* @defaultValue random
*/
id?: string;
/**
* The id of the element that acts as a label for the `Dropdown`.
* The `DropdownButton` uses this value by concatenating it with its
* own `id` so its contents are part of the accessible label.
*/
'aria-labelledby'?: string;
/**
* An accessible label for the `Dropdown` that is used by screen readers.
* The `DropdownButton` uses this value by concatenating it with its own `label`.
*/
'aria-label'?: string;
/**
* The id of the element that acts as a description for the `Dropdown`.
* This prop is forwarded to the `DropdownButton`.
*/
'aria-describedby'?: string;
/** Appended to internal classes on the containing `div` element. */
className?: string;
/**
* Appended to internal `div` element. Additional test IDs supplied to the following child elements:
* - `DropdownButton`: `-button`
* - `DropdownList`: `-flyout`
* - `DropdownSearch`: `-search`
*/
'data-testid'?: string;
[prop: string]: any;
}
export declare const ErrorText: React_2.ForwardRefExoticComponent>;
export declare interface ErrorTextProps extends React_2.AllHTMLAttributes {
/** The contents of the component. */
children?: React_2.ReactNode;
/** Appended to internal classes on the containing `div` element. */
className?: string;
[prop: string]: any;
}
declare interface fileObject {
name: string;
[prop: string]: any;
}
export declare const FilePicker: React_2.ForwardRefExoticComponent>;
export declare interface FilePickerProps extends React_2.AllHTMLAttributes {
/** Disables the file picker and styles it to appear that it cannot be clicked.
* @defaultValue false
*/
disabled?: boolean;
/** An optional value for using a `FilePicker` as a controlled component. Requires use with `onChange`. Setting to `null` will programmatically clear the currently selected files. */
files?: FileList | fileObject[] | null;
/** Allow selecting multiple files.
* @defaultValue false
*/
multiple?: boolean;
/** Handler to be called whenever the selected file(s) change. */
onChange?: (event: React_2.ChangeEvent) => void;
/** Appended to internal classes on the containing `span` element. */
className?: string;
[prop: string]: any;
}
export declare const FormField: React_2.ForwardRefExoticComponent>;
export declare interface FormFieldProps extends React_2.AllHTMLAttributes {
/** Appended to internal classes on the containing div element. */
className?: string;
/** An optional error message to display at the end of the FormField. */
errorText?: string;
/** An optional help message to display near the end of the `FormField` (above the `errorText`). */
helperText?: string;
/** Adds default helper text and sets form control to Read Only mode. Only supported for `InputField` component.
* @defaultValue false
*/
isReadOnly?: boolean;
/** Forwarded to the containing `div` element. If `helperText` and/or `errorText` props are provided, the `data-testid` will also be forwarded to the components that render the text, each with their own suffix:
- helperText: `-helper-text`
- errorText: `-error-text` */
'data-testid'?: string;
[prop: string]: any;
}
export declare const FullScreenTakeover: React_2.ForwardRefExoticComponent>;
export declare interface FullScreenTakeoverProps {
/** Handler to be called when the user presses the Escape key. */
onClose: (event: KeyboardEvent) => void;
/** Controls whether or not to display the modal.
* @defaultValue false
*/
isOpen?: boolean;
/** Defaults to the dialog. */
elementRefToFocusOnOpen?: MutableRefObject;
/** Defaults to the element that had focus at the time the dialog was opened. */
elementRefToFocusOnClose?: MutableRefObject;
/** Controls the z-index of the dialog.
* @defaultValue 1000 */
zIndex?: number;
/** Content of the dialog. */
children?: React_2.ReactNode;
/** aria-labelledby for the dialog. See accessibility section for more information. */
'aria-labelledby'?: string;
/** aria-label for the dialog. See accessibility section for more information. */
'aria-label'?: string;
/** aria-describedby for the dialog. See accessibility section for more information. */
'aria-describedby'?: string;
/** Identifier to target the dialog, typically for testing. */
'data-testid'?: string;
}
export declare const HelperText: React_2.ForwardRefExoticComponent>;
export declare interface HelperTextProps extends React_2.AllHTMLAttributes {
/** The contents of the component. */
children?: React_2.ReactNode;
/** Appended to internal classes on the containing `div` element. */
className?: string;
[prop: string]: any;
}
export declare interface Hsv {
h: number;
s: number;
v: number;
}
export declare const Icon: React_2.ForwardRefExoticComponent>;
export declare const IconButton: React_2.ForwardRefExoticComponent>;
export declare interface IconButtonProps extends React_2.AllHTMLAttributes {
/** A single icon to display on the button. */
children: React_2.ReactElement;
/** Disables click and key input events and styles it to look as though it cannot be clicked.
* @defaultValue false */
disabled?: boolean;
/** Element(s) or component(s) to be displayed in the tooltip. */
tooltipContent?: React_2.ReactNode;
/** Should be used with the `tooltipContent` prop. Dictates the position of the tooltip relative to its anchor.
* - Must be one of the following: `top`, `right`, `bottom`, or `left`.
* - Each placement can optionally have one of the following suffixes: `-start` or `-end`.
* @defaultValue 'top' */
tooltipPlacement?: Placement;
/** Type of button element
* @defaultValue 'button' */
type?: React_2.ButtonHTMLAttributes['type'];
/** Should be used with the `tooltipContent` prop. If the `Tooltip` acts as a description for the `IconButton`, set the value of this prop to `true`.
* @defaultValue false */
isTooltipADescription?: boolean;
/** Handler to be called when the button is clicked. Use to handle user interaction with the button. */
onClick?: React_2.MouseEventHandler;
/** Handler to be called when a keyboard key is pressed down while button has focus. */
onKeyDown?: React_2.KeyboardEventHandler;
/** Handler to be called when a keyboard key is released while button has focus. */
onKeyUp?: React_2.KeyboardEventHandler;
/** Props to be passed to the `Tooltip` component. */
tooltipProps?: Omit;
[prop: string]: any;
}
declare type IconComponent = React_2.ForwardRefExoticComponent>;
export declare interface IconProps extends React_2.SVGProps {
type: (typeof IconTypes)[keyof typeof IconTypes];
size?: 'small' | 'medium' | 'large';
[prop: string]: any;
}
export declare const IconTypes: {
readonly ABC: "ABC";
readonly AI: "AI";
readonly AIChatbot: "AIChatbot";
readonly AIEntity: "AIEntity";
readonly AISpark: "AISpark";
readonly AISpinningTop: "AISpinningTop";
readonly AISpinningTopFilled: "AISpinningTopFilled";
readonly Accessibility: "Accessibility";
readonly Account: "Account";
readonly AccountsTable: "AccountsTable";
readonly ActionPlanning: "ActionPlanning";
readonly Active: "Active";
readonly Add: "Add";
readonly AddItem: "AddItem";
readonly AddToReel: "AddToReel";
readonly Addons: "Addons";
readonly AdminGears: "AdminGears";
readonly AgentLeft: "AgentLeft";
readonly AgentPerformance: "AgentPerformance";
readonly AgentRight: "AgentRight";
readonly AggregateFunction: "AggregateFunction";
readonly AlignImageBottom: "AlignImageBottom";
readonly AlignImageCenter: "AlignImageCenter";
readonly AlignImageLeft: "AlignImageLeft";
readonly AlignImageMiddle: "AlignImageMiddle";
readonly AlignImageRight: "AlignImageRight";
readonly AlignImageTop: "AlignImageTop";
readonly AlignTextBottom: "AlignTextBottom";
readonly AlignTextLeft: "AlignTextLeft";
readonly AlignTextRight: "AlignTextRight";
readonly AlignTextTop: "AlignTextTop";
readonly Animation: "Animation";
readonly AreaChart: "AreaChart";
readonly Array: "Array";
readonly ArrowDown: "ArrowDown";
readonly ArrowLeft: "ArrowLeft";
readonly ArrowRight: "ArrowRight";
readonly ArrowUp: "ArrowUp";
readonly AssignUser: "AssignUser";
readonly AsynchronousJobs: "AsynchronousJobs";
readonly AutomatedSetup: "AutomatedSetup";
readonly BarChart: "BarChart";
readonly Bell: "Bell";
readonly BellSnooze: "BellSnooze";
readonly BenchmarkGraph: "BenchmarkGraph";
readonly BinderClip: "BinderClip";
readonly Binoculars: "Binoculars";
readonly Blog: "Blog";
readonly Bookmark: "Bookmark";
readonly BookmarkFill: "BookmarkFill";
readonly Books: "Books";
readonly Boolean: "Boolean";
readonly BorderColor: "BorderColor";
readonly BorderColorElement1: "BorderColorElement1";
readonly BranchContinue: "BranchContinue";
readonly BranchEnd: "BranchEnd";
readonly BranchExtension: "BranchExtension";
readonly BreakdownBarWidget: "BreakdownBarWidget";
readonly Bubble: "Bubble";
readonly BubbleCash: "BubbleCash";
readonly BubbleChart: "BubbleChart";
readonly BubbleClock: "BubbleClock";
readonly BubbleDots: "BubbleDots";
readonly BubbleHelp: "BubbleHelp";
readonly BubbleInfo: "BubbleInfo";
readonly BubbleTranslate: "BubbleTranslate";
readonly Bugs: "Bugs";
readonly BusinessImpact: "BusinessImpact";
readonly Button: "Button";
readonly ButtonSelector: "ButtonSelector";
readonly BxLogo: "BxLogo";
readonly Calendar: "Calendar";
readonly CalendarAdd: "CalendarAdd";
readonly CalendarCheck: "CalendarCheck";
readonly Camera: "Camera";
readonly CaretDown: "CaretDown";
readonly CaretLeft: "CaretLeft";
readonly CaretRight: "CaretRight";
readonly CaretUp: "CaretUp";
readonly CarryForwardChoices: "CarryForwardChoices";
readonly Catalog: "Catalog";
readonly CenterX: "CenterX";
readonly CenterY: "CenterY";
readonly Chart19: "Chart19";
readonly ChartImpact: "ChartImpact";
readonly ChartPareto: "ChartPareto";
readonly ChartPolar: "ChartPolar";
readonly Check: "Check";
readonly ChevronDown: "ChevronDown";
readonly ChevronLeft: "ChevronLeft";
readonly ChevronRight: "ChevronRight";
readonly ChevronSet: "ChevronSet";
readonly ChevronSetHorizontalIcon: "ChevronSetHorizontalIcon";
readonly ChevronSkipBack: "ChevronSkipBack";
readonly ChevronSkipForward: "ChevronSkipForward";
readonly ChevronUp: "ChevronUp";
readonly CircleEmpty: "CircleEmpty";
readonly Class: "Class";
readonly ClearFormatting: "ClearFormatting";
readonly Clipboard: "Clipboard";
readonly Clock: "Clock";
readonly Close: "Close";
readonly CloseCaptioning: "CloseCaptioning";
readonly ClosePanelLeft: "ClosePanelLeft";
readonly ClosePanelRight: "ClosePanelRight";
readonly CloudUpload: "CloudUpload";
readonly Cloudy: "Cloudy";
readonly CoachingPriorities: "CoachingPriorities";
readonly CodeBrackets: "CodeBrackets";
readonly Coffee: "Coffee";
readonly ColumnAppend: "ColumnAppend";
readonly ColumnFilter: "ColumnFilter";
readonly ColumnPrepend: "ColumnPrepend";
readonly Columns: "Columns";
readonly ColumnsHeader: "ColumnsHeader";
readonly Comments: "Comments";
readonly Competitor: "Competitor";
readonly Condition: "Condition";
readonly ConstantSum: "ConstantSum";
readonly Contact: "Contact";
readonly ContactList: "ContactList";
readonly Contacts: "Contacts";
readonly ConversationAgent: "ConversationAgent";
readonly ConversationCustomer: "ConversationCustomer";
readonly ConversationSilence: "ConversationSilence";
readonly Conversion: "Conversion";
readonly Copy: "Copy";
readonly CoreXM: "CoreXM";
readonly CreditCard: "CreditCard";
readonly Credits: "Credits";
readonly CrossAnalytics: "CrossAnalytics";
readonly CustomMetric: "CustomMetric";
readonly CustomerLeft: "CustomerLeft";
readonly CustomerRight: "CustomerRight";
readonly CxLogo: "CxLogo";
readonly Dashboard: "Dashboard";
readonly DashboardSpotCheck: "DashboardSpotCheck";
readonly DataAnalysis: "DataAnalysis";
readonly DataSource: "DataSource";
readonly Database: "Database";
readonly DeadClick: "DeadClick";
readonly Decimal: "Decimal";
readonly DefaultChoice: "DefaultChoice";
readonly Delta: "Delta";
readonly Denied: "Denied";
readonly Deprecated: "Deprecated";
readonly DeprecationReplacement: "DeprecationReplacement";
readonly DescriptiveText: "DescriptiveText";
readonly Desktop: "Desktop";
readonly Detected: "Detected";
readonly Diamond: "Diamond";
readonly Directory: "Directory";
readonly DisplayLogic: "DisplayLogic";
readonly DistributionSummary: "DistributionSummary";
readonly DocumentAlert: "DocumentAlert";
readonly Dog: "Dog";
readonly DonutChart: "DonutChart";
readonly Download: "Download";
readonly Downvote: "Downvote";
readonly DownvoteFilled: "DownvoteFilled";
readonly Draft: "Draft";
readonly Drag: "Drag";
readonly DragAndDrop: "DragAndDrop";
readonly Drilldown: "Drilldown";
readonly Drop: "Drop";
readonly DropListSelector: "DropListSelector";
readonly EXCOVIDReturnToWork: "EXCOVIDReturnToWork";
readonly EXCOVIDSolution: "EXCOVIDSolution";
readonly EditTableView: "EditTableView";
readonly EditorGeneric: "EditorGeneric";
readonly Effort: "Effort";
readonly EffortEasy: "EffortEasy";
readonly EffortHard: "EffortHard";
readonly EffortMixed: "EffortMixed";
readonly EffortNegative: "EffortNegative";
readonly EffortNeutral: "EffortNeutral";
readonly EffortPositive: "EffortPositive";
readonly EffortVeryEasy: "EffortVeryEasy";
readonly EffortVeryHard: "EffortVeryHard";
readonly EllipsisHorizontal: "EllipsisHorizontal";
readonly EllipsisVertical: "EllipsisVertical";
readonly EmojiColorAngry: "EmojiColorAngry";
readonly EmojiColorHappiest: "EmojiColorHappiest";
readonly EmojiColorHappy: "EmojiColorHappy";
readonly EmojiColorNotGreat: "EmojiColorNotGreat";
readonly EmojiColorOK: "EmojiColorOK";
readonly EmojiColorPrettyGood: "EmojiColorPrettyGood";
readonly EmojiColorSad: "EmojiColorSad";
readonly EmojiColorUnhappy: "EmojiColorUnhappy";
readonly EmojiMonoAngry: "EmojiMonoAngry";
readonly EmojiMonoHappiest: "EmojiMonoHappiest";
readonly EmojiMonoHappy: "EmojiMonoHappy";
readonly EmojiMonoNotGreat: "EmojiMonoNotGreat";
readonly EmojiMonoOK: "EmojiMonoOK";
readonly EmojiMonoPrettyGood: "EmojiMonoPrettyGood";
readonly EmojiMonoUnhappy: "EmojiMonoUnhappy";
readonly Employee360: "Employee360";
readonly EmployeeAdHoc: "EmployeeAdHoc";
readonly EmployeeEngagement: "EmployeeEngagement";
readonly EmployeeLifecycle: "EmployeeLifecycle";
readonly EmployeePulse: "EmployeePulse";
readonly EmptyBox: "EmptyBox";
readonly EnvelopeClosed: "EnvelopeClosed";
readonly EnvelopeOpened: "EnvelopeOpened";
readonly EnvelopeOptedOut: "EnvelopeOptedOut";
readonly Error: "Error";
readonly ErrorClick: "ErrorClick";
readonly EventTrigger: "EventTrigger";
readonly ExLogo: "ExLogo";
readonly ExampleProject: "ExampleProject";
readonly Exclude: "Exclude";
readonly ExclusiveAnswer: "ExclusiveAnswer";
readonly ExperienceTransparency: "ExperienceTransparency";
readonly Extend: "Extend";
readonly ExternalLink: "ExternalLink";
readonly EyeDropper: "EyeDropper";
readonly FastForward: "FastForward";
readonly FastReply: "FastReply";
readonly Feedback: "Feedback";
readonly File: "File";
readonly FileAudio: "FileAudio";
readonly FileExcel: "FileExcel";
readonly FilePdf: "FilePdf";
readonly Filter: "Filter";
readonly Fingerprint: "Fingerprint";
readonly Fire: "Fire";
readonly Flag: "Flag";
readonly Folder: "Folder";
readonly FolderFull: "FolderFull";
readonly FolderOpen: "FolderOpen";
readonly FolderOpenFull: "FolderOpenFull";
readonly FontSize: "FontSize";
readonly FormField: "FormField";
readonly FreezeFirstColumn: "FreezeFirstColumn";
readonly FreezeFirstRow: "FreezeFirstRow";
readonly Gallery: "Gallery";
readonly GaugeChart: "GaugeChart";
readonly GlobalCalendarIcon: "GlobalCalendarIcon";
readonly Globe: "Globe";
readonly GraphicSlider: "GraphicSlider";
readonly GridBottomHalf: "GridBottomHalf";
readonly GridBottomLeft: "GridBottomLeft";
readonly GridBottomRight: "GridBottomRight";
readonly GridLeftHalf: "GridLeftHalf";
readonly GridRightHalf: "GridRightHalf";
readonly GridTopHalf: "GridTopHalf";
readonly GridTopLeft: "GridTopLeft";
readonly GridTopRight: "GridTopRight";
readonly GridView: "GridView";
readonly HamburgerMenu: "HamburgerMenu";
readonly Headphones: "Headphones";
readonly Headset: "Headset";
readonly HealthWellness: "HealthWellness";
readonly HeatMap: "HeatMap";
readonly HeatMapDiscover: "HeatMapDiscover";
readonly Help: "Help";
readonly HighVolume: "HighVolume";
readonly Highlight: "Highlight";
readonly HighlightPenSwatch: "HighlightPenSwatch";
readonly HighlightSwatch: "HighlightSwatch";
readonly History: "History";
readonly Home: "Home";
readonly Hotspot: "Hotspot";
readonly Hyperlink: "Hyperlink";
readonly IFrameWidget: "IFrameWidget";
readonly IceCream: "IceCream";
readonly Ignored: "Ignored";
readonly Image: "Image";
readonly ImportedData: "ImportedData";
readonly Inactive: "Inactive";
readonly IncompleteTranslations: "IncompleteTranslations";
readonly IndentMore: "IndentMore";
readonly Information: "Information";
readonly InlineQuestion: "InlineQuestion";
readonly InsertLine: "InsertLine";
readonly Integer: "Integer";
readonly Integration: "Integration";
readonly IntensityHigh: "IntensityHigh";
readonly IntensityLow: "IntensityLow";
readonly IntensityMedium: "IntensityMedium";
readonly Intercept: "Intercept";
readonly JoinInner: "JoinInner";
readonly JoinLeftOuter: "JoinLeftOuter";
readonly JoinOuter: "JoinOuter";
readonly JoinRightOuter: "JoinRightOuter";
readonly JourneyMap: "JourneyMap";
readonly Keyboard: "Keyboard";
readonly Libraries: "Libraries";
readonly LibraryLink: "LibraryLink";
readonly LightBulb: "LightBulb";
readonly LightningBolt: "LightningBolt";
readonly LineChart: "LineChart";
readonly Lines: "Lines";
readonly ListBullets: "ListBullets";
readonly ListChecked: "ListChecked";
readonly ListNumbers: "ListNumbers";
readonly Location: "Location";
readonly Lock: "Lock";
readonly LogicTree: "LogicTree";
readonly LookAndFeel: "LookAndFeel";
readonly LoopAndMerge: "LoopAndMerge";
readonly LowerCase: "LowerCase";
readonly Mailbox: "Mailbox";
readonly Marker: "Marker";
readonly MatrixTable: "MatrixTable";
readonly Maximize: "Maximize";
readonly Megaphone: "Megaphone";
readonly Merge: "Merge";
readonly Metadata: "Metadata";
readonly MetricWidget: "MetricWidget";
readonly Microphone: "Microphone";
readonly MicrophoneMute: "MicrophoneMute";
readonly Minimize: "Minimize";
readonly MobileAppIntercept: "MobileAppIntercept";
readonly MobileAppSessionReplay: "MobileAppSessionReplay";
readonly MobileLandscape: "MobileLandscape";
readonly MobilePortrait: "MobilePortrait";
readonly Models: "Models";
readonly ModeratedUserTesting: "ModeratedUserTesting";
readonly Moon: "Moon";
readonly MouseThrash: "MouseThrash";
readonly MouseTrail: "MouseTrail";
readonly Move: "Move";
readonly MultipleChoice: "MultipleChoice";
readonly MusicNote: "MusicNote";
readonly NPS: "NPS";
readonly NewCustomer: "NewCustomer";
readonly NewTemplate: "NewTemplate";
readonly Newspaper: "Newspaper";
readonly NotInFlow: "NotInFlow";
readonly Note: "Note";
readonly Numbers: "Numbers";
readonly Object: "Object";
readonly OnlinePanel: "OnlinePanel";
readonly OpenPanelLeft: "OpenPanelLeft";
readonly OpenPanelRight: "OpenPanelRight";
readonly OrgHierarchy: "OrgHierarchy";
readonly Outbox: "Outbox";
readonly Outdent: "Outdent";
readonly PageBreak: "PageBreak";
readonly Pages: "Pages";
readonly PaginateFilter: "PaginateFilter";
readonly PaintBrush: "PaintBrush";
readonly PaintBrushRound: "PaintBrushRound";
readonly PaintBucket: "PaintBucket";
readonly PaperClip: "PaperClip";
readonly Paragraph: "Paragraph";
readonly ParticipantInviteAutomation: "ParticipantInviteAutomation";
readonly ParticipantPortal: "ParticipantPortal";
readonly PartlyCloudy: "PartlyCloudy";
readonly PasswordLock: "PasswordLock";
readonly Pause: "Pause";
readonly PauseCircle: "PauseCircle";
readonly Pencil: "Pencil";
readonly Percentage: "Percentage";
readonly Phone: "Phone";
readonly PickGroupRank: "PickGroupRank";
readonly PictureInAPicture: "PictureInAPicture";
readonly PieChart: "PieChart";
readonly Pin: "Pin";
readonly PinTo: "PinTo";
readonly PipedText: "PipedText";
readonly Play: "Play";
readonly Playbook: "Playbook";
readonly Podcast: "Podcast";
readonly PointerHandCursor: "PointerHandCursor";
readonly PortalConfig: "PortalConfig";
readonly Postcard: "Postcard";
readonly Power: "Power";
readonly Pre: "Pre";
readonly Presentation: "Presentation";
readonly Printer: "Printer";
readonly Priority1: "Priority1";
readonly Priority2: "Priority2";
readonly Priority3: "Priority3";
readonly Priority4: "Priority4";
readonly PrivateData: "PrivateData";
readonly Program: "Program";
readonly Project: "Project";
readonly ProjectBar: "ProjectBar";
readonly Publish: "Publish";
readonly PxLogo: "PxLogo";
readonly QRCode: "QRCode";
readonly Qualitative: "Qualitative";
readonly Quantitative: "Quantitative";
readonly QuestionBlock: "QuestionBlock";
readonly QuoteBox: "QuoteBox";
readonly Quotes: "Quotes";
readonly RSS: "RSS";
readonly RageClick: "RageClick";
readonly Rainy: "Rainy";
readonly RaiseHand: "RaiseHand";
readonly RecodedValues: "RecodedValues";
readonly Record: "Record";
readonly Redo: "Redo";
readonly ReferenceBlock: "ReferenceBlock";
readonly Refresh: "Refresh";
readonly RemoveItem: "RemoveItem";
readonly RemoveLink: "RemoveLink";
readonly ReoccurringMeeting: "ReoccurringMeeting";
readonly Reply: "Reply";
readonly Report: "Report";
readonly ReputationManagement: "ReputationManagement";
readonly Retweet: "Retweet";
readonly ReusableChoices: "ReusableChoices";
readonly Reverse: "Reverse";
readonly ReviewApp: "ReviewApp";
readonly ReviewLocation: "ReviewLocation";
readonly ReviewProduct: "ReviewProduct";
readonly ReviewThumbsUp: "ReviewThumbsUp";
readonly Rho: "Rho";
readonly RichTextEditor: "RichTextEditor";
readonly Risk: "Risk";
readonly Robot: "Robot";
readonly RobotConversational: "RobotConversational";
readonly Roles: "Roles";
readonly Rows: "Rows";
readonly RowsHeader: "RowsHeader";
readonly RowsStriping: "RowsStriping";
readonly SMS: "SMS";
readonly SatisfactionCharts: "SatisfactionCharts";
readonly Save: "Save";
readonly ScatterPlot: "ScatterPlot";
readonly Scheduled: "Scheduled";
readonly SchemaData: "SchemaData";
readonly SchemaEditor: "SchemaEditor";
readonly Scorecard: "Scorecard";
readonly ScreenCapture: "ScreenCapture";
readonly Search: "Search";
readonly SearchAdd: "SearchAdd";
readonly SearchSelector: "SearchSelector";
readonly Segment: "Segment";
readonly SelectColumn: "SelectColumn";
readonly Send: "Send";
readonly SentenceCase: "SentenceCase";
readonly SentimentMixed: "SentimentMixed";
readonly SentimentNegative: "SentimentNegative";
readonly SentimentNeutral: "SentimentNeutral";
readonly SentimentPositive: "SentimentPositive";
readonly SentimentVeryNegative: "SentimentVeryNegative";
readonly SentimentVeryPositive: "SentimentVeryPositive";
readonly Settings: "Settings";
readonly Share: "Share";
readonly SharedFolder: "SharedFolder";
readonly Shield: "Shield";
readonly Shuffle: "Shuffle";
readonly SideBySide: "SideBySide";
readonly Signature: "Signature";
readonly Skip: "Skip";
readonly SkipBack: "SkipBack";
readonly SkipForward: "SkipForward";
readonly Slider: "Slider";
readonly SliderOptions: "SliderOptions";
readonly SmallCaps: "SmallCaps";
readonly SocialChannels: "SocialChannels";
readonly SocialResponse: "SocialResponse";
readonly SortAlphabeticAscending: "SortAlphabeticAscending";
readonly SortAlphabeticDescending: "SortAlphabeticDescending";
readonly SortBoth: "SortBoth";
readonly SortDown: "SortDown";
readonly SortNumberAscending: "SortNumberAscending";
readonly SortNumberDescending: "SortNumberDescending";
readonly SortUp: "SortUp";
readonly Sparkle: "Sparkle";
readonly SpecialCharacters: "SpecialCharacters";
readonly Spinner: "Spinner";
readonly SquareMinus: "SquareMinus";
readonly SquarePlus: "SquarePlus";
readonly StarFilled: "StarFilled";
readonly StarHalf: "StarHalf";
readonly StarOutlined: "StarOutlined";
readonly StarRanking: "StarRanking";
readonly StatsAnalysis: "StatsAnalysis";
readonly StopRecording: "StopRecording";
readonly Stormy: "Stormy";
readonly StrategicAccounts: "StrategicAccounts";
readonly Student: "Student";
readonly Subscript: "Subscript";
readonly Subtract: "Subtract";
readonly Success: "Success";
readonly Sum: "Sum";
readonly Sunny: "Sunny";
readonly Superscript: "Superscript";
readonly Survey: "Survey";
readonly SurveyComplete: "SurveyComplete";
readonly SurveyDirector: "SurveyDirector";
readonly SurveyExpired: "SurveyExpired";
readonly SurveyIQ: "SurveyIQ";
readonly SurveyInvite: "SurveyInvite";
readonly Table: "Table";
readonly TableAppend: "TableAppend";
readonly TableMergeCells: "TableMergeCells";
readonly TablePrepend: "TablePrepend";
readonly Tablet: "Tablet";
readonly Tag: "Tag";
readonly Teacher: "Teacher";
readonly Template: "Template";
readonly TextAlignCenter: "TextAlignCenter";
readonly TextAlignJustified: "TextAlignJustified";
readonly TextAlignLeft: "TextAlignLeft";
readonly TextAlignRight: "TextAlignRight";
readonly TextAnalysis: "TextAnalysis";
readonly TextAnalytics: "TextAnalytics";
readonly TextBlock: "TextBlock";
readonly TextBold: "TextBold";
readonly TextBottomToTop: "TextBottomToTop";
readonly TextColor: "TextColor";
readonly TextColorLetter: "TextColorLetter";
readonly TextColorSwatch: "TextColorSwatch";
readonly TextEntry: "TextEntry";
readonly TextItalic: "TextItalic";
readonly TextLeftToRight: "TextLeftToRight";
readonly TextRightToLeft: "TextRightToLeft";
readonly TextStrikeThrough: "TextStrikeThrough";
readonly TextUnderline: "TextUnderline";
readonly ThirdPartyQuestion: "ThirdPartyQuestion";
readonly ThreeSixtyProject: "ThreeSixtyProject";
readonly ThumbsDown: "ThumbsDown";
readonly ThumbsUp: "ThumbsUp";
readonly Tickets: "Tickets";
readonly Timing: "Timing";
readonly Tools: "Tools";
readonly Transaction: "Transaction";
readonly Translation: "Translation";
readonly Trash: "Trash";
readonly TruncateDate: "TruncateDate";
readonly Undetected: "Undetected";
readonly Undo: "Undo";
readonly Union: "Union";
readonly UniqueLink: "UniqueLink";
readonly Unlink: "Unlink";
readonly Unlock: "Unlock";
readonly UnmoderatedUserTesting: "UnmoderatedUserTesting";
readonly Unpin: "Unpin";
readonly UpDown: "UpDown";
readonly Upload: "Upload";
readonly UpperCase: "UpperCase";
readonly Upvote: "Upvote";
readonly UpvoteFilled: "UpvoteFilled";
readonly User: "User";
readonly UserGroup: "UserGroup";
readonly UserLocked: "UserLocked";
readonly Validation: "Validation";
readonly VariableNaming: "VariableNaming";
readonly Video: "Video";
readonly ViewOff: "ViewOff";
readonly ViewOn: "ViewOn";
readonly VocalizeDashboard: "VocalizeDashboard";
readonly Volume: "Volume";
readonly VolumeLow: "VolumeLow";
readonly VolumeMute: "VolumeMute";
readonly WaffleMenu: "WaffleMenu";
readonly Warning: "Warning";
readonly Webhook: "Webhook";
readonly WhatsApp: "WhatsApp";
readonly Widgets: "Widgets";
readonly Wifi: "Wifi";
readonly Workflow: "Workflow";
readonly Workflows: "Workflows";
readonly WorkingFromHome: "WorkingFromHome";
readonly ZoomIn: "ZoomIn";
readonly ZoomOut: "ZoomOut";
readonly ZoomToFit: "ZoomToFit";
};
export declare const InlineInput: React_2.ForwardRefExoticComponent>;
export declare interface InlineInputProps extends Omit, 'onChange'> {
/** The initial value for the input. Because `InlineInput` uses a `contentEditable` `span`, it can only be used as an uncontrolled component. */
defaultValue?: string;
/** Handler to be called when the input loses focus. */
onBlur?: (event: React_2.FocusEvent) => void;
/** Handler to be called when the input receives focus. */
onFocus?: (event: React_2.FocusEvent) => void;
/** Handler to be called whenever the value of the input changes. */
onChange?: (event: (ClipboardEvent_2 | FormEvent | InputEvent) & {
currentTarget: {
value: string;
};
target: {
value: string;
};
}) => void;
/** Appended to internal classes on the containing `span` element. */
className?: string;
[prop: string]: any;
}
export declare const Input: React_2.ForwardRefExoticComponent>;
export declare const InputField: React_2.ForwardRefExoticComponent>;
export declare interface InputFieldProps extends Omit>, 'label'> {
/** When supplied, the unique id for the input is applied to the label's `for` attribute. */
id?: string;
/** Props to spread onto the internal Input component.
* @defaultValue \{\} */
inputProps?: {
className?: string;
[prop: string]: any;
};
/** Label for the input. */
label: React_2.ReactNode;
/** Props to spread onto the internal Label component.
* @defaultValue \{\} */
labelProps?: {
className?: string;
[prop: string]: any;
};
/** Appended to internal classes on the containing [Label](/components/label) component. */
className?: string;
/** Appended to internal styles on the containing [Label](/components/label) component.
* @defaultValue \{\} */
style?: React_2.CSSProperties;
/** Added to the containing [Label](/components/label) component. */
'data-testid'?: string;
/** Addresses a typescript bug, see commit.
* @internal */
onChange?: InputProps['onChange'];
[prop: string]: any;
}
export declare const InputGroup: React_2.ForwardRefExoticComponent>;
export declare const InputGroupAddon: React_2.ForwardRefExoticComponent>;
export declare interface InputGroupAddonProps {
/** Indicates if the addon should be smaller in size.
* @defaultValue false
*/
small?: boolean;
/** Content to be rendered in the add on */
children?: React_2.ReactNode;
/** Appended to internal classes on the containing `span` element. */
className?: string;
[prop: string]: any;
}
export declare interface InputGroupProps {
/** Makes `InputGroup` take the width of its parent and makes the Input grow to fill `InputGroup`. `InputGroup` children's `full` property will be overridden.
* @defaultValue false
*/
full?: boolean;
/** Makes `InputGroup` and all of its children smaller. `InputGroup` children's `small` property will be overridden.
* @defaultValue false
*/
small?: boolean;
/** Appended to internal classes on the containing `span` element.
*/
className?: string;
/** Accepts `Input`, `Button`, `SelectMenu` and `InputAddOn` */
children: React_2.ReactNode;
[prop: string]: any;
}
export declare interface InputProps extends Omit, 'rows'> {
/** Initial value for an uncontrolled input. */
defaultValue?: string | number;
/** Disables the input element and styles it to appear that it cannot be clicked or typed in.
* @defaultValue false
*/
disabled?: boolean;
/** Makes the input take the width of its parent.
* @defaultValue false
*/
full?: boolean;
/** Styles the input to indicate invalid data has been entered.
* @defaultValue false
*/
invalid?: boolean;
/** Uses a textarea element instead of an input element. Enables a user to enter multiple lines of text. */
multiline?: boolean;
/** Handler to be called whenever the value of the input changes. */
onChange?: (event: React_2.ChangeEvent) => void;
/** The number of rows to display for a multiline input.
* @defaultValue 2
*/
rows?: string | number;
/** Makes the input smaller.
* @defaultValue false
*/
small?: boolean;
/** Text, number, password, email, tel, or url. The email, tel, and url types all behave the same as a text input, except on mobile where a specialized keyboard may be displayed. This property is ignored if the multiline property is enabled.
* @defaultValue 'text'
*/
type?: 'text' | 'password' | 'number' | 'email' | 'tel' | 'url';
/** Makes the input ignore non-numeric input.
* @defaultValue true
*/
allowDecimalNumbers?: boolean;
/** The value for the input. */
value?: string | number;
/** Appended to internal classes on the `input` or `textarea` element. */
className?: string;
[prop: string]: any;
}
declare type KeyToKeyNoIndex = {
[K in keyof T]: string extends K ? never : number extends K ? never : K;
};
declare type KnownKeys = ValuesOf>;
export declare const Label: React_2.ForwardRefExoticComponent>;
export declare interface LabelProps extends React_2.AllHTMLAttributes {
/** The content of the label. The field being labelled may also optionally be added as a child. */
children?: React_2.ReactNode;
/** Appended to internal classes on the `label` element. */
className?: string;
[prop: string]: any;
}
export declare const Link: React_2.ForwardRefExoticComponent>;
export declare interface LinkProps extends React_2.AllHTMLAttributes {
/** The contents of the link */
children: React_2.ReactNode;
/** The href that will be applied to the underlying anchor element.
* @defaultValue '#' */
href?: string;
/** The target that will be applied to the underlying anchor element.
* @defaultValue '_self' */
target?: React_2.HTMLAttributeAnchorTarget;
/** Appended to the internal classes on the `` element */
className?: string;
[prop: string]: any;
}
export declare const LoadingSpinner: React_2.ForwardRefExoticComponent>;
export declare interface LoadingSpinnerProps extends Omit, 'size'> {
/** Makes the LoadingSpinner visible.
* @defaultValue false */
show?: boolean;
/** The size of the `LoadingSpinner`. For `LoadingSpinner`s with no child component, a minimum width and height will be applied.
* @defaultValue 'medium' */
size?: 'xs' | 'small' | 'medium' | 'large';
/** Changes the opacity of the `LoadingSpinner`'s children.
* @defaultValue 'fade' */
background?: 'hide' | 'fade';
/** Changes the `LoadingSpinner` color from black to white.
* @defaultValue false */
inverted?: boolean;
/** When the spinner is showing, pointer events will be disabled on the children, but children can still be navigated by a keyboard user. Add the `disabled` prop to children components as appropriate. */
children?: React_2.ReactNode;
/** Appended to internal classes on the containing `div` element. */
className?: string;
/** Controls the message sent to the screen reader for loading events. Defaults to `'Loading'` if `aria-labelledby` is not set. */
'aria-label'?: string;
/** Directs the screen reader to other elements designated for messaging. */
'aria-labelledby'?: string;
/** Controls the timing of screen reader messages.
* @defaultValue 'polite' */
'aria-live'?: 'off' | 'assertive' | 'polite';
[prop: string]: any;
}
declare type LocalizedText = Partial>;
export declare const LogicEditor: React_2.ForwardRefExoticComponent>;
export declare interface LogicEditorCondition {
logicType: 'condition';
value?: any;
id?: string;
}
export declare interface LogicEditorConditionTemplateProps {
value: any;
onChange: (value: any) => void;
firstFocusableElementRef?: React_2.RefObject;
}
export declare interface LogicEditorProps extends Omit, 'defaultValue' | 'onChange'> {
/** A functional component representing a condition. The component must be a controlled component with the following properties. Note that the example `Condition Template` provided above represents the condition type and associated value within the `value` property.
* - `value`: The value of the condition template.
* - `onChange`: Handler to be called when the value of the condition template is updated.
* - `firstFocusableElementRef`: This property is only needed if both of the following are true:
* - The `LogicEditor`'s `fixedSet` prop is set to `true`.
* - The `LogicEditor`'s `firstFocusableElementRef` prop is used.
*/
conditionTemplate: (props: LogicEditorConditionTemplateProps) => React_2.ReactElement;
/** The default value used for sets. Sets provided via `defaultValue` without a `value` will get the `defaultSetValue`.
* @defaultValue 'any'
*/
defaultSetValue?: 'any' | 'all';
/** The default value of the logic tree structure of the editor. Used to render the passed in conditions and their respective values. */
defaultValue?: LogicEditorSet;
/** Fixes the logic editor to a single set. Using this property disables the use of nesting sets.
* @defaultValue false
*/
fixedSet?: boolean;
/** Change handler to be called when the user interacts with the controls of the editor. */
onChange?: (value: LogicEditorSet | LogicEditorCondition) => void;
/** Configures the logic editor to be read only. When `true` condition set dropdowns will be read only and control menus for adding and deleting conditions will not be rendered.
*
* **Note**: Using the `readOnly` property does not affect elements in condition templates. Condition templates should be handled to account for read only state separately.
* @defaultValue false
*/
readOnly?: boolean;
/** The maximum number of allowed nested sets. The outermost set is not considered a nested set and is therefore not counted towards the maximum number.
* @defaultValue 2
*/
maxNestedSets?: number;
/** Limits the number of conditions that can be added to a set. Parent set and nested sets are counted towards the maximum number. */
maxConditions?: number;
/** A `ref` that can be used for programmatically focusing the first focusable element inside the logic editor. If `fixedSet` is enabled, the prop is forwarded to the first condition in the LogicEditor. */
firstFocusableElementRef?: React_2.RefObject;
/** Appended to internal classes on the containing `div` element. */
className?: string;
/** Added to the containing `div` element as well as each set dropdown, condition action menu, and menu items. In order to ensure uniqueness for each test id, each set dropdown is prefixed with `set-dropdown`, each condition action menu is prefixed with `condition-actions`, "insert condition below" menu items are suffixed with `-insert-condition-below`, and "insert condition set below" menu items are suffixed with `-insert-condition-set-below`. All test ids begin with the value passed to this prop. Each set dropdown and condition action menu has a suffix containing a `-` separated list of indices where the left-most index is the root element's index and the right-most index is the current element's index. These indices are based on the element's index (position) in it's level in the tree. */
'data-testid'?: string;
[prop: string]: any;
}
export declare interface LogicEditorSet {
logicType: 'set';
value?: 'any' | 'all';
conditions: (LogicEditorCondition | LogicEditorSet)[];
id?: string;
}
export declare const MainContent: React_2.ForwardRefExoticComponent>;
export declare interface MainContentProps {
/** The main content for your app.
*
*
* Note: if you are rendering a footer (e.g. the Global Wrapper footer)
* it should be added here below all of your main content.
*/
children?: React_2.ReactNode;
/** Class added to the containing `main` */
className?: string;
/** Test id added to the containing `main` */
'data-testid'?: string;
/** Unique id added to the containing `main` */
id?: string;
/** Label added to the containing `main` */
'aria-label'?: string;
/** Id of the label element added to the containing `main` */
'aria-labelledby'?: string;
/** Id of the description element added to the containing `main` */
'aria-describedby'?: string;
}
export declare const Menu: React_2.ForwardRefExoticComponent>;
export declare const MenuItem: React_2.ForwardRefExoticComponent>;
export declare interface MenuItemProps extends Omit, 'onSelect'> {
/** When `true`, disables `MenuItem` so that it cannot be selected */
disabled?: boolean;
/** Used in searchable menus when the menu item child is not a string, or when adding hidden search tags. */
label?: string;
/** Handler to be called when the menu item is selected via a click or keyboard event. */
onSelect?: (event: React_2.MouseEvent | React_2.KeyboardEvent) => void;
/** Value associated with the item. */
value?: number | string;
/** Contents of the menu item. */
children?: React_2.ReactNode;
/** Appended to internal classes on the containing `div` element. */
className?: string;
[prop: string]: any;
}
export declare interface MenuProps extends Omit, 'label' | 'onChange'> {
/** Appended to internal classes on the flyout container element with `role="menu"`. */
flyoutClassName?: string;
/** Replaces the default Button anchor.
If providing a custom component, it must accept the following props: `ref`, `role`, `tabIndex`, `aria-expanded`, `aria-haspopup`, `onClick`, `onKeyDown`. If you provide your own `onClick` or `onKeyDown`, it will be merged with the built-in behavior.
Native elements like `button`, `div`, or `span` will work by default. */
anchor?: React_2.ReactElement & React_2.RefAttributes;
/** List of `MenuItem`s. */
children?: React_2.ReactNode;
/** Disables the menu so that it cannot be opened.
* @defaultValue false
*/
disabled?: boolean;
/** Label to be used on the menu button. */
label?: React_2.ReactNode;
/** Maximum height to be applied to the menu item container. This will enable scrolling. */
maxHeight?: string | number;
/** Handler to be called when the `isOpen` value changes. */
onIsOpenChange?: (newIsOpen: boolean) => void;
/** Indicates if the menu flyout is open.
* @defaultValue false
*/
isOpen?: boolean;
/** Where to prioritize placement of the menu item container.
* @defaultValue 'bottom-start'
*/
placement?: Placement;
/** The container element where the Menu flyout should be rendered. Overrides the default set by [UIProvider](/components/ui-provider). */
portalTarget?: HTMLElement;
/** Controls whether the menu should be searchable or not.
* @defaultValue false
*/
searchable?: boolean;
/** If `searchable` is `true`, controls whether the menu items are filtered based on the search input's value or not. This prop should be `true` when menu items are asynchronously loaded based on the search input's value.
* @defaultValue false
*/
isSearchFilteringDisabled?: boolean;
/** The value of the search input if `searchable` prop is `true`. */
searchValue?: string;
/** Handler to be called when the search input value changes (if `searchable` prop is `true`). */
onSearchValueChange?: (newValue: string) => void;
/** The z-index of the menu item container. */
zIndex?: number;
/** Controls whether options should be virtualized. Useful for performance in large lists.
* @defaultValue false
*/
isVirtualized?: boolean;
/** Appended to internal classes on the `button` element. */
className?: string;
[prop: string]: any;
}
declare type MessageKey = keyof typeof _default | CountryCode;
declare type MessageKeyType = string;
export declare const Modal: React_2.ForwardRefExoticComponent>;
export declare const ModalBody: React_2.ForwardRefExoticComponent>;
export declare interface ModalBodyProps extends React_2.AllHTMLAttributes {
/** The contents of the modal body. */
children?: React_2.ReactNode;
/** Appended to internal classes on the containing `div` element. */
className?: string;
[prop: string]: any;
}
export declare const ModalFooter: React_2.ForwardRefExoticComponent>;
export declare interface ModalFooterProps extends React_2.AllHTMLAttributes {
/** The contents of the modal footer. */
children?: React_2.ReactNode;
/** Appended to internal classes on the containing `div` element. */
className?: string;
[prop: string]: any;
}
export declare const ModalHeader: React_2.ForwardRefExoticComponent>;
export declare interface ModalHeaderProps extends React_2.AllHTMLAttributes {
/** The contents of the modal header. */
children?: React_2.ReactNode;
/** Appended to internal classes on the containing `div` element. */
className?: string;
[prop: string]: any;
}
export declare interface ModalProps extends React_2.AllHTMLAttributes {
/** The maximum size of the modal. The modal gets smaller as the screen width or height gets smaller. */
maxSize?: 'small' | 'medium' | 'large' | 'xl';
/**
* @deprecated
* @internal
* This prop is no longer unstable; use the `maxSize` prop instead
*/
unstable_maxSize?: 'small' | 'medium' | 'large' | 'xl';
/** Sets the Modal width to fill the screen regardless of size, up to the width specified by the maxSize prop.
* @defaultValue false
*/
isResponsive?: boolean;
/** Whether or not to display the modal.
* @defaultValue false
*/
open?: boolean;
/** An element ref to focus when the `Modal` opens. If this prop is not used, either the close icon button or `Modal` container will be focused. */
elementRefToFocusOnOpen?: React_2.RefObject;
/** If `true`, the `Modal` will not shrink in height to fit the content. This prop only works when `maxSize` is defined.
* @defaultValue false
*/
unstable_isHeightExpandedToMaxSize?: boolean;
/**
* @deprecated
* @internal
* This prop should be replaced with the `onClose` prop. Handler to be called when the user presses the `Escape` key or clicks outside the modal dialog (on the overlay). Should only be used to close the modal if action is not required by the user. */
onDismiss?: (event: React_2.MouseEvent | React_2.KeyboardEvent) => void;
/** Handler to be called when the user clicks the close icon or presses the Escape key. Should only be used to close the modal if action is not required by the user. */
onClose?: (event: React_2.MouseEvent | React_2.KeyboardEvent) => void;
/** An element ref to focus when the `Modal` closes. If this prop is not used, the element that was focused prior to the `Modal` opening will be the element that is focused when the `Modal` closes. */
elementRefToFocusOnClose?: React_2.RefObject;
/** The z-index of the modal.
* @defaultValue 1000
*/
zIndex?: number;
/** The container element where the Modal should be rendered. Overrides the default set by [UIProvider](/components/ui-provider). */
portalTarget?: HTMLElement;
/** Disables the mechanism that cycles focus within the modal. If using this prop, custom implementation of this behavior must exist to remain accessible.
* @defaultValue false
*/
dangerouslyDisableFocusLock?: boolean;
/** `ModalHeader`, `ModalBody`, or `ModalFooter` components. */
children?: React_2.ReactNode;
/** Appended to internal classes on the modal `div` element. */
className?: string;
[prop: string]: any;
}
declare interface NamedIconsProps extends React_2.SVGProps {
/**
* The size of the icon.
* @defaultValue 'medium'
*/
size?: 'small' | 'medium' | 'large';
/** Appended to internal classes on the `svg` element. */
className?: string;
/** Determines if the icon should be ignored by screen readers. */
'aria-hidden'?: boolean | 'true' | 'false';
[prop: string]: any;
}
declare type NavLink = RenderFunctionNavLinkV5 | RenderFunctionNavLinkV6;
declare interface NavLinkV5Props extends BaseNavLinkProps {
className: (isActive: boolean) => string;
}
declare interface NavLinkV6Props extends BaseNavLinkProps {
className: (props: {
isActive: boolean;
}) => string;
}
/**
* Renders the NumberStepper component.
* This component is offered as a "default" (aka simple) component or an "advanced" (aka composite) component.
*/
export declare const NumberStepper: React_2.ForwardRefExoticComponent>;
export declare interface NumberStepperButtonProps extends Omit, 'type' | 'aria-label' | 'aria-disabled' | 'tabIndex'> {
className?: string;
onClick?: React_2.MouseEventHandler;
[prop: string]: any;
}
/**
* Renders the NumberStepperDecrement component.
* Either `NumberStepper` renders this component automatically or the consumer renders this component explicitly.
*/
export declare const NumberStepperDecrement: React_2.ForwardRefExoticComponent>;
/**
* Renders the NumberStepperIncrement component.
* Either `NumberStepper` renders this component automatically or the consumer renders this component explicitly.
*/
export declare const NumberStepperIncrement: React_2.ForwardRefExoticComponent>;
/**
* Renders the NumberStepperInput component.
* Either `NumberStepper` renders this component automatically or the consumer renders this component explicitly.
*/
export declare const NumberStepperInput: React_2.ForwardRefExoticComponent>;
export declare interface NumberStepperInputProps extends Omit, 'type' | 'role' | 'step' | 'min' | 'max' | 'value' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-disabled' | 'onChange' | 'id'> {
className?: string;
onKeyDown?: (event: React_2.KeyboardEvent) => void;
onFocus?: (event: React_2.FocusEvent) => void;
onBlur?: (event: React_2.FocusEvent) => void;
[prop: string]: any;
}
export declare interface NumberStepperProps extends Omit, 'onChange'> {
/** Disables default interaction.
* @defaultValue false
*/
isDisabled?: boolean;
/** Added to the containing `span` element and to the main sub-components, each with their own suffix:
* - NumberStepperDecrement: `-Decrement`
* - NumberStepperIncrement: `-Increment`
* - NumberStepperInput: `-Input`
*/
'data-testid'?: string;
/** Forwarded to `theNumberStepperInput` as an `id`. */
inputId?: string;
/** Initial value of NumberStepper.
* @defaultValue 0
*/
initialValue?: number;
/** Value of NumberStepper. Overwrites `initialValue`. */
value?: number;
/** A stepping interval to use when incrementing and decrementing.
* @defaultValue 1
*/
step?: number;
/** The minimum value to accept. Must be less than or equal to the `max` property. */
min?: number;
/** The maximum value to accept. Must be greater than or equal to the `min` property. */
max?: number;
/** Determines the decimal separator. See `Localization` above for more information.
* @defaultValue 'both'
*/
decimalSeparator?: 'period' | 'comma' | 'both';
/** Determines whether or not decimal numbers are allowed.
* @defaultValue true
*/
allowDecimalNumbers?: boolean;
/** An accessible label for NumberStepper to be used by screen readers. This prop is forwarded to the `NumberStepperInput`. */
'aria-label'?: string;
/** The id of an element that acts as a label for NumberStepper. This prop is forwarded to the `NumberStepperInput`. */
'aria-labelledby'?: string;
/** The id of an element that describes the NumberStepper. This prop is forwarded to the `NumberStepperInput`. */
'aria-describedby'?: string;
/** For advanced use cases when needing to access sub-components directly. Must contain NumberStepperIncrement, NumberStepperDecrement, and NumberStepperInput. */
children?: React_2.ReactNode;
/** Handler to be called when the value changes. */
onChange?: (value: number) => void;
/** Handler to be called when one of the parts of the component gains focus, if no part had focus previously. */
onFocus?: React_2.FocusEventHandler;
/** Handler to be called when every part of the component has lost focus. */
onBlur?: React_2.FocusEventHandler;
/** Appended to internal classes on the containing `span` element. */
className?: string;
}
export declare const PageContainer: React_2.ForwardRefExoticComponent>;
export declare interface PageContainerProps {
/** The sections of your app. Should be some subset of the following:
* - `PageHeader`
* - [`SidebarNav`](/components/sidebar-nav)
* - [`ConfigPane`](/components/config-pane)
* - `MainContent`
*/
children?: React_2.ReactNode;
/** Class added to the containing `div` */
className?: string;
/** Test id added to the containing `div` */
'data-testid'?: string;
/** Unique id added to the containing `div` */
id?: string;
/** Label added to the containing `div` */
'aria-label'?: string;
/** Id of the label element added to the containing `div` */
'aria-labelledby'?: string;
/** Id of the description element added to the containing `div` */
'aria-describedby'?: string;
}
export declare const PageHeader: React_2.ForwardRefExoticComponent>;
export declare interface PageHeaderProps {
/** The header content for your app.
*
* This is likely where you will render your Global Wrapper header
* for a customer-facing page. View the getting started guide linked
* in the global wrapper Slack channel (#global-wrapper) for more information
* on how to add that to your app
*/
children?: React_2.ReactNode;
/** Class added to the containing `header` */
className?: string;
/** Test id added to the containing `header` */
'data-testid'?: string;
/** Unique id added to the containing `header` */
id?: string;
/** Label added to the containing `header` */
'aria-label'?: string;
/** Id of the label element added to the containing `header` */
'aria-labelledby'?: string;
/** Id of the description element added to the containing `header` */
'aria-describedby'?: string;
}
/**
* Renders the Pagination component.
* This component is offered as a "default" (aka simple) component or an "advanced" (aka composite) component.
*/
export declare const Pagination: React_2.ForwardRefExoticComponent>;
export declare interface PaginationButtonProps extends Omit {
/** Will not include the suffix from the `Pagination` component. */
'data-testid'?: string;
/** Overrides the built-in logic for disabling the button. */
disabled?: boolean;
/** Handler to be called when the button is clicked. */
onClick?: (event: React_2.MouseEvent) => void;
/** Appended to internal classes on the [Button](/components/button) component. */
className?: string;
[prop: string]: any;
}
/**
* Renders the PaginationNextButton.
* Either `Pagination` renders this component automatically or the consumer renders this component explicitly.
*/
export declare const PaginationNextButton: React_2.ForwardRefExoticComponent>;
/**
* Renders the PaginationPageInput.
* Either `Pagination` renders this component automatically or the consumer renders this component explicitly.
*/
export declare const PaginationPageInput: React_2.ForwardRefExoticComponent>;
export declare interface PaginationPageInputProps extends Omit>, 'onChange'> {
/** @internal */
value?: InputProps['value'];
/** @internal */
defaultValue?: InputProps['defaultValue'];
/** @internal */
disabled?: InputProps['disabled'];
/** @internal */
full?: InputProps['full'];
/** @internal */
invalid?: InputProps['invalid'];
/** @internal */
multiline?: InputProps['multiline'];
/** @internal */
rows?: InputProps['rows'];
/** @internal */
small?: InputProps['small'];
/** @internal */
type?: InputProps['type'];
/** @internal */
'aria-describedby'?: InputProps['aria-describedby'];
/** @internal */
readOnly?: InputProps['readOnly'];
/** Will not include the suffix from the `Pagination` component. */
'data-testid'?: string;
/** Handler to be called when the value changes. */
onChange?: (event: React_2.ChangeEvent) => void;
/** Handler to be called when the input loses focus. */
onBlur?: (event: React_2.FocusEvent) => void;
/** Handler to be called when the input gets focus. */
onFocus?: (event: React_2.FocusEvent) => void;
/** Appended to internal classes on the [Input](/components/input) component. */
className?: string;
/** Appended to internal styles on the [Input](/components/input) component. */
style?: React_2.CSSProperties;
[prop: string]: any;
}
/**
* Renders the PaginationPrevioudButton.
* Either `Pagination` renders this component automatically or the consumer renders this component explicitly.
*/
export declare const PaginationPreviousButton: React_2.ForwardRefExoticComponent>;
export declare interface PaginationProps extends React_2.AllHTMLAttributes {
/** Added to the containing `div` element and to the main sub-components, each with their own suffix:
* - PaginationPreviousButton: `-PreviousButton`
* - PaginationNextButton: `-NextButton`
* - PaginationPageInput: `-PageInput` */
'data-testid'?: string;
/** The maximum number of pages to paginate across. When `undefined`, only pagination arrows will be shown. Note that when not using `numPages`, you can provide sub-components and use the `disabled` prop on the buttons to control when they are disabled (See the "Advanced" example above). */
numPages?: number;
/** The current page being displayed. The previous button is disabled when `currentPage === 1`. The next button is disabled when `currentPage === numPages`.
* @defaultValue 1
*/
currentPage?: number;
/** Handler to be called when a page is changed by clicking on the next or previous buttons. */
onPageChange?: (event: {
page: number;
}) => void;
/** An accessible label for the PaginationPageInput that is used by screen readers. */
'aria-label'?: string;
/** The id of an element that acts as a label for the PaginationPageInput. */
'aria-labelledby'?: string;
/** The id of an element that describes the PaginationPageInput. */
'aria-describedby'?: string;
/** Appended to internal classes on the containing `div` element. */
className?: string;
[prop: string]: any;
}
declare type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
export declare const Popover: React_2.ForwardRefExoticComponent>;
export declare interface PopoverProps extends Omit, 'content'> {
/** Whether or not to display the popover content.
* @defaultValue false
*/
show?: boolean;
/** Handler to be called when the user presses the Escape key when the Popover is open. It is recommended that the `show` prop is set to `false` when this function is called. If the `show` prop is not set to `false` when this function is called, keyboard users will be stuck inside of the `Popover`, and will not be able to navigate the rest of the page. */
onClose?: (event: React_2.KeyboardEvent) => void;
/** Content of the popover. */
content?: React_2.ReactNode;
/** Dictates the position of the popover relative to its anchor.
* @defaultValue 'top'
*/
placement?: Placement;
/** Element or component to which the popover should be anchored. */
children: React_2.ReactElement & React_2.RefAttributes;
/** The z-index of the popover content.
* @defaultValue 1000
*/
zIndex?: number;
/** Appended to internal classes on the containing div element. */
className?: string;
/** The container element where the Popover should be rendered. Overrides the default set by [UIProvider](/components/ui-provider). */
portalTarget?: HTMLElement;
/** If `true`, removes the arrow that points to the anchor element when the popover is open.
* @defaultValue false
*/
isArrowRemoved?: boolean;
/** Handler to be called when the user clicks outside the popover container or anchor. */
onClickOutside?: (event: MouseEvent) => void;
[prop: string]: any;
}
export declare const PortalTargetProvider: ({ target, children, }: PortalTargetProviderProps) => React_2.ReactElement;
export declare interface PortalTargetProviderProps {
/** The DOM node that will act as the portal target. */
target?: HTMLElement | null;
/** Code that requires portalling. */
children?: ReactNode;
}
export declare const QuickSearch: React_2.ForwardRefExoticComponent>;
export declare interface QuickSearchProps extends Omit, 'onChange' | 'onSelect'> {
/** Maximum height to be applied to the menu item container. This will enable scrolling. */
maxHeight?: string | number;
/** A function that is called when a suggestion is selected. */
onSelect?: (item: string | {
label: React_2.ReactNode;
value: any;
}) => void;
/** Where to prioritize placement of the menu item container.
* @defaultValue 'bottom-start'
*/
placement?: Placement;
/** The container element where the QuickSearch flyout should be rendered. Overrides the default set by [UIProvider](/components/ui-provider). */
portalTarget?: HTMLElement;
/** The z-index of the menu item container.
* @defaultValue 1000
*/
zIndex?: number;
/** When set to true, the width of the flyout will automatically match the width of the anchor Input.
* @defaultValue false
*/
isFlyoutFullWidth?: boolean;
/** Time to wait in ms since the last input change before calling onSearch. In other words, 'search after I stop typing'.
* @defaultValue 0
*/
debouncePeriod?: number;
/** The initial value for the uncontrolled Input of the QuickSearch component. Cannot use with 'value' prop.
* @defaultValue ''
*/
defaultValue?: string;
/** The minimum number of characters required before onSearch is called automatically.
* @defaultValue 1
*/
minChars?: number;
/** Handler to be called whenever the value of the input changes. */
onChange?: (event: React_2.ChangeEvent) => void;
/** A search function to be called when the input changes, passing the input value as a parameter. It must return an array of strings or objects, optionally wrapped in a Promise. If returning an array of objects, each object should have a `label` and `value` property. The `label` is rendered in the menu and the item is passed as a parameter by `onSelect`.
*
* If the provided function returns a promise, the most recent searches will take precedence, even if the promises resolve out of order.
* */
onSearch: (query: string) => string[] | {
label: React_2.ReactNode;
value: any;
}[] | Promise;
/** Time to wait in ms since onSearch was last called before calling onSearch again. In other words, 'don't search faster than once every X ms, even if I'm typing faster than that'.
* @defaultValue 0
*/
throttlePeriod?: number;
/** The current value for the controlled Input of the QuickSearch component. Must be used with onChange. */
value?: string;
[prop: string]: any;
}
export declare const Radio: React_2.ForwardRefExoticComponent>;
export declare const RadioGroup: React_2.ForwardRefExoticComponent>;
export declare interface RadioGroupProps extends Omit, 'onChange'> {
/** Label to display for `RadioGroup`. */
label?: string;
/**
* Unique name for use with forms.
*
* See [Form API](../../form/getting-started) for more information.
*/
name?: string;
/** Initial value of the selected radio button for an uncontrolled radio group (cannot use with `value`). */
defaultValue?: string;
/** The value of the selected radio button. Requires use of `onChange`. Cannot use with `defaultValue`. */
value?: string;
/** Change handler to be fired when the checkbox state changes. */
onChange?: (event: React_2.ChangeEvent) => void;
/** The radio buttons to be included in the group. */
children: React_2.ReactNode;
/** Appended to internal classes on the containing `fieldset` element. */
className?: string;
/** Adds an error message directly below `RadioGroup` */
errorText?: ReactNode;
/** Adds additional information directly below `RadioGroup` */
helperText?: ReactNode;
[prop: string]: any;
}
export declare const RadioOption: React_2.ForwardRefExoticComponent>;
export declare interface RadioOptionProps extends Omit, 'label'> {
/** Value passed to the input element value attribute. */
value: string;
/** Label to accompany the radio component */
label: React_2.ReactNode;
/** Disables change events on the radio button and styles it to look as though it cannot be clicked.
* @defaultValue false
*/
disabled?: boolean;
/** Props forwarded to the `input` element. */
inputProps?: Omit, 'type'>;
/** Appended to internal classes on the containing [Label](/components/label) element. */
className?: string;
/** The id of an element that describes the Radio. */
'aria-describedby'?: string;
[prop: string]: any;
}
export declare interface RadioProps extends React_2.AllHTMLAttributes {
/** Disables change events on the radio button and styles it to look as though it cannot be clicked.
* @defaultValue false
*/
disabled?: boolean;
/** Value passed to the input element value attribute. */
value: string;
/** Change handler to be called when the radio state changes. Invalid if used with a child of `RadioGroup`. */
onChange?: React_2.FormEventHandler | undefined;
/** Checked state of an controlled radio, likely used with `onChange`. Invalid if used with a child of `RadioGroup`.
* @defaultValue false
*/
checked?: boolean | undefined;
/** Initial checked state of an uncontrolled radio (cannot use with `checked` prop). Invalid if used with a child of `RadioGroup`.
* @defaultValue false
*/
defaultChecked?: boolean | undefined;
/** Props forwarded to the `input` element. */
inputProps?: Omit, 'type'>;
/** Appended to internal classes on the containing `span` element. */
className?: string;
/** An accessible label for the Radio that is used by screen readers. */
'aria-label'?: string;
/** The id of an element that acts as a label for the Radio. */
'aria-labelledby'?: string;
/** The id of an element that describes the Radio. */
'aria-describedby'?: string;
[prop: string]: any;
}
export declare const RangeSlider: React_2.ForwardRefExoticComponent>;
export declare interface RangeSliderProps extends Omit, 'onChange'> {
/** Array of two numbers for the initial values of an uncontrolled RangeSlider (cannot use with 'value' prop). */
defaultValues?: number[];
/** A function called with a number value that returns a custom string representation for the slider button tooltip. Useful for localization. */
formatter?: (value: number) => string;
/** The maximum value for the RangeSlider.
* @defaultValue 100
*/
max?: number;
/** The minimum value for the RangeSlider.
* @defaultValue 0
*/
min?: number;
/** Handler to be called whenever the value of the RangeSlider changes. */
onChange?: (values: number[]) => void;
/** The amount the Slider increments by.
* @defaultValue 1
*/
step?: number;
/** Array of two numbers for the values of the RangeSlider. Requires use of 'onChange' prop. Cannot use with 'defaultValue' prop. */
values?: number[];
/** Appended to internal classes on the containing `div` element. */
className?: string;
/** An accessible label for the minimum Slider thumb that is used by screen readers. */
minAriaLabel?: string;
/** An accessible label for the maximum Slider thumb that is used by screen readers. */
maxAriaLabel?: string;
/** The id of an element that acts as a label for the minimum Slider thumb. */
minAriaLabelledBy?: string;
/** The id of an element that acts as a label for the maximum Slider thumb. */
maxAriaLabelledBy?: string;
/** The id of an element that describes the minimum Slider thumb. */
minAriaDescribedBy?: string;
/** The id of an element that describes the maximum Slider thumb. */
maxAriaDescribedBy?: string;
[prop: string]: any;
}
declare type RenderFunctionNavLinkV5 = (props: RenderFunctionPropsTypeV5) => ReactNode | null;
declare type RenderFunctionNavLinkV6 = (props: RenderFunctionPropsTypeV6) => ReactNode | null;
declare type RenderFunctionPropsTypeV5 = NavLinkV5Props & RefAttributes;
declare type RenderFunctionPropsTypeV6 = NavLinkV6Props & RefAttributes;
export declare const SearchInput: React_2.ForwardRefExoticComponent>;
export declare interface SearchInputProps {
/** The initial value for an uncontrolled input.
* @defaultValue ''
*/
defaultValue?: string;
/** The value for the input. */
value?: string;
/** Handler to be called when the value of the input changes. */
onChange?: (value: string) => void;
/** A custom placeholder for the search input. Useful for overriding the `searchText` translation passed in through `UIProvider`. */
placeholder?: string;
/** Disables the input element and adds disabled styling.
* @defaultValue false
*/
isDisabled?: boolean;
/** Handler to be called when a key is pressed down. */
onKeyDown?: (event: React_2.KeyboardEvent) => void;
/** Provided to the `input` element. */
'data-testid'?: string;
/**
* Forwarded to the [`Input`](/components/input) component.
*/
'aria-label'?: string;
/**
* Forwarded to the [`Input`](/components/input) component.
*/
'aria-labelledby'?: string;
/**
* Forwarded to the [`Input`](/components/input) component.
*/
'aria-controls'?: string;
/**
* Forwarded to the [`Input`](/components/input) component.
*/
'aria-expanded'?: boolean;
/**
* Forwarded to the [`Input`](/components/input) component.
*/
'aria-describedby'?: string;
/**
* Forwarded to the [`Input`](/components/input) component.
*/
onFocus?: (event: React_2.FocusEvent) => void;
/**
* Forwarded to the [`Input`](/components/input) component.
*/
onBlur?: (event: React_2.FocusEvent) => void;
/** Appended to internal classes on the containing `span` element. */
className?: string;
/** Appended to internal classes on the containing `span` element. */
style?: React_2.CSSProperties;
/** An id for the `input` element. */
id?: string;
/** Forwarded to the [`Input`](/components/input) component. */
role?: string;
}
export declare const SelectMenu: React_2.ForwardRefExoticComponent>;
export declare interface SelectMenuProps extends Omit {
/** The container element where the Select flyout should be rendered. Overrides the default set by [UIProvider](/components/ui-provider). */
portalTarget?: MenuProps['portalTarget'];
/** Appended to internal classes on the flyout container element with `role="menu"`. */
flyoutClassName?: MenuProps['flyoutClassName'];
/** Replaces the default Button anchor.
*
* If providing a custom component, it must accept the following props: `ref`, `role`, `tabIndex`, `aria-expanded`, `aria-haspopup`, `onClick`, `onKeyDown`. If you provide your own `onClick` or `onKeyDown`, it will be merged with the built-in behavior.
*
* Native elements like `button`, `div`, or `span` will work by default. */
anchor?: MenuProps['anchor'];
/** The z-index of the menu item container.
* @defaultValue 1000
*/
zIndex?: MenuProps['zIndex'];
/** Handler to be called when the search input value changes (if the `searchable` prop is set to `true`). */
onSearchValueChange?: MenuProps['onSearchValueChange'];
/** The value of the search input if the `searchable` prop is set to `true`.
* @defaultValue ''
*/
searchValue?: MenuProps['searchValue'];
/** If `searchable` is `true`, controls whether the menu items are filtered based on the search input's value or not. This prop should be `true` when menu items are asynchronously loaded based on the search input's value.
* @defaultValue false
*/
isSearchFilteringDisabled?: MenuProps['isSearchFilteringDisabled'];
/** Controls whether the menu should be searchable or not.
* @defaultValue false
*/
searchable?: MenuProps['searchable'];
/** Where to prioritize placement of the menu item container. Available options are `top-start`, `top`, `top-end`, `right-start`, `right`, `right-end`, `bottom-end`, `bottom`, `bottom-start`, `left-end`, `left`, `left-start`.
* @defaultValue 'bottom-start'
*/
placement?: MenuProps['placement'];
/** Maximum height to be applied to the menu item container. This will enable scrolling. */
maxHeight?: MenuProps['maxHeight'];
/** Disables the menu so that it cannot be opened. */
disabled?: MenuProps['disabled'];
/** Can be used to control/override the SelectMenu button label. Also used as the label for sub menu items. */
label?: MenuProps['label'];
/** Handler to be called when the `isOpen` value changes. */
onIsOpenChange?: MenuProps['onIsOpenChange'];
/** Indicates if the select menu flyout is open.
* @defaultValue false
*/
isOpen?: MenuProps['isOpen'];
/** Handler to be called when a menu item is selected. */
onChange?: (value: string | number | string[] | number[]) => void;
/** Default label to be used on the SelectMenu button when no item is selected. Note that this has no effect on sub menus, prefer the `label` property instead. */
defaultLabel?: React_2.ReactNode;
/** The value of the initially selected menu item. */
defaultValue?: number | number[] | string | string[];
/**
* @deprecated
* @internal
* This prop is no longer unstable; use the `isMultiSelect` prop instead
*/
unstable_isMultiSelect?: boolean;
/** Controls whether the menu and submenus allow multiple items to be selected.
* @defaultValue false
*/
isMultiSelect?: boolean;
/** Controls whether options should be virtualized. Useful for performance in large lists.
* @defaultValue false
*/
isVirtualized?: boolean;
/** List of menu item elements. */
children?: React_2.ReactNode;
/** An accessible label for `SelectMenu` that is used by screen readers. Internally this value is concatenated with the button contents (if a string). */
'aria-label'?: string;
/** The id of the element that acts as a label for `SelectMenu`. Internally this value is concatenated with its own id so the button contents are part of the accessible label. */
'aria-labelledby'?: string;
}
export declare const SidebarNav: React_2.ForwardRefExoticComponent>;
export declare const SidebarNavLink: React_2.ForwardRefExoticComponent>;
export declare interface SidebarNavLinkProps {
/** The icon to render. See the [Icon](/components/icon) page for available icons. */
icon?: React_2.ForwardRefExoticComponent>;
/** Label for the link */
label?: string;
/** Destination for the link */
to: string;
/** Added to the containing `a`, and to main sub-components with the following suffixes:
* - `-link-icon`: assigned to the icon
* - `-link-label`: assigned to the label */
'data-testid'?: string;
}
export declare interface SidebarNavProps {
/** The links in the nav bar */
children?: React_2.ReactNode;
/** Whether to allow expanding and collapsing of the labels
* @defaultValue true
*/
isCollapsible?: boolean;
/** Adds controls for setting collapsed state
* @defaultValue false
*/
isCollapsed?: boolean;
/** Handler to be called whenever `isCollapsed` changes */
onIsCollapsedChange?: (newIsCollapsed: boolean) => void;
/** Component for rendering a smart link from your routing framework (e.g. `NavLink` from `react-router-dom`).
* **Signature:** `(props: object) => node`
* - `props`: The props for the `NavLink`
* - `className`: `Function`
* - Function that takes in the active state and returns the correct `className`
* - **Signature**: `(activeState: boolean | { isActive: boolean }) => string`
* - `activeState`: The active state either as a boolean or as a prop object
* - `to`: `string`
* - Destination for link
* - `aria-label`: `string`
* - Accessible label for link
* - `data-testid`: `string`
* - Test id for link*/
NavLink: NavLink;
/** Added to the containing `div`, and to main sub-components with the following suffixes:
* - `-navigation`: assigned to the navigation container
* - `-expand-collapse-button`: assigned to the expand/collapse button */
'data-testid'?: string;
/** Passed to the `nav` element */
'aria-label'?: string;
/** Passed to the `nav` element */
'aria-labelledby'?: string;
/** Passed to the `nav` element */
'aria-describedby'?: string;
}
export declare const Slider: React_2.ForwardRefExoticComponent>;
export declare interface SliderProps extends Omit, 'onChange'> {
/** Initial value for an uncontrolled Slider (cannot use with 'value' prop). */
defaultValue?: number;
/** A function called with a number value that returns a custom string representation for the slider button tooltip. Useful for localization. */
formatter?: (value: number) => string;
/** The maximum value for the Slider.
* @defaultValue 100
*/
max?: number;
/** The minimum value for the Slider.
* @defaultValue 0
*/
min?: number;
/** Handler to be called whenever the value of the Slider changes. */
onChange?: (value: number) => void;
/** The amount the Slider increments by.
* @defaultValue 1
*/
step?: number;
/** The value for the Slider. Requires use of 'onChange' prop. Cannot use with 'defaultValue' prop. */
value?: number;
/** Appended to internal classes on the containing `div` element. */
className?: string;
/** An accessible label for the Slider that is used by screen readers. */
'aria-label'?: string;
/** The id of an element that acts as a label for the Slider. */
'aria-labelledby'?: string;
/** The id of an element that describes the Slider. */
'aria-describedby'?: string;
[prop: string]: any;
}
export declare const Switch: React_2.ForwardRefExoticComponent>;
export declare const SwitchField: React_2.ForwardRefExoticComponent>;
export declare interface SwitchFieldProps extends Omit, 'label' | 'onChange'> {
checked?: boolean;
/** The initial value of an uncontrolled switch. Cannot be used with 'checked' prop. */
defaultChecked?: boolean;
/** Disables interactivity with the switch.
* @defaultValue false
*/
disabled?: boolean;
/** Label positioned to the right of the switch. */
label: React_2.ReactNode;
/** Change handler to be called when the switch state changes. The value and state of the switch can be retrieved via `event.target.value` and `event.target.checked`. */
onChange?: (event: React_2.ChangeEvent) => void;
/** The value of the component. */
value?: string;
/** Props forwarded to the `input` element. */
inputProps?: Omit, 'type' | 'role'>;
/** Identifier for the input element. Commonly used in forms with a label.
* @defaultValue ''
*/
id?: string;
/** Appended to internal classes on the containing [`Label`](/components/label) component. */
className?: string;
/** The state of whether the switch is on or off.
* @defaultValue false
*/
/** The id of an element that describes the Switch. */
'aria-describedby'?: string;
[prop: string]: any;
}
export declare interface SwitchProps extends React_2.AllHTMLAttributes {
/** The state of whether the switch is on or off.
* @defaultValue false
*/
checked?: boolean;
/** The initial value of an uncontrolled switch. Cannot be used with 'checked' prop. */
defaultChecked?: boolean;
/** Disables interactivity with the switch.
* @defaultValue false
*/
disabled?: boolean;
/** Change handler to be called when the switch state changes. The value and state of the switch can be retrieved via `event.target.value` and `event.target.checked`. */
onChange?: (event: React_2.ChangeEvent) => void;
/** The value of the component. */
value?: string;
/** Props forwarded to the `input` element. */
inputProps?: Omit, 'type' | 'role'>;
/** Identifier for the input element. Commonly used in forms with a label.
* @defaultValue ''
*/
id?: string;
/** Appended to internal classes on the containing `span` element. */
className?: string;
/** An accessible label for the Switch that is used by screen readers. */
'aria-label'?: string;
/** The id of an element that acts as a label for the Switch. */
'aria-labelledby'?: string;
/** The id of an element that describes the Switch. */
'aria-describedby'?: string;
/** Forwarded to the `input` element. */
tabIndex?: number;
[prop: string]: any;
}
export declare const Tab: React_2.ForwardRefExoticComponent>;
export declare const Table: React_2.ForwardRefExoticComponent>;
export declare const TableBody: React_2.ForwardRefExoticComponent>;
export declare interface TableBodyProps extends React_2.AllHTMLAttributes {
/** Contents of the component. */
children?: React_2.ReactNode;
/** Appended to internal classes on the `tbody `element. */
className?: string;
[prop: string]: any;
}
export declare const TableCell: React_2.ForwardRefExoticComponent>;
export declare interface TableCellProps extends React_2.AllHTMLAttributes {
/** Contents of the component. */
children?: React_2.ReactNode;
/** Appended to internal classes on the `td` element. */
className?: string;
[prop: string]: any;
}
export declare const TableHead: React_2.ForwardRefExoticComponent>;
export declare const TableHeaderCell: React_2.ForwardRefExoticComponent>;
export declare interface TableHeaderCellProps extends React_2.AllHTMLAttributes {
/** Contents of the component. */
children?: React_2.ReactNode;
/** Appended to internal classes on the `th` element. */
className?: string;
[prop: string]: any;
}
export declare interface TableHeadProps extends React_2.AllHTMLAttributes {
/** Contents of the component. */
children?: React_2.ReactNode;
/** Appended to internal classes on the `thead` element. */
className?: string;
[prop: string]: any;
}
export declare interface TableProps extends React_2.AllHTMLAttributes {
/** Contents of the component. */
children?: React_2.ReactNode;
/** Appended to internal classes on the `table` element. */
className?: string;
[prop: string]: any;
}
export declare const TableRow: React_2.ForwardRefExoticComponent>;
export declare interface TableRowProps extends React_2.AllHTMLAttributes {
/** Contents of the component. */
children?: React_2.ReactNode;
/** Appended to internal classes on the `tr` element. */
className?: string;
[prop: string]: any;
}
export declare const TabList: React_2.ForwardRefExoticComponent>;
export declare interface TabListProps extends React_2.AllHTMLAttributes {
/** `Tab` components. The order of the `Tab` components controls the order they
* appear and will display the corresponding `TabPanel` in the same child position
* in a `TabPanels` component when clicked. Any other type of children besides `Tab`
* will have undefined behavior.
*/
children: React_2.ReactNode;
/** Class to add to the containing `div` */
className?: string;
/** Causes the tab list to stretch to fill all of the horizontal space of its container. */
isFullWidth?: boolean;
}
export declare const TabPanel: React_2.ForwardRefExoticComponent>;
export declare interface TabPanelProps extends React_2.AllHTMLAttributes {
/** Optional value, normally set by the containing context.
* @internal
*/
value?: number;
/** The contents of the tab panel. */
children: React_2.ReactNode;
/** Class to add to the containing `div` */
className?: string;
}
export declare const TabPanels: React_3.FunctionComponent;
export declare interface TabPanelsProps {
/**
* `TabPanel` components. The order of the `TabPanel` components
* controls the order they appear and will be displayed by the
* corresponding `Tab` in the same child position in a `TabList`
* component when clicked. Any other type of children besides
* `TabPanel` will have undefined behavior.
*/
children: React_3.ReactNode;
}
export declare interface TabProps extends Omit, 'value'> {
/** The label node for a `Tab`. It's possible to pass arbitrary children to a `Tab`,
* but if no text content is supplied, an `aria-label` attribute should be passed to the
* Tab component for screen reader accessibility.
*/
children?: ReactNode;
/** Class to add to the containing `div` */
className?: string;
/** Value is optional, but it will always be passed in by the TabList component when the tabs are cloned
* @internal
*/
value?: number;
}
export declare const Tabs: React_2.ForwardRefExoticComponent>;
export declare interface TabsProps extends Omit, 'onChange'> {
/** The 0-indexed tab and associated tab panel that is currently selected. Only use this prop if controlling the component directly. */
activeTab?: number;
/** The 0-indexed tab and associated tab panel that will be selected whent the component first renders.
* @defaultValue 0
*/
initialActiveTab?: number;
/** TabList and TabPanel Components. Any other type of children besides TabList and TabPanel passed to the tabs component will have undefined behavior. */
children?: ReactNode;
/**
* Added to the containing `div` element and to each `TabList`, `Tab`, and `TabPanel` component with a suffix:
* - `TabList`: `-tablist`
* - `Tab`: `-tab-0`
* - `TabPanel`: `-tabpanel-0`
*
* Note: the number in each `id` will correspond with that section's position in the `TabList` or `TabPanels` components.
*/
id?: string;
/**
* Added to the containing `div` element and to each `TabList`, `Tab`, and `TabPanel` component with a suffix:
* - `TabList`: `-tablist`
* - `Tab`: `-tab-0`
* - `TabPanel`: `-tabpanel-0`
*
* Note: the number in each `data-testid` will correspond with that section's position in the `TabList` or `TabPanels` components.
*/
'data-testid'?: string;
/** Class to add to the containing `div` */
className?: string;
/** Handler to be called whenever the selected `Tab` changes
* @param tab - The updated `activeTab` value
* @returns
*/
onChange?: (tab: number) => void;
}
export declare const Tooltip: React_2.ForwardRefExoticComponent & React_2.RefAttributes>;
export declare interface TooltipProps extends Omit, 'content'> {
/** Element or component to which the tooltip should be anchored, which must accept a ref. */
children: React_2.ReactElement & React_2.RefAttributes;
/** Element(s) or component(s) to be displayed in the tooltip. */
content?: React_2.ReactNode;
/** Number of milliseconds to wait before displaying the tooltip.
* @defaultValue 0
*/
delayMs?: number;
/** Disables the tooltip from displaying.
* @defaultValue false
*/
disabled?: boolean;
/** Dictates the position of the tooltip relative to its anchor.
* @defaultValue 'top'
*/
placement?: Placement;
/** If true, removes the arrow from the tooltip.
* @defaultValue false
*/
isArrowRemoved?: boolean;
/** Themes the tooltip to a light color. We recommend using tooltip with lightTheme set to true. This property will be **deprecated** in the next major version.
* @defaultValue false
*/
lightTheme?: boolean;
/** The z-index of the tooltip content.
* @defaultValue 1000
*/
zIndex?: number;
/** Show the tooltip when a focusable descendant of the anchor element is focused via keyboard control
* @defaultValue false
*/
showOnDescendantFocus?: boolean;
/** The container element where the Tooltip should be rendered. Overrides the default set by UIProvider */
portalTarget?: HTMLElement;
/** Appended to internal classes on the containing `div` element. */
className?: string;
/** Controls visibility of tooltip, overrides default behavior. If you intend to use this prop, see the accessibility section for further instruction. */
show?: boolean;
/** Handler to be called when the user's interaction triggers a change in visibility. */
onShowChange?: (show: boolean) => void;
/**
* @internal
*/
unstable_contentKey?: string;
/**
* @internal
* Internal property to control whether the tooltip should be removed from the DOM when hidden.
* @defaultValue true
*/
persistentInDom?: boolean;
/**
* If true, the tooltip will be hidden when the user hovers outside of the anchor element (also over tooltip itself). **In most cases it violates accessibility best practices, do not use it unless necessary**.
* @defaultValue false
*/
forceHideOutsideOfAnchor?: boolean;
[prop: string]: any;
}
declare interface TranslationContextType {
localizedText?: LocalizedText;
}
export declare interface TranslationProviderProps {
localizedText?: LocalizedText;
children?: ReactNode;
}
export declare const UIProvider: React_2.ForwardRefExoticComponent