@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.
@@ -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',
@@ -91,4 +91,8 @@ export interface ColorGradientProps {
91
91
  * @default 'rgb'
92
92
  */
93
93
  format?: 'rgba' | 'rgb' | 'hex';
94
+ /**
95
+ * Sets additional classes to the ColorGradient.
96
+ */
97
+ className?: string;
94
98
  }
@@ -76,4 +76,8 @@ export interface ColorPaletteProps {
76
76
  * Represent the focus event of the ColorPalette.
77
77
  */
78
78
  onFocus?: (event: FocusEvent) => void;
79
+ /**
80
+ * Sets additional classes to the ColorPalette.
81
+ */
82
+ className?: string;
79
83
  }
@@ -154,4 +154,8 @@ export interface ColorPickerProps {
154
154
  * @default `solid`
155
155
  */
156
156
  fillMode?: null | 'solid' | 'flat' | 'outline';
157
+ /**
158
+ * Sets additional classes to the ColorPicker.
159
+ */
160
+ className?: string;
157
161
  }
@@ -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: 1694608514,
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',
@@ -91,4 +91,8 @@ export interface ColorGradientProps {
91
91
  * @default 'rgb'
92
92
  */
93
93
  format?: 'rgba' | 'rgb' | 'hex';
94
+ /**
95
+ * Sets additional classes to the ColorGradient.
96
+ */
97
+ className?: string;
94
98
  }
@@ -76,4 +76,8 @@ export interface ColorPaletteProps {
76
76
  * Represent the focus event of the ColorPalette.
77
77
  */
78
78
  onFocus?: (event: FocusEvent) => void;
79
+ /**
80
+ * Sets additional classes to the ColorPalette.
81
+ */
82
+ className?: string;
79
83
  }
@@ -154,4 +154,8 @@ export interface ColorPickerProps {
154
154
  * @default `solid`
155
155
  */
156
156
  fillMode?: null | 'solid' | 'flat' | 'outline';
157
+ /**
158
+ * Sets additional classes to the ColorPicker.
159
+ */
160
+ className?: string;
157
161
  }
@@ -8,7 +8,7 @@ exports.packageMetadata = {
8
8
  name: '@progress/kendo-react-inputs',
9
9
  productName: 'KendoReact',
10
10
  productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
11
- publishDate: 1694608514,
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
  };