@progress/kendo-react-inputs 4.11.0-dev.202111060921 → 4.11.0-dev.202111151049

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

@@ -37,6 +37,7 @@ export declare class ColorGradient extends React.Component<ColorGradientProps, C
         defaultValue: PropTypes.Requireable<string>;
         value: PropTypes.Requireable<string>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         opacity: PropTypes.Requireable<boolean>;
         backgroundColor: PropTypes.Requireable<string>;
         disabled: PropTypes.Requireable<boolean>;
@@ -123,6 +124,10 @@ export declare class ColorGradient extends React.Component<ColorGradientProps, C
      * @hidden
      */
     dispatchChangeEvent(value: string, syntheticEvent: React.SyntheticEvent<any>, nativeEvent: any): void;
+    /**
+     * @hidden
+     */
+    onFocus: (nativeEvent: any) => void;
     /**
      * @hidden
      */

package/dist/es/colors/ColorGradient.js

@@ -113,6 +113,14 @@ var ColorGradient = /** @class */ (function (_super) {
             var hsva = Object.assign({}, _this.state.hsva, { s: left / gradientRectMetrics.width, v: 1 - top / gradientRectMetrics.height });
             _this.handleHsvaChange(hsva, event, event.nativeEvent);
         };
+        /**
+         * @hidden
+         */
+        _this.onFocus = function (nativeEvent) {
+            if (_this.props.onFocus) {
+                _this.props.onFocus.call(undefined, { nativeEvent: nativeEvent, target: _this });
+            }
+        };
         /**
          * @hidden
          */
@@ -237,7 +245,7 @@ var ColorGradient = /** @class */ (function (_super) {
     ColorGradient.prototype.render = function () {
         var _this = this;
         var className = classNames('k-colorgradient', { 'k-state-disabled': this.props.disabled });
-        return (React.createElement("div", { id: this.props.id, className: className, "aria-disabled": this.props.disabled ? 'true' : undefined, style: this.props.style, ref: function (el) { return _this.wrapper = el; }, tabIndex: getTabIndex(this.props.tabIndex, this.props.disabled), "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy },
+        return (React.createElement("div", { id: this.props.id, className: className, "aria-disabled": this.props.disabled ? 'true' : undefined, style: this.props.style, ref: function (el) { return _this.wrapper = el; }, tabIndex: getTabIndex(this.props.tabIndex, this.props.disabled), "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, onFocus: this.onFocus },
             React.createElement("div", { className: "k-colorgradient-canvas k-hstack" },
                 React.createElement("div", { className: "k-hsv-rectangle", style: { background: this.state.backgroundColor } },
                     React.createElement(Draggable, { onDrag: this.onDrag, onRelease: this.onRelease, ref: function (el) { return _this.gradientWrapper = el ? el.element : undefined; } },
@@ -258,6 +266,7 @@ var ColorGradient = /** @class */ (function (_super) {
         defaultValue: PropTypes.string,
         value: PropTypes.string,
         onChange: PropTypes.func,
+        onFocus: PropTypes.func,
         opacity: PropTypes.bool,
         backgroundColor: PropTypes.string,
         disabled: PropTypes.bool,

package/dist/es/colors/ColorInput.js

@@ -32,7 +32,7 @@ import { messages, colorGradientR, colorGradientHex, colorGradientA, colorGradie
 /**
  * @hidden
  */
-var modes = ['rgb', 'rgba', 'hex'];
+var modes = ['rgba', 'rgb', 'hex'];
 /**
  * @hidden
  */

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

@@ -47,6 +47,7 @@ export declare class ColorPalette extends React.Component<ColorPaletteProps, Col
         disabled: PropTypes.Requireable<boolean>;
         tabIndex: PropTypes.Requireable<number>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         id: PropTypes.Requireable<string>;
         ariaLabelledBy: PropTypes.Requireable<string>;
         ariaDescribedBy: PropTypes.Requireable<string>;

package/dist/es/colors/ColorPalette.js

@@ -92,8 +92,11 @@ var ColorPalette = /** @class */ (function (_super) {
             }
             _this.dispatchChangeEvent(color, event);
         };
-        _this.onFocus = function () {
+        _this.onFocus = function (nativeEvent) {
             _this.setState({ focusedColor: _this.state.selectedColor || _this.paletteService.colorRows[0][0] });
+            if (_this.props.onFocus) {
+                _this.props.onFocus.call(undefined, { nativeEvent: nativeEvent, target: _this });
+            }
         };
         _this.onBlur = function () {
             _this.setState({ focusedColor: undefined });
@@ -237,6 +240,7 @@ var ColorPalette = /** @class */ (function (_super) {
         disabled: PropTypes.bool,
         tabIndex: PropTypes.number,
         onChange: PropTypes.func,
+        onFocus: PropTypes.func,
         id: PropTypes.string,
         ariaLabelledBy: PropTypes.string,
         ariaDescribedBy: PropTypes.string

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

@@ -0,0 +1,71 @@
+import * as React from 'react';
+/**
+ * Represents the properties of [FlatColorPicker](% slug api_inputs_flatcolorpicker %) component.
+ */
+export 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.CSSProperties;
+    /**
+     * Sets additional classes to the FlatColorPicker.
+     */
+    className?: string;
+    /**
+     * Sets the color value.
+     */
+    value?: string;
+    /**
+     * Sets the `tabIndex` property of the FlatColorPicker.
+     */
+    tabIndex?: number;
+    /**
+     * Determines whether the FlatColorPicker is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Sets the FlatColorPicker view. The default is `ColorGradient`.
+     */
+    view?: 'ColorGradient' | 'ColorPalette' | undefined;
+    /**
+     * Sets custom header component.
+     */
+    header?: React.ComponentType;
+    /**
+     * 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;
+}
+/**
+ * Represents the target (element and props) of the FlatColorPicker.
+ */
+export 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;
+}
+/**
+ * Represents the FlatColorPicker component.
+ */
+export declare const FlatColorPicker: React.ForwardRefExoticComponent<FlatColorPickerProps & React.RefAttributes<FlatColorPickerHandle>>;

package/dist/es/colors/FlatColorPicker.js

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { classNames, validatePackage, getTabIndex } from '@progress/kendo-react-common';
+import { ButtonGroup, Button } from '@progress/kendo-react-buttons';
+import { ColorPalette, ColorGradient } from '../main';
+import { packageMetadata } from '../package-metadata';
+import { messages, flatColorPickerApplyBtn, flatColorPickerCancelBtn } from '../messages';
+;
+;
+/**
+ * Represents the FlatColorPicker component.
+ */
+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 focus = React.useCallback(function () {
+        if (target.current) {
+            target.current.focus();
+        }
+    }, [target]);
+    React.useImperativeHandle(target, function () { return ({
+        element: flatColorPickerRef.current,
+        focus: focus,
+        props: props
+    }); });
+    React.useImperativeHandle(ref, function () { return target.current; });
+    var handleViewChange = React.useCallback(function (viewType) {
+        if ((viewType === 'ColorGradient' && !colorGradientView) || (viewType === 'ColorPalette' && colorGradientView)) {
+            setColorGradientView(!colorGradientView);
+        }
+    }, [colorGradientView]);
+    var handleResetColor = React.useCallback(function () {
+        setColorValue('rgba(255, 255, 255, 1)');
+    }, []);
+    var handleColorChange = React.useCallback(function (event) {
+        setColorValue(event.value);
+    }, []);
+    var handleApplyBtnClick = React.useCallback(function () {
+        setPrevColor(colorValue);
+    }, [colorValue]);
+    var handleCancelBtnClick = React.useCallback(function () {
+        setPrevColor('rgba(255, 255, 255, 1)');
+    }, []);
+    var handlePrevColorClick = React.useCallback(function () {
+        setColorValue(prevColor);
+    }, [prevColor]);
+    var handleFocus = React.useCallback(function () {
+        if (flatColorPickerRef.current) {
+            flatColorPickerRef.current.focus();
+        }
+    }, [flatColorPickerRef]);
+    var handleFlatColorPickerBlur = React.useCallback(function () {
+        setPrevColor(colorValue);
+    }, [colorValue]);
+    return (React.createElement("div", { id: props.id, style: props.style, ref: flatColorPickerRef, tabIndex: getTabIndex(props.tabIndex, props.disabled), className: classNames('k-flatcolorpicker k-coloreditor', {
+            'k-state-disabled': props.disabled
+        }, props.className), onBlur: handleFlatColorPickerBlur },
+        props.header ||
+            React.createElement("div", { className: "k-coloreditor-header k-hstack" },
+                React.createElement("div", { className: "k-coloreditor-header-actions k-hstack" },
+                    React.createElement(ButtonGroup, null,
+                        React.createElement(Button, { type: "button", togglable: true, look: 'flat', selected: colorGradientView, onClick: function () { return handleViewChange('ColorGradient'); } },
+                            React.createElement("span", { className: "k-icon k-i-color-canvas" })),
+                        React.createElement(Button, { type: "button", togglable: true, look: 'flat', selected: !colorGradientView, onClick: function () { return handleViewChange('ColorPalette'); } },
+                            React.createElement("span", { className: "k-icon k-i-palette" })))),
+                React.createElement("div", { className: "k-spacer" }),
+                React.createElement("div", { className: "k-coloreditor-header-actions k-hstack" },
+                    (props.showClearButton && defaultProps.showClearButton) &&
+                        React.createElement(Button, { type: "button", look: 'flat', onClick: handleResetColor },
+                            React.createElement("span", { className: "k-icon k-i-reset-color" })),
+                    (props.showPreview && defaultProps.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, value: colorValue, onChange: handleColorChange, onFocus: handleFocus })
+            : React.createElement(ColorPalette, { value: colorValue, onChange: handleColorChange, onFocus: handleFocus })),
+        (props.showButtons && defaultProps.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,
+    value: PropTypes.string,
+    view: PropTypes.string,
+    header: PropTypes.elementType,
+    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

@@ -16,6 +16,10 @@ export interface ColorGradientProps {
      * 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;
     /**
      * Determines whether the alpha slider and the alpha input will be displayed. Defaults to `true`.
      */

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

@@ -68,4 +68,8 @@ export interface ColorPaletteProps {
      * 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;
 }

package/dist/es/main.d.ts

@@ -16,6 +16,7 @@ export * from './colors/interfaces/ColorPickerGradientSettings';
 export * from './colors/interfaces/ColorPickerPaletteSettings';
 export * from './colors/interfaces/ColorPickerPopupSettings';
 export * from './colors/interfaces/ColorPickerProps';
+export * from './colors/FlatColorPicker';
 export * from './input/Input';
 export * from './maskedtextbox/MaskedTextBox';
 export * from './maskedtextbox/MaskedTextBoxProps';

package/dist/es/main.js

@@ -1,6 +1,7 @@
 export * from './colors/ColorGradient';
 export * from './colors/ColorPalette';
 export * from './colors/ColorPicker';
+export * from './colors/FlatColorPicker';
 export * from './input/Input';
 export * from './maskedtextbox/MaskedTextBox';
 export * from './numerictextbox/NumericTextBox';

package/dist/es/messages/index.d.ts

@@ -58,6 +58,14 @@ export declare const colorGradientPass = "colorGradient.colorGradientPass";
  * @hidden
  */
 export declare const colorGradientFail = "colorGradient.colorGradientFail";
+/**
+ * @hidden
+ */
+export declare const flatColorPickerCancelBtn = "flatColorPicker.cancelBtn";
+/**
+ * @hidden
+ */
+export declare const flatColorPickerApplyBtn = "flatColorPicker.applyBtn";
 /**
  * @hidden
  */
@@ -93,6 +101,8 @@ export declare const messages: {
     [colorGradientAAALevel]: string;
     [colorGradientPass]: string;
     [colorGradientFail]: string;
+    [flatColorPickerCancelBtn]: string;
+    [flatColorPickerApplyBtn]: string;
     [checkboxValidation]: string;
     [checkboxOptionalText]: string;
     [radioButtonValidation]: string;

package/dist/es/messages/index.js

@@ -59,6 +59,14 @@ export var colorGradientPass = 'colorGradient.colorGradientPass';
  * @hidden
  */
 export var colorGradientFail = 'colorGradient.colorGradientFail';
+/**
+ * @hidden
+ */
+export var flatColorPickerCancelBtn = 'flatColorPicker.cancelBtn';
+/**
+ * @hidden
+ */
+export var flatColorPickerApplyBtn = 'flatColorPicker.applyBtn';
 /**
  * @hidden
  */
@@ -94,6 +102,8 @@ export var messages = (_a = {},
     _a[colorGradientAAALevel] = 'AAA',
     _a[colorGradientPass] = 'Pass',
     _a[colorGradientFail] = 'Fail',
+    _a[flatColorPickerCancelBtn] = 'Cancel',
+    _a[flatColorPickerApplyBtn] = 'Apply',
     _a[checkboxValidation] = 'Please check this box if you want to proceed!',
     _a[checkboxOptionalText] = '(Optional)',
     _a[radioButtonValidation] = 'Please select option if you want to proceed!',

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-inputs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1636189475,
+    publishDate: 1636972216,
     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

@@ -37,6 +37,7 @@ export declare class ColorGradient extends React.Component<ColorGradientProps, C
         defaultValue: PropTypes.Requireable<string>;
         value: PropTypes.Requireable<string>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         opacity: PropTypes.Requireable<boolean>;
         backgroundColor: PropTypes.Requireable<string>;
         disabled: PropTypes.Requireable<boolean>;
@@ -123,6 +124,10 @@ export declare class ColorGradient extends React.Component<ColorGradientProps, C
      * @hidden
      */
     dispatchChangeEvent(value: string, syntheticEvent: React.SyntheticEvent<any>, nativeEvent: any): void;
+    /**
+     * @hidden
+     */
+    onFocus: (nativeEvent: any) => void;
     /**
      * @hidden
      */

package/dist/npm/colors/ColorGradient.js

@@ -115,6 +115,14 @@ var ColorGradient = /** @class */ (function (_super) {
             var hsva = Object.assign({}, _this.state.hsva, { s: left / gradientRectMetrics.width, v: 1 - top / gradientRectMetrics.height });
             _this.handleHsvaChange(hsva, event, event.nativeEvent);
         };
+        /**
+         * @hidden
+         */
+        _this.onFocus = function (nativeEvent) {
+            if (_this.props.onFocus) {
+                _this.props.onFocus.call(undefined, { nativeEvent: nativeEvent, target: _this });
+            }
+        };
         /**
          * @hidden
          */
@@ -239,7 +247,7 @@ var ColorGradient = /** @class */ (function (_super) {
     ColorGradient.prototype.render = function () {
         var _this = this;
         var className = kendo_react_common_1.classNames('k-colorgradient', { 'k-state-disabled': this.props.disabled });
-        return (React.createElement("div", { id: this.props.id, className: className, "aria-disabled": this.props.disabled ? 'true' : undefined, style: this.props.style, ref: function (el) { return _this.wrapper = el; }, tabIndex: kendo_react_common_1.getTabIndex(this.props.tabIndex, this.props.disabled), "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy },
+        return (React.createElement("div", { id: this.props.id, className: className, "aria-disabled": this.props.disabled ? 'true' : undefined, style: this.props.style, ref: function (el) { return _this.wrapper = el; }, tabIndex: kendo_react_common_1.getTabIndex(this.props.tabIndex, this.props.disabled), "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, onFocus: this.onFocus },
             React.createElement("div", { className: "k-colorgradient-canvas k-hstack" },
                 React.createElement("div", { className: "k-hsv-rectangle", style: { background: this.state.backgroundColor } },
                     React.createElement(kendo_react_common_1.Draggable, { onDrag: this.onDrag, onRelease: this.onRelease, ref: function (el) { return _this.gradientWrapper = el ? el.element : undefined; } },
@@ -260,6 +268,7 @@ var ColorGradient = /** @class */ (function (_super) {
         defaultValue: PropTypes.string,
         value: PropTypes.string,
         onChange: PropTypes.func,
+        onFocus: PropTypes.func,
         opacity: PropTypes.bool,
         backgroundColor: PropTypes.string,
         disabled: PropTypes.bool,

package/dist/npm/colors/ColorInput.js

@@ -34,7 +34,7 @@ var messages_1 = require("../messages");
 /**
  * @hidden
  */
-var modes = ['rgb', 'rgba', 'hex'];
+var modes = ['rgba', 'rgb', 'hex'];
 /**
  * @hidden
  */

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

@@ -47,6 +47,7 @@ export declare class ColorPalette extends React.Component<ColorPaletteProps, Col
         disabled: PropTypes.Requireable<boolean>;
         tabIndex: PropTypes.Requireable<number>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         id: PropTypes.Requireable<string>;
         ariaLabelledBy: PropTypes.Requireable<string>;
         ariaDescribedBy: PropTypes.Requireable<string>;

package/dist/npm/colors/ColorPalette.js

@@ -94,8 +94,11 @@ var ColorPalette = /** @class */ (function (_super) {
             }
             _this.dispatchChangeEvent(color, event);
         };
-        _this.onFocus = function () {
+        _this.onFocus = function (nativeEvent) {
             _this.setState({ focusedColor: _this.state.selectedColor || _this.paletteService.colorRows[0][0] });
+            if (_this.props.onFocus) {
+                _this.props.onFocus.call(undefined, { nativeEvent: nativeEvent, target: _this });
+            }
         };
         _this.onBlur = function () {
             _this.setState({ focusedColor: undefined });
@@ -239,6 +242,7 @@ var ColorPalette = /** @class */ (function (_super) {
         disabled: PropTypes.bool,
         tabIndex: PropTypes.number,
         onChange: PropTypes.func,
+        onFocus: PropTypes.func,
         id: PropTypes.string,
         ariaLabelledBy: PropTypes.string,
         ariaDescribedBy: PropTypes.string

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

@@ -0,0 +1,71 @@
+import * as React from 'react';
+/**
+ * Represents the properties of [FlatColorPicker](% slug api_inputs_flatcolorpicker %) component.
+ */
+export 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.CSSProperties;
+    /**
+     * Sets additional classes to the FlatColorPicker.
+     */
+    className?: string;
+    /**
+     * Sets the color value.
+     */
+    value?: string;
+    /**
+     * Sets the `tabIndex` property of the FlatColorPicker.
+     */
+    tabIndex?: number;
+    /**
+     * Determines whether the FlatColorPicker is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Sets the FlatColorPicker view. The default is `ColorGradient`.
+     */
+    view?: 'ColorGradient' | 'ColorPalette' | undefined;
+    /**
+     * Sets custom header component.
+     */
+    header?: React.ComponentType;
+    /**
+     * 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;
+}
+/**
+ * Represents the target (element and props) of the FlatColorPicker.
+ */
+export 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;
+}
+/**
+ * Represents the FlatColorPicker component.
+ */
+export declare const FlatColorPicker: React.ForwardRefExoticComponent<FlatColorPickerProps & React.RefAttributes<FlatColorPickerHandle>>;

package/dist/npm/colors/FlatColorPicker.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var PropTypes = require("prop-types");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+var main_1 = require("../main");
+var package_metadata_1 = require("../package-metadata");
+var messages_1 = require("../messages");
+;
+;
+/**
+ * Represents the FlatColorPicker component.
+ */
+exports.FlatColorPicker = React.forwardRef(function (props, ref) {
+    kendo_react_common_1.validatePackage(package_metadata_1.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 focus = React.useCallback(function () {
+        if (target.current) {
+            target.current.focus();
+        }
+    }, [target]);
+    React.useImperativeHandle(target, function () { return ({
+        element: flatColorPickerRef.current,
+        focus: focus,
+        props: props
+    }); });
+    React.useImperativeHandle(ref, function () { return target.current; });
+    var handleViewChange = React.useCallback(function (viewType) {
+        if ((viewType === 'ColorGradient' && !colorGradientView) || (viewType === 'ColorPalette' && colorGradientView)) {
+            setColorGradientView(!colorGradientView);
+        }
+    }, [colorGradientView]);
+    var handleResetColor = React.useCallback(function () {
+        setColorValue('rgba(255, 255, 255, 1)');
+    }, []);
+    var handleColorChange = React.useCallback(function (event) {
+        setColorValue(event.value);
+    }, []);
+    var handleApplyBtnClick = React.useCallback(function () {
+        setPrevColor(colorValue);
+    }, [colorValue]);
+    var handleCancelBtnClick = React.useCallback(function () {
+        setPrevColor('rgba(255, 255, 255, 1)');
+    }, []);
+    var handlePrevColorClick = React.useCallback(function () {
+        setColorValue(prevColor);
+    }, [prevColor]);
+    var handleFocus = React.useCallback(function () {
+        if (flatColorPickerRef.current) {
+            flatColorPickerRef.current.focus();
+        }
+    }, [flatColorPickerRef]);
+    var handleFlatColorPickerBlur = React.useCallback(function () {
+        setPrevColor(colorValue);
+    }, [colorValue]);
+    return (React.createElement("div", { id: props.id, style: props.style, ref: flatColorPickerRef, tabIndex: kendo_react_common_1.getTabIndex(props.tabIndex, props.disabled), className: kendo_react_common_1.classNames('k-flatcolorpicker k-coloreditor', {
+            'k-state-disabled': props.disabled
+        }, props.className), onBlur: handleFlatColorPickerBlur },
+        props.header ||
+            React.createElement("div", { className: "k-coloreditor-header k-hstack" },
+                React.createElement("div", { className: "k-coloreditor-header-actions k-hstack" },
+                    React.createElement(kendo_react_buttons_1.ButtonGroup, null,
+                        React.createElement(kendo_react_buttons_1.Button, { type: "button", togglable: true, look: 'flat', selected: colorGradientView, onClick: function () { return handleViewChange('ColorGradient'); } },
+                            React.createElement("span", { className: "k-icon k-i-color-canvas" })),
+                        React.createElement(kendo_react_buttons_1.Button, { type: "button", togglable: true, look: 'flat', selected: !colorGradientView, onClick: function () { return handleViewChange('ColorPalette'); } },
+                            React.createElement("span", { className: "k-icon k-i-palette" })))),
+                React.createElement("div", { className: "k-spacer" }),
+                React.createElement("div", { className: "k-coloreditor-header-actions k-hstack" },
+                    (props.showClearButton && defaultProps.showClearButton) &&
+                        React.createElement(kendo_react_buttons_1.Button, { type: "button", look: 'flat', onClick: handleResetColor },
+                            React.createElement("span", { className: "k-icon k-i-reset-color" })),
+                    (props.showPreview && defaultProps.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(main_1.ColorGradient, { ref: colorGradientRef, value: colorValue, onChange: handleColorChange, onFocus: handleFocus })
+            : React.createElement(main_1.ColorPalette, { value: colorValue, onChange: handleColorChange, onFocus: handleFocus })),
+        (props.showButtons && defaultProps.showButtons) &&
+            React.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-end" },
+                React.createElement(kendo_react_buttons_1.Button, { type: "button", className: "k-coloreditor-cancel", onClick: handleCancelBtnClick }, messages_1.messages[messages_1.flatColorPickerCancelBtn]),
+                React.createElement(kendo_react_buttons_1.Button, { type: "button", className: "k-coloreditor-apply k-primary", onClick: handleApplyBtnClick }, messages_1.messages[messages_1.flatColorPickerApplyBtn]))));
+});
+var propTypes = {
+    id: PropTypes.string,
+    value: PropTypes.string,
+    view: PropTypes.string,
+    header: PropTypes.elementType,
+    showClearButton: PropTypes.bool,
+    showPreview: PropTypes.bool,
+    showButtons: PropTypes.bool
+};
+var defaultProps = {
+    showClearButton: true,
+    showPreview: true,
+    showButtons: true
+};
+exports.FlatColorPicker.displayName = 'KendoFlatColorPicker';
+// TODO: delete casting when @types/react is updated!
+exports.FlatColorPicker.propTypes = propTypes;
+exports.FlatColorPicker.defaultProps = defaultProps;

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

@@ -16,6 +16,10 @@ export interface ColorGradientProps {
      * 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;
     /**
      * Determines whether the alpha slider and the alpha input will be displayed. Defaults to `true`.
      */