@progress/kendo-react-inputs 4.14.1-dev.202201181415 → 5.0.1-dev.202201200659

package/dist/es/checkbox/Checkbox.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { Keys, classNames, guid, useDir, getTabIndex, dispatchEvent, createPropsContext, usePropsContext } from '@progress/kendo-react-common';
+import { Keys, classNames, guid, useDir, getTabIndex, dispatchEvent, createPropsContext, usePropsContext, kendoThemeMaps } from '@progress/kendo-react-common';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 import { useLocalization } from '@progress/kendo-react-intl';
@@ -46,11 +46,12 @@ export var CheckboxPropsContext = createPropsContext();
  * ```
  */
 export var Checkbox = React.forwardRef(function (directProps, target) {
+    var _a;
     validatePackage(packageMetadata);
     var props = usePropsContext(CheckboxPropsContext, directProps);
-    var _a = props, ariaDescribedBy = _a.ariaDescribedBy, ariaLabelledBy = _a.ariaLabelledBy, checked = _a.checked, className = _a.className, children = _a.children, defaultChecked = _a.defaultChecked, disabled = _a.disabled, defaultValue = _a.defaultValue, id = _a.id, label = _a.label, labelPlacement = _a.labelPlacement, name = _a.name, labelOptional = _a.labelOptional, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, tabIndex = _a.tabIndex, value = _a.value, required = _a.required, valid = _a.valid, validationMessage = _a.validationMessage, validityStyles = _a.validityStyles, 
+    var _b = props, ariaDescribedBy = _b.ariaDescribedBy, ariaLabelledBy = _b.ariaLabelledBy, checked = _b.checked, className = _b.className, children = _b.children, defaultChecked = _b.defaultChecked, disabled = _b.disabled, defaultValue = _b.defaultValue, id = _b.id, size = _b.size, rounded = _b.rounded, label = _b.label, labelPlacement = _b.labelPlacement, name = _b.name, labelOptional = _b.labelOptional, onChange = _b.onChange, onFocus = _b.onFocus, onBlur = _b.onBlur, tabIndex = _b.tabIndex, value = _b.value, required = _b.required, valid = _b.valid, validationMessage = _b.validationMessage, validityStyles = _b.validityStyles, 
     // Removed to support direct use in Form Field component
-    visited = _a.visited, touched = _a.touched, modified = _a.modified, others = __rest(_a, ["ariaDescribedBy", "ariaLabelledBy", "checked", "className", "children", "defaultChecked", "disabled", "defaultValue", "id", "label", "labelPlacement", "name", "labelOptional", "onChange", "onFocus", "onBlur", "tabIndex", "value", "required", "valid", "validationMessage", "validityStyles", "visited", "touched", "modified"]);
+    visited = _b.visited, touched = _b.touched, modified = _b.modified, others = __rest(_b, ["ariaDescribedBy", "ariaLabelledBy", "checked", "className", "children", "defaultChecked", "disabled", "defaultValue", "id", "size", "rounded", "label", "labelPlacement", "name", "labelOptional", "onChange", "onFocus", "onBlur", "tabIndex", "value", "required", "valid", "validationMessage", "validityStyles", "visited", "touched", "modified"]);
     var elementRef = React.useRef(null);
     var focusElement = React.useCallback(function () {
         if (elementRef.current) {
@@ -63,8 +64,8 @@ export var Checkbox = React.forwardRef(function (directProps, target) {
         get name() { return elementRef.current && elementRef.current.name; }
     }); }, [focusElement]);
     React.useImperativeHandle(target, getImperativeHandle);
-    var _b = React.useState(defaultChecked), stateChecked = _b[0], setStateChecked = _b[1];
-    var _c = React.useState(defaultValue), stateValue = _c[0], setStateValue = _c[1];
+    var _c = React.useState(defaultChecked), stateChecked = _c[0], setStateChecked = _c[1];
+    var _d = React.useState(defaultValue), stateValue = _d[0], setStateValue = _d[1];
     var valueIsBoolean = (typeof value === 'boolean' || value === null);
     var isCheckedControlled = checked !== undefined;
     var isValueControlled = valueIsBoolean;
@@ -141,11 +142,12 @@ export var Checkbox = React.forwardRef(function (directProps, target) {
     }, [onBlur, disabled, getImperativeHandle]);
     var dir = useDir(elementRef, props.dir);
     var checkboxClasses = classNames({ 'k-state-disabled': disabled }, className);
-    var inputProps = __assign({ type: 'checkbox', className: classNames({
-            'k-checkbox': true,
-            'k-state-indeterminate': indeterminateProp,
-            'k-state-invalid k-invalid': !(isValid || validityStyles !== undefined || validityStyles === true)
-        }), 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 ?
+    var inputProps = __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-state-indeterminate'] = indeterminateProp,
+            _a['k-state-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 ?
             true :
             indeterminateProp ?
                 'mixed' :
@@ -173,6 +175,8 @@ Checkbox.propTypes = {
     dir: PropTypes.string,
     disabled: PropTypes.bool,
     id: PropTypes.string,
+    size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
+    rounded: PropTypes.oneOf([null, 'small', 'medium', 'large']),
     ariaLabelledBy: PropTypes.string,
     ariaDescribedBy: PropTypes.string,
     label: PropTypes.any,
@@ -189,4 +193,9 @@ Checkbox.propTypes = {
     onFocus: PropTypes.func,
     onBlur: PropTypes.func
 };
+var defaultProps = {
+    size: 'medium',
+    rounded: 'medium'
+};
+Checkbox.defaultProps = defaultProps;
 Checkbox.displayName = 'KendoCheckbox';

package/dist/es/checkbox/interfaces/CheckboxProps.d.ts

@@ -12,7 +12,7 @@ declare type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
  * Represents the props of the [KendoReact Checkbox component]({% slug overview_checkbox %}).
  * Extends the [native input props](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement).
  */
-export interface CheckboxProps extends ToggleBaseProps, FormComponentProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'checked' | 'value' | 'onChange' | 'onFocus' | 'onBlur'> {
+export interface CheckboxProps extends ToggleBaseProps, FormComponentProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'checked' | 'value' | 'size' | 'onChange' | 'onFocus' | 'onBlur'> {
     /**
      * Sets the checked state of the Checkbox.
      * Set to null to enable the indeterminate state of the Checkbox ([see example]({% slug overview_checkbox %})).
@@ -53,6 +53,30 @@ export interface CheckboxProps extends ToggleBaseProps, FormComponentProps, Omit
      * Sets the `id` of the Checkbox.
      */
     id?: string;
+    /**
+     * Configures the `size` of the Checkbox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `rounded` style of the Checkbox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large';
     /**
      * 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/colors/ColorInput.js

@@ -66,10 +66,10 @@ var ColorInput = /** @class */ (function (_super) {
         var aMessage = localizationService.toLanguageString(colorGradientR, messages[colorGradientA]);
         return (React.createElement("div", { className: "k-colorgradient-inputs k-hstack" },
             React.createElement("div", { className: "k-vstack" },
-                React.createElement(Button, { look: 'flat', icon: 'arrows-kpi', className: "k-colorgradient-toggle-mode k-icon-button", onClick: this.onToggleModeChange.bind(this) })),
+                React.createElement(Button, { fillMode: 'flat', icon: 'arrows-kpi', className: "k-colorgradient-toggle-mode k-icon-button", onClick: this.onToggleModeChange.bind(this) })),
             this.state.inputMode === 'hex' &&
                 React.createElement("div", { className: "k-vstack k-flex-1" },
-                    React.createElement("span", { className: "k-hex-value k-textbox" },
+                    React.createElement("span", { className: "k-hex-value k-textbox k-input" },
                         React.createElement(HexInput, { hex: this.props.hex, onHexChange: this.props.onHexChange, disabled: this.props.disabled })),
                     React.createElement(Label, { className: "k-colorgradient-input-label" }, hexMessage)),
             (this.state.inputMode === 'rgb' || this.state.inputMode === 'rgba') &&

package/dist/es/colors/ColorPicker.js

@@ -11,12 +11,13 @@ var __assign = (this && this.__assign) || function () {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames, Keys, useDir, getTabIndex, createPropsContext, usePropsContext } from '@progress/kendo-react-common';
+import { classNames, Keys, useDir, getTabIndex, createPropsContext, usePropsContext, kendoThemeMaps } from '@progress/kendo-react-common';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 import { Picker } from './Picker';
 import { ColorGradient } from './ColorGradient';
 import { ColorPalette, DEFAULT_PRESET, DEFAULT_TILE_SIZE } from './ColorPalette';
+import { Button } from '@progress/kendo-react-buttons';
 /**
  * @hidden
  */
@@ -57,9 +58,10 @@ export var ColorPickerPropsContext = createPropsContext();
  * ```
  */
 export var ColorPicker = React.forwardRef(function (directProps, target) {
+    var _a, _b;
     validatePackage(packageMetadata);
     var props = usePropsContext(ColorPickerPropsContext, directProps);
-    var popupSettings = props.popupSettings, gradientSettings = props.gradientSettings, paletteSettings = props.paletteSettings, valid = props.valid, disabled = props.disabled, tabIndex = props.tabIndex, view = props.view, icon = props.icon, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, onActiveColorClick = props.onActiveColorClick;
+    var _c = props.size, size = _c === void 0 ? defaultProps.size : _c, _d = props.rounded, rounded = _d === void 0 ? defaultProps.rounded : _d, _e = props.fillMode, fillMode = _e === void 0 ? defaultProps.fillMode : _e, popupSettings = props.popupSettings, gradientSettings = props.gradientSettings, paletteSettings = props.paletteSettings, valid = props.valid, disabled = props.disabled, tabIndex = props.tabIndex, view = props.view, icon = props.icon, iconClassName = props.iconClassName, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, onActiveColorClick = props.onActiveColorClick;
     var focusableElementRef = React.useRef(null);
     var gradientRef = React.useRef(null);
     var paletteRef = React.useRef(null);
@@ -76,9 +78,9 @@ export var ColorPicker = React.forwardRef(function (directProps, target) {
         actionElement: buttonRef.current,
         focus: focusElement
     }); });
-    var _a = React.useState(false), focused = _a[0], setFocused = _a[1];
-    var _b = React.useState(props.defaultValue), stateValue = _b[0], setStateValue = _b[1];
-    var _c = React.useState(false), stateOpen = _c[0], setStateOpen = _c[1];
+    var _f = React.useState(false), focused = _f[0], setFocused = _f[1];
+    var _g = React.useState(props.defaultValue), stateValue = _g[0], setStateValue = _g[1];
+    var _h = React.useState(false), stateOpen = _h[0], setStateOpen = _h[1];
     var isValueControlled = isControlled(props.value);
     var isOpenControlled = isControlled(props.open);
     var value = isValueControlled ? props.value : stateValue;
@@ -190,24 +192,27 @@ export var ColorPicker = React.forwardRef(function (directProps, target) {
     }, [isValueControlled, onChange]);
     var onPaletteChangeHandler = React.useCallback(function (event) { return onChangeHandler(event, true); }, [isControlled, onChangeHandler]);
     var dir = useDir(focusableElementRef, props.dir);
-    var iconClassName = props.iconClassName || (icon && "k-icon k-i-" + icon);
-    var wrapperClassName = classNames({
-        'k-widget': true,
-        'k-colorpicker': true,
-        'k-state-invalid': valid === false
-    });
-    var className = React.useMemo(function () { return classNames({
-        'k-picker-wrap': true,
-        'k-state-disabled': disabled,
-        'k-state-focused': focused
-    }); }, [focused, disabled]);
-    return (React.createElement("span", { className: wrapperClassName, dir: dir },
-        React.createElement("span", { id: props.id, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, className: className, ref: focusableElementRef, tabIndex: getTabIndex(tabIndex, disabled), title: props.title, onKeyDown: onKeyDownHandler, onFocus: onFocusHandler, onBlur: onBlurHandler },
-            React.createElement(Picker, { dir: dir, open: open, onOpen: onOpenHandler, popupAnchor: focusableElementRef.current || undefined, popupSettings: __assign({}, popupSettings), input: (!iconClassName ? (React.createElement("span", { onClick: onActiveColorClickHandler, className: 'k-selected-color', style: { backgroundColor: value } }, !value && React.createElement("span", { className: 'k-icon k-i-line' }))) : (React.createElement("span", { onClick: onActiveColorClickHandler, className: classNames('k-tool-icon', iconClassName) },
-                    React.createElement("span", { className: 'k-selected-color', style: { backgroundColor: value } })))), button: (React.createElement("span", { onClick: onClickHandler, className: 'k-select', ref: buttonRef },
-                    React.createElement("span", { className: 'k-icon k-i-arrow-s' }))), content: (React.createElement(React.Fragment, null,
-                    (view === 'combo' || view === 'gradient') && (React.createElement(ColorGradient, __assign({}, gradientSettings, { tabIndex: 0, ref: gradientRef, value: value, onChange: onChangeHandler }))),
-                    (view === 'combo' || view === 'palette') && (React.createElement(ColorPalette, __assign({}, paletteSettings, { ref: paletteRef, value: value, onChange: onPaletteChangeHandler }))))) }))));
+    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-valid'] = isValid,
+            _a['k-invalid'] = !isValid,
+            _a['k-disabled'] = disabled,
+            _a['k-focus'] = focused,
+            _a)), ref: focusableElementRef, tabIndex: getTabIndex(tabIndex, disabled), title: props.title, onKeyDown: onKeyDownHandler, onFocus: onFocusHandler, onBlur: onBlurHandler, dir: dir },
+        React.createElement(Picker, { dir: dir, open: open, onOpen: onOpenHandler, popupAnchor: focusableElementRef.current || undefined, popupSettings: __assign({}, popupSettings), input: (React.createElement("span", { onClick: onActiveColorClickHandler, className: 'k-input-inner' },
+                React.createElement("span", { className: classNames('k-value-icon', 'k-color-preview', {
+                        'k-no-color': !value,
+                        '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)) }),
+                    React.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: value } })))), button: (React.createElement(Button, { type: "button", onClick: onClickHandler, className: "k-input-button", icon: 'arrow-s' })), content: (React.createElement(React.Fragment, null,
+                (view === 'combo' || view === 'gradient') && (React.createElement(ColorGradient, __assign({}, gradientSettings, { tabIndex: 0, ref: gradientRef, value: value, onChange: onChangeHandler }))),
+                (view === 'combo' || view === 'palette') && (React.createElement(ColorPalette, __assign({}, paletteSettings, { ref: paletteRef, value: value, onChange: onPaletteChangeHandler }))))) })));
 });
 ColorPicker.propTypes = {
     value: PropTypes.string,
@@ -217,11 +222,18 @@ ColorPicker.propTypes = {
     dir: PropTypes.string,
     id: PropTypes.string,
     ariaLabelledBy: PropTypes.string,
-    ariaDescribedBy: PropTypes.string
+    ariaDescribedBy: PropTypes.string,
+    size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
+    rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
+    fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline'])
 };
-ColorPicker.defaultProps = {
+var defaultProps = {
+    size: 'medium',
+    rounded: 'medium',
+    fillMode: 'solid',
     view: 'palette',
     gradientSettings: DEFAULT_GRADIENT_SETTINGS,
     paletteSettings: DEFAULT_PALETTE_SETTINGS
 };
+ColorPicker.defaultProps = defaultProps;
 ColorPicker.displayName = 'KendoColorPicker';

package/dist/es/colors/FlatColorPicker.js

@@ -64,14 +64,14 @@ export var FlatColorPicker = React.forwardRef(function (props, ref) {
             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, look: 'flat', selected: colorGradientView, onClick: function () { return handleViewChange('ColorGradient'); } },
+                        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, look: 'flat', selected: !colorGradientView, onClick: function () { return handleViewChange('ColorPalette'); } },
+                        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", look: 'flat', onClick: handleResetColor },
+                        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" },

package/dist/es/colors/HexInput.js

@@ -14,6 +14,7 @@ var __extends = (this && this.__extends) || (function () {
 import * as React from 'react';
 import { parseColor } from './utils/color-parser';
 import { isPresent } from './utils/misc';
+import { Input } from '../input/Input';
 /**
  * @hidden
  */
@@ -38,7 +39,7 @@ var HexInput = /** @class */ (function (_super) {
         return _this;
     }
     HexInput.prototype.render = function () {
-        return (React.createElement("input", { value: this.state.hex, className: "k-input", onChange: this.onChange, onBlur: this.onBlur, disabled: this.props.disabled }));
+        return (React.createElement(Input, { value: this.state.hex, onChange: this.onChange, onBlur: this.onBlur, disabled: this.props.disabled }));
     };
     HexInput.getDerivedStateFromProps = function (props, state) {
         if (props.hex !== state.originalHex) {

package/dist/es/colors/interfaces/ColorPickerProps.d.ts

@@ -108,4 +108,41 @@ export interface ColorPickerProps {
      * The event handler that will be fired when the left side of the ColorPicker is clicked.
      */
     onActiveColorClick?: (event: ColorPickerActiveColorClick) => void;
+    /**
+     * Configures the `size` of the ColorPicker.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the ColorPicker.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null—Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the ColorPicker.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - null—Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline';
 }

package/dist/es/input/Input.js

@@ -199,7 +199,7 @@ var InputWithoutContext = /** @class */ (function (_super) {
         visited = _a.visited, touched = _a.touched, modified = _a.modified, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy, validityStyles = _a.validityStyles, style = _a.style, props = __rest(_a, ["className", "label", "id", "validationMessage", "defaultValue", "valid", "visited", "touched", "modified", "ariaLabelledBy", "ariaDescribedBy", "validityStyles", "style"]);
         var inputId = id || this._inputId;
         var isValid = !this.validityStyles || this.validity.valid;
-        var inputClassName = classNames(className, 'k-textbox');
+        var inputClassName = classNames(className, 'k-input k-input-md k-rounded-md k-input-solid');
         var textbox = (React.createElement("input", __assign({ "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy }, props, { style: !label
                 ? style
                 : undefined, value: this.value, id: inputId, className: inputClassName, onChange: this.handleChange, onAnimationStart: this.handleAutoFill, ref: function (el) {

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

@@ -48,6 +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" | "large" | "full">;
+        fillMode: PropTypes.Requireable<"solid" | "flat" | "outline">;
     };
     /**
      * @hidden
@@ -62,6 +65,9 @@ export declare class MaskedTextBoxWithoutContext extends React.Component<MaskedT
         };
         required: boolean;
         validityStyles: boolean;
+        size: "small" | "medium" | "large";
+        rounded: "small" | "medium" | "large" | "full";
+        fillMode: "solid" | "flat" | "outline";
     };
     /**
      * @hidden

package/dist/es/maskedtextbox/MaskedTextBox.js

@@ -26,7 +26,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 } from '@progress/kendo-react-common';
+import { guid, classNames, getTabIndex, withPropsContext, createPropsContext, kendoThemeMaps } from '@progress/kendo-react-common';
 import { FloatingLabel } from '@progress/kendo-react-labels';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
@@ -278,16 +278,22 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
      */
     MaskedTextBoxWithoutContext.prototype.render = function () {
         var _this = this;
+        var _a;
+        var _b = this.props, _c = _b.size, size = _c === void 0 ? MaskedTextBoxWithoutContext.defaultProps.size : _c, _d = _b.fillMode, fillMode = _d === void 0 ? MaskedTextBoxWithoutContext.defaultProps.fillMode : _d, _e = _b.rounded, rounded = _e === void 0 ? MaskedTextBoxWithoutContext.defaultProps.rounded : _e;
         var inputId = this.props.id || this._inputId;
         var isValid = !this.validityStyles || this.validity.valid;
         var style = this.props.style || {};
-        var component = (React.createElement("span", { dir: this.props.dir, className: classNames('k-widget k-maskedtextbox', this.props.className, {
-                'k-state-focused': this.state.focused,
-                'k-state-disabled': this.props.disabled,
-                'k-state-invalid': !isValid
-            }), style: !this.props.label
+        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-valid'] = isValid,
+                _a['k-invalid'] = !isValid,
+                _a['k-required'] = this.required,
+                _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-textbox", 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("input", { type: "text", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, className: "k-input 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 })));
         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;
@@ -376,7 +382,10 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
         required: PropTypes.bool,
         valid: PropTypes.bool,
         validityStyles: PropTypes.bool,
-        onChange: PropTypes.func
+        onChange: PropTypes.func,
+        size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
+        rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
+        fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline'])
     };
     /**
      * @hidden
@@ -388,7 +397,10 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
         maskValidation: true,
         rules: defaultRules,
         required: false,
-        validityStyles: true
+        validityStyles: true,
+        size: 'medium',
+        rounded: 'medium',
+        fillMode: 'solid'
     };
     return MaskedTextBoxWithoutContext;
 }(React.Component));

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

@@ -149,4 +149,41 @@ export interface MaskedTextBoxProps extends FormComponentProps {
      * Fires each time the MaskedTextBox gets blurred.
      */
     onBlur?: (event: MaskedTextBoxEvent) => void;
+    /**
+     * Configures the `size` of the MaskedTextBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the MaskedTextBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null—Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the MaskedTextBox.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - null—Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline';
 }

package/dist/es/numerictextbox/NumericTextBox.js

@@ -1,12 +1,13 @@
 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 } from '@progress/kendo-react-common';
+import { classNames, guid, getTabIndex, dispatchEvent, createPropsContext, usePropsContext, kendoThemeMaps } from '@progress/kendo-react-common';
 import { FloatingLabel } from '@progress/kendo-react-labels';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 import { numericIncreaseValue, messages, numericDecreaseValue } from '../messages';
 import { formatValue, sanitizeNumber, rangeValue, increaseValue, decreaseValue, getStateOrPropsValue, getInitialState } from './utils';
+import { Button } from '@progress/kendo-react-buttons';
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
 /**
  * Represents the PropsContext of the `NumericTextBox` component.
@@ -19,6 +20,7 @@ export var NumericTextBoxPropsContext = createPropsContext();
  * Represents the [KendoReact NumericTextBox component]({% slug overview_numerictextbox %}).
  */
 export var NumericTextBox = React.forwardRef(function (directProps, target) {
+    var _a;
     validatePackage(packageMetadata);
     var props = usePropsContext(NumericTextBoxPropsContext, directProps);
     var calculatedId = React.useMemo(function () { return guid(); }, []);
@@ -26,9 +28,8 @@ export var NumericTextBox = React.forwardRef(function (directProps, target) {
     var intlService = useInternationalization();
     var localizationService = useLocalization();
     var elementRef = React.useRef(null);
-    var elementWrapperRef = React.useRef(null);
     var valueDuringChangeRef = React.useRef();
-    var _a = React.useState(false), forceUpdate = _a[0], setForceUpdate = _a[1];
+    var _b = React.useState(false), forceUpdate = _b[0], setForceUpdate = _b[1];
     var stateRef = React.useRef(getInitialState());
     var isPasteRef = React.useRef(false);
     var prevLooseValueRef = React.useRef();
@@ -123,13 +124,6 @@ export var NumericTextBox = React.forwardRef(function (directProps, target) {
             newState.eventValue = rangedValue;
             stateValueRef.current = rangedValue;
         }
-        if (newState.valueIsCorrected) {
-            var wrapper_1 = elementWrapperRef.current;
-            if (wrapper_1 && wrapper_1.className.indexOf('k-state-invalid') === -1) {
-                wrapper_1.className += ' k-state-invalid';
-                window.setTimeout(function () { return wrapper_1.className = wrapper_1.className.replace(' k-state-invalid', ''); }, 50);
-            }
-        }
         var shouldFireEvent = props.value !== newState.eventValue;
         if (shouldFireEvent) {
             dispatchEvent(props.onChange, event, getImperativeHandle(), { value: newState.eventValue });
@@ -256,24 +250,21 @@ export var NumericTextBox = React.forwardRef(function (directProps, target) {
     var isValid = !validityStylesGetter() || validityGetter().valid;
     var numerictextbox = (React.createElement("span", { dir: props.dir, style: !props.label
             ? { width: props.width }
-            : undefined, className: 'k-widget k-numerictextbox' + (props.className ? ' ' + props.className : ''), "aria-disabled": props.disabled ? 'true' : undefined },
-        React.createElement("span", { className: classNames('k-numeric-wrap', {
-                'k-state-disabled': props.disabled,
-                'k-state-invalid': !isValid,
-                'k-state-focused': stateRef.current.focused
-            }), ref: elementWrapperRef },
-            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-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, placeholder: props.placeholder, spellCheck: false, autoComplete: 'off', autoCorrect: 'off', type: props.inputType || 'tel', className: 'k-input k-formatted-value', id: inputId, name: props.name, readOnly: props.readOnly, onChange: onChangeHandler, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onPaste: onPasteHandler, onWheel: onWheelHandler, ref: elementRef }),
-            props.children,
-            props.spinners &&
-                (React.createElement("span", { className: "k-select", onMouseDown: onMouseDown },
-                    React.createElement("span", { className: "k-link k-link-increase", "aria-label": localizationService
-                            .toLanguageString(numericIncreaseValue, messages[numericIncreaseValue]), title: localizationService
-                            .toLanguageString(numericIncreaseValue, messages[numericIncreaseValue]), onClick: onIncrease },
-                        React.createElement("span", { className: "k-icon k-i-arrow-n" })),
-                    React.createElement("span", { className: "k-link k-link-decrease", "aria-label": localizationService
-                            .toLanguageString(numericDecreaseValue, messages[numericDecreaseValue]), title: localizationService
-                            .toLanguageString(numericDecreaseValue, messages[numericDecreaseValue]), onClick: onDecrease },
-                        React.createElement("span", { className: "k-icon k-i-arrow-s" })))))));
+            : undefined, 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-valid'] = isValid,
+            _a['k-invalid'] = !isValid,
+            _a['k-required'] = props.required,
+            _a['k-disabled'] = props.disabled,
+            _a), props.className), "aria-disabled": props.disabled ? 'true' : undefined },
+        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-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, onChange: onChangeHandler, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onPaste: onPasteHandler, onWheel: onWheelHandler, ref: elementRef }),
+        props.children,
+        props.spinners &&
+            (React.createElement("span", { className: "k-input-spinner k-spin-button", onMouseDown: onMouseDown },
+                React.createElement(Button, { type: "button", icon: 'arrow-n', className: "k-spinner-increase", "aria-label": localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue]), title: localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue]), onClick: onIncrease }),
+                React.createElement(Button, { type: "button", className: "k-spinner-decrease", icon: 'arrow-s', "aria-label": localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue]), title: localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue]), onClick: onDecrease })))));
     return props.label
         ? (React.createElement(FloatingLabel, { label: props.label, editorId: inputId, editorValue: looseValue === null ? '' : looseValue, editorValid: isValid, editorDisabled: props.disabled, editorPlaceholder: props.placeholder, children: numerictextbox, style: { width: props.width }, dir: props.dir }))
         : numerictextbox;
@@ -318,7 +309,10 @@ NumericTextBox.propTypes = {
     ariaDescribedBy: PropTypes.string,
     onChange: PropTypes.func,
     onFocus: PropTypes.func,
-    onBlur: PropTypes.func
+    onBlur: PropTypes.func,
+    size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
+    rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
+    fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline'])
 };
 NumericTextBox.displayName = 'KendoNumericTextBox';
 NumericTextBox.defaultProps = {
@@ -330,5 +324,8 @@ NumericTextBox.defaultProps = {
     rangeOnEnter: true,
     onChange: function (_) { return; },
     onFocus: function (_) { return; },
-    onBlur: function (_) { return; }
+    onBlur: function (_) { return; },
+    size: 'medium',
+    rounded: 'medium',
+    fillMode: 'solid'
 };

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

@@ -124,5 +124,42 @@ export interface NumericTextBoxProps extends FormComponentProps {
     onBlur?: (event: NumericTextBoxBlurEvent) => void;
     /** @hidden */
     children?: React.ReactNode;
+    /**
+     * Configures the `size` of the NumericTextBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the NumericTextBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null—Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the NumericTextBox.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - null—Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline';
 }
 export {};