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

package/dist/npm/colors/FlatColorPicker.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlatColorPicker = void 0;
+/* eslint-disable max-len */
 var React = require("react");
 var PropTypes = require("prop-types");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
@@ -10,19 +11,33 @@ var main_1 = require("../main");
 var package_metadata_1 = require("../package-metadata");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var messages_1 = require("../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'));
+ * ```
  */
 exports.FlatColorPicker = React.forwardRef(function (props, ref) {
     (0, 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 _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 = (0, kendo_react_intl_1.useLocalization)();
     var focus = React.useCallback(function () {
         if (target.current) {
@@ -32,8 +47,9 @@ exports.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)) {
@@ -41,28 +57,51 @@ exports.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: (0, kendo_react_common_1.getTabIndex)(props.tabIndex, props.disabled), className: (0, kendo_react_common_1.classNames)('k-flatcolorpicker k-coloreditor', {
             'k-disabled': props.disabled
         }, props.className), onBlur: handleFlatColorPickerBlur },
@@ -75,35 +114,38 @@ exports.FlatColorPicker = React.forwardRef(function (props, ref) {
                             React.createElement(kendo_react_buttons_1.Button, { type: "button", "aria-label": localizationService.toLanguageString(messages_1.flatColorPickerColorPaletteBtn, messages_1.messages[messages_1.flatColorPickerColorPaletteBtn]), togglable: true, fillMode: 'flat', selected: !colorGradientView, onClick: function () { return handleViewChange('ColorPalette'); }, icon: "palette", svgIcon: kendo_svg_icons_1.paletteIcon }))),
                     React.createElement("div", { className: "k-spacer" }),
                     React.createElement("div", { className: "k-coloreditor-header-actions k-hstack" },
-                        (props.showClearButton && defaultProps.showClearButton) &&
+                        showClearButton &&
                             React.createElement(kendo_react_buttons_1.Button, { type: "button", fillMode: 'flat', onClick: handleResetColor, "aria-label": localizationService.toLanguageString(messages_1.flatColorPickerClearBtn, messages_1.messages[messages_1.flatColorPickerClearBtn]), icon: "droplet-slash", svgIcon: kendo_svg_icons_1.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(main_1.ColorGradient, { ref: colorGradientRef, role: "none", tabIndex: -1, ariaLabel: undefined, value: colorValue, onChange: handleColorChange, onFocus: handleFocus })
+                ? React.createElement(main_1.ColorGradient, { ref: colorGradientRef, role: "none", tabIndex: -1, ariaLabel: undefined, value: colorValue, onChange: handleColorChange, onFocus: handleFocus, opacity: props.opacity, format: props.format })
                 : React.createElement(main_1.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(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,
+    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
-};
 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

@@ -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/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.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'
 };