@progress/kendo-react-inputs

/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2025 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ import { BaseEvent } from '@progress/kendo-react-common'; import { CustomComponent } from '@progress/kendo-react-common'; import { default as default_2 } from 'prop-types'; import { DraggableDragEvent } from '@progress/kendo-react-common'; import { FormComponent } from '@progress/kendo-react-common'; import { FormComponentProps } from '@progress/kendo-react-common'; import { FormComponentValidity } from '@progress/kendo-react-common'; import { HTMLAttributes } from 'react'; import { IconHandle } from '@progress/kendo-react-common'; import { IconProps } from '@progress/kendo-react-common'; import { InputsClassStructure } from '@progress/kendo-react-common'; import { JSX } from 'react/jsx-runtime'; import { NumberFormatOptions } from '@progress/kendo-react-intl'; import { PopupAnimation } from '@progress/kendo-react-popup'; import * as React_2 from 'react'; import { SVGIcon } from '@progress/kendo-react-common'; import { SvgIconHandle } from '@progress/kendo-react-common'; import { SvgIconProps } from '@progress/kendo-react-common'; /** * Represents the [KendoReact Checkbox component]({% slug overview_checkbox %}). * * @example * ```jsx * const App = () => { * return <Checkbox />; * } * const root = ReactDOM.createRoot(document.getElementById('app')); * ``` */ export declare const Checkbox: React_2.ForwardRefExoticComponent<CheckboxProps & React_2.RefAttributes<CheckboxHandle | null>>; /** * The arguments for the `onBlur` Checkbox event. */ export declare interface CheckboxBlurEvent extends BaseEvent<CheckboxHandle> { } /** * The arguments for the `onChange` Checkbox event. */ export declare interface CheckboxChangeEvent extends BaseEvent<CheckboxHandle> { /** * The new value of the Checkbox. */ value: boolean; } /** * The arguments for the `onFocus` Checkbox event. */ export declare interface CheckboxFocusEvent extends BaseEvent<CheckboxHandle> { } /** * The Checkbox ref. */ export declare interface CheckboxHandle { /** * The HTML input element of the Checkbox component. */ element: HTMLInputElement | null; /** * Focuses the Checkbox component. */ focus: any; /** * The value of the Checkbox component. */ value?: string | number | string[] | boolean | null; /** * The name of the Checkbox component. */ name?: string | null; } /** * Represents the props of the [KendoReact Checkbox component]({% slug overview_checkbox %}). * Extends the [native input props](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement). */ export declare interface CheckboxProps extends ToggleBaseProps, FormComponentProps, Omit_3<React.InputHTMLAttributes<HTMLInputElement>, 'checked' | 'value' | 'size' | 'onChange' | 'onFocus' | 'onBlur'> { /** * Sets the checked state of the Checkbox. * Set to null to enable the indeterminate state of the Checkbox ([see example]({% slug overview_checkbox %})). * * @example * ```jsx * <Checkbox checked={true} /> * ``` */ checked?: boolean | null; /** * If the type is different than boolean and the `checked` property is provided it's passed to the underlying `input` element. * If set to boolean and the `checked` property is omitted sets the checked state of the Checkbox. * Set null to enable the indeterminate state of the Checkbox ([see example]({% slug overview_checkbox %})). */ value?: string | number | string[] | boolean | null; /** * Sets the `className` of the wrapping element of the Checkbox. */ className?: string; /** * Sets the `className` of the label element of the Checkbox. */ labelClassName?: string; /** * The React elements that are passed as children to the rendered component. */ children?: any; /** * Sets the default value of checked attribute when used in uncontrolled mode ([see example]({% slug default_state %})). */ defaultChecked?: boolean; /** * The default value of the Checkbox. */ defaultValue?: any; /** * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL. */ dir?: string; /** * Sets the disabled state of the Checkbox * ([see example]({% slug disabled_checkbox %})). */ disabled?: boolean; /** * Sets the `id` of the Checkbox. */ id?: string; /** * Configures the `size` of the Checkbox. * * The available options are: * - small * - medium * - large * - null—Does not set a size `className`. * * @default `medium` */ size?: null | 'small' | 'medium' | 'large'; /** * Configures the `rounded` style of the Checkbox. * * The available options are: * - small * - medium * - large * - null—Does not set a rounded `className`. * * @default `medium` */ rounded?: null | 'small' | 'medium' | 'large'; /** * 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 the label of the Checkbox component ([see example]({% slug labels_checkbox %})). * * @example * ```jsx * <Checkbox label="Accept Terms" /> * ``` */ label?: React.ReactNode; /** * Sets the label position of the Checkbox component ([see example]({% slug labels_checkbox %})). * * @example * ```jsx * <Checkbox labelPlacement="before" /> * ``` */ labelPlacement?: 'before' | 'after'; /** * Sets the optional text after the label of the Checkbox component. */ labelOptional?: boolean; /** * Sets the `tabIndex` property of the Checkbox. * Defaults to `0`. */ tabIndex?: number; /** * Represents the `autoFocus` HTML attribute that will be applied to the input element of the Checkbox. (Defaults to `false`) */ autoFocus?: boolean; /** * The event handler that will be fired when the user edits the value. */ onChange?: (event: CheckboxChangeEvent) => void; /** * The event handler that will be fired when Checkbox is focused. */ onFocus?: (event: CheckboxFocusEvent) => void; /** * The event handler that will be fired when Checkbox is blurred. */ onBlur?: (event: CheckboxBlurEvent) => void; } /** * Represents the PropsContext of the `Checkbox` component. * Used for global configuration of all `Checkbox` instances. * * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article. */ export declare const CheckboxPropsContext: React_2.Context<(p: CheckboxProps) => CheckboxProps>; /** @hidden */ export declare type ColorGradient = ColorGradientHandle; /** * Represents the [KendoReact ColorGradient component]({% slug overview_colorgradient %}). * * Accepts properties of type [ColorGradientProps]({% slug api_inputs_colorgradientprops %}). * Obtaining the `ref` returns an object of type [ColorGradientHandle]({% slug api_inputs_colorgradienthandle %}). * * @example * ```jsx * const App = () => { * return <ColorGradient />; * } * ``` */ export declare const ColorGradient: React_2.ForwardRefExoticComponent<ColorGradientProps & React_2.RefAttributes<any>>; /** * The arguments for the `onChange` ColorGradient event. */ export declare interface ColorGradientChangeEvent extends BaseEvent<ColorGradient> { /** * The current value of the ColorGradient. */ value: string; } /** * Represent the `ref` of the ColorGradient component. */ export declare interface ColorGradientHandle extends Pick<ColorGradientWithoutContext, keyof ColorGradientWithoutContext> { } /** * Represents the props of the [KendoReact ColorGradient component]({% slug overview_colorgradient %}). */ export declare interface ColorGradientProps { /** * 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; /** * Represents the label of the `hsv` drag handle component used inside the ColorGradient. */ ariaLabelHSV?: string; /** * Represent the label of the component. */ ariaLabel?: string; /** * Identifies the element(s) which will label the component. */ ariaLabelledBy?: string; /** * Represents the text rendered inside the `hsv` drag handle. */ ariaValueText?: string; /** * Enables the color contrast tool. * Sets the background color that will be compared to the selected value. * The tool will calculate the contrast ratio between two colors. * Currently, only the RGBA format is supported. * * @example * ```jsx * <ColorGradient backgroundColor="#ffffff" /> * ``` */ backgroundColor?: string; /** * Sets additional classes to the ColorGradient. */ className?: string; /** * The default value of the ColorGradient. */ defaultValue?: string; /** * Determines whether the ColorGradient is disabled * ([more information and example]({% slug disabled_colorgradient %})). * * @example * ```jsx * const App = () => ( * <ColorGradient disabled={true} /> * ); * ``` */ disabled?: boolean; /** * Sets the default input format in the gradient input editor. * * @default 'rgb' * * @example * ```jsx * <ColorGradient format="hex" /> * ``` */ format?: 'rgba' | 'rgb' | 'hex'; /** * Determines the step (in pixels) when moving the gradient drag handle using * the keyboard arrow keys while holding the shift key. * * @default 2 */ gradientSliderSmallStep?: number; /** * Determines the step (in pixels) when moving the gradient drag handle * using the keyboard arrow keys. * * @default 5 */ gradientSliderStep?: number; /** * Specifies the id of the component. */ id?: string; /** * @hidden */ isInsidePopup?: boolean; /** * Determines whether the alpha slider and the alpha input will be displayed. Defaults to `true`. * * @example * ```jsx * <ColorGradient opacity={false} /> * ``` */ opacity?: boolean; /** * @hidden */ role?: string; /** * The styles that are applied to the ColorGradient. */ style?: React.CSSProperties; /** * Sets the `tabIndex` property of the ColorGradient. */ tabIndex?: number; /** * The value of the ColorGradient. */ value?: string; /** * Determines the event handler that will be fired when the user edits the value. */ onChange?: (event: ColorGradientChangeEvent) => void; /** * Represents the focus event. */ onFocus?: (event: any) => void; /** * Configures the `size` of the ColorGradient. * * The available options are: * - `small` * - `medium` * - `large` * - `null`—This option removes the the built-in size styles of the ColorGradient. Allows for custom `padding`. * * @default `medium` */ size?: null | 'small' | 'medium' | 'large'; /** * @hidden */ fillMode?: null | 'solid' | 'flat' | 'outline'; /** * @hidden */ _adaptive?: boolean; } /** * Represents the PropsContext of the `ColorGradient` component. * Used for global configuration of all `ColorGradient` instances. * * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article. */ export declare const ColorGradientPropsContext: React_2.Context<(p: ColorGradientProps) => ColorGradientProps>; /** * @hidden */ export declare interface ColorGradientState { hsva: HSVA; backgroundColor: string; rgba: RGBA; hex: string; isFirstRender: boolean; guid: string; } /** @hidden */ export declare class ColorGradientWithoutContext extends React_2.Component<ColorGradientProps, ColorGradientState> { static displayName: string; /** * @hidden */ static propTypes: { defaultValue: default_2.Requireable<string>; value: default_2.Requireable<string>; onChange: default_2.Requireable<(...args: any[]) => any>; onFocus: default_2.Requireable<(...args: any[]) => any>; opacity: default_2.Requireable<boolean>; backgroundColor: default_2.Requireable<string>; format: default_2.Requireable<any>; disabled: default_2.Requireable<boolean>; style: default_2.Requireable<any>; id: default_2.Requireable<string>; role: default_2.Requireable<string>; ariaLabel: default_2.Requireable<string>; ariaLabelledBy: default_2.Requireable<string>; ariaDescribedBy: default_2.Requireable<string>; className: default_2.Requireable<string>; size: default_2.Requireable<string | null>; }; /** * @hidden */ static defaultProps: { opacity: boolean; role: string; format: "hex" | "rgba" | "rgb"; size: string; }; /** * @hidden */ wrapperRef: React_2.RefObject<HTMLDivElement | null>; /** * @hidden */ hsvGradientRef: React_2.RefObject<HTMLDivElement | null>; private gradientWrapper; private alphaSlider; private navigation?; private hsvNavigation?; private readonly showLicenseWatermark; private resizeObserver; private readonly licenseMessage?; constructor(props: ColorGradientProps); /** * @hidden */ static getDerivedStateFromProps(props: ColorGradientProps, state: ColorGradientState): { hsva: any; backgroundColor: string; rgba: any; hex: any; } | null; /** * @hidden */ componentDidMount(): void; /** * @hidden */ componentWillUnmount(): void; /** * @hidden */ componentDidUpdate(_: ColorGradientProps, prevState: ColorGradientState): void; /** * @hidden */ focus: () => void; /** * @hidden */ onHexChange: (hex: string, value: string, event: any) => void; /** * @hidden */ onRgbaChange: (rgba: RGBA, event: NumericTextBoxChangeEvent) => void; /** * @hidden */ onAlphaSliderChange: (event: SliderChangeEvent) => void; /** * @hidden */ onHueSliderChange: (event: SliderChangeEvent) => void; /** * @hidden */ onDrag: (e: DraggableDragEvent) => void; /** * @hidden */ onRelease: () => void; /** * @hidden */ onGradientWrapperClick: (event: React_2.MouseEvent<HTMLDivElement>) => void; /** * @hidden */ onHsvGradientKeyDown: (event: React_2.KeyboardEvent<HTMLDivElement>) => void; /** * @hidden */ onHsvGradientValueChange: (element: HTMLElement, moveX: number, moveY: number) => void; /** * @hidden */ renderRectangleDragHandle(): JSX.Element; /** * @hidden */ changePosition: (event: any) => void; /** * @hidden */ moveDragHandle(positionX: number, positionY: number): void; /** * @hidden */ handleHsvaChange(hsva: HSVA, syntheticEvent: React_2.SyntheticEvent<any>, nativeEvent: any): void; /** * @hidden */ dispatchChangeEvent(value: string, syntheticEvent: React_2.SyntheticEvent<any>, nativeEvent: any): void; /** * @hidden */ onFocus: (nativeEvent: any) => void; /** * @hidden */ static getStateFromValue(value: string, componentGuid?: string): { hsva: any; backgroundColor: string; rgba: any; hex: any; }; /** * @hidden */ setAlphaSliderBackground(backgroundColor: string): void; /** * @hidden */ get isUncontrolled(): boolean; /** * @hidden */ getGradientRectMetrics(): DOMRect; /** * @hidden */ render(): JSX.Element; private onKeyDown; } /** * @hidden */ export declare class ColorInput extends React_2.Component<ColorInputProps, { inputMode: string; }> { constructor(props: ColorInputProps); render(): JSX.Element; private onRgbaRChange; private onRgbaGChange; private onRgbaBChange; private onRgbaAChange; private dispatchRgbaChange; private onToggleModeChange; } /** * @hidden */ declare interface ColorInputProps { rgba: RGBA; onRgbaChange: (rgba: RGBA, event: NumericTextBoxChangeEvent) => void; hex: string; onHexChange: any; opacity: boolean; disabled?: boolean; defaultInputMode?: 'rgba' | 'rgb' | 'hex'; size?: 'small' | 'medium' | 'large' | null; fillMode?: 'solid' | 'outline' | 'flat' | null; } /** @hidden */ export declare type ColorPalette = ColorPaletteHandle; /** * Represents the [KendoReact ColorPalette component]({% slug overview_colorpalette %}). * * Accepts properties of type [ColorPaletteProps]({% slug api_inputs_colorpaletteprops %}). * Obtaining the `ref` returns an object of type [ColorPaletteHandle]({% slug api_inputs_colorpalettehandle %}). * * ```jsx * const App = () => { * return <ColorPalette palette='basic' />; * } * ``` */ export declare const ColorPalette: React_2.ForwardRefExoticComponent<ColorPaletteProps & React_2.RefAttributes<any>>; /** * The arguments for the `onChange` ColorPalette event. */ export declare interface ColorPaletteChangeEvent extends BaseEvent<ColorPalette> { /** * The current value of the ColorPalette. */ value: string; /** * The current value of the ColorPalette in RGBA format. */ rgbaValue: string; } /** * Represent the `ref` of the ColorPalette component. */ export declare interface ColorPaletteHandle extends Pick<ColorPaletteWithoutContext, keyof ColorPaletteWithoutContext> { } /** * Represents the props of the [KendoReact ColorPalette component]({% slug overview_colorpalette %}). */ export declare interface ColorPaletteProps { /** * The color palette that will be displayed. * * The supported values are: * * The name of the predefined palette preset (for example, `office`, `basic`, and `apex`). * * A string array. * * @example * ```jsx * <ColorPalette palette={['#ff0000', '#00ff00', '#0000ff']} /> * ``` */ palette?: string[] | string; /** * Specifies the number of columns that will be displayed. * Defaults to `10`. * * @example * ```jsx * <ColorPalette columns={5} /> * ``` */ columns?: number; /** * Specifies the size of a color cell in px. * Defaults to `24`. * * @example * ```jsx * <ColorPalette tileSize={30} /> * ``` */ tileSize?: number | TileSize; /** * The default value of the ColorPalette. */ defaultValue?: string; /** * The value of the ColorPalette. */ value?: string; /** * Determines whether the ColorPalette is disabled * ([more information and example]({% slug disabled_colorpalette %})). * * @example * ```jsx * const App = () => ( * <ColorPalette disabled={true} /> * ); * ``` */ disabled?: boolean; /** * Sets the `tabIndex` property of the ColorPalette. */ tabIndex?: number; /** * Specifies the id of the component. */ id?: 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; /** * @hidden */ ariaDisabled?: boolean; /** * Determines the event handler that will be fired when the user edits the value. */ onChange?: (event: ColorPaletteChangeEvent) => void; /** * Represent the focus event of the ColorPalette. */ onFocus?: (event: FocusEvent) => void; /** * Sets additional classes to the ColorPalette. */ className?: string; /** * Configures the `size` of the ColorPalette. * * The available options are: * - `small` * - `medium` * - `large` * - `null`—This option removes the the built-in size styles of the ColorPalette. Allows for custom `padding`. * * @default `medium` */ size?: null | 'small' | 'medium' | 'large'; } /** * Represents the PropsContext of the `ColorPalette` component. * Used for global configuration of all `ColorPalette` instances. * * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article. */ export declare const ColorPalettePropsContext: React_2.Context<(p: ColorPaletteProps) => ColorPaletteProps>; /** * @hidden */ export declare interface ColorPaletteState { selectedColor?: string; focusedColor?: string; isFirstRender: boolean; } /** @hidden */ export declare class ColorPaletteWithoutContext extends React_2.Component<ColorPaletteProps, ColorPaletteState> { static displayName: string; /** * @hidden */ static propTypes: { palette: default_2.Requireable<NonNullable<string | string[] | null | undefined>>; columns: default_2.Requireable<number>; tileSize: default_2.Requireable<any>; defaultValue: default_2.Requireable<string>; value: default_2.Requireable<string>; disabled: default_2.Requireable<boolean>; tabIndex: default_2.Requireable<number>; onChange: default_2.Requireable<(...args: any[]) => any>; onFocus: default_2.Requireable<(...args: any[]) => any>; id: default_2.Requireable<string>; ariaLabelledBy: default_2.Requireable<string>; ariaDescribedBy: default_2.Requireable<string>; className: default_2.Requireable<string>; size: default_2.Requireable<string | null>; }; /** * @hidden */ static defaultProps: { palette: string; tileSize: number; size: string; }; /** * @hidden */ wrapperRef: React_2.RefObject<HTMLDivElement | null>; private paletteService; private get guid(); constructor(props: ColorPaletteProps); /** * @hidden */ focus: () => void; /** * @hidden */ render(): "" | JSX.Element; /** * @hidden */ static getDerivedStateFromProps(props: ColorPaletteProps, state: ColorPaletteState): { selectedColor: undefined; isFirstRender?: undefined; } | { selectedColor: string; isFirstRender?: undefined; } | { isFirstRender: boolean; selectedColor?: undefined; } | null; private onKeyDown; private onColorClick; private onFocus; private onBlur; private handleCellNavigation; private handleEnter; private dispatchChangeEvent; private get focusedColorCooridanates(); private get isUncontrolled(); private getPaletteInfo; private renderRows; private renderColumns; private createCellId; } /** * Represents the [KendoReact ColorPicker component]({% slug overview_colorpicker %}). * * @example * ```jsx * const App = () => { * return <ColorPicker />; * } * ``` */ export declare const ColorPicker: React_2.ForwardRefExoticComponent<ColorPickerProps & React_2.RefAttributes<ColorPickerHandle | null>>; /** * The arguments for the `onActiveColorClick` ColorPicker event. */ declare interface ColorPickerActiveColorClick { /** * The current value of the ColorPicker. */ value: string; /** * A React Synthetic Event. */ syntheticEvent: React.SyntheticEvent<any>; /** * A native DOM event. */ nativeEvent: any; /** * The event target. */ target: ColorPickerHandle; } /** * The arguments for the `onBlur` ColorPicker event. */ export declare interface ColorPickerBlurEvent { /** * A React Synthetic Event. */ syntheticEvent: React.SyntheticEvent<any>; /** * A native DOM event. */ nativeEvent: any; } /** * The arguments for the `onChange` ColorPicker event. */ export declare interface ColorPickerChangeEvent { /** * The current value of the ColorPicker. */ value: string; /** * A React Synthetic Event. */ syntheticEvent: React.SyntheticEvent<any>; /** * A native DOM event. */ nativeEvent: any; /** * The event target. */ target: ColorPickerHandle; } /** * The arguments for the `onFocus` ColorPicker event. */ export declare interface ColorPickerFocusEvent { /** * A React Synthetic Event. */ syntheticEvent: React.SyntheticEvent<any>; /** * A native DOM event. */ nativeEvent: any; } /** * The settings of the ColorGradient that is nested inside the popup of the ColorPicker * ([see example]({% slug customizecolorpicker_colorpicker %}#toc-customizing-the-gradient-popup)). */ export declare interface ColorPickerGradientSettings { /** * Specifies if the component will render an alpha slider. * Defaults to `true`. */ opacity?: boolean; /** * Enables the color contrast tool. * Sets the background color that will be compared to the selected value. * The tool will calculate the contrast ratio between two colors. * Currently, only the RGBA format is supported. */ backgroundColor?: string; /** * @hidden */ _adaptive?: boolean; } /** * @hidden */ export declare interface ColorPickerHandle { element: HTMLSpanElement | null; value?: string; } /** * The settings of the ColorPalette that is nested inside the popup of the ColorPicker * ([see example]({% slug customizecolorpicker_colorpicker %}#toc-customizing-the-palette-popup)). */ export declare interface ColorPickerPaletteSettings { /** * Specifies the set of colors. * Provides a set of predefined palette presets (for example, `office`, `basic`, and `apex`) * and enables you to implement a custom color palette. * Defaults to the `office` preset. * * The supported values are: * * The name of the predefined palette preset (for example, `office`, `basic`, and `apex`). * * A string with comma-separated colors. * * A string array. */ palette?: string | Array<string>; /** * Specifies the number of columns that will be displayed. * Defaults to `10`. */ columns?: number; /** * Specifies the size of a color cell. * * The possible values are: * * (Default) `24` * * `{ width: number, height: number }` */ tileSize?: number | TileSize; } /** * The settings of the popup container of the ColorPicker. */ export declare interface ColorPickerPopupSettings { /** * Controls the popup animation. By default, the open and close animations are enabled. */ animate?: boolean | PopupAnimation; /** * Specifies a list of CSS classes that will be added to the Popup element. */ className?: string | Array<string>; } /** * Represents the props of the [KendoReact ColorPicker component]({% slug overview_colorpicker %}). */ export declare interface ColorPickerProps { /** * The default value of the ColorPicker * ([see example]({% slug default_value_colorpicker %})). * * @example * ```jsx * <ColorPicker defaultValue="#ff0000" /> * ``` */ defaultValue?: string; /** * Specifies the value of the ColorPicker. Currently, only the RGBA format is supported. * * @example * ```jsx * <ColorPicker value="rgba(255, 0, 0, 1)" /> * ``` */ value?: string; /** * 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 disabled state of the ColorPicker * ([see example]({% slug disabled_colorpicker %})). * * @example * ```jsx * <ColorPicker disabled={true} /> * ``` */ disabled?: boolean; /** * Sets the `tabIndex` property of the ColorPicker. * Defaults to `0`. */ tabIndex?: number; /** * Sets the `title` property of the ColorPicker. */ title?: string; /** * **Deprecated**. Use `views` prop instead. * * @deprecated */ view?: ColorPickerView; /** * Specifies the views that will be rendered in the popup. By default both the gradient and palette views will be rendered. * * @default ['gradient', 'palette']` */ views?: ColorPickerView[]; /** * Sets the initially active view in the popup when both 'gradient' and 'palette' views are rendered. * Use with the `views` property. * * @default 'gradient'' */ activeView?: ColorPickerView; /** * Represents the `dir` HTML attribute. */ dir?: string; /** * Defines the name of an [existing icon in the KendoReact theme]({% slug icons %}). * You have to provide only the name of the icon without the `k-icon` or the `k-i-` prefixes. * For example, `edit-tools` will be parsed to `k-icon k-i-edit-tools` * ([see example]({% slug customizecolorpicker_colorpicker %}#displaying-custom-icons)). */ icon?: string; /** * Defines the SVG icon. */ svgIcon?: SVGIcon; /** * The class name which displays an icon in the ColorPicker button * ([see example]({% slug customizecolorpicker_colorpicker %}#toc-displaying-custom-icons)). */ iconClassName?: string; /** * Configures the ColorGradient that is displayed in the ColorPicker popup * ([see example]({% slug customizecolorpicker_colorpicker %}#toc-customizing-the-gradient-popup)). */ gradientSettings?: ColorPickerGradientSettings; /** * Configures the ColorPalette that is displayed in the ColorPicker popup * ([see example]({% slug customizecolorpicker_colorpicker %}#toc-customizing-the-palette-popup)). */ paletteSettings?: ColorPickerPaletteSettings; /** * Configures the FlatColorPicker that is displayed in the ColorPicker popup via `views` property. */ flatColorPickerSettings?: FlatColorPickerProps; /** * Configures the popup of the ColorPicker. */ popupSettings?: ColorPickerPopupSettings; /** * Sets the open and close state of the ColorPicker. */ open?: boolean; /** * Specifies the id of the component. */ id?: 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; /** * Represent the label of the component. */ ariaLabel?: string; /** * The event handler that will be fired when the user edits the value. */ onChange?: (event: ColorPickerChangeEvent) => void; /** * The event handler that will be fired when ColorPicker is focused. */ onFocus?: (event: ColorPickerFocusEvent) => void; /** * The event handler that will be fired when ColorPicker is blurred. */ onBlur?: (event: ColorPickerBlurEvent) => void; /** * The event handler that will be fired when the left side of the ColorPicker is clicked. */ onActiveColorClick?: (event: ColorPickerActiveColorClick) => void; /** * Configures the `size` of the ColorPicker. * * The available options are: * - `small` * - `medium` * - `large` * - `null`—This option removes the built-in size styles of the ColorPicker. Allows for custom `padding`. * * @default `medium` * * @example * ```jsx * <ColorPicker size="large" /> * ``` */ size?: null | 'small' | 'medium' | 'large'; /** * Configures the `roundness` of the ColorPicker. * * 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 ColorPicker. * * The available options are: * - solid * - outline * - flat * - null—Does not set a fillMode `className`. * * @default `solid` */ fillMode?: null | 'solid' | 'flat' | 'outline'; /** * Sets additional classes to the ColorPicker. */ className?: string; /** * Providing different rendering of the popup element based on the screen dimensions. * * @default `false` * * @example * ```jsx * <ColorPicker adaptive={true} /> * ``` */ adaptive?: boolean; /** * Specifies the text that is rendered as title in the adaptive popup(action sheet). * Applicable only when `adaptive` is set to `true`. * If not provided, the title will be the same as the label. * * @example * ```jsx * <ColorPicker adaptiveTitle="Adaptive Popup Title" /> * ``` */ adaptiveTitle?: string; /** * Specifies the text that is rendered as subtitle in the adaptive popup(action sheet). * Applicable only when `adaptive` is set to `true`. * * @example * ```jsx * <ColorPicker adaptiveSubtitle="Adaptive Popup Subtitle" /> * ``` */ adaptiveSubtitle?: string; } /** * Represents the PropsContext of the `ColorPicker` component. * Used for global configuration of all `ColorPicker` instances. * * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article. */ export declare const ColorPickerPropsContext: React_2.Context<(p: ColorPickerProps) => ColorPickerProps>; /** * Specifies the view which the ColorPicker will render in the popup * ([see example]({% slug views_colorpicker %})). * * The possible values are: * * `palette` * * `gradient` * * **Deprecated** `combo` */ export declare type ColorPickerView = 'gradient' | 'palette' | 'combo'; declare type Direction = 'ltr' | 'rtl'; /** * Represents the [KendoReact FlatColorPicker component]({% slug overview_flatcolorpicker %}). * Accepts properties of type [FlatColorPickerProps]({% slug api_inputs_flatcolorpickerprops %}). Obtaining the [FlatColorPickerHandle]({% slug api_inputs_flatcolorpickerhandle %}). * * @example * ```jsx * const App = () => { * return <FlatColorPicker />; * } * ``` */ export declare const FlatColorPicker: React_2.ForwardRefExoticComponent<FlatColorPickerProps & React_2.RefAttributes<FlatColorPickerHandle | null>>; /** * The arguments for the `onChange` FlatColorPicker event. */ export declare interface FlatColorPickerChangeEvent { /** * The current value of the FlatColorPicker. */ value: string | undefined; /** * A React Synthetic Event. */ syntheticEvent: React_2.SyntheticEvent<any>; /** * A native DOM event. */ nativeEvent: any; } /** * Represents the target (element and props) of the FlatColorPicker. */ export declare interface FlatColorPickerHandle { /** * The current element or `null` if there is none. */ element: HTMLDivElement | null; /** * The props values of the FlatColorPicker. */ props: FlatColorPickerProps; /** * The focus event callback. */ focus: () => void; /** * The current value of the FlatColorPicker. */ value: string | undefined; } /** * Represents the properties of [FlatColorPicker]({% slug api_inputs_flatcolorpicker %}) component. */ export declare interface FlatColorPickerProps { /** * Sets the `id` property of the top `div` element of the FlatColorPicker. */ id?: string; /** * Sets additional CSS styles to the FlatColorPicker. */ style?: React_2.CSSProperties; /** * Sets additional classes to the FlatColorPicker. */ className?: string; /** * Sets the color value. */ value?: string; /** * Sets the default color value. */ defaultValue?: string; /** * The event handler that will be fired when the user changes the preview color. */ onPreviewChange?: (event: FlatColorPickerChangeEvent) => void; /** * The event handler that will be fired when the user click the "Apply" button or on blur when the "Apply" button is not present. */ onChange?: (event: FlatColorPickerChangeEvent) => void; /** * Specifies whether we should display the opacity slider to allow selection of transparency. * * @default true */ opacity?: boolean; /** * Sets the default input format in the gradient input editor. * * @default 'rgb' */ format?: 'hex' | 'rgba' | 'rgb'; /** * Sets the `tabIndex` property of the FlatColorPicker. */ tabIndex?: number; /** * Represents the label of the FlatColorPicker component. */ ariaLabel?: string; /** * Identifies the element(s) which will label the component. */ ariaLabelledBy?: string; /** * Determines whether the FlatColorPicker is disabled. */ disabled?: boolean; /** * **Deprecated**. Use `views` prop instead. * * @deprecated */ view?: 'ColorGradient' | 'ColorPalette' | undefined; /** * Specifies the views that will be rendered. By default both the gradient and palette views will be rendered. * * @default ['gradient', 'palette']` */ views?: ColorPickerView[]; /** * Sets the initially active view when both 'gradient' and 'palette' views are rendered. * Use with the `views` property. * * @default 'gradient'' */ activeView?: ColorPickerView; /** * Sets custom header component. */ header?: React_2.ComponentType | React_2.ReactNode; /** * Specifies whether clear button will be rendered in the header. */ showClearButton?: boolean; /** * Specifies whether preview and revert color boxes will be rendered in the header. */ showPreview?: boolean; /** * Specifies whether action buttons will be rendered in the footer. */ showButtons?: boolean; /** * Configures the `size` of the FlatColorPicker. * * The available options are: * - `small` * - `medium` * - `large` * - `null`—This option removes the the built-in size styles of the FlatColorPicker. Allows for custom `padding`. * * @default `medium` */ size?: null | 'small' | 'medium' | 'large'; /** * @hidden */ _gradientSettings?: ColorPickerGradientSettings; /** * @hidden */ _paletteSettings?: ColorPickerPaletteSettings; /** * @hidden */ setAdaptiveModeValue?: (value: any) => void; /** * @hidden */ setOpen?: (value: boolean) => void; } export { FormComponentValidity } /** * @hidden */ declare interface HSVA { h?: number; s?: number; v?: number; a?: number; } /** * Represents the [KendoReact Input component]({% slug overview_input %}). * * Accepts properties of type [InputProps]({% slug api_inputs_inputprops %}). * Obtaining the `ref` returns an object of type [InputHandle]({% slug api_inputs_inputhandle %}). */ export declare const Input: React_2.ForwardRefExoticComponent<InputProps & React_2.RefAttributes<InputHandle | null>>; /** * The arguments for the `change` event of the Input. */ export declare interface InputChangeEvent extends BaseEvent<InputHandle> { /** * The current value of the Input. */ value: string; } /** * Represents the KendoReact InputClearValue component. */ export declare const InputClearValue: React_2.ForwardRefExoticComponent<InputClearValueProps & React_2.RefAttributes<InputClearValueHandle>>; /** * Represent the `ref` of the `InputClearValue` component. */ export declare type InputClearValueHandle = { element: HTMLSpanElement | null; }; /** * Represents the `props` of the `InputClearValue` component. */ export declare interface InputClearValueProps extends React_2.HTMLAttributes<HTMLSpanElement> { /** * @hidden */ unstyled?: InputsClassStructure; } /** * Represent the `ref` target of the Input component. */ export declare interface InputHandle { /** * Gets the native input element of the Input component. */ element: HTMLInputElement | null; /** * Gets the `name` property of the Input. */ name: string | undefined; /** *The props of the InputHandle component. */ props: InputProps; /** * Represents the validity state into which the Input is set. */ validity: FormComponentValidity; /** * Gets the value of the Input. */ value: string | string[] | number | undefined; } /** * Represents the KendoReact InputPrefix component. */ export declare const InputPrefix: React_2.ForwardRefExoticComponent<InputPrefixProps & React_2.RefAttributes<InputPrefixHandle>>; /** * Represent the `ref` of the `InputPrefix` component. */ export declare interface InputPrefixHandle { /** * The HTML element of the InputPrefix component. */ element: HTMLSpanElement | null; } /** * Represents the `props` of the `InputPrefix` component. */ export declare interface InputPrefixProps extends React_2.HTMLAttributes<HTMLSpanElement> { /** * Sets the `orientation` property of the `InputPrefix` component. */ orientation?: 'horizontal' | 'vertical'; } /** * Represents the props of the [KendoReact Input component]({% slug overview_input %}). * Extends the [native input props](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement). */ export declare interface InputProps extends Omit_2<React_2.InputHTMLAttributes<HTMLInputElement>, 'onChange'>, FormComponentProps { /** * Renders a floating label for the Input component. */ label?: React_2.ReactNode; /** * Sets a `className` for the floating label. */ labelClassName?: string; /** * Represents the Input value. */ value?: string | string[] | number; /** * Represents the Input default value. */ defaultValue?: string | 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; /** * Defines a string value that labels an interactive element. */ ariaLabel?: string; /** * Represents the `autoFocus` HTML attribute that will be applied to the input element of the Input. (Defaults to `false`) */ autoFocus?: boolean; /** * Triggered after value change. */ onChange?: (event: InputChangeEvent) => void; /** * @hidden */ unstyled?: InputsClassStructure; /** * @hidden */ visited?: boolean; /** * @hidden */ touched?: boolean; /** * @hidden */ modified?: boolean; } /** * Represents the PropsContext of the `Input` component. * Used for global configuration of all `Input` instances. * * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article. */ export declare const InputPropsContext: React_2.Context<(p: InputProps) => InputProps>; /** * Represents the KendoReact InputSeparator component. */ export declare const InputSeparator: React_2.ForwardRefExoticComponent<InputSeparatorProps & React_2.RefAttributes<InputSeparatorHandle>>; /** * Represent the `ref` of the `InputSeparator` component. */ export declare interface InputSeparatorHandle { /** * The HTML element of the InputSeparator component. */ element: HTMLSpanElement | null; } /** * Represents the `props` of the `InputSeparator` component. */ export declare interface InputSeparatorProps extends React_2.HTMLAttributes<HTMLSpanElement> { /** * Sets the `orientation` property of the `InputSeparator` component. */ orientation?: 'horizontal' | 'vertical'; } /** * @hidden */ export declare const inputsMessages: { "numerictextbox.increment": string; "numerictextbox.decrement": string; "slider.increment": string; "slider.decrement": string; "slider.dragTitle": string; "colorGradient.r": string; "colorGradient.g": string; "colorGradient.b": string; "colorGradient.a": string; "colorGradient.hex": string; "colorGradient.contrastRatio": string; "colorGradient.colorGradientAALevel": string; "colorGradient.colorGradientAAALevel": string; "colorGradient.colorGradientPass": string; "colorGradient.colorGradientFail": string; "colorGradient.hueSliderLabel": string; "colorGradient.alphaSliderLabel": string; "colorGradient.toggleInputsButton": string; "flatColorPicker.cancelBtn": string; "flatColorPicker.applyBtn": string; "flatColorPicker.colorGradientBtn": string; "flatColorPicker.colorPaletteBtn": string; "flatColorPicker.clearBtn": string; "colorPicker.adaptiveTitle": string; "checkbox.validation": string; "checkbox.optionalText": string; "radioButton.validation": string; "switch.validation": string; "colorPicker.dropdownButtonAriaLabel": string; "rating.ariaLabel": string; "signature.clear": string; "signature.maximize": string; "signature.minimize": string; }; /** * @hidden */ export declare interface InputState { value?: string | string[] | number; } /** * Represents the KendoReact InputSuffix component. */ export declare const InputSuffix: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLSpanElement> & { /** * Sets the `orientation` property of the `InputSuffix` component. */ orientation?: "vertical" | "horizontal" | undefined; } & React_2.RefAttributes<InputSuffixHandle>>; /** * Represent the `ref` of the `InputSuffix` component. */ export declare type InputSuffixHandle = { el