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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/cdn/js/kendo-react-inputs.js +1 -1
  2. package/dist/es/colors/FlatColorPicker.d.ts +41 -1
  3. package/dist/es/colors/FlatColorPicker.js +68 -28
  4. package/dist/es/package-metadata.js +1 -1
  5. package/dist/npm/colors/FlatColorPicker.d.ts +41 -1
  6. package/dist/npm/colors/FlatColorPicker.js +68 -28
  7. package/dist/npm/package-metadata.js +1 -1
  8. package/dist/systemjs/kendo-react-inputs.js +1 -1
  9. package/package.json +16 -16
package/dist/es/colors/FlatColorPicker.d.ts CHANGED
@@ -1,4 +1,21 @@
1
1
  import * as React from 'react';
2
+ /**
3
+ * The arguments for the `onChange` FlatColorPicker event.
4
+ */
5
+ export interface FlatColorPickerChangeEvent {
6
+ /**
7
+ * The current value of the FlatColorPicker.
8
+ */
9
+ value: string;
10
+ /**
11
+ * A React Synthetic Event.
12
+ */
13
+ syntheticEvent: React.SyntheticEvent<any>;
14
+ /**
15
+ * A native DOM event.
16
+ */
17
+ nativeEvent: any;
18
+ }
2
19
  /**
3
20
  * Represents the properties of [FlatColorPicker](% slug api_inputs_flatcolorpicker %) component.
4
21
  */
@@ -19,6 +36,14 @@ export interface FlatColorPickerProps {
19
36
  * Sets the color value.
20
37
  */
21
38
  value?: string;
39
+ /**
40
+ * Sets the default color value.
41
+ */
42
+ defaultValue?: string;
43
+ /**
44
+ * The event handler that will be fired when the user edits the value.
45
+ */
46
+ onChange?: (event: FlatColorPickerChangeEvent) => void;
22
47
  /**
23
48
  * Sets the `tabIndex` property of the FlatColorPicker.
24
49
  */
@@ -72,8 +97,23 @@ export interface FlatColorPickerHandle {
72
97
  * The focus event callback.
73
98
  */
74
99
  focus: () => void;
100
+ /**
101
+ * The current value of the FlatColorPicker.
102
+ */
103
+ value: string;
75
104
  }
76
105
  /**
77
- * Represents the FlatColorPicker component.
106
+ * Represents the [KendoReact FlatColorPicker component]({% slug overview_flatcolorpicker %}).
107
+ * Accepts properties of type [FlatColorPickerProps]({% slug api_inputs_flatcolorpickerprops %}). Obtaining the [FlatColorPickerHandle]({% slug api_inputs_flatcolorpickerhandle %}).
108
+ *
109
+ * @example
110
+ * ```jsx
111
+ * class App extends React.Component {
112
+ * render() {
113
+ * return <FlatColorPicker />;
114
+ * }
115
+ * }
116
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
117
+ * ```
78
118
  */
79
119
  export declare const FlatColorPicker: React.ForwardRefExoticComponent<FlatColorPickerProps & React.RefAttributes<FlatColorPickerHandle | null>>;
package/dist/es/colors/FlatColorPicker.js CHANGED
@@ -1,3 +1,4 @@
1
+ /* eslint-disable max-len */
1
2
  import * as React from 'react';
2
3
  import * as PropTypes from 'prop-types';
3
4
  import { classNames, validatePackage, getTabIndex } from '@progress/kendo-react-common';
@@ -7,19 +8,33 @@ import { ColorPalette, ColorGradient } from '../main';
7
8
  import { packageMetadata } from '../package-metadata';
8
9
  import { useLocalization } from '@progress/kendo-react-intl';
9
10
  import { messages, flatColorPickerApplyBtn, flatColorPickerCancelBtn, flatColorPickerColorGradientBtn, flatColorPickerColorPaletteBtn, flatColorPickerClearBtn } from '../messages';
11
+ var defaultColor = 'rgba(255, 255, 255, 1)';
10
12
  ;
11
13
  ;
12
14
  /**
13
- * Represents the FlatColorPicker component.
15
+ * Represents the [KendoReact FlatColorPicker component]({% slug overview_flatcolorpicker %}).
16
+ * Accepts properties of type [FlatColorPickerProps]({% slug api_inputs_flatcolorpickerprops %}). Obtaining the [FlatColorPickerHandle]({% slug api_inputs_flatcolorpickerhandle %}).
17
+ *
18
+ * @example
19
+ * ```jsx
20
+ * class App extends React.Component {
21
+ * render() {
22
+ * return <FlatColorPicker />;
23
+ * }
24
+ * }
25
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
26
+ * ```
14
27
  */
15
28
  export var FlatColorPicker = React.forwardRef(function (props, ref) {
16
29
  validatePackage(packageMetadata);
17
30
  var target = React.useRef(null);
18
31
  var flatColorPickerRef = React.useRef(null);
19
32
  var colorGradientRef = React.useRef(null);
20
- var _a = React.useState((props.view || 'ColorGradient') === 'ColorGradient'), colorGradientView = _a[0], setColorGradientView = _a[1];
21
- var _b = React.useState('rgba(255, 255, 255, 1)'), colorValue = _b[0], setColorValue = _b[1];
22
- var _c = React.useState('rgba(255, 255, 255, 1)'), prevColor = _c[0], setPrevColor = _c[1];
33
+ 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;
34
+ var _e = React.useState((props.view || 'ColorGradient') === 'ColorGradient'), colorGradientView = _e[0], setColorGradientView = _e[1];
35
+ var _f = React.useState(props.value || defaultValue), colorValue = _f[0], setColorValue = _f[1];
36
+ var _g = React.useState(props.value || defaultValue), prevColor = _g[0], setPrevColor = _g[1];
37
+ var value = props.value !== undefined ? props.value : prevColor;
23
38
  var localizationService = useLocalization();
24
39
  var focus = React.useCallback(function () {
25
40
  if (target.current) {
@@ -29,8 +44,9 @@ export var FlatColorPicker = React.forwardRef(function (props, ref) {
29
44
  React.useImperativeHandle(target, function () { return ({
30
45
  element: flatColorPickerRef.current,
31
46
  focus: focus,
32
- props: props
33
- }); });
47
+ props: props,
48
+ value: value
49
+ }); }, [value, focus, props]);
34
50
  React.useImperativeHandle(ref, function () { return target.current; });
35
51
  var handleViewChange = React.useCallback(function (viewType) {
36
52
  if ((viewType === 'ColorGradient' && !colorGradientView) || (viewType === 'ColorPalette' && colorGradientView)) {
@@ -38,28 +54,51 @@ export var FlatColorPicker = React.forwardRef(function (props, ref) {
38
54
  }
39
55
  }, [colorGradientView]);
40
56
  var handleResetColor = React.useCallback(function () {
41
- setColorValue('rgba(255, 255, 255, 1)');
42
- }, []);
57
+ setColorValue(defaultValue);
58
+ }, [defaultValue]);
43
59
  var handleColorChange = React.useCallback(function (event) {
44
60
  setColorValue(event.value);
45
61
  }, []);
46
- var handleApplyBtnClick = React.useCallback(function () {
62
+ var handleApplyBtnClick = React.useCallback(function (event) {
47
63
  setPrevColor(colorValue);
48
- }, [colorValue]);
64
+ if (props.onChange) {
65
+ var ev = {
66
+ value: colorValue,
67
+ nativeEvent: event.nativeEvent,
68
+ syntheticEvent: event
69
+ };
70
+ props.onChange.call(undefined, ev);
71
+ }
72
+ }, [colorValue, props.onChange]);
49
73
  var handleCancelBtnClick = React.useCallback(function () {
50
- setPrevColor('rgba(255, 255, 255, 1)');
74
+ setPrevColor(defaultColor);
51
75
  }, []);
52
76
  var handlePrevColorClick = React.useCallback(function () {
53
77
  setColorValue(prevColor);
54
78
  }, [prevColor]);
55
- var handleFocus = React.useCallback(function () {
56
- if (flatColorPickerRef.current) {
79
+ var handleFocus = React.useCallback(function (event) {
80
+ if (flatColorPickerRef.current && event.nativeEvent.target instanceof HTMLInputElement === false) {
57
81
  flatColorPickerRef.current.focus();
58
82
  }
59
83
  }, [flatColorPickerRef]);
60
- var handleFlatColorPickerBlur = React.useCallback(function () {
61
- setPrevColor(colorValue);
62
- }, [colorValue]);
84
+ var handleFlatColorPickerBlur = React.useCallback(function (event) {
85
+ var _a;
86
+ var blurred = (!event.relatedTarget || !((_a = flatColorPickerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)));
87
+ if (!blurred) {
88
+ return;
89
+ }
90
+ if (!showButtons) {
91
+ setPrevColor(colorValue);
92
+ }
93
+ if (!showButtons && props.onChange) {
94
+ var ev = {
95
+ value: colorValue,
96
+ nativeEvent: event.nativeEvent,
97
+ syntheticEvent: event
98
+ };
99
+ props.onChange.call(undefined, ev);
100
+ }
101
+ }, [colorValue, showButtons, props.onChange]);
63
102
  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', {
64
103
  'k-disabled': props.disabled
65
104
  }, props.className), onBlur: handleFlatColorPickerBlur },
@@ -72,35 +111,36 @@ export var FlatColorPicker = React.forwardRef(function (props, ref) {
72
111
  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 }))),
73
112
  React.createElement("div", { className: "k-spacer" }),
74
113
  React.createElement("div", { className: "k-coloreditor-header-actions k-hstack" },
75
- (props.showClearButton && defaultProps.showClearButton) &&
114
+ showClearButton &&
76
115
  React.createElement(Button, { type: "button", fillMode: 'flat', onClick: handleResetColor, "aria-label": localizationService.toLanguageString(flatColorPickerClearBtn, messages[flatColorPickerClearBtn]), icon: "droplet-slash", svgIcon: dropletSlashIcon }),
77
- (props.showPreview && defaultProps.showPreview) &&
116
+ showPreview &&
78
117
  React.createElement("div", { className: "k-coloreditor-preview k-vstack" },
79
118
  React.createElement("span", { className: "k-coloreditor-preview-color k-color-preview", style: { background: colorValue } }),
80
119
  React.createElement("span", { className: "k-coloreditor-current-color k-color-preview", style: { background: prevColor }, onClick: handlePrevColorClick })))),
81
120
  React.createElement("div", { className: "k-coloreditor-views k-vstack" }, colorGradientView
82
121
  ? React.createElement(ColorGradient, { ref: colorGradientRef, role: "none", tabIndex: -1, ariaLabel: undefined, value: colorValue, onChange: handleColorChange, onFocus: handleFocus })
83
122
  : React.createElement(ColorPalette, { ariaDisabled: true, ariaLabelledBy: 'required_label', value: colorValue, onChange: handleColorChange, onFocus: handleFocus })),
84
- (props.showButtons && defaultProps.showButtons) &&
123
+ showButtons &&
85
124
  React.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-end" },
86
125
  React.createElement(Button, { type: "button", className: "k-coloreditor-cancel", onClick: handleCancelBtnClick }, messages[flatColorPickerCancelBtn]),
87
126
  React.createElement(Button, { type: "button", className: "k-coloreditor-apply k-primary", onClick: handleApplyBtnClick }, messages[flatColorPickerApplyBtn])))));
88
127
  });
89
128
  var propTypes = {
90
129
  id: PropTypes.string,
130
+ style: PropTypes.any,
131
+ className: PropTypes.string,
91
132
  value: PropTypes.string,
92
- view: PropTypes.string,
93
- header: PropTypes.elementType,
133
+ defaultValue: PropTypes.string,
134
+ onChange: PropTypes.func,
135
+ tabIndex: PropTypes.number,
136
+ ariaLabel: PropTypes.string,
137
+ ariaLabelledBy: PropTypes.string,
138
+ disabled: PropTypes.bool,
139
+ view: PropTypes.any,
140
+ header: PropTypes.any,
94
141
  showClearButton: PropTypes.bool,
95
142
  showPreview: PropTypes.bool,
96
143
  showButtons: PropTypes.bool
97
144
  };
98
- var defaultProps = {
99
- showClearButton: true,
100
- showPreview: true,
101
- showButtons: true
102
- };
103
145
  FlatColorPicker.displayName = 'KendoFlatColorPicker';
104
- // TODO: delete casting when @types/react is updated!
105
146
  FlatColorPicker.propTypes = propTypes;
106
- FlatColorPicker.defaultProps = defaultProps;
package/dist/es/package-metadata.js CHANGED
@@ -5,7 +5,7 @@ export var packageMetadata = {
5
5
  name: '@progress/kendo-react-inputs',
6
6
  productName: 'KendoReact',
7
7
  productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
8
- publishDate: 1681998620,
8
+ publishDate: 1682071582,
9
9
  version: '',
10
10
  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'
11
11
  };
package/dist/npm/colors/FlatColorPicker.d.ts CHANGED
@@ -1,4 +1,21 @@
1
1
  import * as React from 'react';
2
+ /**
3
+ * The arguments for the `onChange` FlatColorPicker event.
4
+ */
5
+ export interface FlatColorPickerChangeEvent {
6
+ /**
7
+ * The current value of the FlatColorPicker.
8
+ */
9
+ value: string;
10
+ /**
11
+ * A React Synthetic Event.
12
+ */
13
+ syntheticEvent: React.SyntheticEvent<any>;
14
+ /**
15
+ * A native DOM event.
16
+ */
17
+ nativeEvent: any;
18
+ }
2
19
  /**
3
20
  * Represents the properties of [FlatColorPicker](% slug api_inputs_flatcolorpicker %) component.
4
21
  */
@@ -19,6 +36,14 @@ export interface FlatColorPickerProps {
19
36
  * Sets the color value.
20
37
  */
21
38
  value?: string;
39
+ /**
40
+ * Sets the default color value.
41
+ */
42
+ defaultValue?: string;
43
+ /**
44
+ * The event handler that will be fired when the user edits the value.
45
+ */
46
+ onChange?: (event: FlatColorPickerChangeEvent) => void;
22
47
  /**
23
48
  * Sets the `tabIndex` property of the FlatColorPicker.
24
49
  */
@@ -72,8 +97,23 @@ export interface FlatColorPickerHandle {
72
97
  * The focus event callback.
73
98
  */
74
99
  focus: () => void;
100
+ /**
101
+ * The current value of the FlatColorPicker.
102
+ */
103
+ value: string;
75
104
  }
76
105
  /**
77
- * Represents the FlatColorPicker component.
106
+ * Represents the [KendoReact FlatColorPicker component]({% slug overview_flatcolorpicker %}).
107
+ * Accepts properties of type [FlatColorPickerProps]({% slug api_inputs_flatcolorpickerprops %}). Obtaining the [FlatColorPickerHandle]({% slug api_inputs_flatcolorpickerhandle %}).
108
+ *
109
+ * @example
110
+ * ```jsx
111
+ * class App extends React.Component {
112
+ * render() {
113
+ * return <FlatColorPicker />;
114
+ * }
115
+ * }
116
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
117
+ * ```
78
118
  */
79
119
  export declare const FlatColorPicker: React.ForwardRefExoticComponent<FlatColorPickerProps & React.RefAttributes<FlatColorPickerHandle | null>>;
package/dist/npm/colors/FlatColorPicker.js CHANGED
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.FlatColorPicker = void 0;
4
+ /* eslint-disable max-len */
4
5
  var React = require("react");
5
6
  var PropTypes = require("prop-types");
6
7
  var kendo_react_common_1 = require("@progress/kendo-react-common");
@@ -10,19 +11,33 @@ var main_1 = require("../main");
10
11
  var package_metadata_1 = require("../package-metadata");
11
12
  var kendo_react_intl_1 = require("@progress/kendo-react-intl");
12
13
  var messages_1 = require("../messages");
14
+ var defaultColor = 'rgba(255, 255, 255, 1)';
13
15
  ;
14
16
  ;
15
17
  /**
16
- * Represents the FlatColorPicker component.
18
+ * Represents the [KendoReact FlatColorPicker component]({% slug overview_flatcolorpicker %}).
19
+ * Accepts properties of type [FlatColorPickerProps]({% slug api_inputs_flatcolorpickerprops %}). Obtaining the [FlatColorPickerHandle]({% slug api_inputs_flatcolorpickerhandle %}).
20
+ *
21
+ * @example
22
+ * ```jsx
23
+ * class App extends React.Component {
24
+ * render() {
25
+ * return <FlatColorPicker />;
26
+ * }
27
+ * }
28
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
29
+ * ```
17
30
  */
18
31
  exports.FlatColorPicker = React.forwardRef(function (props, ref) {
19
32
  (0, kendo_react_common_1.validatePackage)(package_metadata_1.packageMetadata);
20
33
  var target = React.useRef(null);
21
34
  var flatColorPickerRef = React.useRef(null);
22
35
  var colorGradientRef = React.useRef(null);
23
- var _a = React.useState((props.view || 'ColorGradient') === 'ColorGradient'), colorGradientView = _a[0], setColorGradientView = _a[1];
24
- var _b = React.useState('rgba(255, 255, 255, 1)'), colorValue = _b[0], setColorValue = _b[1];
25
- var _c = React.useState('rgba(255, 255, 255, 1)'), prevColor = _c[0], setPrevColor = _c[1];
36
+ 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;
37
+ var _e = React.useState((props.view || 'ColorGradient') === 'ColorGradient'), colorGradientView = _e[0], setColorGradientView = _e[1];
38
+ var _f = React.useState(props.value || defaultValue), colorValue = _f[0], setColorValue = _f[1];
39
+ var _g = React.useState(props.value || defaultValue), prevColor = _g[0], setPrevColor = _g[1];
40
+ var value = props.value !== undefined ? props.value : prevColor;
26
41
  var localizationService = (0, kendo_react_intl_1.useLocalization)();
27
42
  var focus = React.useCallback(function () {
28
43
  if (target.current) {
@@ -32,8 +47,9 @@ exports.FlatColorPicker = React.forwardRef(function (props, ref) {
32
47
  React.useImperativeHandle(target, function () { return ({
33
48
  element: flatColorPickerRef.current,
34
49
  focus: focus,
35
- props: props
36
- }); });
50
+ props: props,
51
+ value: value
52
+ }); }, [value, focus, props]);
37
53
  React.useImperativeHandle(ref, function () { return target.current; });
38
54
  var handleViewChange = React.useCallback(function (viewType) {
39
55
  if ((viewType === 'ColorGradient' && !colorGradientView) || (viewType === 'ColorPalette' && colorGradientView)) {
@@ -41,28 +57,51 @@ exports.FlatColorPicker = React.forwardRef(function (props, ref) {
41
57
  }
42
58
  }, [colorGradientView]);
43
59
  var handleResetColor = React.useCallback(function () {
44
- setColorValue('rgba(255, 255, 255, 1)');
45
- }, []);
60
+ setColorValue(defaultValue);
61
+ }, [defaultValue]);
46
62
  var handleColorChange = React.useCallback(function (event) {
47
63
  setColorValue(event.value);
48
64
  }, []);
49
- var handleApplyBtnClick = React.useCallback(function () {
65
+ var handleApplyBtnClick = React.useCallback(function (event) {
50
66
  setPrevColor(colorValue);
51
- }, [colorValue]);
67
+ if (props.onChange) {
68
+ var ev = {
69
+ value: colorValue,
70
+ nativeEvent: event.nativeEvent,
71
+ syntheticEvent: event
72
+ };
73
+ props.onChange.call(undefined, ev);
74
+ }
75
+ }, [colorValue, props.onChange]);
52
76
  var handleCancelBtnClick = React.useCallback(function () {
53
- setPrevColor('rgba(255, 255, 255, 1)');
77
+ setPrevColor(defaultColor);
54
78
  }, []);
55
79
  var handlePrevColorClick = React.useCallback(function () {
56
80
  setColorValue(prevColor);
57
81
  }, [prevColor]);
58
- var handleFocus = React.useCallback(function () {
59
- if (flatColorPickerRef.current) {
82
+ var handleFocus = React.useCallback(function (event) {
83
+ if (flatColorPickerRef.current && event.nativeEvent.target instanceof HTMLInputElement === false) {
60
84
  flatColorPickerRef.current.focus();
61
85
  }
62
86
  }, [flatColorPickerRef]);
63
- var handleFlatColorPickerBlur = React.useCallback(function () {
64
- setPrevColor(colorValue);
65
- }, [colorValue]);
87
+ var handleFlatColorPickerBlur = React.useCallback(function (event) {
88
+ var _a;
89
+ var blurred = (!event.relatedTarget || !((_a = flatColorPickerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)));
90
+ if (!blurred) {
91
+ return;
92
+ }
93
+ if (!showButtons) {
94
+ setPrevColor(colorValue);
95
+ }
96
+ if (!showButtons && props.onChange) {
97
+ var ev = {
98
+ value: colorValue,
99
+ nativeEvent: event.nativeEvent,
100
+ syntheticEvent: event
101
+ };
102
+ props.onChange.call(undefined, ev);
103
+ }
104
+ }, [colorValue, showButtons, props.onChange]);
66
105
  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', {
67
106
  'k-disabled': props.disabled
68
107
  }, props.className), onBlur: handleFlatColorPickerBlur },
@@ -75,35 +114,36 @@ exports.FlatColorPicker = React.forwardRef(function (props, ref) {
75
114
  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 }))),
76
115
  React.createElement("div", { className: "k-spacer" }),
77
116
  React.createElement("div", { className: "k-coloreditor-header-actions k-hstack" },
78
- (props.showClearButton && defaultProps.showClearButton) &&
117
+ showClearButton &&
79
118
  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 }),
80
- (props.showPreview && defaultProps.showPreview) &&
119
+ showPreview &&
81
120
  React.createElement("div", { className: "k-coloreditor-preview k-vstack" },
82
121
  React.createElement("span", { className: "k-coloreditor-preview-color k-color-preview", style: { background: colorValue } }),
83
122
  React.createElement("span", { className: "k-coloreditor-current-color k-color-preview", style: { background: prevColor }, onClick: handlePrevColorClick })))),
84
123
  React.createElement("div", { className: "k-coloreditor-views k-vstack" }, colorGradientView
85
124
  ? React.createElement(main_1.ColorGradient, { ref: colorGradientRef, role: "none", tabIndex: -1, ariaLabel: undefined, value: colorValue, onChange: handleColorChange, onFocus: handleFocus })
86
125
  : React.createElement(main_1.ColorPalette, { ariaDisabled: true, ariaLabelledBy: 'required_label', value: colorValue, onChange: handleColorChange, onFocus: handleFocus })),
87
- (props.showButtons && defaultProps.showButtons) &&
126
+ showButtons &&
88
127
  React.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-end" },
89
128
  React.createElement(kendo_react_buttons_1.Button, { type: "button", className: "k-coloreditor-cancel", onClick: handleCancelBtnClick }, messages_1.messages[messages_1.flatColorPickerCancelBtn]),
90
129
  React.createElement(kendo_react_buttons_1.Button, { type: "button", className: "k-coloreditor-apply k-primary", onClick: handleApplyBtnClick }, messages_1.messages[messages_1.flatColorPickerApplyBtn])))));
91
130
  });
92
131
  var propTypes = {
93
132
  id: PropTypes.string,
133
+ style: PropTypes.any,
134
+ className: PropTypes.string,
94
135
  value: PropTypes.string,
95
- view: PropTypes.string,
96
- header: PropTypes.elementType,
136
+ defaultValue: PropTypes.string,
137
+ onChange: PropTypes.func,
138
+ tabIndex: PropTypes.number,
139
+ ariaLabel: PropTypes.string,
140
+ ariaLabelledBy: PropTypes.string,
141
+ disabled: PropTypes.bool,
142
+ view: PropTypes.any,
143
+ header: PropTypes.any,
97
144
  showClearButton: PropTypes.bool,
98
145
  showPreview: PropTypes.bool,
99
146
  showButtons: PropTypes.bool
100
147
  };
101
- var defaultProps = {
102
- showClearButton: true,
103
- showPreview: true,
104
- showButtons: true
105
- };
106
148
  exports.FlatColorPicker.displayName = 'KendoFlatColorPicker';
107
- // TODO: delete casting when @types/react is updated!
108
149
  exports.FlatColorPicker.propTypes = propTypes;
109
- exports.FlatColorPicker.defaultProps = defaultProps;
package/dist/npm/package-metadata.js CHANGED
@@ -8,7 +8,7 @@ exports.packageMetadata = {
8
8
  name: '@progress/kendo-react-inputs',
9
9
  productName: 'KendoReact',
10
10
  productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
11
- publishDate: 1681998620,
11
+ publishDate: 1682071582,
12
12
  version: '',
13
13
  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'
14
14
  };