@progress/kendo-react-inputs 4.14.1 → 5.0.1

package/dist/npm/textarea/TextArea.js

@@ -48,10 +48,11 @@ exports.TextAreaPropsContext = kendo_react_common_1.createPropsContext();
  * ```
  */
 exports.TextArea = React.forwardRef(function (directProps, target) {
+    var _a;
     var props = kendo_react_common_1.usePropsContext(exports.TextAreaPropsContext, directProps);
-    var _a = props, ariaDescribedBy = _a.ariaDescribedBy, ariaLabelledBy = _a.ariaLabelledBy, autoSize = _a.autoSize, className = _a.className, defaultValue = _a.defaultValue, disabled = _a.disabled, readOnly = _a.readOnly, required = _a.required, rows = _a.rows, id = _a.id, name = _a.name, placeholder = _a.placeholder, style = _a.style, tabIndex = _a.tabIndex, value = _a.value, valid = _a.valid, validationMessage = _a.validationMessage, validityStyles = _a.validityStyles, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, 
+    var _b = props, size = _b.size, rounded = _b.rounded, fillMode = _b.fillMode, ariaDescribedBy = _b.ariaDescribedBy, ariaLabelledBy = _b.ariaLabelledBy, autoSize = _b.autoSize, className = _b.className, defaultValue = _b.defaultValue, disabled = _b.disabled, readOnly = _b.readOnly, required = _b.required, rows = _b.rows, id = _b.id, name = _b.name, placeholder = _b.placeholder, style = _b.style, tabIndex = _b.tabIndex, value = _b.value, valid = _b.valid, validationMessage = _b.validationMessage, validityStyles = _b.validityStyles, onChange = _b.onChange, onFocus = _b.onFocus, onBlur = _b.onBlur, 
     // Removed to support direct use in Form Field component
-    visited = _a.visited, touched = _a.touched, modified = _a.modified, others = __rest(_a, ["ariaDescribedBy", "ariaLabelledBy", "autoSize", "className", "defaultValue", "disabled", "readOnly", "required", "rows", "id", "name", "placeholder", "style", "tabIndex", "value", "valid", "validationMessage", "validityStyles", "onChange", "onFocus", "onBlur", "visited", "touched", "modified"]);
+    visited = _b.visited, touched = _b.touched, modified = _b.modified, others = __rest(_b, ["size", "rounded", "fillMode", "ariaDescribedBy", "ariaLabelledBy", "autoSize", "className", "defaultValue", "disabled", "readOnly", "required", "rows", "id", "name", "placeholder", "style", "tabIndex", "value", "valid", "validationMessage", "validityStyles", "onChange", "onFocus", "onBlur", "visited", "touched", "modified"]);
     var elementRef = React.useRef(null);
     var focusElement = React.useCallback(function () {
         if (elementRef.current) {
@@ -66,8 +67,8 @@ exports.TextArea = React.forwardRef(function (directProps, target) {
         });
     }, [focusElement]);
     React.useImperativeHandle(target, getImperativeHandle);
-    var _b = React.useState(defaultValue), stateValue = _b[0], setStateValue = _b[1];
-    var _c = React.useState('auto'), textAreaHeight = _c[0], setTextAreaHeight = _c[1];
+    var _c = React.useState(defaultValue), stateValue = _c[0], setStateValue = _c[1];
+    var _d = React.useState('auto'), textAreaHeight = _d[0], setTextAreaHeight = _d[1];
     var calculatedId = React.useMemo(function () { return kendo_react_common_1.guid(); }, []);
     var dir = kendo_react_common_1.useDir(elementRef, props.dir);
     var isControlled = value !== undefined;
@@ -109,16 +110,16 @@ exports.TextArea = React.forwardRef(function (directProps, target) {
             kendo_react_common_1.dispatchEvent(onBlur, event, getImperativeHandle(), undefined);
         }
     }, [onBlur, disabled]);
-    var spanProps = {
-        className: kendo_react_common_1.classNames('k-textarea', {
-            'k-state-invalid': !(isValid || validityStyles !== undefined || validityStyles === true),
-            'k-state-disabled': disabled
-        }, className),
-        style: style,
-        dir: dir
-    };
-    var textAreaProps = __assign({ id: id || calculatedId, name: name, className: 'k-input', ref: elementRef, disabled: disabled, rows: rows, placeholder: placeholder, readOnly: readOnly, required: required, tabIndex: kendo_react_common_1.getTabIndex(tabIndex, disabled), style: autoSize ? { resize: 'none', overflow: 'hidden', height: textAreaHeight } : {}, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-multiline': true, 'aria-disabled': disabled || undefined, value: isControlled ? value : stateValue }, others, { onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur });
-    return (React.createElement("span", __assign({}, spanProps),
+    var textAreaProps = __assign({ id: id || calculatedId, name: name, className: 'k-input-inner', ref: elementRef, disabled: disabled, rows: rows, placeholder: placeholder, readOnly: readOnly, required: required, tabIndex: kendo_react_common_1.getTabIndex(tabIndex, disabled), style: autoSize ? { resize: 'none', overflow: 'hidden', height: textAreaHeight } : {}, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-multiline': true, 'aria-disabled': disabled || undefined, value: isControlled ? value : stateValue }, others, { onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur });
+    return (React.createElement("span", { className: kendo_react_common_1.classNames('k-input', 'k-textarea', (_a = {},
+            _a["k-input-" + (kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
+            _a["k-input-" + fillMode] = fillMode,
+            _a["k-rounded-" + (kendo_react_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
+            _a['k-valid'] = (isValid || validityStyles !== undefined || validityStyles === true),
+            _a['k-invalid'] = !(isValid || validityStyles !== undefined || validityStyles === true),
+            _a['k-required'] = required,
+            _a['k-disabled'] = disabled,
+            _a), className), style: style, dir: dir },
         React.createElement("textarea", __assign({}, textAreaProps))));
 });
 exports.TextArea.propTypes = {
@@ -143,6 +144,15 @@ exports.TextArea.propTypes = {
     ]),
     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'])
+};
+var defaultProps = {
+    size: 'medium',
+    rounded: 'medium',
+    fillMode: 'solid'
 };
 exports.TextArea.displayName = 'KendoTextArea';
+exports.TextArea.defaultProps = defaultProps;

package/dist/npm/textarea/interfaces/TextAreaProps.d.ts

@@ -88,5 +88,42 @@ export interface TextAreaProps extends FormComponentProps, Omit<React.TextareaHT
      * The event handler that will be fired when TextArea is blurred.
      */
     onBlur?: (event: TextAreaBlurEvent) => void;
+    /**
+     * Configures the `size` of the TextArea.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the TextArea.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the TextArea.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - null&mdash;Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline';
 }
 export {};