@progress/kendo-react-inputs 5.10.0-dev.202212021149 → 5.10.0-dev.202212021346

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

@@ -24,6 +24,8 @@ export declare class MaskedTextBoxWithoutContext extends React.Component<MaskedT
         id: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
+        prefix: PropTypes.Requireable<any>;
+        suffix: PropTypes.Requireable<any>;
         ariaLabelledBy: PropTypes.Requireable<string>;
         ariaDescribedBy: PropTypes.Requireable<string>;
         width: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
@@ -65,6 +67,8 @@ export declare class MaskedTextBoxWithoutContext extends React.Component<MaskedT
         };
         required: boolean;
         validityStyles: boolean;
+        prefix: (_: any) => null;
+        suffix: (_: any) => null;
         size: "small" | "medium" | "large" | null | undefined;
         rounded: "small" | "medium" | "full" | "large" | null | undefined;
         fillMode: "flat" | "outline" | "solid" | null | undefined;

package/dist/es/maskedtextbox/MaskedTextBox.js

@@ -28,7 +28,7 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { MaskingService } from './masking.service';
 import { defaultRules, maskingChanged, returnFalse } from './utils';
-import { guid, classNames, getTabIndex, withPropsContext, createPropsContext, kendoThemeMaps } from '@progress/kendo-react-common';
+import { guid, classNames, getTabIndex, withPropsContext, createPropsContext, kendoThemeMaps, useCustomComponent } from '@progress/kendo-react-common';
 import { FloatingLabel } from '@progress/kendo-react-labels';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
@@ -285,6 +285,9 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
         var inputId = this.props.id || this._inputId;
         var isValid = !this.validityStyles || this.validity.valid;
         var style = this.props.style || {};
+        var _f = this.props, _g = _f.prefix, prefix = _g === void 0 ? MaskedTextBoxWithoutContext.defaultProps.prefix : _g, _h = _f.suffix, suffix = _h === void 0 ? MaskedTextBoxWithoutContext.defaultProps.suffix : _h;
+        var Prefix = useCustomComponent(prefix)[0];
+        var Suffix = useCustomComponent(suffix)[0];
         var component = (React.createElement("span", { dir: this.props.dir, className: classNames('k-maskedtextbox k-input', (_a = {},
                 _a["k-input-".concat(kendoThemeMaps.sizeMap[size] || size)] = size,
                 _a["k-input-".concat(fillMode)] = fillMode,
@@ -294,7 +297,9 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
                 _a['k-disabled'] = this.props.disabled,
                 _a), this.props.className), style: !this.props.label
                 ? __assign({ width: this.props.width }, style) : style },
-            React.createElement("input", { type: "text", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, className: "k-input-inner", value: this.value, id: inputId, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, name: this.props.name, tabIndex: getTabIndex(this.props.tabIndex, this.props.disabled, true), accessKey: this.props.accessKey, title: this.props.title, disabled: this.props.disabled || undefined, readOnly: this.props.readonly || undefined, placeholder: this.props.placeholder, ref: function (input) { return _this._input = input; }, onChange: this.onChangeHandler, onPaste: this.pasteHandler, onFocus: this.focusHandler, onBlur: this.blurHandler, onDragStart: returnFalse, onDrop: returnFalse })));
+            React.createElement(Prefix, null),
+            React.createElement("input", { type: "text", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, className: "k-input-inner", value: this.value, id: inputId, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, name: this.props.name, tabIndex: getTabIndex(this.props.tabIndex, this.props.disabled, true), accessKey: this.props.accessKey, title: this.props.title, disabled: this.props.disabled || undefined, readOnly: this.props.readonly || undefined, placeholder: this.props.placeholder, ref: function (input) { return _this._input = input; }, onChange: this.onChangeHandler, onPaste: this.pasteHandler, onFocus: this.focusHandler, onBlur: this.blurHandler, onDragStart: returnFalse, onDrop: returnFalse }),
+            React.createElement(Suffix, null)));
         return this.props.label
             ? (React.createElement(FloatingLabel, { label: this.props.label, editorId: inputId, editorValue: this.value, editorValid: isValid, editorDisabled: this.props.disabled, editorPlaceholder: this.props.placeholder, children: component, style: { width: this.props.width }, dir: this.props.dir }))
             : component;
@@ -347,6 +352,8 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
         id: PropTypes.string,
         style: PropTypes.object,
         className: PropTypes.string,
+        prefix: PropTypes.any,
+        suffix: PropTypes.any,
         ariaLabelledBy: PropTypes.string,
         ariaDescribedBy: PropTypes.string,
         width: PropTypes.oneOfType([
@@ -400,6 +407,8 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
         rules: defaultRules,
         required: false,
         validityStyles: true,
+        prefix: function (_) { return null; },
+        suffix: function (_) { return null; },
         size: 'medium',
         rounded: 'medium',
         fillMode: 'solid'

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { FormComponentProps } from '@progress/kendo-react-common';
+import { CustomComponent, FormComponentProps } from '@progress/kendo-react-common';
 import { MaskedTextBox } from './MaskedTextBox';
 /**
  * The arguments for a MaskedTextBox event.
@@ -91,6 +91,14 @@ export interface MaskedTextBoxProps extends FormComponentProps {
      * Sets the `id` of the `input` DOM element.
      */
     id?: string;
+    /**
+     * Sets a custom prefix to the MaskedTextBox component.
+     */
+    prefix?: CustomComponent<any>;
+    /**
+     * Sets a custom suffix to the MaskedTextBox component.
+     */
+    suffix?: CustomComponent<any>;
     /**
      * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
      * For example these elements could contain error or hint message.

package/dist/es/numerictextbox/NumericTextBox.js

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { useInternationalization, useLocalization } from '@progress/kendo-react-intl';
-import { classNames, guid, getTabIndex, dispatchEvent, createPropsContext, usePropsContext, kendoThemeMaps } from '@progress/kendo-react-common';
+import { classNames, guid, getTabIndex, dispatchEvent, createPropsContext, usePropsContext, kendoThemeMaps, useCustomComponent } from '@progress/kendo-react-common';
 import { FloatingLabel } from '@progress/kendo-react-labels';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
@@ -49,6 +49,8 @@ export var NumericTextBox = React.forwardRef(function (directProps, target) {
         stateRef.current.currentLooseValue :
         getStateOrPropsValue(props.value, stateValueRef.current), props.format, intlService);
     prevLooseValueRef.current = looseValue;
+    var Prefix = useCustomComponent(props.prefix)[0];
+    var Suffix = useCustomComponent(props.suffix)[0];
     React.useEffect(function () {
         if (elementRef.current && elementRef.current.setCustomValidity) {
             elementRef.current.setCustomValidity(validityGetter().valid
@@ -270,7 +272,9 @@ export var NumericTextBox = React.forwardRef(function (directProps, target) {
             _a['k-required'] = props.required,
             _a['k-disabled'] = props.disabled,
             _a), props.className), "aria-disabled": props.disabled ? 'true' : undefined },
+        React.createElement(Prefix, null),
         React.createElement("input", { value: looseValue === null ? '' : looseValue, tabIndex: getTabIndex(props.tabIndex, props.disabled), accessKey: props.accessKey, disabled: props.disabled, title: props.title, "aria-valuemin": props.min, "aria-valuemax": props.max, "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, placeholder: props.placeholder, spellCheck: false, autoComplete: 'off', autoCorrect: 'off', type: props.inputType || 'tel', className: 'k-input-inner', id: inputId, name: props.name, readOnly: props.readOnly, style: props.inputStyle, onChange: onChangeHandler, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onPaste: onPasteHandler, onWheel: onWheelHandler, ref: elementRef }),
+        React.createElement(Suffix, null),
         props.children,
         props.spinners &&
             (React.createElement("span", { className: "k-input-spinner k-spin-button", onMouseDown: onMouseDown },
@@ -328,6 +332,8 @@ NumericTextBox.propTypes = {
 };
 NumericTextBox.displayName = 'KendoNumericTextBox';
 NumericTextBox.defaultProps = {
+    prefix: function (_) { return null; },
+    suffix: function (_) { return null; },
     step: 1,
     spinners: true,
     disabled: false,

package/dist/es/numerictextbox/interfaces/NumericTextBoxProps.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { FormComponentProps } from '@progress/kendo-react-common';
+import { CustomComponent, FormComponentProps } from '@progress/kendo-react-common';
 import { NumberFormatOptions } from '@progress/kendo-react-intl';
 import { NumericTextBoxChangeEvent } from './NumericTextBoxChangeEvent';
 import { NumericTextBoxFocusEvent } from './NumericTextBoxFocusEvent';
@@ -81,6 +81,14 @@ export interface NumericTextBoxProps extends FormComponentProps {
      * Sets the `id` of the `input` DOM element.
      */
     id?: string;
+    /**
+     * Sets a custom prefix to the NumericTextBox component.
+     */
+    prefix?: CustomComponent<any>;
+    /**
+     * Sets a custom suffix to the NumericTextBox component.
+     */
+    suffix?: CustomComponent<any>;
     /**
      * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
      * For example these elements could contain error or hint message.

package/dist/es/package-metadata.js

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

@@ -53,7 +53,13 @@ export interface TextBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputEl
      * Indicates if the component is in `valid` state
      */
     valid?: boolean;
+    /**
+     * Sets a custom prefix to the TextBox component.
+     */
     prefix?: CustomComponent<any>;
+    /**
+     * Sets a custom suffix to the TextBox component.
+     */
     suffix?: CustomComponent<any>;
 }
 /**

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

@@ -24,6 +24,8 @@ export declare class MaskedTextBoxWithoutContext extends React.Component<MaskedT
         id: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
+        prefix: PropTypes.Requireable<any>;
+        suffix: PropTypes.Requireable<any>;
         ariaLabelledBy: PropTypes.Requireable<string>;
         ariaDescribedBy: PropTypes.Requireable<string>;
         width: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
@@ -65,6 +67,8 @@ export declare class MaskedTextBoxWithoutContext extends React.Component<MaskedT
         };
         required: boolean;
         validityStyles: boolean;
+        prefix: (_: any) => null;
+        suffix: (_: any) => null;
         size: "small" | "medium" | "large" | null | undefined;
         rounded: "small" | "medium" | "full" | "large" | null | undefined;
         fillMode: "flat" | "outline" | "solid" | null | undefined;

package/dist/npm/maskedtextbox/MaskedTextBox.js

@@ -288,6 +288,9 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
         var inputId = this.props.id || this._inputId;
         var isValid = !this.validityStyles || this.validity.valid;
         var style = this.props.style || {};
+        var _f = this.props, _g = _f.prefix, prefix = _g === void 0 ? MaskedTextBoxWithoutContext.defaultProps.prefix : _g, _h = _f.suffix, suffix = _h === void 0 ? MaskedTextBoxWithoutContext.defaultProps.suffix : _h;
+        var Prefix = (0, kendo_react_common_1.useCustomComponent)(prefix)[0];
+        var Suffix = (0, kendo_react_common_1.useCustomComponent)(suffix)[0];
         var component = (React.createElement("span", { dir: this.props.dir, className: (0, kendo_react_common_1.classNames)('k-maskedtextbox k-input', (_a = {},
                 _a["k-input-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
                 _a["k-input-".concat(fillMode)] = fillMode,
@@ -297,7 +300,9 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
                 _a['k-disabled'] = this.props.disabled,
                 _a), this.props.className), style: !this.props.label
                 ? __assign({ width: this.props.width }, style) : style },
-            React.createElement("input", { type: "text", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, className: "k-input-inner", value: this.value, id: inputId, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, name: this.props.name, tabIndex: (0, kendo_react_common_1.getTabIndex)(this.props.tabIndex, this.props.disabled, true), accessKey: this.props.accessKey, title: this.props.title, disabled: this.props.disabled || undefined, readOnly: this.props.readonly || undefined, placeholder: this.props.placeholder, ref: function (input) { return _this._input = input; }, onChange: this.onChangeHandler, onPaste: this.pasteHandler, onFocus: this.focusHandler, onBlur: this.blurHandler, onDragStart: utils_1.returnFalse, onDrop: utils_1.returnFalse })));
+            React.createElement(Prefix, null),
+            React.createElement("input", { type: "text", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, className: "k-input-inner", value: this.value, id: inputId, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, name: this.props.name, tabIndex: (0, kendo_react_common_1.getTabIndex)(this.props.tabIndex, this.props.disabled, true), accessKey: this.props.accessKey, title: this.props.title, disabled: this.props.disabled || undefined, readOnly: this.props.readonly || undefined, placeholder: this.props.placeholder, ref: function (input) { return _this._input = input; }, onChange: this.onChangeHandler, onPaste: this.pasteHandler, onFocus: this.focusHandler, onBlur: this.blurHandler, onDragStart: utils_1.returnFalse, onDrop: utils_1.returnFalse }),
+            React.createElement(Suffix, null)));
         return this.props.label
             ? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: this.props.label, editorId: inputId, editorValue: this.value, editorValid: isValid, editorDisabled: this.props.disabled, editorPlaceholder: this.props.placeholder, children: component, style: { width: this.props.width }, dir: this.props.dir }))
             : component;
@@ -350,6 +355,8 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
         id: PropTypes.string,
         style: PropTypes.object,
         className: PropTypes.string,
+        prefix: PropTypes.any,
+        suffix: PropTypes.any,
         ariaLabelledBy: PropTypes.string,
         ariaDescribedBy: PropTypes.string,
         width: PropTypes.oneOfType([
@@ -403,6 +410,8 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
         rules: utils_1.defaultRules,
         required: false,
         validityStyles: true,
+        prefix: function (_) { return null; },
+        suffix: function (_) { return null; },
         size: 'medium',
         rounded: 'medium',
         fillMode: 'solid'

package/dist/npm/maskedtextbox/MaskedTextBoxProps.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { FormComponentProps } from '@progress/kendo-react-common';
+import { CustomComponent, FormComponentProps } from '@progress/kendo-react-common';
 import { MaskedTextBox } from './MaskedTextBox';
 /**
  * The arguments for a MaskedTextBox event.
@@ -91,6 +91,14 @@ export interface MaskedTextBoxProps extends FormComponentProps {
      * Sets the `id` of the `input` DOM element.
      */
     id?: string;
+    /**
+     * Sets a custom prefix to the MaskedTextBox component.
+     */
+    prefix?: CustomComponent<any>;
+    /**
+     * Sets a custom suffix to the MaskedTextBox component.
+     */
+    suffix?: CustomComponent<any>;
     /**
      * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
      * For example these elements could contain error or hint message.

package/dist/npm/numerictextbox/NumericTextBox.js

@@ -52,6 +52,8 @@ exports.NumericTextBox = React.forwardRef(function (directProps, target) {
         stateRef.current.currentLooseValue :
         (0, utils_1.getStateOrPropsValue)(props.value, stateValueRef.current), props.format, intlService);
     prevLooseValueRef.current = looseValue;
+    var Prefix = (0, kendo_react_common_1.useCustomComponent)(props.prefix)[0];
+    var Suffix = (0, kendo_react_common_1.useCustomComponent)(props.suffix)[0];
     React.useEffect(function () {
         if (elementRef.current && elementRef.current.setCustomValidity) {
             elementRef.current.setCustomValidity(validityGetter().valid
@@ -273,7 +275,9 @@ exports.NumericTextBox = React.forwardRef(function (directProps, target) {
             _a['k-required'] = props.required,
             _a['k-disabled'] = props.disabled,
             _a), props.className), "aria-disabled": props.disabled ? 'true' : undefined },
+        React.createElement(Prefix, null),
         React.createElement("input", { value: looseValue === null ? '' : looseValue, tabIndex: (0, kendo_react_common_1.getTabIndex)(props.tabIndex, props.disabled), accessKey: props.accessKey, disabled: props.disabled, title: props.title, "aria-valuemin": props.min, "aria-valuemax": props.max, "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, placeholder: props.placeholder, spellCheck: false, autoComplete: 'off', autoCorrect: 'off', type: props.inputType || 'tel', className: 'k-input-inner', id: inputId, name: props.name, readOnly: props.readOnly, style: props.inputStyle, onChange: onChangeHandler, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onPaste: onPasteHandler, onWheel: onWheelHandler, ref: elementRef }),
+        React.createElement(Suffix, null),
         props.children,
         props.spinners &&
             (React.createElement("span", { className: "k-input-spinner k-spin-button", onMouseDown: onMouseDown },
@@ -331,6 +335,8 @@ exports.NumericTextBox.propTypes = {
 };
 exports.NumericTextBox.displayName = 'KendoNumericTextBox';
 exports.NumericTextBox.defaultProps = {
+    prefix: function (_) { return null; },
+    suffix: function (_) { return null; },
     step: 1,
     spinners: true,
     disabled: false,

package/dist/npm/numerictextbox/interfaces/NumericTextBoxProps.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { FormComponentProps } from '@progress/kendo-react-common';
+import { CustomComponent, FormComponentProps } from '@progress/kendo-react-common';
 import { NumberFormatOptions } from '@progress/kendo-react-intl';
 import { NumericTextBoxChangeEvent } from './NumericTextBoxChangeEvent';
 import { NumericTextBoxFocusEvent } from './NumericTextBoxFocusEvent';
@@ -81,6 +81,14 @@ export interface NumericTextBoxProps extends FormComponentProps {
      * Sets the `id` of the `input` DOM element.
      */
     id?: string;
+    /**
+     * Sets a custom prefix to the NumericTextBox component.
+     */
+    prefix?: CustomComponent<any>;
+    /**
+     * Sets a custom suffix to the NumericTextBox component.
+     */
+    suffix?: CustomComponent<any>;
     /**
      * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
      * For example these elements could contain error or hint message.

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-inputs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1669980746,
+    publishDate: 1669987761,
     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/npm/textbox/Textbox.d.ts

@@ -53,7 +53,13 @@ export interface TextBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputEl
      * Indicates if the component is in `valid` state
      */
     valid?: boolean;
+    /**
+     * Sets a custom prefix to the TextBox component.
+     */
     prefix?: CustomComponent<any>;
+    /**
+     * Sets a custom suffix to the TextBox component.
+     */
     suffix?: CustomComponent<any>;
 }
 /**