@progress/kendo-react-inputs 5.4.0-dev.202205271059 → 5.4.0-dev.202206061009

package/dist/es/checkbox/Checkbox.d.ts

@@ -29,4 +29,4 @@ export declare const CheckboxPropsContext: React.Context<(p: CheckboxProps) => C
  * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<CheckboxHandle>>;
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<CheckboxHandle | null>>;

package/dist/es/checkbox/Checkbox.js

@@ -145,8 +145,8 @@ export var Checkbox = React.forwardRef(function (directProps, target) {
     var dir = useDir(elementRef, props.dir);
     var checkboxClasses = classNames({ 'k-disabled': disabled }, className);
     var inputProps = __assign(__assign({ type: 'checkbox', className: classNames('k-checkbox', (_a = {},
-            _a["k-checkbox-" + (kendoThemeMaps.sizeMap[size] || size)] = size,
-            _a["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
+            _a["k-checkbox-".concat(kendoThemeMaps.sizeMap[size] || size)] = size,
+            _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
             _a['k-indeterminate'] = indeterminateProp,
             _a['k-invalid k-invalid'] = !(isValid || validityStyles !== undefined || validityStyles === true),
             _a)), ref: elementRef, name: name, id: id || calculatedId, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, checked: Boolean(checkedProp), disabled: disabled, tabIndex: getTabIndex(tabIndex, disabled), role: 'checkbox', required: required !== undefined ? required : false, 'aria-checked': currentChecked || checkedProp ?

package/dist/es/colors/ColorContrastLabels.js

@@ -35,9 +35,9 @@ var ColorContrastLabels = /** @class */ (function (_super) {
         var contrast = getContrastFromTwoRGBAs(this.props.rgba, this.props.bgColor);
         var requiredAAContrast = (4.5).toFixed(1);
         var requiredAAAContrast = (7.0).toFixed(1);
-        var contrastText = contrastRatioMessage + ": " + contrast.toFixed(2);
-        var aaText = AALevelMessage + ": " + requiredAAContrast;
-        var aaaText = AAALevelMessage + ": " + requiredAAAContrast;
+        var contrastText = "".concat(contrastRatioMessage, ": ").concat(contrast.toFixed(2));
+        var aaText = "".concat(AALevelMessage, ": ").concat(requiredAAContrast);
+        var aaaText = "".concat(AAALevelMessage, ": ").concat(requiredAAAContrast);
         var success = (React.createElement("span", { className: "k-contrast-validation k-text-success" },
             passMessage,
             " ",

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

@@ -56,7 +56,7 @@ export declare class ColorGradientWithoutContext extends React.Component<ColorGr
         backgroundColor: string;
         rgba: any;
         hex: any;
-    };
+    } | null;
     /**
      * @hidden
      */

package/dist/es/colors/ColorGradient.js

@@ -32,6 +32,10 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
     __extends(ColorGradientWithoutContext, _super);
     function ColorGradientWithoutContext(props) {
         var _this = _super.call(this, props) || this;
+        /**
+         * @hidden
+         */
+        _this.wrapper = null;
         /**
          * @hidden
          */
@@ -164,8 +168,8 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
             var gradientRectMetrics = this.getGradientRectMetrics();
             var top_1 = (1 - this.state.hsva.v) * gradientRectMetrics.height;
             var left = this.state.hsva.s * gradientRectMetrics.width;
-            style.top = top_1 + "px";
-            style.left = left + "px";
+            style.top = "".concat(top_1, "px");
+            style.left = "".concat(left, "px");
         }
         return React.createElement("div", { className: "k-hsv-draghandle k-draghandle", style: style });
     };
@@ -210,7 +214,7 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
      */
     ColorGradientWithoutContext.prototype.setAlphaSliderBackground = function (backgroundColor) {
         if (this.props.opacity && this.alphaSlider && this.alphaSlider.sliderTrack) {
-            this.alphaSlider.sliderTrack.style.background = "linear-gradient(to top, transparent, " + backgroundColor + ")";
+            this.alphaSlider.sliderTrack.style.background = "linear-gradient(to top, transparent, ".concat(backgroundColor, ")");
         }
     };
     Object.defineProperty(ColorGradientWithoutContext.prototype, "isUncontrolled", {

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

@@ -67,12 +67,15 @@ export declare class ColorPaletteWithoutContext extends React.Component<ColorPal
      * @hidden
      */
     static getDerivedStateFromProps(props: ColorPaletteProps, state: ColorPaletteState): {
+        selectedColor: undefined;
+        isFirstRender?: undefined;
+    } | {
         selectedColor: string;
         isFirstRender?: undefined;
     } | {
         isFirstRender: boolean;
         selectedColor?: undefined;
-    };
+    } | null;
     private onKeyDown;
     private onColorClick;
     private onFocus;

package/dist/es/colors/ColorPalette.js

@@ -43,6 +43,7 @@ var ColorPaletteWithoutContext = /** @class */ (function (_super) {
          * @hidden
          */
         _this.wrapper = null;
+        _this.paletteService = null;
         _this.guid = guid();
         /**
          * @hidden
@@ -83,9 +84,12 @@ var ColorPaletteWithoutContext = /** @class */ (function (_super) {
             _this.dispatchChangeEvent(color, event);
         };
         _this.onFocus = function (nativeEvent) {
+            if (!_this.paletteService) {
+                return;
+            }
             _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.props.onFocus.call(undefined, nativeEvent);
             }
         };
         _this.onBlur = function () {
@@ -142,6 +146,9 @@ var ColorPaletteWithoutContext = /** @class */ (function (_super) {
         return null;
     };
     ColorPaletteWithoutContext.prototype.handleCellNavigation = function (horizontalStep, verticalStep) {
+        if (!this.paletteService) {
+            return;
+        }
         if (this.focusedColorCooridanates) {
             var newCoords = this.paletteService.getNextCell(this.focusedColorCooridanates, horizontalStep, verticalStep);
             this.setState({ focusedColor: this.paletteService.getColorAt(newCoords) });
@@ -161,7 +168,7 @@ var ColorPaletteWithoutContext = /** @class */ (function (_super) {
     };
     Object.defineProperty(ColorPaletteWithoutContext.prototype, "focusedColorCooridanates", {
         get: function () {
-            return this.state.focusedColor ? this.paletteService.getCellCoordsFor(this.state.focusedColor) : undefined;
+            return this.state.focusedColor && this.paletteService ? this.paletteService.getCellCoordsFor(this.state.focusedColor) : undefined;
         },
         enumerable: false,
         configurable: true
@@ -216,7 +223,7 @@ var ColorPaletteWithoutContext = /** @class */ (function (_super) {
         });
     };
     ColorPaletteWithoutContext.prototype.createCellId = function (cellCoords) {
-        return this.guid + "_" + cellCoords.row + "_" + cellCoords.col;
+        return "".concat(this.guid, "_").concat(cellCoords.row, "_").concat(cellCoords.col);
     };
     ColorPaletteWithoutContext.displayName = 'ColorPalette';
     /**

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

@@ -26,4 +26,4 @@ export declare const ColorPickerPropsContext: React.Context<(p: ColorPickerProps
  * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-export declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<ColorPickerHandle>>;
+export declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<ColorPickerHandle | null>>;

package/dist/es/colors/ColorPicker.js

@@ -197,9 +197,9 @@ export var ColorPicker = React.forwardRef(function (directProps, target) {
     var dir = useDir(focusableElementRef, props.dir);
     var isValid = valid !== false;
     return (React.createElement("span", { id: props.id, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, className: classNames('k-colorpicker', 'k-picker', 'k-icon-picker', (_a = {},
-            _a["k-picker-" + (kendoThemeMaps.sizeMap[size] || size)] = size,
-            _a["k-picker-" + fillMode] = fillMode,
-            _a["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
+            _a["k-picker-".concat(kendoThemeMaps.sizeMap[size] || size)] = size,
+            _a["k-picker-".concat(fillMode)] = fillMode,
+            _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
             _a['k-invalid'] = !isValid,
             _a['k-disabled'] = disabled,
             _a['k-focus'] = focused,
@@ -210,7 +210,7 @@ export var ColorPicker = React.forwardRef(function (directProps, target) {
                         'k-icon-color-preview': (icon || iconClassName)
                     }) },
                     (iconClassName || icon) && React.createElement("span", { className: classNames('k-color-preview-icon', iconClassName, (_b = {},
-                            _b["k-icon k-i-" + icon] = (icon && !iconClassName),
+                            _b["k-icon k-i-".concat(icon)] = (icon && !iconClassName),
                             _b)) }),
                     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: 'arrow-s', "aria-label": localization.toLanguageString(colorPickerDropdownButtonAriaLabel, messages[colorPickerDropdownButtonAriaLabel]) })), content: (React.createElement(React.Fragment, null,
                 (view === 'combo' || view === 'gradient') && (React.createElement(ColorGradient, __assign({}, gradientSettings, { tabIndex: 0, ref: gradientRef, value: value, onChange: onChangeHandler }))),

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

@@ -68,4 +68,4 @@ export interface FlatColorPickerHandle {
 /**
  * Represents the FlatColorPicker component.
  */
-export declare const FlatColorPicker: React.ForwardRefExoticComponent<FlatColorPickerProps & React.RefAttributes<FlatColorPickerHandle>>;
+export declare const FlatColorPicker: React.ForwardRefExoticComponent<FlatColorPickerProps & React.RefAttributes<FlatColorPickerHandle | null>>;

package/dist/es/colors/FlatColorPicker.js

@@ -60,30 +60,31 @@ export var FlatColorPicker = React.forwardRef(function (props, ref) {
     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-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, fillMode: '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, fillMode: '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", fillMode: '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]))));
+        React.createElement(React.Fragment, null,
+            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, fillMode: '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, fillMode: '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", fillMode: '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,

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

@@ -23,7 +23,7 @@ export default class HexInput extends React.Component<HexInputProps, HexInputSta
     static getDerivedStateFromProps(props: HexInputProps, state: HexInputState): {
         hex: string;
         originalHex: string;
-    };
+    } | null;
     private onChange;
     private onBlur;
 }

package/dist/es/colors/utils/color-parser.js

@@ -10,7 +10,7 @@ export var parseColor = function (value, format, safe) {
     var allowedFormats = ['hex', 'rgba']; // TODO: constant?
     // Angular supports third type: name : const allowedFormats: Array<string> = ['hex', 'rgba', 'name'];
     if (allowedFormats.indexOf(format) === -1) {
-        throw new Error("Unsupported color output format '" + format + "'. The available options are 'hex' or 'rgba'.");
+        throw new Error("Unsupported color output format '".concat(format, "'. The available options are 'hex' or 'rgba'."));
     }
     if (!isPresent(value)) {
         return;
@@ -105,7 +105,7 @@ export var getRGBFromRGBA = function (foregroundColor, backgroundColor) {
  * Returns the relative luminance.
  */
 export var getLuminance = function (rgb) {
-    var a = [rgb.r, rgb.g, rgb.b].map(function (v) {
+    var a = [rgb.r || 0, rgb.g || 0, rgb.b || 0].map(function (v) {
         v /= 255;
         return v <= 0.03928
             ? v / 12.92

package/dist/es/colors/utils/svg-calc.js

@@ -19,11 +19,11 @@ export var svgPath = function (points, command) {
     var d = points.reduce(function (acc, point, i, a) {
         return i === 0 ?
             // if first point
-            "M " + point[0] + "," + point[1] :
+            "M ".concat(point[0], ",").concat(point[1]) :
             // else
-            acc + " " + command(point, i, a);
+            "".concat(acc, " ").concat(command(point, i, a));
     }, '');
-    return "<path d=\"" + d + "\" fill=\"none\" stroke=\"white\" stroke-width=\"1\"/>";
+    return "<path d=\"".concat(d, "\" fill=\"none\" stroke=\"white\" stroke-width=\"1\"/>");
 };
 /**
  * @hidden
@@ -99,5 +99,5 @@ export var bezierCommand = function (controlPointCalc) { return function (point,
     var _a = controlPointCalc(a[i - 1], a[i - 2], point), cpsX = _a[0], cpsY = _a[1];
     // end control point
     var _b = controlPointCalc(point, a[i - 1], a[i + 1], true), cpeX = _b[0], cpeY = _b[1];
-    return "C " + cpsX + "," + cpsY + " " + cpeX + "," + cpeY + " " + point[0] + "," + point[1];
+    return "C ".concat(cpsX, ",").concat(cpsY, " ").concat(cpeX, ",").concat(cpeY, " ").concat(point[0], ",").concat(point[1]);
 }; };

package/dist/es/common/SliderTooltip.js

@@ -15,8 +15,8 @@ export var SliderTooltip = function (props) {
             var top_1 = props.position === 'right'
                 ? (anchorRect.height / 2) - (rect.height / 2)
                 : -(rect.height * 1.5);
-            tooltipRef.current.style.left = left + "px";
-            tooltipRef.current.style.top = top_1 + "px";
+            tooltipRef.current.style.left = "".concat(left, "px");
+            tooltipRef.current.style.top = "".concat(top_1, "px");
         }
     };
     var handleAnimationStart = function () {
@@ -35,7 +35,7 @@ export var SliderTooltip = function (props) {
         if (!tooltipRef.current) {
             return;
         }
-        tooltipRef.current.style.opacity = "" + (props.show ? progress : 1 - progress);
+        tooltipRef.current.style.opacity = "".concat(props.show ? progress : 1 - progress);
     };
     React.useEffect(position);
     useAnimation({

package/dist/es/common/SwitchController.js

@@ -12,9 +12,13 @@ var noop = function () { };
  */
 var SwitchController = /** @class */ (function () {
     function SwitchController(updateView, onChange) {
-        var _this = this;
         if (updateView === void 0) { updateView = noop; }
         if (onChange === void 0) { onChange = noop; }
+        var _this = this;
+        this._checked = false;
+        this.reverse = false;
+        this.lastPressX = 0;
+        this.originalPressX = 0;
         this.overrideChecked = function (checked) {
             _this._checked = checked;
         };

package/dist/es/common/SwitchModel.d.ts

@@ -3,5 +3,5 @@
  */
 export default class Model {
     handle: any;
-    constructor(value: number, animate: boolean);
+    constructor(value: number | undefined, animate: boolean);
 }

package/dist/es/input/Input.js

@@ -46,6 +46,7 @@ var InputWithoutContext = /** @class */ (function (_super) {
     __extends(InputWithoutContext, _super);
     function InputWithoutContext(props) {
         var _this = _super.call(this, props) || this;
+        _this._input = null;
         _this._inputId = guid();
         /**
          * @hidden

package/dist/es/maskedtextbox/MaskedTextBox.d.ts

@@ -36,7 +36,7 @@ export declare class MaskedTextBoxWithoutContext extends React.Component<MaskedT
         includeLiterals: PropTypes.Requireable<boolean>;
         maskValidation: PropTypes.Requireable<boolean>;
         mask: PropTypes.Requireable<string>;
-        rules: (props: MaskedTextBoxProps, propName: string, componentName: string) => Error;
+        rules: (props: MaskedTextBoxProps, propName: string, componentName: string) => Error | null;
         selection: PropTypes.Requireable<PropTypes.InferProps<{
             start: PropTypes.Validator<number>;
             end: PropTypes.Validator<number>;
@@ -48,9 +48,9 @@ export declare class MaskedTextBoxWithoutContext extends React.Component<MaskedT
         valid: PropTypes.Requireable<boolean>;
         validityStyles: PropTypes.Requireable<boolean>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        size: PropTypes.Requireable<"small" | "medium" | "large">;
-        rounded: PropTypes.Requireable<"small" | "medium" | "full" | "large">;
-        fillMode: PropTypes.Requireable<"flat" | "solid" | "outline">;
+        size: PropTypes.Requireable<"small" | "medium" | "large" | null | undefined>;
+        rounded: PropTypes.Requireable<"small" | "medium" | "full" | "large" | null | undefined>;
+        fillMode: PropTypes.Requireable<"flat" | "outline" | "solid" | null | undefined>;
     };
     /**
      * @hidden
@@ -65,9 +65,9 @@ export declare class MaskedTextBoxWithoutContext extends React.Component<MaskedT
         };
         required: boolean;
         validityStyles: boolean;
-        size: "small" | "medium" | "large";
-        rounded: "small" | "medium" | "full" | "large";
-        fillMode: "flat" | "solid" | "outline";
+        size: "small" | "medium" | "large" | null | undefined;
+        rounded: "small" | "medium" | "full" | "large" | null | undefined;
+        fillMode: "flat" | "outline" | "solid" | null | undefined;
     };
     /**
      * @hidden

package/dist/es/maskedtextbox/MaskedTextBox.js

@@ -41,7 +41,7 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
          * @hidden
          */
         _this.state = {};
-        _this._inputId = "k-" + guid();
+        _this._inputId = "k-".concat(guid());
         _this._service = new MaskingService();
         _this._isPasted = false;
         _this._selection = [null, null];
@@ -286,9 +286,9 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
         var isValid = !this.validityStyles || this.validity.valid;
         var style = this.props.style || {};
         var component = (React.createElement("span", { dir: this.props.dir, className: classNames('k-maskedtextbox k-input', (_a = {},
-                _a["k-input-" + (kendoThemeMaps.sizeMap[size] || size)] = size,
-                _a["k-input-" + fillMode] = fillMode,
-                _a["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
+                _a["k-input-".concat(kendoThemeMaps.sizeMap[size] || size)] = size,
+                _a["k-input-".concat(fillMode)] = fillMode,
+                _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
                 _a['k-invalid'] = !isValid,
                 _a['k-required'] = this.required,
                 _a['k-disabled'] = this.props.disabled,
@@ -305,14 +305,15 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
         });
         if (this.props.onChange) {
             this._valueDuringOnChange = maskedValue;
-            this.props.onChange.call(undefined, {
+            var ev = {
                 syntheticEvent: event,
                 nativeEvent: event.nativeEvent,
                 selectionStart: this._selection[0],
                 selectionEnd: this._selection[1],
                 target: this,
                 value: this.value
-            });
+            };
+            this.props.onChange.call(undefined, ev);
             this._valueDuringOnChange = undefined;
         }
     };

package/dist/es/maskedtextbox/parsing/result.js

@@ -32,7 +32,7 @@ var Result = /** @class */ (function () {
         return this.map(function (vs, _) { return r.chain(function (v, __) { return vs.concat([v]); }); });
     };
     Result.prototype.toString = function () {
-        return "Result({ value: '" + this.value + "', rest: " + this.rest + " })";
+        return "Result({ value: '".concat(this.value, "', rest: ").concat(this.rest, " })");
     };
     return Result;
 }());

package/dist/es/numerictextbox/NumericTextBox.d.ts

@@ -11,4 +11,4 @@ export declare const NumericTextBoxPropsContext: React.Context<(p: NumericTextBo
 /**
  * Represents the [KendoReact NumericTextBox component]({% slug overview_numerictextbox %}).
  */
-export declare const NumericTextBox: React.ForwardRefExoticComponent<NumericTextBoxProps & React.RefAttributes<NumericTextBoxHandle>>;
+export declare const NumericTextBox: React.ForwardRefExoticComponent<NumericTextBoxProps & React.RefAttributes<NumericTextBoxHandle | null>>;

package/dist/es/numerictextbox/NumericTextBox.js

@@ -261,9 +261,9 @@ export var NumericTextBox = React.forwardRef(function (directProps, target) {
     var isValid = !validityStylesGetter() || validityGetter().valid;
     var numerictextbox = (React.createElement("span", { dir: props.dir, style: !props.label
             ? __assign({ width: props.width }, props.style) : props.style, className: classNames('k-input', 'k-numerictextbox', (_a = {},
-            _a["k-input-" + (kendoThemeMaps.sizeMap[props.size] || props.size)] = props.size,
-            _a["k-input-" + props.fillMode] = props.fillMode,
-            _a["k-rounded-" + (kendoThemeMaps.roundedMap[props.rounded] || props.rounded)] = props.rounded,
+            _a["k-input-".concat(kendoThemeMaps.sizeMap[props.size] || props.size)] = props.size,
+            _a["k-input-".concat(props.fillMode)] = props.fillMode,
+            _a["k-rounded-".concat(kendoThemeMaps.roundedMap[props.rounded] || props.rounded)] = props.rounded,
             _a['k-invalid'] = !isValid,
             _a['k-required'] = props.required,
             _a['k-disabled'] = props.disabled,

package/dist/es/numerictextbox/utils/index.js

@@ -233,7 +233,7 @@ export var getFormatSymbols = function (format, intlService) {
     var zeroResult = intlService.formatNumber(ZERO_NUMBER, format);
     var oneResult = intlService.formatNumber(ONE_NUMBER, format);
     var symbols = intlService.numberSymbols();
-    var sanitizeRegex = new RegExp("[\\d\\" + symbols.decimal + symbols.group + "]", 'g');
+    var sanitizeRegex = new RegExp("[\\d\\".concat(symbols.decimal).concat(symbols.group, "]"), 'g');
     var resultWithDuplicates = [positiveResult, negativeResult, zeroResult, oneResult]
         .map(function (result) { return result.replace(sanitizeRegex, ''); })
         .join('');
@@ -327,9 +327,9 @@ export var sanitizeNumber = function (state, format, intlService) {
     var restrictedSymbols = getFormatSymbols(format, intlService);
     var currentLooseValueAsString = String(newState.currentLooseValue);
     var prevLooseValueAsString = String(prevLooseValue);
-    var sanitizeRegex = new RegExp("[^\\d\\" + symbols.decimal + "]", 'g');
-    var sanitizeGroupRegex = new RegExp("[^\\d\\" + symbols.decimal + "\\" + symbols.group + "]", 'g');
-    var allSymbolsRegex = new RegExp("[\\d\\" + symbols.decimal + "\\" + symbols.group + "]");
+    var sanitizeRegex = new RegExp("[^\\d\\".concat(symbols.decimal, "]"), 'g');
+    var sanitizeGroupRegex = new RegExp("[^\\d\\".concat(symbols.decimal, "\\").concat(symbols.group, "]"), 'g');
+    var allSymbolsRegex = new RegExp("[\\d\\".concat(symbols.decimal, "\\").concat(symbols.group, "]"));
     var sanitizedString = currentLooseValueAsString.replace(sanitizeRegex, '');
     var numberStart = getFirstNumberIndex(currentLooseValueAsString, DIGITS_REGEX);
     var numberEnd = numberStart === -1 ? -1 : getLastNumberIndex(currentLooseValueAsString, DIGITS_REGEX);

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-inputs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1653648212,
+    publishDate: 1654509130,
     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/es/radiobutton/RadioButton.d.ts

@@ -20,4 +20,4 @@ export declare const RadioButtonPropsContext: React.Context<(p: RadioButtonProps
  * Accepts properties of type [RadioButtonProps]({% slug api_inputs_radiobuttonprops %}).
  * Obtaining the `ref` returns an object of type [RadioButtonHandle]({% slug api_inputs_radiobuttonhandle %}).
  */
-export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<RadioButtonHandle>>;
+export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<RadioButtonHandle | null>>;

package/dist/es/radiobutton/RadioButton.js

@@ -69,7 +69,7 @@ export var RadioButton = React.forwardRef(function (directProps, target) {
         }
     }, [onBlur, disabled]);
     var inputProps = __assign({ type: 'radio', id: id || calculatedId, name: name, className: classNames('k-radio', (_a = {},
-            _a["k-radio-" + (kendoThemeMaps.sizeMap[size] || size)] = size,
+            _a["k-radio-".concat(kendoThemeMaps.sizeMap[size] || size)] = size,
             _a['k-invalid'] = valid === false,
             _a), className), ref: elementRef, disabled: disabled, tabIndex: getTabIndex(tabIndex, disabled), checked: checked, style: style, 'aria-describedby': ariaDescribedBy, value: value, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur }, others);
     var radioButtonLabel = (React.createElement(React.Fragment, null, label !== undefined ? (React.createElement("label", { className: 'k-radio-label', htmlFor: id || calculatedId, style: { userSelect: 'none' }, "aria-label": label }, label)) : null));

package/dist/es/radiobutton/RadioGroup.d.ts

@@ -20,4 +20,4 @@ export declare const RadioGroupPropsContext: React.Context<(p: RadioGroupProps)
  * Accepts properties of type [RadioGroupProps]({% slug api_inputs_radiogroupprops %}).
  * Obtaining the `ref` returns an object of type [RadioGroupHandle]({% slug api_inputs_radiogrouphandle %}).
  */
-export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<RadioGroupHandle>>;
+export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<RadioGroupHandle | null>>;

package/dist/es/range-slider/RangeSlider.d.ts

@@ -135,4 +135,4 @@ export declare const RangeSliderPropsContext: React.Context<(p: RangeSliderProps
  * Accepts properties of type [RangeSliderProps]({% slug api_inputs_rangesliderprops %}).
  * Obtaining the `ref` returns an object of type [RangeSliderHandle]({% slug api_inputs_rangesliderhandle %}).
  */
-export declare const RangeSlider: React.ForwardRefExoticComponent<RangeSliderProps & React.RefAttributes<RangeSliderHandle>>;
+export declare const RangeSlider: React.ForwardRefExoticComponent<RangeSliderProps & React.RefAttributes<RangeSliderHandle | null>>;

package/dist/es/range-slider/RangeSlider.js

@@ -229,7 +229,7 @@ export var RangeSlider = React.forwardRef(function (directProps, ref) {
             React.createElement("div", { ref: sliderTrackRef, className: "k-slider-track", style: props.vertical
                     ? { bottom: 0, height: '100%' }
                     : (_a = {}, _a[dir === 'rtl' ? 'right' : 'left'] = 0, _a.width = '100%', _a) },
-                (percentStart !== null && percentEnd !== null) && React.createElement("div", { "data-selection": true, ref: sliderSelectionRef, title: value.start + " - " + value.end, className: "k-slider-selection", style: props.vertical
+                (percentStart !== null && percentEnd !== null) && React.createElement("div", { "data-selection": true, ref: sliderSelectionRef, title: "".concat(value.start, " - ").concat(value.end), className: "k-slider-selection", style: props.vertical
                         ? { height: (percentEnd - percentStart) + '%', bottom: percentStart + '%' }
                         : (_b = {},
                             _b[dir === 'rtl' ? 'right' : 'left'] = percentStart + '%',
@@ -252,7 +252,7 @@ var propTypes = {
             var min = props.min;
             var max = props.max;
             if (start > end || start > max || start < min || end > max || end < min || end < start) {
-                return new Error("Invalid prop + " + propName + " supplied to " + componentName + ".\n                    The { start, end } value must be between the min & max value and { start, end } must be start < end.\n                    ");
+                return new Error("Invalid prop + ".concat(propName, " supplied to ").concat(componentName, ".\n                    The { start, end } value must be between the min & max value and { start, end } must be start < end.\n                    "));
             }
         }
         return null;
@@ -264,7 +264,7 @@ var propTypes = {
             var min = props.min;
             var max = props.max;
             if (start > end || start > max || start < min || end > max || end < min || end < start) {
-                return new Error("Invalid prop + " + propName + " supplied to " + componentName + ".\n                    The { start, end } value must be between the min & max value and { start, end } must be start < end.\n                    ");
+                return new Error("Invalid prop + ".concat(propName, " supplied to ").concat(componentName, ".\n                    The { start, end } value must be between the min & max value and { start, end } must be start < end.\n                    "));
             }
         }
         return null;
@@ -276,10 +276,10 @@ var propTypes = {
         var min = props.min;
         var max = props.max;
         if (min === undefined) {
-            return new Error("Invalid prop + " + propName + " supplied to " + componentName + ".\n                " + propName + " value can not be undefined.\n                ");
+            return new Error("Invalid prop + ".concat(propName, " supplied to ").concat(componentName, ".\n                ").concat(propName, " value can not be undefined.\n                "));
         }
         if (prop && min >= max) {
-            return new Error("Invalid prop + " + propName + " supplied to " + componentName + ".\n                " + propName + " value can not be equal to or bigger than the max value.\n                ");
+            return new Error("Invalid prop + ".concat(propName, " supplied to ").concat(componentName, ".\n                ").concat(propName, " value can not be equal to or bigger than the max value.\n                "));
         }
         return null;
     },
@@ -288,10 +288,10 @@ var propTypes = {
         var min = props.min;
         var max = props.max;
         if (max === undefined) {
-            return new Error("Invalid prop + " + propName + " supplied to " + componentName + ".\n                " + propName + " value can not be undefined.\n                ");
+            return new Error("Invalid prop + ".concat(propName, " supplied to ").concat(componentName, ".\n                ").concat(propName, " value can not be undefined.\n                "));
         }
         if (prop && max <= min) {
-            return new Error("Invalid prop + " + propName + " supplied to " + componentName + ".\n                " + propName + " value can not be equal to or smaller than the min value.\n                ");
+            return new Error("Invalid prop + ".concat(propName, " supplied to ").concat(componentName, ".\n                ").concat(propName, " value can not be equal to or smaller than the min value.\n                "));
         }
         return null;
     },

package/dist/es/rating/Rating.d.ts

@@ -155,4 +155,4 @@ export declare const RatingPropsContext: React.Context<(p: RatingProps) => Ratin
  * Accepts properties of type [RatingProps]({% slug api_inputs_ratingprops %}).
  * Obtaining the `ref` returns an object of type [RatingHandle]({% slug api_inputs_ratinghandle %}).
  */
-export declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<RatingHandle>>;
+export declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<RatingHandle | null>>;