@progress/kendo-react-inputs 5.13.0-dev.202304201410 → 5.13.0-dev.202304251043

package/dist/es/colors/ColorGradient.d.ts

@@ -29,6 +29,7 @@ export declare class ColorGradientWithoutContext extends React.Component<ColorGr
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         opacity: PropTypes.Requireable<boolean>;
         backgroundColor: PropTypes.Requireable<string>;
+        format: PropTypes.Requireable<any>;
         disabled: PropTypes.Requireable<boolean>;
         style: PropTypes.Requireable<any>;
         id: PropTypes.Requireable<string>;
@@ -43,6 +44,7 @@ export declare class ColorGradientWithoutContext extends React.Component<ColorGr
     static defaultProps: {
         opacity: boolean;
         role: string;
+        format: "rgb" | "hex" | "rgba";
     };
     /**
      * @hidden

package/dist/es/colors/ColorGradient.js

@@ -253,7 +253,7 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
                     React.createElement(Slider, { value: this.state.hsva.h, buttons: false, vertical: true, min: 0, max: 360, step: 5, onChange: this.onHueSliderChange, className: "k-hue-slider k-colorgradient-slider", disabled: this.props.disabled, ariaLabel: lS.toLanguageString(colorGradientHueSliderLabel, messages[colorGradientHueSliderLabel]) }),
                     this.props.opacity &&
                         React.createElement(Slider, { value: isPresent(this.state.hsva.a) ? this.state.hsva.a * 100 : 100, buttons: false, vertical: true, min: 0, max: 100, step: 1, ariaLabel: lS.toLanguageString(colorGradientAlphaSliderLabel, messages[colorGradientAlphaSliderLabel]), onChange: this.onAlphaSliderChange, className: "k-alpha-slider k-colorgradient-slider", disabled: this.props.disabled, ref: function (el) { return _this.alphaSlider = el; } }))),
-            React.createElement(ColorInput, { rgba: this.state.rgba, onRgbaChange: this.onRgbaChange, hex: this.state.hex, onHexChange: this.onHexChange, opacity: this.props.opacity, disabled: this.props.disabled }),
+            React.createElement(ColorInput, { rgba: this.state.rgba, onRgbaChange: this.onRgbaChange, hex: this.state.hex, onHexChange: this.onHexChange, opacity: this.props.opacity, disabled: this.props.disabled, defaultInputMode: this.props.format }),
             this.props.backgroundColor && (React.createElement(ColorContrastLabels, { bgColor: getRGBA(this.props.backgroundColor), rgba: this.state.rgba }))));
     };
     ColorGradientWithoutContext.displayName = 'ColorGradient';
@@ -267,6 +267,7 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
         onFocus: PropTypes.func,
         opacity: PropTypes.bool,
         backgroundColor: PropTypes.string,
+        format: PropTypes.any,
         disabled: PropTypes.bool,
         style: PropTypes.any,
         id: PropTypes.string,
@@ -280,7 +281,8 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
      */
     ColorGradientWithoutContext.defaultProps = {
         opacity: true,
-        role: 'textbox'
+        role: 'textbox',
+        format: 'rgb'
     };
     return ColorGradientWithoutContext;
 }(React.Component));

package/dist/es/colors/ColorInput.d.ts

@@ -11,14 +11,15 @@ export interface ColorInputProps {
     onHexChange: any;
     opacity: boolean;
     disabled?: boolean;
+    defaultInputMode?: 'rgba' | 'rgb' | 'hex';
 }
 /**
  * @hidden
  */
-export default class ColorInput extends React.Component<ColorInputProps, {}> {
-    state: {
-        inputMode: string;
-    };
+export default class ColorInput extends React.Component<ColorInputProps, {
+    inputMode: string;
+}> {
+    constructor(props: ColorInputProps);
     render(): JSX.Element;
     private onRgbaRChange;
     private onRgbaGChange;

package/dist/es/colors/ColorInput.js

@@ -41,11 +41,8 @@ var modes = ['rgba', 'rgb', 'hex'];
  */
 var ColorInput = /** @class */ (function (_super) {
     __extends(ColorInput, _super);
-    function ColorInput() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = {
-            inputMode: modes[1]
-        };
+    function ColorInput(props) {
+        var _this = _super.call(this, props) || this;
         _this.onRgbaRChange = function (event) {
             _this.dispatchRgbaChange({ r: event.value }, event);
         };
@@ -58,6 +55,7 @@ var ColorInput = /** @class */ (function (_super) {
         _this.onRgbaAChange = function (event) {
             _this.dispatchRgbaChange({ a: event.value }, event);
         };
+        _this.state = { inputMode: props.defaultInputMode || modes[1] };
         return _this;
     }
     ColorInput.prototype.render = function () {

package/dist/es/colors/FlatColorPicker.d.ts

@@ -1,6 +1,23 @@
 import * as React from 'react';
 /**
- * Represents the properties of [FlatColorPicker](% slug api_inputs_flatcolorpicker %) component.
+ * The arguments for the `onChange` FlatColorPicker event.
+ */
+export interface FlatColorPickerChangeEvent {
+    /**
+     * The current value of the FlatColorPicker.
+     */
+    value: string;
+    /**
+     * A React Synthetic Event.
+     */
+    syntheticEvent: React.SyntheticEvent<any>;
+    /**
+     * A native DOM event.
+     */
+    nativeEvent: any;
+}
+/**
+ * Represents the properties of [FlatColorPicker]({% slug api_inputs_flatcolorpicker %}) component.
  */
 export interface FlatColorPickerProps {
     /**
@@ -19,6 +36,26 @@ export interface FlatColorPickerProps {
      * Sets the color value.
      */
     value?: string;
+    /**
+     * Sets the default color value.
+     */
+    defaultValue?: string;
+    /**
+     * The event handler that will be fired when the user edits the value.
+     */
+    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.
      */
@@ -72,8 +109,23 @@ export interface FlatColorPickerHandle {
      * The focus event callback.
      */
     focus: () => void;
+    /**
+     * The current value of the FlatColorPicker.
+     */
+    value: string;
 }
 /**
- * Represents the FlatColorPicker component.
+ * 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
+ * class App extends React.Component {
+ *     render() {
+ *         return <FlatColorPicker />;
+ *     }
+ * }
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
  */
 export declare const FlatColorPicker: React.ForwardRefExoticComponent<FlatColorPickerProps & React.RefAttributes<FlatColorPickerHandle | null>>;

package/dist/es/colors/FlatColorPicker.js

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { classNames, validatePackage, getTabIndex } from '@progress/kendo-react-common';
@@ -7,19 +8,33 @@ import { ColorPalette, ColorGradient } from '../main';
 import { packageMetadata } from '../package-metadata';
 import { useLocalization } from '@progress/kendo-react-intl';
 import { messages, flatColorPickerApplyBtn, flatColorPickerCancelBtn, flatColorPickerColorGradientBtn, flatColorPickerColorPaletteBtn, flatColorPickerClearBtn } from '../messages';
+var defaultColor = 'rgba(255, 255, 255, 1)';
 ;
 ;
 /**
- * Represents the FlatColorPicker component.
+ * 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
+ * class App extends React.Component {
+ *     render() {
+ *         return <FlatColorPicker />;
+ *     }
+ * }
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
  */
 export var FlatColorPicker = React.forwardRef(function (props, ref) {
     validatePackage(packageMetadata);
     var target = React.useRef(null);
     var flatColorPickerRef = React.useRef(null);
     var colorGradientRef = React.useRef(null);
-    var _a = React.useState((props.view || 'ColorGradient') === 'ColorGradient'), colorGradientView = _a[0], setColorGradientView = _a[1];
-    var _b = React.useState('rgba(255, 255, 255, 1)'), colorValue = _b[0], setColorValue = _b[1];
-    var _c = React.useState('rgba(255, 255, 255, 1)'), prevColor = _c[0], setPrevColor = _c[1];
+    var _a = props.defaultValue, defaultValue = _a === void 0 ? defaultColor : _a, _b = props.showButtons, showButtons = _b === void 0 ? true : _b, _c = props.showPreview, showPreview = _c === void 0 ? true : _c, _d = props.showClearButton, showClearButton = _d === void 0 ? true : _d;
+    var _e = React.useState((props.view || 'ColorGradient') === 'ColorGradient'), colorGradientView = _e[0], setColorGradientView = _e[1];
+    var _f = React.useState(props.value || defaultValue), colorValue = _f[0], setColorValue = _f[1];
+    var _g = React.useState(props.value || defaultValue), prevColor = _g[0], setPrevColor = _g[1];
+    var value = props.value !== undefined ? props.value : prevColor;
     var localizationService = useLocalization();
     var focus = React.useCallback(function () {
         if (target.current) {
@@ -29,8 +44,9 @@ export var FlatColorPicker = React.forwardRef(function (props, ref) {
     React.useImperativeHandle(target, function () { return ({
         element: flatColorPickerRef.current,
         focus: focus,
-        props: props
-    }); });
+        props: props,
+        value: value
+    }); }, [value, focus, props]);
     React.useImperativeHandle(ref, function () { return target.current; });
     var handleViewChange = React.useCallback(function (viewType) {
         if ((viewType === 'ColorGradient' && !colorGradientView) || (viewType === 'ColorPalette' && colorGradientView)) {
@@ -38,28 +54,51 @@ export var FlatColorPicker = React.forwardRef(function (props, ref) {
         }
     }, [colorGradientView]);
     var handleResetColor = React.useCallback(function () {
-        setColorValue('rgba(255, 255, 255, 1)');
-    }, []);
+        setColorValue(defaultValue);
+    }, [defaultValue]);
     var handleColorChange = React.useCallback(function (event) {
         setColorValue(event.value);
     }, []);
-    var handleApplyBtnClick = React.useCallback(function () {
+    var handleApplyBtnClick = React.useCallback(function (event) {
         setPrevColor(colorValue);
-    }, [colorValue]);
+        if (props.onChange) {
+            var ev = {
+                value: colorValue,
+                nativeEvent: event.nativeEvent,
+                syntheticEvent: event
+            };
+            props.onChange.call(undefined, ev);
+        }
+    }, [colorValue, props.onChange]);
     var handleCancelBtnClick = React.useCallback(function () {
-        setPrevColor('rgba(255, 255, 255, 1)');
+        setPrevColor(defaultColor);
     }, []);
     var handlePrevColorClick = React.useCallback(function () {
         setColorValue(prevColor);
     }, [prevColor]);
-    var handleFocus = React.useCallback(function () {
-        if (flatColorPickerRef.current) {
+    var handleFocus = React.useCallback(function (event) {
+        if (flatColorPickerRef.current && event.nativeEvent.target instanceof HTMLInputElement === false) {
             flatColorPickerRef.current.focus();
         }
     }, [flatColorPickerRef]);
-    var handleFlatColorPickerBlur = React.useCallback(function () {
-        setPrevColor(colorValue);
-    }, [colorValue]);
+    var handleFlatColorPickerBlur = React.useCallback(function (event) {
+        var _a;
+        var blurred = (!event.relatedTarget || !((_a = flatColorPickerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)));
+        if (!blurred) {
+            return;
+        }
+        if (!showButtons) {
+            setPrevColor(colorValue);
+        }
+        if (!showButtons && props.onChange) {
+            var ev = {
+                value: colorValue,
+                nativeEvent: event.nativeEvent,
+                syntheticEvent: event
+            };
+            props.onChange.call(undefined, ev);
+        }
+    }, [colorValue, showButtons, props.onChange]);
     return (React.createElement("div", { id: props.id, role: 'textbox', "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledBy, "aria-disabled": props.disabled ? 'true' : undefined, style: props.style, ref: flatColorPickerRef, tabIndex: getTabIndex(props.tabIndex, props.disabled), className: classNames('k-flatcolorpicker k-coloreditor', {
             'k-disabled': props.disabled
         }, props.className), onBlur: handleFlatColorPickerBlur },
@@ -72,35 +111,38 @@ export var FlatColorPicker = React.forwardRef(function (props, ref) {
                             React.createElement(Button, { type: "button", "aria-label": localizationService.toLanguageString(flatColorPickerColorPaletteBtn, messages[flatColorPickerColorPaletteBtn]), togglable: true, fillMode: 'flat', selected: !colorGradientView, onClick: function () { return handleViewChange('ColorPalette'); }, icon: "palette", svgIcon: paletteIcon }))),
                     React.createElement("div", { className: "k-spacer" }),
                     React.createElement("div", { className: "k-coloreditor-header-actions k-hstack" },
-                        (props.showClearButton && defaultProps.showClearButton) &&
+                        showClearButton &&
                             React.createElement(Button, { type: "button", fillMode: 'flat', onClick: handleResetColor, "aria-label": localizationService.toLanguageString(flatColorPickerClearBtn, messages[flatColorPickerClearBtn]), icon: "droplet-slash", svgIcon: dropletSlashIcon }),
-                        (props.showPreview && defaultProps.showPreview) &&
+                        showPreview &&
                             React.createElement("div", { className: "k-coloreditor-preview k-vstack" },
                                 React.createElement("span", { className: "k-coloreditor-preview-color k-color-preview", style: { background: colorValue } }),
                                 React.createElement("span", { className: "k-coloreditor-current-color k-color-preview", style: { background: prevColor }, onClick: handlePrevColorClick })))),
             React.createElement("div", { className: "k-coloreditor-views k-vstack" }, colorGradientView
-                ? React.createElement(ColorGradient, { ref: colorGradientRef, role: "none", tabIndex: -1, ariaLabel: undefined, value: colorValue, onChange: handleColorChange, onFocus: handleFocus })
+                ? React.createElement(ColorGradient, { ref: colorGradientRef, role: "none", tabIndex: -1, ariaLabel: undefined, value: colorValue, onChange: handleColorChange, onFocus: handleFocus, opacity: props.opacity, format: props.format })
                 : React.createElement(ColorPalette, { ariaDisabled: true, ariaLabelledBy: 'required_label', value: colorValue, onChange: handleColorChange, onFocus: handleFocus })),
-            (props.showButtons && defaultProps.showButtons) &&
+            showButtons &&
                 React.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-end" },
                     React.createElement(Button, { type: "button", className: "k-coloreditor-cancel", onClick: handleCancelBtnClick }, messages[flatColorPickerCancelBtn]),
                     React.createElement(Button, { type: "button", className: "k-coloreditor-apply k-primary", onClick: handleApplyBtnClick }, messages[flatColorPickerApplyBtn])))));
 });
 var propTypes = {
     id: PropTypes.string,
+    style: PropTypes.any,
+    className: PropTypes.string,
     value: PropTypes.string,
-    view: PropTypes.string,
-    header: PropTypes.elementType,
+    defaultValue: PropTypes.string,
+    onChange: PropTypes.func,
+    opacity: PropTypes.bool,
+    format: PropTypes.any,
+    tabIndex: PropTypes.number,
+    ariaLabel: PropTypes.string,
+    ariaLabelledBy: PropTypes.string,
+    disabled: PropTypes.bool,
+    view: PropTypes.any,
+    header: PropTypes.any,
     showClearButton: PropTypes.bool,
     showPreview: PropTypes.bool,
     showButtons: PropTypes.bool
 };
-var defaultProps = {
-    showClearButton: true,
-    showPreview: true,
-    showButtons: true
-};
 FlatColorPicker.displayName = 'KendoFlatColorPicker';
-// TODO: delete casting when @types/react is updated!
 FlatColorPicker.propTypes = propTypes;
-FlatColorPicker.defaultProps = defaultProps;

package/dist/es/colors/interfaces/ColorGradientProps.d.ts

@@ -85,4 +85,10 @@ export interface ColorGradientProps {
      * Represents the text rendered inside the `hsv` drag handle.
      */
     ariaValueText?: string;
+    /**
+     * Sets the default input format in the gradient input editor.
+     *
+     * @default 'rgb'
+     */
+    format?: 'rgba' | 'rgb' | 'hex';
 }

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-inputs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1681998620,
+    publishDate: 1682418230,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/npm/colors/ColorGradient.d.ts

@@ -29,6 +29,7 @@ export declare class ColorGradientWithoutContext extends React.Component<ColorGr
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         opacity: PropTypes.Requireable<boolean>;
         backgroundColor: PropTypes.Requireable<string>;
+        format: PropTypes.Requireable<any>;
         disabled: PropTypes.Requireable<boolean>;
         style: PropTypes.Requireable<any>;
         id: PropTypes.Requireable<string>;
@@ -43,6 +44,7 @@ export declare class ColorGradientWithoutContext extends React.Component<ColorGr
     static defaultProps: {
         opacity: boolean;
         role: string;
+        format: "rgb" | "hex" | "rgba";
     };
     /**
      * @hidden

package/dist/npm/colors/ColorGradient.js

@@ -256,7 +256,7 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
                     React.createElement(main_1.Slider, { value: this.state.hsva.h, buttons: false, vertical: true, min: 0, max: 360, step: 5, onChange: this.onHueSliderChange, className: "k-hue-slider k-colorgradient-slider", disabled: this.props.disabled, ariaLabel: lS.toLanguageString(messages_1.colorGradientHueSliderLabel, messages_1.messages[messages_1.colorGradientHueSliderLabel]) }),
                     this.props.opacity &&
                         React.createElement(main_1.Slider, { value: (0, misc_1.isPresent)(this.state.hsva.a) ? this.state.hsva.a * 100 : 100, buttons: false, vertical: true, min: 0, max: 100, step: 1, ariaLabel: lS.toLanguageString(messages_1.colorGradientAlphaSliderLabel, messages_1.messages[messages_1.colorGradientAlphaSliderLabel]), onChange: this.onAlphaSliderChange, className: "k-alpha-slider k-colorgradient-slider", disabled: this.props.disabled, ref: function (el) { return _this.alphaSlider = el; } }))),
-            React.createElement(ColorInput_1.default, { rgba: this.state.rgba, onRgbaChange: this.onRgbaChange, hex: this.state.hex, onHexChange: this.onHexChange, opacity: this.props.opacity, disabled: this.props.disabled }),
+            React.createElement(ColorInput_1.default, { rgba: this.state.rgba, onRgbaChange: this.onRgbaChange, hex: this.state.hex, onHexChange: this.onHexChange, opacity: this.props.opacity, disabled: this.props.disabled, defaultInputMode: this.props.format }),
             this.props.backgroundColor && (React.createElement(ColorContrastLabels_1.ColorContrastLabels, { bgColor: (0, color_parser_1.getRGBA)(this.props.backgroundColor), rgba: this.state.rgba }))));
     };
     ColorGradientWithoutContext.displayName = 'ColorGradient';
@@ -270,6 +270,7 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
         onFocus: PropTypes.func,
         opacity: PropTypes.bool,
         backgroundColor: PropTypes.string,
+        format: PropTypes.any,
         disabled: PropTypes.bool,
         style: PropTypes.any,
         id: PropTypes.string,
@@ -283,7 +284,8 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
      */
     ColorGradientWithoutContext.defaultProps = {
         opacity: true,
-        role: 'textbox'
+        role: 'textbox',
+        format: 'rgb'
     };
     return ColorGradientWithoutContext;
 }(React.Component));

package/dist/npm/colors/ColorInput.d.ts

@@ -11,14 +11,15 @@ export interface ColorInputProps {
     onHexChange: any;
     opacity: boolean;
     disabled?: boolean;
+    defaultInputMode?: 'rgba' | 'rgb' | 'hex';
 }
 /**
  * @hidden
  */
-export default class ColorInput extends React.Component<ColorInputProps, {}> {
-    state: {
-        inputMode: string;
-    };
+export default class ColorInput extends React.Component<ColorInputProps, {
+    inputMode: string;
+}> {
+    constructor(props: ColorInputProps);
     render(): JSX.Element;
     private onRgbaRChange;
     private onRgbaGChange;

package/dist/npm/colors/ColorInput.js

@@ -43,11 +43,8 @@ var modes = ['rgba', 'rgb', 'hex'];
  */
 var ColorInput = /** @class */ (function (_super) {
     __extends(ColorInput, _super);
-    function ColorInput() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = {
-            inputMode: modes[1]
-        };
+    function ColorInput(props) {
+        var _this = _super.call(this, props) || this;
         _this.onRgbaRChange = function (event) {
             _this.dispatchRgbaChange({ r: event.value }, event);
         };
@@ -60,6 +57,7 @@ var ColorInput = /** @class */ (function (_super) {
         _this.onRgbaAChange = function (event) {
             _this.dispatchRgbaChange({ a: event.value }, event);
         };
+        _this.state = { inputMode: props.defaultInputMode || modes[1] };
         return _this;
     }
     ColorInput.prototype.render = function () {

package/dist/npm/colors/FlatColorPicker.d.ts

@@ -1,6 +1,23 @@
 import * as React from 'react';
 /**
- * Represents the properties of [FlatColorPicker](% slug api_inputs_flatcolorpicker %) component.
+ * The arguments for the `onChange` FlatColorPicker event.
+ */
+export interface FlatColorPickerChangeEvent {
+    /**
+     * The current value of the FlatColorPicker.
+     */
+    value: string;
+    /**
+     * A React Synthetic Event.
+     */
+    syntheticEvent: React.SyntheticEvent<any>;
+    /**
+     * A native DOM event.
+     */
+    nativeEvent: any;
+}
+/**
+ * Represents the properties of [FlatColorPicker]({% slug api_inputs_flatcolorpicker %}) component.
  */
 export interface FlatColorPickerProps {
     /**
@@ -19,6 +36,26 @@ export interface FlatColorPickerProps {
      * Sets the color value.
      */
     value?: string;
+    /**
+     * Sets the default color value.
+     */
+    defaultValue?: string;
+    /**
+     * The event handler that will be fired when the user edits the value.
+     */
+    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.
      */
@@ -72,8 +109,23 @@ export interface FlatColorPickerHandle {
      * The focus event callback.
      */
     focus: () => void;
+    /**
+     * The current value of the FlatColorPicker.
+     */
+    value: string;
 }
 /**
- * Represents the FlatColorPicker component.
+ * 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
+ * class App extends React.Component {
+ *     render() {
+ *         return <FlatColorPicker />;
+ *     }
+ * }
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
  */
 export declare const FlatColorPicker: React.ForwardRefExoticComponent<FlatColorPickerProps & React.RefAttributes<FlatColorPickerHandle | null>>;