@progress/kendo-react-inputs 5.18.0-dev.202309131321 → 5.18.0-dev.202309140927
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.
- package/dist/cdn/js/kendo-react-inputs.js +1 -1
- package/dist/es/colors/ColorGradient.d.ts +1 -0
- package/dist/es/colors/ColorGradient.js +3 -2
- package/dist/es/colors/ColorPalette.d.ts +1 -0
- package/dist/es/colors/ColorPalette.js +3 -2
- package/dist/es/colors/ColorPicker.js +4 -3
- package/dist/es/colors/interfaces/ColorGradientProps.d.ts +4 -0
- package/dist/es/colors/interfaces/ColorPaletteProps.d.ts +4 -0
- package/dist/es/colors/interfaces/ColorPickerProps.d.ts +4 -0
- package/dist/es/package-metadata.js +1 -1
- package/dist/npm/colors/ColorGradient.d.ts +1 -0
- package/dist/npm/colors/ColorGradient.js +3 -2
- package/dist/npm/colors/ColorPalette.d.ts +1 -0
- package/dist/npm/colors/ColorPalette.js +3 -2
- package/dist/npm/colors/ColorPicker.js +4 -3
- package/dist/npm/colors/interfaces/ColorGradientProps.d.ts +4 -0
- package/dist/npm/colors/interfaces/ColorPaletteProps.d.ts +4 -0
- package/dist/npm/colors/interfaces/ColorPickerProps.d.ts +4 -0
- package/dist/npm/package-metadata.js +1 -1
- package/dist/systemjs/kendo-react-inputs.js +1 -1
- package/package.json +16 -16
|
@@ -37,6 +37,7 @@ export declare class ColorGradientWithoutContext extends React.Component<ColorGr
|
|
|
37
37
|
ariaLabel: PropTypes.Requireable<string>;
|
|
38
38
|
ariaLabelledBy: PropTypes.Requireable<string>;
|
|
39
39
|
ariaDescribedBy: PropTypes.Requireable<string>;
|
|
40
|
+
className: PropTypes.Requireable<string>;
|
|
40
41
|
};
|
|
41
42
|
/**
|
|
42
43
|
* @hidden
|
|
@@ -241,7 +241,7 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
|
|
|
241
241
|
ColorGradientWithoutContext.prototype.render = function () {
|
|
242
242
|
var _this = this;
|
|
243
243
|
var lS = provideLocalizationService(this);
|
|
244
|
-
var className = classNames('k-colorgradient', { 'k-disabled': this.props.disabled });
|
|
244
|
+
var className = classNames('k-colorgradient', { 'k-disabled': this.props.disabled }, this.props.className);
|
|
245
245
|
return (React.createElement("div", { id: this.props.id, role: this.props.role, 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-label": this.props.ariaLabel, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, onFocus: this.onFocus },
|
|
246
246
|
React.createElement("div", { className: "k-colorgradient-canvas k-hstack" },
|
|
247
247
|
React.createElement("div", { className: "k-hsv-rectangle", style: { background: this.state.backgroundColor } },
|
|
@@ -274,7 +274,8 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
|
|
|
274
274
|
role: PropTypes.string,
|
|
275
275
|
ariaLabel: PropTypes.string,
|
|
276
276
|
ariaLabelledBy: PropTypes.string,
|
|
277
|
-
ariaDescribedBy: PropTypes.string
|
|
277
|
+
ariaDescribedBy: PropTypes.string,
|
|
278
|
+
className: PropTypes.string
|
|
278
279
|
};
|
|
279
280
|
/**
|
|
280
281
|
* @hidden
|
|
@@ -40,6 +40,7 @@ export declare class ColorPaletteWithoutContext extends React.Component<ColorPal
|
|
|
40
40
|
id: PropTypes.Requireable<string>;
|
|
41
41
|
ariaLabelledBy: PropTypes.Requireable<string>;
|
|
42
42
|
ariaDescribedBy: PropTypes.Requireable<string>;
|
|
43
|
+
className: PropTypes.Requireable<string>;
|
|
43
44
|
};
|
|
44
45
|
/**
|
|
45
46
|
* @hidden
|
|
@@ -113,7 +113,7 @@ var ColorPaletteWithoutContext = /** @class */ (function (_super) {
|
|
|
113
113
|
svc.setColorMatrix(paletteInfo.colors, paletteInfo.columns);
|
|
114
114
|
var selectedCellCoords = svc.getCellCoordsFor(this.state.selectedColor);
|
|
115
115
|
var focusedCellCoords = svc.getCellCoordsFor(this.state.focusedColor);
|
|
116
|
-
var className = classNames('k-colorpalette', { 'k-disabled': this.props.disabled });
|
|
116
|
+
var className = classNames('k-colorpalette', { 'k-disabled': this.props.disabled }, this.props.className);
|
|
117
117
|
if (paletteInfo.colors.length) {
|
|
118
118
|
return (React.createElement("div", { id: this.props.id, role: "grid", className: className, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, "aria-disabled": this.props.ariaDisabled || (this.props.disabled ? 'true' : undefined), "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, tabIndex: getTabIndex(this.props.tabIndex, this.props.disabled), ref: function (el) { return _this.wrapper = el; } },
|
|
119
119
|
React.createElement("table", { className: "k-colorpalette-table", role: "presentation" },
|
|
@@ -240,7 +240,8 @@ var ColorPaletteWithoutContext = /** @class */ (function (_super) {
|
|
|
240
240
|
onFocus: PropTypes.func,
|
|
241
241
|
id: PropTypes.string,
|
|
242
242
|
ariaLabelledBy: PropTypes.string,
|
|
243
|
-
ariaDescribedBy: PropTypes.string
|
|
243
|
+
ariaDescribedBy: PropTypes.string,
|
|
244
|
+
className: PropTypes.string
|
|
244
245
|
};
|
|
245
246
|
/**
|
|
246
247
|
* @hidden
|
|
@@ -65,7 +65,7 @@ export var ColorPicker = React.forwardRef(function (directProps, target) {
|
|
|
65
65
|
validatePackage(packageMetadata);
|
|
66
66
|
var props = usePropsContext(ColorPickerPropsContext, directProps);
|
|
67
67
|
var localization = useLocalization();
|
|
68
|
-
var _b = props.size, size = _b === void 0 ? defaultProps.size : _b, _c = props.rounded, rounded = _c === void 0 ? defaultProps.rounded : _c, _d = props.fillMode, fillMode = _d === void 0 ? defaultProps.fillMode : _d, popupSettings = props.popupSettings, gradientSettings = props.gradientSettings, paletteSettings = props.paletteSettings, valid = props.valid, disabled = props.disabled, tabIndex = props.tabIndex, view = props.view, icon = props.icon, svgIcon = props.svgIcon, iconClassName = props.iconClassName, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, onActiveColorClick = props.onActiveColorClick;
|
|
68
|
+
var _b = props.size, size = _b === void 0 ? defaultProps.size : _b, _c = props.rounded, rounded = _c === void 0 ? defaultProps.rounded : _c, _d = props.fillMode, fillMode = _d === void 0 ? defaultProps.fillMode : _d, popupSettings = props.popupSettings, gradientSettings = props.gradientSettings, paletteSettings = props.paletteSettings, valid = props.valid, disabled = props.disabled, tabIndex = props.tabIndex, view = props.view, icon = props.icon, svgIcon = props.svgIcon, iconClassName = props.iconClassName, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, onActiveColorClick = props.onActiveColorClick, className = props.className;
|
|
69
69
|
var focusableElementRef = React.useRef(null);
|
|
70
70
|
var gradientRef = React.useRef(null);
|
|
71
71
|
var paletteRef = React.useRef(null);
|
|
@@ -210,7 +210,7 @@ export var ColorPicker = React.forwardRef(function (directProps, target) {
|
|
|
210
210
|
React.createElement("span", { className: classNames('k-value-icon', 'k-color-preview', {
|
|
211
211
|
'k-no-color': !value,
|
|
212
212
|
'k-icon-color-preview': (icon || svgIcon || iconClassName)
|
|
213
|
-
}) },
|
|
213
|
+
}, className) },
|
|
214
214
|
iconClassName && React.createElement("span", { className: classNames('k-color-preview-icon', iconClassName) }),
|
|
215
215
|
!iconClassName && (icon || svgIcon) && React.createElement(IconWrap, { name: icon, icon: svgIcon }),
|
|
216
216
|
React.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: value } })))), button: (React.createElement(Button, { tabIndex: -1, type: "button", onClick: onClickHandler, className: "k-input-button", rounded: null, icon: 'caret-alt-down', svgIcon: caretAltDownIcon, "aria-label": localization.toLanguageString(colorPickerDropdownButtonAriaLabel, messages[colorPickerDropdownButtonAriaLabel]) })), content: (React.createElement(React.Fragment, null,
|
|
@@ -230,7 +230,8 @@ ColorPicker.propTypes = {
|
|
|
230
230
|
ariaDescribedBy: PropTypes.string,
|
|
231
231
|
size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
|
|
232
232
|
rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
|
|
233
|
-
fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline'])
|
|
233
|
+
fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline']),
|
|
234
|
+
className: PropTypes.string
|
|
234
235
|
};
|
|
235
236
|
var defaultProps = {
|
|
236
237
|
size: 'medium',
|
|
@@ -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:
|
|
8
|
+
publishDate: 1694681371,
|
|
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
|
};
|
|
@@ -37,6 +37,7 @@ export declare class ColorGradientWithoutContext extends React.Component<ColorGr
|
|
|
37
37
|
ariaLabel: PropTypes.Requireable<string>;
|
|
38
38
|
ariaLabelledBy: PropTypes.Requireable<string>;
|
|
39
39
|
ariaDescribedBy: PropTypes.Requireable<string>;
|
|
40
|
+
className: PropTypes.Requireable<string>;
|
|
40
41
|
};
|
|
41
42
|
/**
|
|
42
43
|
* @hidden
|
|
@@ -244,7 +244,7 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
|
|
|
244
244
|
ColorGradientWithoutContext.prototype.render = function () {
|
|
245
245
|
var _this = this;
|
|
246
246
|
var lS = (0, kendo_react_intl_1.provideLocalizationService)(this);
|
|
247
|
-
var className = (0, kendo_react_common_1.classNames)('k-colorgradient', { 'k-disabled': this.props.disabled });
|
|
247
|
+
var className = (0, kendo_react_common_1.classNames)('k-colorgradient', { 'k-disabled': this.props.disabled }, this.props.className);
|
|
248
248
|
return (React.createElement("div", { id: this.props.id, role: this.props.role, className: className, "aria-disabled": this.props.disabled ? 'true' : undefined, style: this.props.style, ref: function (el) { return _this.wrapper = el; }, tabIndex: (0, kendo_react_common_1.getTabIndex)(this.props.tabIndex, this.props.disabled), "aria-label": this.props.ariaLabel, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, onFocus: this.onFocus },
|
|
249
249
|
React.createElement("div", { className: "k-colorgradient-canvas k-hstack" },
|
|
250
250
|
React.createElement("div", { className: "k-hsv-rectangle", style: { background: this.state.backgroundColor } },
|
|
@@ -277,7 +277,8 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
|
|
|
277
277
|
role: PropTypes.string,
|
|
278
278
|
ariaLabel: PropTypes.string,
|
|
279
279
|
ariaLabelledBy: PropTypes.string,
|
|
280
|
-
ariaDescribedBy: PropTypes.string
|
|
280
|
+
ariaDescribedBy: PropTypes.string,
|
|
281
|
+
className: PropTypes.string
|
|
281
282
|
};
|
|
282
283
|
/**
|
|
283
284
|
* @hidden
|
|
@@ -40,6 +40,7 @@ export declare class ColorPaletteWithoutContext extends React.Component<ColorPal
|
|
|
40
40
|
id: PropTypes.Requireable<string>;
|
|
41
41
|
ariaLabelledBy: PropTypes.Requireable<string>;
|
|
42
42
|
ariaDescribedBy: PropTypes.Requireable<string>;
|
|
43
|
+
className: PropTypes.Requireable<string>;
|
|
43
44
|
};
|
|
44
45
|
/**
|
|
45
46
|
* @hidden
|
|
@@ -116,7 +116,7 @@ var ColorPaletteWithoutContext = /** @class */ (function (_super) {
|
|
|
116
116
|
svc.setColorMatrix(paletteInfo.colors, paletteInfo.columns);
|
|
117
117
|
var selectedCellCoords = svc.getCellCoordsFor(this.state.selectedColor);
|
|
118
118
|
var focusedCellCoords = svc.getCellCoordsFor(this.state.focusedColor);
|
|
119
|
-
var className = (0, kendo_react_common_1.classNames)('k-colorpalette', { 'k-disabled': this.props.disabled });
|
|
119
|
+
var className = (0, kendo_react_common_1.classNames)('k-colorpalette', { 'k-disabled': this.props.disabled }, this.props.className);
|
|
120
120
|
if (paletteInfo.colors.length) {
|
|
121
121
|
return (React.createElement("div", { id: this.props.id, role: "grid", className: className, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, "aria-disabled": this.props.ariaDisabled || (this.props.disabled ? 'true' : undefined), "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, tabIndex: (0, kendo_react_common_1.getTabIndex)(this.props.tabIndex, this.props.disabled), ref: function (el) { return _this.wrapper = el; } },
|
|
122
122
|
React.createElement("table", { className: "k-colorpalette-table", role: "presentation" },
|
|
@@ -243,7 +243,8 @@ var ColorPaletteWithoutContext = /** @class */ (function (_super) {
|
|
|
243
243
|
onFocus: PropTypes.func,
|
|
244
244
|
id: PropTypes.string,
|
|
245
245
|
ariaLabelledBy: PropTypes.string,
|
|
246
|
-
ariaDescribedBy: PropTypes.string
|
|
246
|
+
ariaDescribedBy: PropTypes.string,
|
|
247
|
+
className: PropTypes.string
|
|
247
248
|
};
|
|
248
249
|
/**
|
|
249
250
|
* @hidden
|
|
@@ -68,7 +68,7 @@ exports.ColorPicker = React.forwardRef(function (directProps, target) {
|
|
|
68
68
|
(0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
|
|
69
69
|
var props = (0, kendo_react_common_1.usePropsContext)(exports.ColorPickerPropsContext, directProps);
|
|
70
70
|
var localization = (0, kendo_react_intl_1.useLocalization)();
|
|
71
|
-
var _b = props.size, size = _b === void 0 ? defaultProps.size : _b, _c = props.rounded, rounded = _c === void 0 ? defaultProps.rounded : _c, _d = props.fillMode, fillMode = _d === void 0 ? defaultProps.fillMode : _d, popupSettings = props.popupSettings, gradientSettings = props.gradientSettings, paletteSettings = props.paletteSettings, valid = props.valid, disabled = props.disabled, tabIndex = props.tabIndex, view = props.view, icon = props.icon, svgIcon = props.svgIcon, iconClassName = props.iconClassName, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, onActiveColorClick = props.onActiveColorClick;
|
|
71
|
+
var _b = props.size, size = _b === void 0 ? defaultProps.size : _b, _c = props.rounded, rounded = _c === void 0 ? defaultProps.rounded : _c, _d = props.fillMode, fillMode = _d === void 0 ? defaultProps.fillMode : _d, popupSettings = props.popupSettings, gradientSettings = props.gradientSettings, paletteSettings = props.paletteSettings, valid = props.valid, disabled = props.disabled, tabIndex = props.tabIndex, view = props.view, icon = props.icon, svgIcon = props.svgIcon, iconClassName = props.iconClassName, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, onActiveColorClick = props.onActiveColorClick, className = props.className;
|
|
72
72
|
var focusableElementRef = React.useRef(null);
|
|
73
73
|
var gradientRef = React.useRef(null);
|
|
74
74
|
var paletteRef = React.useRef(null);
|
|
@@ -213,7 +213,7 @@ exports.ColorPicker = React.forwardRef(function (directProps, target) {
|
|
|
213
213
|
React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-value-icon', 'k-color-preview', {
|
|
214
214
|
'k-no-color': !value,
|
|
215
215
|
'k-icon-color-preview': (icon || svgIcon || iconClassName)
|
|
216
|
-
}) },
|
|
216
|
+
}, className) },
|
|
217
217
|
iconClassName && React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-color-preview-icon', iconClassName) }),
|
|
218
218
|
!iconClassName && (icon || svgIcon) && React.createElement(kendo_react_common_1.IconWrap, { name: icon, icon: svgIcon }),
|
|
219
219
|
React.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: value } })))), button: (React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", onClick: onClickHandler, className: "k-input-button", rounded: null, icon: 'caret-alt-down', svgIcon: kendo_svg_icons_1.caretAltDownIcon, "aria-label": localization.toLanguageString(messages_1.colorPickerDropdownButtonAriaLabel, messages_1.messages[messages_1.colorPickerDropdownButtonAriaLabel]) })), content: (React.createElement(React.Fragment, null,
|
|
@@ -233,7 +233,8 @@ exports.ColorPicker.propTypes = {
|
|
|
233
233
|
ariaDescribedBy: PropTypes.string,
|
|
234
234
|
size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
|
|
235
235
|
rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
|
|
236
|
-
fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline'])
|
|
236
|
+
fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline']),
|
|
237
|
+
className: PropTypes.string
|
|
237
238
|
};
|
|
238
239
|
var defaultProps = {
|
|
239
240
|
size: 'medium',
|
|
@@ -8,7 +8,7 @@ exports.packageMetadata = {
|
|
|
8
8
|
name: '@progress/kendo-react-inputs',
|
|
9
9
|
productName: 'KendoReact',
|
|
10
10
|
productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
|
|
11
|
-
publishDate:
|
|
11
|
+
publishDate: 1694681371,
|
|
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
|
};
|