{
/**
* Gets the element of the MaskedTextBox.
*
* ```jsx
* class App extends React.Component {
* constructor(props) {
* super(props);
* }
* element = null;
* render() {
* return (
*
*
* this.element = component ? component.element : null}
* />
* console.log(this.element)}>console.log the element
*
* );
* }
* }
*
* ReactDOM.render(
* ;
/**
* Sets a custom suffix to the MaskedTextBox component.
*/
suffix?: CustomComponent;
/**
* Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
* For example these elements could contain error or hint message.
*/
ariaDescribedBy?: string;
/**
* Identifies the element(s) which will label the component.
*/
ariaLabelledBy?: string;
/**
* Determines whether the MaskedTextBox is in its read-only state.
*/
readonly?: boolean;
/**
* Represents a prompt character for the masked value. Defaults to `_`.
*/
prompt?: string;
/**
* Indicates a character which represents an empty position in the raw value. Defaults to ` `.
*/
promptPlaceholder?: string;
/**
* Indicates whether to include literals in the raw value. Defaults to `false`.
*/
includeLiterals?: boolean;
/**
* Determines whether the built-in mask validator is enforced when a form is validated. Defaults to `true`.
*/
maskValidation?: boolean;
/**
* Represents the current mask. If no mask is set, the component behaves as a standard `type="text"` input.
*/
mask?: string;
/**
* Represents the RegExp-based mask validation array.
*/
rules?: {
[key: string]: RegExp;
};
/**
* Represents the beginning and ending of the selected portion of the input content that will be applied the next time when the MaskedTextBox is rendered.
*/
selection?: {
start: number;
end: number;
};
/**
* Determines the event handler that will be fired when the user edits the value.
*/
onChange?: (event: MaskedTextBoxChangeEvent) => void;
/**
* Fires each time the user focuses the MaskedTextBox.
*/
onFocus?: (event: MaskedTextBoxEvent) => void;
/**
* Fires each time the MaskedTextBox gets blurred.
*/
onBlur?: (event: MaskedTextBoxEvent) => void;
/**
* Configures the `size` of the MaskedTextBox.
*
* The available options are:
* - small
* - medium
* - large
* - null—Does not set a size `className`.
*
* @default `medium`
*/
size?: null | 'small' | 'medium' | 'large';
/**
* Configures the `roundness` of the MaskedTextBox.
*
* The available options are:
* - small
* - medium
* - large
* - full
* - null—Does not set a rounded `className`.
*
* @default `medium`
*/
rounded?: null | 'small' | 'medium' | 'large' | 'full';
/**
* Configures the `fillMode` of the MaskedTextBox.
*
* The available options are:
* - solid
* - outline
* - flat
* - null—Does not set a fillMode `className`.
*
* @default `solid`
*/
fillMode?: null | 'solid' | 'flat' | 'outline';
/**
* Represents the `autoFocus` HTML attribute that will be applied to the input element of the MaskedTextBox. (Defaults to `false`)
*/
autoFocus?: boolean;
/**
* @hidden
*/
unstyled?: InputsClassStructure;
/**
* Sets the HTML attributes of the inner focusable input element.
* Attributes which are essential for certain component functionalities cannot be changed.
*/
inputAttributes?: React.InputHTMLAttributes;
}
/**
* Represents the PropsContext of the `MaskedTextBox` component.
* Used for global configuration of all `MaskedTextBox` instances.
*
* For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
*/
export declare const MaskedTextBoxPropsContext: React_2.Context<(p: MaskedTextBoxProps) => MaskedTextBoxProps>;
/**
* @hidden
*/
declare interface MaskedTextBoxState {
focused?: boolean;
value?: string;
}
/** @hidden */
export declare class MaskedTextBoxWithoutContext extends React_2.Component implements FormComponent {
static displayName: string;
/**
* @hidden
*/
static propTypes: {
value: default_2.Requireable;
defaultValue: default_2.Requireable;
placeholder: default_2.Requireable;
title: default_2.Requireable;
dir: default_2.Requireable;
id: default_2.Requireable;
style: default_2.Requireable;
className: default_2.Requireable;
prefix: default_2.Requireable;
suffix: default_2.Requireable;
ariaLabelledBy: default_2.Requireable;
ariaDescribedBy: default_2.Requireable;
width: default_2.Requireable>;
tabIndex: default_2.Requireable;
accessKey: default_2.Requireable;
disabled: default_2.Requireable;
readonly: default_2.Requireable;
prompt: default_2.Requireable;
promptPlaceholder: default_2.Requireable;
includeLiterals: default_2.Requireable;
maskValidation: default_2.Requireable;
mask: default_2.Requireable;
rules: (props: MaskedTextBoxProps, propName: string, componentName: string) => Error | null;
selection: default_2.Requireable;
end: default_2.Validator;
}>>;
name: default_2.Requireable;
label: default_2.Requireable;
validationMessage: default_2.Requireable;
required: default_2.Requireable;
valid: default_2.Requireable;
validityStyles: default_2.Requireable;
onChange: default_2.Requireable<(...args: any[]) => any>;
size: default_2.Requireable<"small" | "large" | "medium" | null | undefined>;
rounded: default_2.Requireable<"small" | "large" | "medium" | "full" | null | undefined>;
fillMode: default_2.Requireable<"flat" | "solid" | "outline" | null | undefined>;
autoFocus: default_2.Requireable;
inputAttributes: default_2.Requireable;
};
/**
* @hidden
*/
static defaultProps: {
prompt: string;
promptPlaceholder: string;
includeLiterals: boolean;
maskValidation: boolean;
rules: {
[key: string]: RegExp;
};
validityStyles: boolean;
prefix: (_: any) => null;
suffix: (_: any) => null;
size: "small" | "large" | "medium" | null | undefined;
rounded: "small" | "large" | "medium" | "full" | null | undefined;
fillMode: "flat" | "solid" | "outline" | null | undefined;
autoFocus: boolean;
};
/**
* @hidden
*/
state: MaskedTextBoxState;
private _inputId;
private _service;
private _isPasted;
private _selection;
private _input;
private _valueDuringOnChange?;
/**
* @hidden
*/
focus: () => void;
/**
* Gets the element of the MaskedTextBox.
*
* @return - An `HTMLInputElement`.
*
* @example
* ```jsx
* class App extends React.Component {
* constructor(props) {
* super(props);
* }
* element = null;
* render() {
* return (
*
*
* this.element = component ? component.element : null}
* />
* console.log(this.element)}>console.log the element
*
* );
* }
* }
*
* ReactDOM.render(
* >;
/**
* The arguments for the `onBlur` NumericTextBox event.
*/
export declare interface NumericTextBoxBlurEvent extends BaseEvent {
}
/**
* The arguments for the `change` event of the NumericTextBox.
*/
export declare interface NumericTextBoxChangeEvent extends BaseEvent {
/**
* The current value of the NumericTextBox.
*/
value: number | null;
}
/**
* The arguments for the `onFocus` NumericTextBox event.
*/
export declare interface NumericTextBoxFocusEvent extends BaseEvent {
}
/**
* The NumericTextBox ref.
*/
export declare interface NumericTextBoxHandle {
/**
* The NumericTextBox element.
*/
element: HTMLInputElement | null;
/**
* Focus the NumericTextBox.
*/
focus: () => void;
/**
* Gets the `name` property of the NumericTextBox.
*/
name: string | undefined;
/**
* Gets the value of the NumericTextBox.
*/
value: number | null;
/**
* Represents the validity state into which the NumericTextBox is set.
*/
validity: FormComponentValidity;
/**
* @hidden
*/
props: NumericTextBoxProps;
/**
* @hidden
*/
validityStyles: boolean;
/**
* @hidden
*/
required: boolean;
}
declare type NumericTextBoxInputType = 'tel' | 'text' | 'number';
/**
* Represents the props of the [KendoReact NumericTextBox component]({% slug overview_numerictextbox %}).
*/
export declare interface NumericTextBoxProps extends FormComponentProps, Omit, 'defaultValue' | 'prefix' | 'onChange' | 'onBlur' | 'onFocus'> {
/**
* Sets a class of the NumericTextBox DOM element.
*/
className?: string;
/**
* Specifies the value of the NumericTextBox.
*/
value?: number | null;
/**
* Specifies the initial value. Leaves the subsequent updates uncontrolled.
*/
defaultValue?: number | null;
/**
* Specifies the value that is used to increment or decrement the value of the NumericTextBox ([see example]({% slug predefinedsteps_numerictextbox %})).
*/
step?: number;
/**
* Specifies the number format which is used for formatting the value ([see example]({% slug formats_numerictextbox %})). If set to `an empty string` or `undefined`, the default format will be used. Format cannot contain decimal separators or numbers. Power signs are supported.
*/
format?: string | NumberFormatOptions;
/**
* Specifies the width of the NumericTextBox.
*/
width?: number | string;
/**
* Sets the `tabIndex` property of the NumericTextBox.
*/
tabIndex?: number;
/**
* Specifies the `accessKey` of the NumericTextBox.
*/
accessKey?: string;
/**
* Sets the title of the `input` element of the NumericTextBox.
*/
title?: string;
/**
* Specifies the input placeholder.
*/
placeholder?: string;
/**
* Specifies the smallest value that can be entered.
*/
min?: number;
/**
* Specifies the greatest value that can be entered.
*/
max?: number;
/**
* Specifies whether the **Up** and **Down** spin buttons will be rendered ([see example]({% slug spinbuttons_numerictextbox %})).
*/
spinners?: boolean;
/**
* Determines whether the NumericTextBox is disabled.
*/
disabled?: boolean;
/**
* Represents the `dir` HTML attribute.
*/
dir?: string;
/**
* Specifies the name of the `input` DOM element.
*/
name?: string;
/**
* Renders a floating label for the NumericTextBox.
*/
label?: string;
/**
* Sets the `id` of the `input` DOM element.
*/
id?: string;
/**
* Sets a custom prefix to the NumericTextBox component.
*/
prefix?: CustomComponent;
/**
* Sets a custom suffix to the NumericTextBox component.
*/
suffix?: CustomComponent;
/**
* Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
* For example these elements could contain error or hint message.
*/
ariaDescribedBy?: string;
/**
* Identifies the element(s) which will label the component.
*/
ariaLabelledBy?: string;
/**
* The accessible label of the component.
*/
ariaLabel?: string;
/**
* Sets the `type` of the `input` DOM element.
*
* The available options are:
* - (Default) `tel`
* - `text`
*/
inputType?: NumericTextBoxInputType;
/**
* If enabled, the NumericTextBox will handle the `enter` key to range the current invalid value between `min` and `max` props.
* The available options are:
* - (Default) `true`
* - `false`
* Can be disabled when form submit is required on pressing the `enter` key.
*/
rangeOnEnter?: boolean;
/**
* Determines whether the NumericTextBox is in its read-only state.
*/
readOnly?: boolean;
/**
* Determines the event handler that will be fired when the user edits the value.
*/
onChange?: (event: NumericTextBoxChangeEvent) => void;
/**
* The event handler that will be fired when NumericTextBox is focused.
*/
onFocus?: (event: NumericTextBoxFocusEvent) => void;
/**
* The event handler that will be fired when NumericTextBox is blurred.
*/
onBlur?: (event: NumericTextBoxBlurEvent) => void;
/** @hidden */
children?: React.ReactNode;
/**
* Configures the `size` of the NumericTextBox.
*
* The available options are:
* - small
* - medium
* - large
* - null—Does not set a size `className`.
*
* @default `medium`
*/
size?: null | 'small' | 'medium' | 'large';
/**
* Configures the `roundness` of the NumericTextBox.
*
* The available options are:
* - small
* - medium
* - large
* - full
* - null—Does not set a rounded `className`.
*
* @default `medium`
*/
rounded?: null | 'small' | 'medium' | 'large' | 'full';
/**
* Configures the `fillMode` of the NumericTextBox.
*
* The available options are:
* - solid
* - outline
* - flat
* - null—Does not set a fillMode `className`.
*
* @default `solid`
*/
fillMode?: null | 'solid' | 'flat' | 'outline';
/**
* Represents the `style` HTML attribute.
*/
style?: React.CSSProperties;
/**
* Represents the input element `style` HTML attribute.
*/
inputStyle?: React.CSSProperties;
/**
* Represents the `autoFocus` HTML attribute that will be applied to the input element of the NumericTextBox. (Defaults to `false`)
*/
autoFocus?: boolean;
/**
* Sets the HTML attributes of the inner focusable input element.
* Attributes which are essential for certain component functionalities cannot be changed.
*/
inputAttributes?: React.InputHTMLAttributes;
}
/**
* Represents the PropsContext of the `NumericTextBox` component.
* Used for global configuration of all `NumericTextBox` instances.
*
* For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
*/
export declare const NumericTextBoxPropsContext: React_2.Context<(p: NumericTextBoxProps) => NumericTextBoxProps>;
/**
* @hidden
*/
declare interface NumericTextBoxState {
eventValue: number | null | undefined;
prevLooseValue: string | undefined;
currentLooseValue: string | undefined;
selectionStart: number | undefined;
selectionEnd: number | undefined;
decimalSelect: boolean;
valueIsCorrected: boolean;
valueIsOutOfRange: boolean;
focused: boolean;
isPaste: boolean;
}
/**
* @hidden
*/
declare type Omit_2 = Pick>;
/**
* @hidden
*/
declare type Omit_3 = Pick>;
/**
* @hidden
*/
declare type Omit_4 = Pick>;
/**
* @hidden
*/
declare type Omit_5 = Pick>;
/**
* @hidden
*/
export declare const PALETTEPRESETS: {
basic: {
colors: string[];
columns: number;
};
office: {
colors: string[];
columns: number;
};
apex: {
colors: string[];
columns: number;
};
austin: {
colors: string[];
columns: number;
};
clarity: {
colors: string[];
columns: number;
};
slipstream: {
colors: string[];
columns: number;
};
metro: {
colors: string[];
columns: number;
};
flow: {
colors: string[];
columns: number;
};
hardcover: {
colors: string[];
columns: number;
};
trek: {
colors: string[];
columns: number;
};
verve: {
colors: string[];
columns: number;
};
monochrome: {
colors: string[];
columns: number;
};
};
/**
* Represents the [KendoReact RadioButton component]({% slug overview_radiobutton %}).
*
* Accepts properties of type [RadioButtonProps]({% slug api_inputs_radiobuttonprops %}).
* Obtaining the `ref` returns an object of type [RadioButtonHandle]({% slug api_inputs_radiobuttonhandle %}).
*/
export declare const RadioButton: React_2.ForwardRefExoticComponent>;
/**
* The arguments for the `onBlur` RadioButton event.
*/
export declare interface RadioButtonBlurEvent extends BaseEvent {
}
/**
* The arguments for the `onChange` RadioButton event.
*/
export declare interface RadioButtonChangeEvent extends BaseEvent {
/**
* The value of the selected RadioButton.
*/
value: any;
}
/**
* The arguments for the `onFocus` RadioButton event.
*/
export declare interface RadioButtonFocusEvent extends BaseEvent {
}
/**
* The RadioButton ref.
*/
export declare interface RadioButtonHandle {
element: HTMLInputElement | null;
focus: any;
}
/**
* Represents the props of the [KendoReact RadioButton component]({% slug overview_radiobutton %}).
* Extends the [native input props](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement).
*/
export declare interface RadioButtonProps extends Omit_4, 'size' | 'onChange' | 'onFocus' | 'onBlur'> {
/**
* Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
* For example these elements could contain error or hint message.
*/
ariaDescribedBy?: string;
children?: any;
/**
* Specifies if the Radio button is checked.
*/
checked?: boolean;
/**
* Specifies a list of CSS classes that will be added to the Radio button.
*/
className?: string;
/**
* Specifies if the Radio button is disabled.
*/
disabled?: boolean;
/**
* Specifies the current index of the Radio button.
*/
index?: number;
/**
* Sets the `id` of the Radio button.
*/
id?: string;
/**
* Configures the `size` of the RadioButton.
*
* The available options are:
* - small
* - medium
* - large
* - null—Does not set a size `className`.
*
* @default `medium`
*/
size?: null | 'small' | 'medium' | 'large';
/**
* Sets the label of the Radio button ([see example]({% slug labels_radiobutton %})).
*/
label?: string;
/**
* Sets the label position of the Radio button ([see example]({% slug labels_radiobutton %})).
* Accepts two options: `before` or `after`. Defaults to `after`.
*/
labelPlacement?: string;
/**
* Sets the `name` property of the Radio button.
*/
name?: string;
/**
* Sets additional CSS styles to the Radio button.
*/
style?: React.CSSProperties;
/**
* Sets the `tabIndex` property of the Radio button.
* Defaults to `0`.
*/
tabIndex?: number;
/**
* Overrides the validity state of the component.
* If `valid` is set, the `required` property will be ignored.
*
* This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
*/
valid?: boolean;
/**
* Sets the value to be submitted.
*/
value?: any;
/**
* The event handler that will be fired when the changes the selected value.
*/
onChange?: (event: RadioButtonChangeEvent) => void;
/**
* The event handler that will be fired when RadioButton is focused.
*/
onFocus?: (event: RadioButtonFocusEvent) => void;
/**
* The event handler that will be fired when RadioButton is blurred.
*/
onBlur?: (event: RadioButtonBlurEvent) => void;
}
/**
* Represents the PropsContext of the `RadioButton` component.
* Used for global configuration of all `RadioButton` instances.
*
* For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
*/
export declare const RadioButtonPropsContext: React_2.Context<(p: RadioButtonProps) => RadioButtonProps>;
/**
* Represents the [KendoReact RadioGroup component]({% slug overview_radiogroup %}).
*
* Accepts properties of type [RadioGroupProps]({% slug api_inputs_radiogroupprops %}).
* Obtaining the `ref` returns an object of type [RadioGroupHandle]({% slug api_inputs_radiogrouphandle %}).
*/
export declare const RadioGroup: React_2.ForwardRefExoticComponent>;
/**
* The arguments for the `onChange` RadioGroup event.
*/
export declare interface RadioGroupChangeEvent extends BaseEvent {
/**
* The value of the selected RadioButton.
*/
value: any;
}
/**
* The arguments for the `onFocus` RadioGroup event.
*/
export declare interface RadioGroupFocusEvent extends BaseEvent {
}
/**
* The RadioGroup ref.
*/
export declare interface RadioGroupHandle {
element: HTMLUListElement | null;
focus: any;
}
/**
* Represents the props of the [KendoReact RadioGroup component]({% slug overview_radiobutton %}).
*/
export declare interface RadioGroupProps {
/**
* Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
* For example these elements could contain error or hint message.
*/
ariaDescribedBy?: string;
/**
* Identifies the element(s) which will label the component.
*/
ariaLabelledBy?: string;
/**
* Specifies a list of CSS classes that will be added to the RadioGroup element.
*/
className?: string;
/**
* Specifies the value of the `id` attribute that will be added to the RadioGroup element.
*/
id?: string;
/**
* The collection of radio buttons that will be rendered in the RadioGroup ([see example]({% slug overview_radiobutton %})).
*/
data?: Array;
/**
* Sets the default checked state of a radio button when used in uncontrolled mode ([see example]({% slug overview_radiobutton %})).
* The `checked` property is passed to the underlying `input` element.
*/
defaultValue?: any;
/**
* Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
*/
dir?: string;
/**
* Disable all radio buttons ([see example]({% slug disabled_radiobutton %})).
*/
disabled?: boolean;
/**
* Overrides the default component responsible for visualizing a single item.
*
* The default element is `li` with a [RadioButton]({% slug api_inputs_radiobutton %}) as `children`.
*/
item?: React.ComponentType>;
/**
* Sets the label position of the radio buttons.
* Accepts two options: `before` or `after`. Defaults to `after`.
*/
labelPlacement?: string;
/**
* Specifies the radio group layout.
*/
layout?: 'horizontal' | 'vertical';
/**
* Specifies the `name` property of the `input` DOM elements.
*/
name?: string;
/**
* The event handler that will be fired when the changes the selected value.
*/
onChange?: (event: RadioGroupChangeEvent) => void;
/**
* The event handler that will be fired when Radio button is focused.
*/
onFocus?: (event: RadioGroupFocusEvent) => void;
/**
* Sets additional CSS styles to the radio group.
*/
style?: React.CSSProperties;
/**
* Sets the default checked state of a radio button when used in controlled mode ([see example]({% slug controlled_radiogroup %})).
* The `checked` property is passed to the underlying `input` element.
*/
value?: string | number | null;
/**
* Overrides the validity state of the component.
* If `valid` is set, the `required` property will be ignored.
*
* This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
*/
valid?: boolean;
}
/**
* Represents the PropsContext of the `RadioGroup` component.
* Used for global configuration of all `RadioGroup` instances.
*
* For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
*/
export declare const RadioGroupPropsContext: React_2.Context<(p: RadioGroupProps) => RadioGroupProps>;
/**
* The range object representing the value of the RangeSlider.
*/
declare type Range_2 = {
/**
* The start of the range.
*/
start: number;
/**
* The end of the range.
*/
end: number;
};
export { Range_2 as Range }
/**
* @hidden
*/
export declare enum RANGE_ACTION {
start = "start",
end = "end",
min = "min",
max = "max",
increase = "increase",
decrease = "decrease",
increaseLarge = "increaseLarge",
decreaseLarge = "decreaseLarge"
}
/**
* @hidden
*/
declare interface RangeAction extends RangeActionDispatch {
step: number;
largeStep: number;
min: number;
max: number;
}
/**
* @hidden
*/
declare type RangeActionDispatch = {
type: RANGE_ACTION;
payload?: number;
key?: string;
event?: React_2.SyntheticEvent | DraggableDragEvent;
state?: Range_2;
};
/**
* @hidden
*/
export declare const rangeReducer: (state: any, action: RangeAction) => any;
/**
* Represents the [KendoReact RangeSlider component]({% slug overview_rangeslider %}).
*
* Accepts properties of type [RangeSliderProps]({% slug api_inputs_rangesliderprops %}).
* Obtaining the `ref` returns an object of type [RangeSliderHandle]({% slug api_inputs_rangesliderhandle %}).
*/
export declare const RangeSlider: React_2.ForwardRefExoticComponent>;
/**
* Represent the return type of RangeSliderChangeEvent.
*/
export declare interface RangeSliderChangeEvent {
/**
* The value from type Range - `start` and `end`.
*/
value: Range_2;
/**
* The target of the RangeSliderChangeEvent from RangeSliderHandle.
*/
target: RangeSliderHandle;
/**
* The event of the RangeSliderChangeEvent.
*/
syntheticEvent: React_2.SyntheticEvent | DraggableDragEvent;
}
/**
* Represents the target(element and props) of the RangeSliderChangeEvent.
*/
export declare interface RangeSliderHandle {
/**
* The current element or `null` if there is no one.
*/
element: HTMLDivElement | null;
/**
* The props values of the RangeSlider.
*/
props: RangeSliderProps;
/**
* The focus event callback.
*/
focus: () => void;
}
/**
* Represents the properties of [RangeSlider](% slug api_inputs_rangeslider %) component.
*/
export declare interface RangeSliderProps extends FormComponentProps {
/**
* Sets the `id` property of the top div element of the RangeSlider.
*/
id?: string;
/**
* Sets additional CSS styles to the RangeSlider.
*/
style?: React_2.CSSProperties;
/**
* Sets additional classes to the RangeSlider.
*/
className?: string;
/**
* The flexible values of type Range - `start and `end`.
*/
value?: Range_2;
/**
* The default set values of type Range - `start` and `end`.
*/
defaultValue?: Range_2;
/**
* Triggered after value change - gets outside access to the element, new values and the event type.
*/
onChange?: (event: RangeSliderChangeEvent) => void;
/**
* Determines the children nodes.
*/
children?: React_2.ReactNode;
/**
* Specifies the step by which the RangeSlider's value will be increased or decreased using the keyboard arrows. Defaults to `1`.
*/
step?: number;
/**
* Specifies the step by which the RangeSlider's value will be increased or decreased using `pageUp` or `pageDown` keyboard buttons. Defaults to `10`.
*/
largeStep?: number;
/**
* The minimum possible value of the RangeSlider.
*/
min: number;
/**
* The maximum possible value of the RangeSlider.
*/
max: number;
/**
* The RangeSlider orientation if true - vertical, else - horizontal.
*/
vertical?: boolean;
/**
* Determines the disabled mode of the RangeSlider, if true - disabled.
*/
disabled?: boolean;
/**
* The RangeSlider direction `ltr` or `rtl`.
*/
dir?: Direction;
/**
* Sets the `tabIndex` attribute to the `start` drag handle.
*/
startTabIndex?: number;
/**
* Sets the `tabIndex` attribute to the `end` drag handle.
*/
endTabIndex?: number;
/**
* Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
* For example these elements could contain error or hint message.
*/
ariaDescribedBy?: string;
/**
* Identifies the element(s) which will label the component.
*/
ariaLabelledBy?: string;
}
/**
* Represents the PropsContext of the `RangeSlider` component.
* Used for global configuration of all `RangeSlider` instances.
*
* For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
*/
export declare const RangeSliderPropsContext: React_2.Context<(p: RangeSliderProps) => RangeSliderProps>;
/**
* Represents the [KendoReact Rating component]({% slug overview_rating %}).
*
* Accepts properties of type [RatingProps]({% slug api_inputs_ratingprops %}).
* Obtaining the `ref` returns an object of type [RatingHandle]({% slug api_inputs_ratinghandle %}).
*/
export declare const Rating: React_2.ForwardRefExoticComponent>;
/**
* @hidden
*/
export declare enum RATING_ACTION {
select = "select",
deselect = "deselect",
increase = "increase",
decrease = "decrease",
min = "min",
max = "max",
reset = "reset"
}
/**
* @hidden
*/
declare type RatingAction = {
min: number;
max: number;
step?: number;
};
/**
* @hidden
*/
declare type RatingActionDispatch = {
type: RATING_ACTION;
payload?: number;
event?: React.SyntheticEvent;
};
/**
* Represents the return type of RatingChangeEvent.
*/
export declare interface RatingChangeEvent {
/**
* The current Rating value.
*/
value: number;
/**
* The target of the RatingChangeEvent from RatingHandle.
*/
target: RatingHandle;
/**
* The event of the RatingChangeEvent.
*/
syntheticEvent: React_2.SyntheticEvent;
}
/**
* Represents the return type od the RatingFocusEvent.
*/
export declare interface RatingFocusEvent {
/**
* The target of the RatingFocusEvent from RatingHandle.
*/
target: RatingHandle;
/**
* The event of the RatingFocusEvent.
*/
syntheticEvent: React.FocusEvent;
}
/**
* Represents the target(element and props) of the RatingChangeEvent.
*/
export declare interface RatingHandle {
/**
* The current element or `null` if there is no one.
*/
element: HTMLDivElement | null;
/**
* The props value of the Rating.
*/
props: RatingProps;
}
/**
* Represents the RatingItem component.
*/
export declare const RatingItem: React_2.ForwardRefExoticComponent>;
/**
* Represents the return type of the RatingItemFocusEvent.
*/
export declare interface RatingItemFocusEvent {
/**
* The target of the RatingItemFocusEvent from RatingItemHandle.
*/
target: RatingItemHandle;
/**
* The event of the RatingItemFocusEvent.
*/
syntheticEvent: React.FocusEvent;
}
/**
* Represents the target(value, element and props) of The RatingItem.
*/
export declare interface RatingItemHandle {
/**
* The current RatingItem value.
*/
value: number;
/**
* The current element or `null` if there is no one.
*/
element: HTMLDivElement | null;
/**
* The props value of the RatingItem.
*/
props: RatingItemProps;
}
/**
* Represents the return type of the RatingItemKeyboardEvent.
*/
export declare interface RatingItemKeyboardEvent {
/**
* The target of the RatingItemKeyboardEvent from RatingItemHandle.
*/
target: RatingItemHandle;
/**
* The event of the RatingItemKeyboardEvent.
*/
syntheticEvent: React.KeyboardEvent;
}
/**
* Represents the return type of the RatingItemMouseEvent.
*/
export declare interface RatingItemMouseEvent {
/**
* The target of the RatingItemMouseEvent from RatingItemHandle.
*/
target: RatingItemHandle;
/**
* The event of the RatingItemMouseEvent.
*/
syntheticEvent: React.MouseEvent;
/**
* @hidden
*/
value?: number | null;
}
/**
* Represents the properties of [RatingItem](% slug api_inputs_ratingitem %) component.
*/
export declare interface RatingItemProps {
/**
* Sets the `id` property of the top div element of the RatingItem.
*/
id?: string;
/**
* Sets additional classes to the RatingItem.
*/
className?: string;
/**
* Sets the `tabIndex` attribute.
*/
tabIndex?: number;
/**
* Determines if icon is partly selected.
*/
half?: boolean;
/**
* Sets additional CSS styles to the RatingItem.
*/
style?: React_2.CSSProperties;
/**
* Determines the children nodes.
*/
children?: React_2.ReactNode;
/**
* Determines the RatingItem direction `ltr` - by default, or `rtl`.
*/
dir?: string;
/**
* Sets the current value of the RatingItem, used in controlled mode.
*/
value: number;
/**
* Sets the title of current RatingItem component. [See example]({% slug controlled_rating %})
*/
title?: string;
/**
* Sets the icon of current RatingItem component. [See example]({% slug label_rating %})
*/
icon?: any;
/**
* Determines if current RatingItem is selected. [See example]({% slug item_customization_ratingitem %})
*/
selected?: boolean;
/**
* Determines if current RatingItem is hovered.
*/
hovered?: boolean;
/**
* Triggered after `onClick` event. Gets outside access to the target element, the new value and the event type.
*/
onClick?: (event: RatingItemMouseEvent) => void;
/**
* Triggered after `onKeyDown` event. Gets outside access to the target element, the new value and the event type.
*/
onKeyDown?: (event: RatingItemKeyboardEvent) => void;
/**
* Triggered after `onFocus` event. Gets outside access to the target element and the event type.
*/
onFocus?: (event: RatingItemFocusEvent) => void;
/**
* Triggered after `onBlur` event. Gets outside access to the target element and the event type.
*/
onBlur?: (event: RatingItemFocusEvent) => void;
/**
* Triggered after `onMouseEnter` event. Gets outside access to the target element and the event type.
*/
onMouseEnter?: (event: RatingItemMouseEvent) => void;
/**
* Triggered after `onMouseLeave` event. Gets outside access to the target element and the event type.
*/
onMouseLeave?: (event: RatingItemMouseEvent) => void;
/**
* Triggered after `onMouseMove` event. Gets outside access to the target element and the event type.
*/
onMouseMove?: (event: RatingItemMouseEvent) => void;
}
/**
* Represents the return type of the RatingKeyboardEvent.
*/
export declare interface RatingKeyboardEvent {
/**
* The target of the RatingKeyboardEvent from RatingHandle.
*/
target: RatingHandle;
/**
* The event of the RatingKeyboardEvent.
*/
syntheticEvent: React.KeyboardEvent;
}
/**
* Represents the return type of the RatingMouseEvent.
*/
export declare interface RatingMouseEvent {
/**
* The target of the RatingMouseEvent from RatingHandle.
*/
target: RatingHandle;
/**
* The event of the RatingMouseEvent.
*/
syntheticEvent: React.MouseEvent;
}
/**
* Represents the properties of [Rating](% slug api_inputs_rating %) component.
*/
export declare interface RatingProps extends FormComponentProps {
/**
* Sets the `id` property of the top div element of the Rating.
*/
id?: string;
/**
* Sets additional classes to the Rating.
*/
className?: string;
/**
* Sets the `tabIndex` attribute.
*/
tabIndex?: number;
/**
* Sets additional CSS styles to the Rating.
*/
style?: React_2.CSSProperties;
/**
* Determines the children nodes.
*/
children?: React_2.ReactNode;
/**
* Represents the rendered Rating item.
*/
item?: React_2.ComponentType;
/**
* Sets the current value of the Rating, used in controlled mode. [See example]({% slug item_customization_ratingitem %})
*/
value?: number;
/**
* Sets the default value of the Rating, used in uncontrolled mode. [See example]({% slug controlled_rating %})
*/
defaultValue?: number;
/**
* Sets the min possible icon value or star value in the main use-case.
*/
min?: number;
/**
* Sets the max possible icon value or star value in the main use-case.
*/
max?: number;
/**
* Sets the step value between the min and max value.
*/
step?: number;
/**
* Determines the Rating direction `ltr` - by default, or `rtl`.
*/
dir?: string;
/**
* Determines if the Rating has a label and is it a custom one.
*/
label?: string;
/**
* Sets the `readonly` mode of the Rating, if it is set to `true`. [See example]({% slug label_rating %})
*/
readonly?: boolean;
/**
* Sets the `disabled` mode of the Rating, if it is set to `true`. [See example]({% slug readonly_rating %})
*/
disabled?: boolean;
/**
* Sets custom Rating icon, by default - star. [See example]({% slug disabled_rating %})
*/
icon?: string;
/**
* Sets custom Rating SVG icon.
*/
svgIcon?: SVGIcon;
/**
* Sets custom Rating SVG icon.
*/
svgIconOutline?: SVGIcon;
/**
* Determines the selection mode. By default set to `continues`. [See example]({% slug icon_rating %})
*/
selection?: 'continues' | 'single';
/**
* Determines the precision of the Rating. By default set to `item`. [See example]({% slug selection_rating %})
*/
precision?: 'half' | 'item';
/**
* Determines if value represents half icon -> true, or not -> false. [See example]({% slug precision_rating %})
*/
half?: boolean;
/**
* Triggered after value change. Gets outside access to the target element, the new value and the event type.
*/
onChange?: (event: RatingChangeEvent) => void;
/**
* Triggered after `onClick` event. Gets outside access to the target element, the new value and the event type.
*/
onClick?: (event: RatingItemMouseEvent) => void;
/**
* Triggered after `onKeyDown` event. Gets outside access to the target element, the new value and the event type.
*/
onKeyDown?: (event: RatingKeyboardEvent) => void;
/**
* Triggered after `onFocus` event. Gets outside access to the target element and the event type.
*/
onFocus?: (event: RatingItemFocusEvent) => void;
/**
* Triggered after `onBlur` event. Gets outside access to the target element and the event type.
*/
onBlur?: (event: RatingItemFocusEvent) => void;
/**
* Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
* For example these elements could contain error or hint message.
*/
ariaDescribedBy?: string;
/**
* Identifies the element(s) which will label the component.
*/
ariaLabelledBy?: string;
}
/**
* Represents the PropsContext of the `Rating` component.
* Used for global configuration of all `Rating` instances.
*
* For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
*/
export declare const RatingPropsContext: React_2.Context<(p: RatingProps) => RatingProps>;
/**
* @hidden
*/
export declare const ratingReducer: (state: any, action: RatingAction & RatingActionDispatch) => any;
/**
* @hidden
*/
declare interface RGBA {
r?: number;
g?: number;
b?: number;
a?: number;
}
/**
* @hidden
*/
export declare const sanitizeNumber: (state: NumericTextBoxState, format: string | NumberFormatOptions | undefined, intlService: any) => NumericTextBoxState;
/**
* Represents the [KendoReact Signature component]({% slug overview_signature %}).
*/
export declare const Signature: React_2.ForwardRefExoticComponent>;
/**
* The arguments for the `onBlur` Signature event.
*/
export declare interface SignatureBlurEvent extends BaseEvent {
}
/**
* The arguments for the `change` event of the Signature.
*/
export declare interface SignatureChangeEvent extends BaseEvent {
/**
* The current value of the Signature.
*/
value: string;
}
/**
* The arguments for the `onClose` Signature event.
*/
export declare interface SignatureCloseEvent extends BaseEvent {
}
/**
* The arguments for the `onFocus` Signature event.
*/
export declare interface SignatureFocusEvent extends BaseEvent {
}
/**
* The Signature ref.
*/
export declare interface SignatureHandle {
/**
* The Signature element.
*/
element: HTMLInputElement | null;
/**
* Focus the Signature.
*/
focus: () => void;
/**
* Gets the `name` property of the Signature.
*/
name: string | undefined;
/**
* Gets the value of the Signature.
*/
value: number | null;
/**
* @hidden
*/
props: SignatureProps;
/**
* @hidden
*/
validityStyles: boolean;
/**
* @hidden
*/
required: boolean;
/**
* @hidden
*/
color: string;
/**
* @hidden
*/
backgroundColor: string;
}
/**
* The arguments for the `onOpen` Signature event.
*/
export declare interface SignatureOpenEvent extends BaseEvent {
}
/**
* Represents the props of the [KendoReact Signature component]({% slug overview_signature %}).
*/
export declare interface SignatureProps extends FormComponentProps {
/**
* Sets a class of the Signature DOM element.
*/
className?: string;
/**
* Specifies the value of the Signature.
*
* The value is an image encoded as a [Data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs).
*/
value?: string;
/**
* Specifies the width of the Signature in pixels.
*/
width?: number;
/**
* Specifies the height of the Signature in pixels.
*/
height?: number;
/**
* Sets the `tabIndex` property of the Signature.
*/
tabIndex?: number;
/**
* Sets the `id` of the Signature DOM element.
*/
id?: string;
/**
* Represents the `dir` HTML attribute.
*/
dir?: string;
/**
* Specifies the name of the Signature input.
*/
name?: string;
/**
* Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
* For example these elements could contain error or hint message.
*/
ariaDescribedBy?: string;
/**
* Identifies the element(s) which will label the component.
*/
ariaLabelledBy?: string;
/**
* The accessible label of the component.
*/
ariaLabel?: string;
/**
* Determines whether the Signature is in its read-only state.
*/
readOnly?: boolean;
/**
* Determines whether the Signature is in its disabled state.
*/
disabled?: boolean;
/**
* Configures the `size` of the Signature.
*
* The available options are:
* - small
* - medium
* - large
* - null—Does not set a size `className`.
*
* @default `medium`
*/
size?: null | 'small' | 'medium' | 'large';
/**
* Configures the `roundness` of the Signature.
*
* The available options are:
* - small
* - medium
* - large
* - null—Does not set a rounded `className`.
*
* @default `medium`
*/
rounded?: null | 'small' | 'medium' | 'large';
/**
* Configures the `fillMode` of the Signature.
*
* The available options are:
* - solid
* - outline
* - flat
* - null—Does not set a fillMode `className`.
*
* @default `solid`
*/
fillMode?: null | 'solid' | 'flat' | 'outline';
/**
* The stroke color of the signature.
*
* Accepts CSS color names and hex values.
*
* The default value is determined by the theme `$kendo-input-text` variable.
*/
color?: string;
/**
* The background color of the signature.
*
* Accepts CSS color names and hex values.
*
* The default value is determined by the theme `$kendo-input-bg` variable.
*/
backgroundColor?: string;
/**
* The stroke width of the signature.
*
* @default 1
*/
strokeWidth?: number;
/**
* A flag indicating whether to smooth out signature lines.
*
* @default false
*/
smooth?: boolean;
/**
* A flag indicating if the signature can be maximized.
*
* @default true
*/
maximizable?: boolean;
/**
* Sets the open and close state of the Signature.
*/
open?: boolean;
/**
* The scale factor for the popup.
*
* The Signature width and height will be multiplied by the scale when showing the popup.
*
* @default 3
*/
popupScale?: number;
/**
* The scale factor for the exported image.
*
* The Signature width and height will be multiplied by the scale when converting the signature to an image.
*
* @default 2
*/
exportScale?: number;
/**
* A flag indicating whether the dotted line should be displayed in the background.
*
* @default false
*/
hideLine?: boolean;
/**
* Represents the `style` HTML attribute.
*/
style?: React.CSSProperties;
/**
* Represents the input element `style` HTML attribute.
*/
inputStyle?: React.CSSProperties;
/**
* Determines the event handler that will be fired when the user edits the value.
*/
onChange?: (event: SignatureChangeEvent) => void;
/**
* The event handler that will be fired when Signature is focused.
*/
onFocus?: (event: SignatureFocusEvent) => void;
/**
* The event handler that will be fired when Signature is blurred.
*/
onBlur?: (event: SignatureBlurEvent) => void;
/**
* The event handler that will be fired when Signature popup is open.
*/
onOpen?: (event: SignatureOpenEvent) => void;
/**
* The event handler that will be fired when Signature popup is closed.
*/
onClose?: (event: SignatureCloseEvent) => void;
/** @hidden */
children?: React.ReactNode;
/** @hidden */
maximized?: boolean;
}
/**
* Represents the PropsContext of the `Signature` component.
* Used for global configuration of all `Signature` instances.
*
* For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
*/
export declare const SignaturePropsContext: React_2.Context<(p: SignatureProps) => SignatureProps>;
/** @hidden */
export declare type Slider = SliderHandle;
/**
* Represents the [KendoReact Slider component]({% slug overview_slider %}).
*
* Accepts properties of type [SliderProps]({% slug api_inputs_sliderprops %}).
* Obtaining the `ref` returns an object of type [SliderHandle]({% slug api_inputs_sliderhandle %}).
*/
export declare const Slider: React_2.ForwardRefExoticComponent>;
/**
* @hidden
*/
export declare const SLIDER_LABEL_ATTRIBUTE = "data-slider-label";
/**
* The arguments for the `onChange` Slider event.
*/
export declare interface SliderChangeEvent extends BaseEvent {
/**
* The current value of the Slider.
*/
value: number;
}
/**
* Represent the `ref` of the Slider component.
*/
export declare interface SliderHandle extends Pick {
}
/**
* Represents the KendoReact SliderLabel component.
*/
export declare const SliderLabel: (props: SliderLabelProps) => JSX_2.Element;
/**
* Represents the props of the KendoReact SliderLabel component.
*/
export declare interface SliderLabelProps {
/**
* The position in relative to the start of the SliderLabel component.
*/
position: number;
/**
* The onClick event of the SliderLabel component.
*/
onClick?: (event: React_2.MouseEvent) => void;
/**
* The title of the SliderLabel component.
*/
title?: string;
/**
* @hidden
*/
children?: React_2.ReactNode;
/**
* @hidden
*/
vertical?: boolean;
/**
* @hidden
* Used to identify if a tick is first.
*/
firstTick?: boolean;
/**
* @hidden
* Used to identify if a tick is last.
*/
lastTick?: boolean;
}
/**
* Represents the props of the [KendoReact Slider component]({% slug overview_slider %}).
*/
export declare interface SliderProps extends FormComponentProps {
children?: React_2.ReactNode;
/**
* The value of the Slider.
*/
value?: number;
/**
* The default value of the Slider.
*/
defaultValue?: number;
/**
* The minimum value of the Slider.
*/
min: number;
/**
* The maximum value of the Slider.
*/
max: number;
/**
* Specifies the step by which the Slider's value will be increased or decreased using its buttons or keyboard arrows.
*/
step?: number;
/**
* Specifies the step by which the Slider's value will be increased or decreased using `pageUp` or `pageDown` keyboard buttons.
*/
largeStep?: number;
/**
* Determines the event handler that will be fired when the user edits the value.
*/
onChange?: (event: SliderChangeEvent) => void;
/**
* The styles that are applied to the Slider.
*/
style?: React_2.CSSProperties;
/**
* Sets additional classes to the Slider.
*/
className?: string;
/**
* Renders the arrow side buttons of the Slider if set to true.
*/
buttons?: boolean;
/**
* Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)
* of the Slider.
*/
tabIndex?: number;
/**
* Determines whether the Slider is disabled.
*
* @example
* ```jsx
* class App extends React.Component {
* render() {
* return (
* {
static displayName: string;
/**
* @hidden
*/
static propTypes: {
min: default_2.Validator;
max: default_2.Validator;
value: default_2.Requireable;
vertical: default_2.Requireable;
id: default_2.Requireable;
ariaLabelledBy: default_2.Requireable;
ariaDescribedBy: default_2.Requireable;
ariaLabel: default_2.Requireable;
};
/**
* @hidden
*/
static getDerivedStateFromProps(props: SliderProps, state: SliderState): {
value: number;
} | null;
/**
* @hidden
*/
state: {
value: number;
focused: boolean;
dir: Direction | undefined;
};
private _sliderTrack;
private _element;
constructor(props: SliderProps);
/**
* @hidden
*/
componentDidMount(): void;
/**
* @hidden
*/
buttons: (props: any) => any;
/**
* @hidden
*/
render(): JSX_2.Element;
/**
* @hidden
*/
focus: () => void;
/**
* @hidden
*/
get sliderTrack(): HTMLDivElement | null;
private isLabel;
private onFocus;
private onBlur;
private onKeyDown;
private decrement;
private increment;
private dragStart;
private dragOver;
private drag;
private change;
}
/** @hidden */
export declare type Switch = SwitchHandle;
/**
* Represents the [KendoReact Switch component]({% slug overview_switch %}).
*
* Accepts properties of type [SwitchProps]({% slug api_inputs_switchprops %}).
* Obtaining the `ref` returns an object of type [SwitchHandle]({% slug api_inputs_switchhandle %}).
*/
export declare const Switch: React_2.ForwardRefExoticComponent>;
/**
* The arguments for the `onChange` Switch event.
*/
export declare interface SwitchChangeEvent extends BaseEvent {
/**
* The new value of the Switch.
*/
value: boolean;
}
/**
* Represent the `ref` of the Switch component.
*/
export declare interface SwitchHandle extends Pick {
/**
* @hidden
*/
actionElement: HTMLSpanElement | null;
/**
* Returns the HTML element of the Switch component.
*/
element: HTMLSpanElement | null;
/**
* Gets the `name` property of the Switch.
*/
name: string | undefined;
/**
* Represents the validity state into which the Switch is set.
*/
validity: FormComponentValidity;
/**
* Gets the value of the Switch.
*/
value: boolean;
}
/**
* Represents the props of the [KendoReact Switch component]({% slug overview_switch %}).
*/
export declare interface SwitchProps extends ToggleBaseProps, FormComponentProps {
/**
* Specifies the `accessKey` of the Switch.
*/
accessKey?: string;
/**
* Sets the current value of the Switch ([see example]({% slug controlled_switch %})).
*/
checked?: boolean;
/**
* Sets the `className` of the wrapping element of the Switch.
*/
className?: string;
/**
* Sets the value of the Switch when it is initially displayed ([see example]({% slug default_state %})).
*/
defaultChecked?: boolean;
/**
* Sets the default value of the Switch.
*/
defaultValue?: any;
/**
* Disables the Switch when set to `true` ([see example]({% slug disabled_switch %})).
*/
disabled?: boolean;
/**
* Sets the `dir` property of the wrapping element of the Switch.
*/
dir?: string;
/**
* Sets the `id` of the Switch.
*/
id?: string;
/**
* Configures the `size` of the Switch.
*
* The available options are:
* - small
* - medium
* - large
* - null—Does not set a size `className`.
*
* @default `medium`
*/
size?: null | 'small' | 'medium' | 'large';
/**
* Configures the `trackRounded` of the Switch.
*
* The available options are:
* - small
* - medium
* - large
* - full
* - null—Does not set a trackRounded `className`.
*
* @default `full`
*/
trackRounded?: null | 'small' | 'medium' | 'large' | 'full';
/**
* Configures the `thumbRounded` of the Switch.
*
* The available options are:
* - small
* - medium
* - large
* - full
* - null—Does not set a thumbRounded `className`.
*
* @default `full`
*/
thumbRounded?: null | 'small' | 'medium' | 'large' | 'full';
/**
* Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
* For example these elements could contain error or hint message.
*/
ariaDescribedBy?: string;
/**
* Identifies the element(s) which will label the component.
*/
ariaLabelledBy?: string;
/**
* Sets custom **Off** label([see example]({% slug labels_switch %})).
*/
offLabel?: React_2.ReactNode;
/**
* Fires each time the Switch gets blurred.
*/
onBlur?: (event: React_2.FocusEvent) => void;
/**
* Fires each time the user selects a new value ([see example]({% slug controlled_switch %})).
*/
onChange?: (event: SwitchChangeEvent) => void;
/**
* Fires each time the Switch component gets focused.
*/
onFocus?: (event: React_2.FocusEvent) => void;
/**
* Sets custom **On** label ([see example]({% slug labels_switch %})).
*/
onLabel?: React_2.ReactNode;
/**
* Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
*/
tabIndex?: number;
/**
* Sets the value of the Switch. It can either be of the primitive (string, number, boolean) or of the complex (array) type.
*/
value?: string | number | string[] | boolean | null;
/**
* The accessible label of the component.
*/
ariaLabel?: string;
}
/**
* Represents the PropsContext of the `Switch` component.
* Used for global configuration of all `Switch` instances.
*
* For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
*/
export declare const SwitchPropsContext: React_2.Context<(p: SwitchProps) => SwitchProps>;
/**
* @hidden
*/
export declare interface SwitchState {
checked: boolean;
focused: boolean;
}
/** @hidden */
export declare class SwitchWithoutContext extends React_2.Component implements FormComponent {
static displayName: string;
/**
* Gets the value of the Switch.
*/
get value(): boolean;
get element(): HTMLSpanElement | null;
get actionElement(): HTMLSpanElement | null;
/**
* Gets the `name` property of the Switch.
*/
get name(): string | undefined;
/**
* Represents the validity state into which the Switch is set.
*/
get validity(): FormComponentValidity;
/**
* @hidden
*/
protected get validityStyles(): boolean;
/**
* @hidden
*/
protected get required(): boolean;
/**
* @hidden
*/
protected setValidity: () => void;
protected limit: (offset: number, drag: HTMLSpanElement, wrapper: HTMLSpanElement) => number;
protected toggle: (value: boolean, event: any) => void;
/**
* @hidden
*/
static propTypes: {
accessKey: default_2.Requireable;
checked: default_2.Requireable;
className: default_2.Requireable;
disabled: default_2.Requireable;
defaultChecked: default_2.Requireable;
size: default_2.Requireable<"small" | "large" | "medium" | null | undefined>;
trackRounded: default_2.Requireable<"small" | "large" | "medium" | "full" | null | undefined>;
thumbRounded: default_2.Requireable<"small" | "large" | "medium" | "full" | null | undefined>;
dir: default_2.Requireable;
id: default_2.Requireable;
ariaLabelledBy: default_2.Requireable;
ariaDescribedBy: default_2.Requireable;
offLabel: default_2.Requireable;
required: default_2.Requireable;
tabIndex: default_2.Requireable;
valid: default_2.Requireable;
validate: default_2.Requireable;
validationMessage: default_2.Requireable;
onBlur: default_2.Requireable;
onChange: default_2.Requireable;
onFocus: default_2.Requireable;
onLabel: default_2.Requireable;
};
/**
* @hidden
*/
static defaultProps: {
disabled: boolean;
defaultChecked: boolean;
size: "small" | "large" | "medium" | null | undefined;
trackRounded: "small" | "large" | "medium" | "full" | null | undefined;
thumbRounded: "small" | "large" | "medium" | "full" | null | undefined;
offLabel: string;
onBlur: () => void;
onFocus: () => void;
onLabel: string;
validityStyles: boolean;
};
/**
* @hidden
*/
readonly state: SwitchState;
private _element;
private _wrapper;
private _input;
private _id;
private valueDuringOnChange;
private dir?;
private defaultValidationMessage;
private eventTimeStamp?;
/**
* @hidden
*/
constructor(props: SwitchProps);
/**
* @hidden
*/
componentDidMount(): void;
/**
* @hidden
*/
componentDidUpdate(): void;
/**
* @hidden
*/
focus: () => void;
/**
* @hidden
*/
render(): JSX_2.Element;
private dummyInput;
private handleClick;
private handleKeyDown;
private handleWrapperFocus;
private handleWrapperBlur;
}
/**
* Represents the [KendoReact TextArea component]({% slug overview_textarea %}).
*
*
* Accepts properties of type [TextAreaProps]({% slug api_inputs_textareaprops %}).
*
* @example
* ```jsx
* class App extends React.Component {
* render() {
* return ;
* }
* }
* ReactDOM.render(>;
/**
* The arguments for the `onBlur` TextArea event.
*/
export declare interface TextAreaBlurEvent extends BaseEvent {
}
/**
* The arguments for the `onChange` TextArea event.
*/
export declare interface TextAreaChangeEvent extends BaseEvent {
/**
* The new value of the TextArea.
*/
value: string;
}
/**
* The arguments for the `onFocus` TextArea event.
*/
export declare interface TextAreaFocusEvent extends BaseEvent {
}
/**
* @hidden
*/
export declare interface TextAreaHandle {
element: React_2.RefObject;
focus: any;
name?: string | null;
value?: string;
}
/**
* Represents the props of the [KendoReact TextArea component]({% slug overview_textarea %}).
*/
export declare interface TextAreaProps extends FormComponentProps, Omit_5, 'defaultValue' | 'onChange' | 'onFocus' | 'onBlur' | 'prefix'> {
/**
* Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
* For example these elements could contain error or hint message.
*/
ariaDescribedBy?: string;
/**
* Identifies the element(s) which will label the component.
*/
ariaLabelledBy?: string;
/**
* Specifies if the textarea element will resize its height automatically ([see example]({% slug sizing_textarea %})).
* Defaults to `false`.
*
* Setting the value of the prop to `true` will make the TextArea component to ignore the resize behavior of the `resizable` prop.
*/
autoSize?: boolean;
/**
* Specifies a list of CSS classes that will be added to the TextArea.
*/
className?: string;
/**
* The default value of the TextArea ([see example]({% slug default_textarea %})).
*/
defaultValue?: string | string[] | number;
/**
* Represents the `dir` HTML attribute.
*/
dir?: string;
/**
* Specifies if the TextArea is disabled ([see example]({% slug disabled_textarea %})).
*/
disabled?: boolean;
/**
* Sets the read-only state of the TextArea.
*/
readOnly?: boolean;
/**
* Specifies an exact height size for the TextArea to take ([see example]({% slug sizing_textarea %})).
*/
rows?: number;
/**
* Sets the `id` of the TextArea.
*/
id?: string;
/**
* Specifies the `name` property of the `textarea` DOM element.
*
* This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
*/
name?: string;
/**
* The hint that is displayed when the TextArea is empty.
*/
placeholder?: string;
/**
* Sets additional CSS styles to the TextArea.
*/
style?: React.CSSProperties;
/**
* Sets the `tabIndex` property of the TextArea.
* Defaults to `0`.
*/
tabIndex?: number;
/**
* Sets the value to be submitted ([see example]({% slug controlled_textarea %})).
*/
value?: string | string[] | number;
/**
* The event handler that will be fired when the changes the selected value.
*/
onChange?: (event: TextAreaChangeEvent) => void;
/**
* The event handler that will be fired when TextArea is focused.
*/
onFocus?: (event: TextAreaFocusEvent) => void;
/**
* The event handler that will be fired when TextArea is blurred.
*/
onBlur?: (event: TextAreaBlurEvent) => void;
/**
* Configures the `size` of the TextArea.
*
* The available options are:
* - small
* - medium
* - large
* - null—Does not set a size `className`.
*
* @default `medium`
*/
size?: null | 'small' | 'medium' | 'large';
/**
* Configures the `roundness` of the TextArea.
*
* The available options are:
* - small
* - medium
* - large
* - full
* - null—Does not set a rounded `className`.
*
* @default `medium`
*/
rounded?: null | 'small' | 'medium' | 'large' | 'full';
/**
* Configures the `fillMode` of the TextArea.
*
* The available options are:
* - solid
* - outline
* - flat
* - null—Does not set a fillMode `className`.
*
* @default `solid`
*/
fillMode?: null | 'solid' | 'flat' | 'outline';
/**
* Sets a custom prefix to the TextArea component.
*/
prefix?: CustomComponent;
/**
* Sets a custom suffix to the TextArea component.
*/
suffix?: CustomComponent;
/**
* Defines the resize behavior of the TextArea.
* The available options are:
* - none — The TextArea cannot be resized.
* - vertical — The TextArea can be resized vertically.
* - horizontal — The TextArea can be resized horizontally.
* - both(default) — The TextArea can be resized both vertically and horizontally.
*
*
* To be able to resize the TextArea, you should not set the `autoSize` property to `true`.
* To be able to resize the component horizontally, add the following inline style to the TextArea:
*
* ```html
*
* ```
*/
resizable?: 'none' | 'vertical' | 'horizontal' | 'both';
/**
* Represents the `autoFocus` HTML attribute that will be applied to the input element of the TextArea. (Defaults to `false`)
*/
autoFocus?: boolean;
/**
* Sets the HTML attributes of the inner focusable input element.
* Attributes which are essential for certain component functionalities cannot be changed.
*/
inputAttributes?: React.InputHTMLAttributes;
}
/**
* Represents the PropsContext of the `TextArea` component.
* Used for global configuration of all `TextArea` instances.
*
* For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
*/
export declare const TextAreaPropsContext: React_2.Context<(p: TextAreaProps) => TextAreaProps>;
/**
* Represents the [KendoReact TextBox component]({% slug overview_textbox %}).
*/
export declare const TextBox: React_2.ForwardRefExoticComponent>;
export declare interface TextBoxChangeEvent extends BaseEvent {
syntheticEvent: React_2.ChangeEvent;
value: React_2.InputHTMLAttributes['value'];
}
/**
* Represent the `ref` of the TextBox component.
*/
export declare type TextBoxHandle = {
element: HTMLInputElement | null;
value: TextBoxProps['value'];
name?: string | null;
};
/**
* Represents the properties of the KendoReact [TextBox]({% slug api_inputs_textbox %}) component
*/
export declare interface TextBoxProps extends Omit, 'size' | 'prefix' | 'onChange'> {
/**
* Configures the `size` of the TextBox.
*
* The available options are:
* - small
* - medium
* - large
* - null—Does not set a size `className`.
*
* @default `medium`
*/
size?: null | 'small' | 'medium' | 'large';
/**
* Configures the `roundness` of the TextBox.
*
* The available options are:
* - small
* - medium
* - large
* - full
* - null—Does not set a rounded `className`.
*
* @default `medium`
*/
rounded?: null | 'small' | 'medium' | 'large' | 'full';
/**
* Configures the `fillMode` of the TextBox.
*
* The available options are:
* - solid
* - outline
* - flat
* - null—Does not set a fillMode `className`.
*
* @default `solid`
*/
fillMode?: null | 'solid' | 'flat' | 'outline';
/**
* The `onChange` callback of the `input` element inside the TextBox.
*/
onChange?: (event: TextBoxChangeEvent) => void;
/**
* Indicates if the component is in `valid` state
*/
valid?: boolean;
/**
* Sets a custom prefix to the TextBox component.
*/
prefix?: CustomComponent;
/**
* Sets a custom suffix to the TextBox component.
*/
suffix?: CustomComponent;
/**
* Represents the `autoFocus` HTML attribute that will be applied to the input element of the TextBox. (Defaults to `false`)
*/
autoFocus?: boolean;
/**
* @hidden
*/
unstyled?: InputsClassStructure;
/**
* Sets the HTML attributes of the inner focusable input element.
* Attributes which are essential for certain component functionalities cannot be changed.
*/
inputAttributes?: React_2.InputHTMLAttributes;
}
/**
* Specifies the size of a color cell.
*
* The possible values are:
* * (Default) `number = 24`
* * `{ width: number, height: number }`
*/
declare type TileSize = {
width: number;
height: number;
};
/**
* The props passed to the Checkbox and Switch components.
*/
export declare interface ToggleBaseProps {
value?: any;
checked?: any;
defaultChecked?: any;
}
/**
* @hidden
*/
export declare const toRound: (num: number, base: number) => number;
export { }