@rmwc/textfield - npm Package Compare versions

Comparing version 7.0.3 to 8.0.0

dist/index.d.ts

 import * as RMWC from '@rmwc/types';
 import React from 'react';
 import { IconProps } from '@rmwc/icon';
-import { MDCTextFieldCharacterCounterFoundation, MDCTextFieldIconFoundation, MDCTextFieldFoundation } from '@material/textfield';
+import { MDCTextFieldIconFoundation, MDCTextFieldFoundation } from '@material/textfield';
 /*********************************************************************
@@ -32,4 +32,2 @@ * TextField
     textarea?: boolean;
-    /** Makes the TextField fullwidth. */
-    fullwidth?: boolean;
     /** Add a leading icon. */
@@ -45,4 +43,10 @@ icon?: RMWC.IconPropT;
     type?: string;
+    /** Add prefix. */
+    prefix?: string;
+    /** Add suffix. */
+    suffix?: string;
     /** Advanced: A reference to the MDCFoundation. */
     foundationRef?: React.Ref<MDCTextFieldFoundation | null>;
+    /** Make textarea resizeable */
+    resizeable?: boolean;
 }
@@ -53,11 +57,2 @@ export declare type TextFieldHTMLProps = RMWC.HTMLProps<HTMLInputElement, Omit<React.AllHTMLAttributes<HTMLInputElement>, 'label'>>;
 /*********************************************************************
- * Character Count
- *********************************************************************/
-export interface TextFieldCharacterCountApi {
-    getFoundation: () => MDCTextFieldCharacterCounterFoundation;
-}
-export interface TextFieldCharacterCountProps extends IconProps {
-    apiRef?: (api: TextFieldCharacterCountApi | null) => void;
-}
-/*********************************************************************
  * Helper Text
@@ -64,0 +59,0 @@ *********************************************************************/

dist/index.js

@@ -13,8 +13,7 @@ "use strict";
 var textfield_icon_foundation_1 = require("./textfield-icon-foundation");
-var textfield_character_count_foundation_1 = require("./textfield-character-count-foundation");
 var textfield_foundation_1 = require("./textfield-foundation");
 /** A TextField component for accepting text input from a user. */
 exports.TextField = base_1.createComponent(function TextField(props, ref) {
-    var label = props.label, style = props.style, outlined = props.outlined, align = props.align, fullwidth = props.fullwidth, invalid = props.invalid, disabled = props.disabled, helpText = props.helpText, children = props.children, textarea = props.textarea, inputRef = props.inputRef, characterCount = props.characterCount, icon = props.icon, trailingIcon = props.trailingIcon, _a = props.rootProps, rootProps = _a === void 0 ? {} : _a, foundationRef = props.foundationRef, ripple = props.ripple, userFloatLabel = props.floatLabel, rest = tslib_1.__rest(props, ["label", "style", "outlined", "align", "fullwidth", "invalid", "disabled", "helpText", "children", "textarea", "inputRef", "characterCount", "icon", "trailingIcon", "rootProps", "foundationRef", "ripple", "floatLabel"]);
-    var _b = textfield_foundation_1.useTextFieldFoundation(props), rootEl = _b.rootEl, inputEl = _b.inputEl, shakeLabel = _b.shakeLabel, floatLabel = _b.floatLabel, notchWidth = _b.notchWidth, lineRippleActive = _b.lineRippleActive, lineRippleCenter = _b.lineRippleCenter, setLeadingIcon = _b.setLeadingIcon, setTrailingIcon = _b.setTrailingIcon, setFloatingLabel = _b.setFloatingLabel, setCharacterCounter = _b.setCharacterCounter;
+    var label = props.label, style = props.style, outlined = props.outlined, align = props.align, invalid = props.invalid, disabled = props.disabled, helpText = props.helpText, children = props.children, textarea = props.textarea, inputRef = props.inputRef, characterCount = props.characterCount, icon = props.icon, trailingIcon = props.trailingIcon, _a = props.rootProps, rootProps = _a === void 0 ? {} : _a, foundationRef = props.foundationRef, ripple = props.ripple, prefix = props.prefix, suffix = props.suffix, resizeable = props.resizeable, userFloatLabel = props.floatLabel, rest = tslib_1.__rest(props, ["label", "style", "outlined", "align", "invalid", "disabled", "helpText", "children", "textarea", "inputRef", "characterCount", "icon", "trailingIcon", "rootProps", "foundationRef", "ripple", "prefix", "suffix", "resizeable", "floatLabel"]);
+    var _b = textfield_foundation_1.useTextFieldFoundation(props), rootEl = _b.rootEl, inputEl = _b.inputEl, shakeLabel = _b.shakeLabel, floatLabel = _b.floatLabel, notchWidth = _b.notchWidth, lineRippleActive = _b.lineRippleActive, lineRippleCenter = _b.lineRippleCenter, setLeadingIcon = _b.setLeadingIcon, setTrailingIcon = _b.setTrailingIcon, setFloatingLabel = _b.setFloatingLabel, characterCountContent = _b.characterCountContent;
     var id = base_1.useId('textfield', props);
@@ -26,4 +25,4 @@ var labelId = id + '-label';
         {
+            'mdc-text-field--filled': !outlined,
             'mdc-text-field--textarea': textarea,
-            'mdc-text-field--fullwidth': fullwidth,
             'mdc-text-field--outlined': outlined,
@@ -35,3 +34,4 @@ 'mdc-text-field--invalid': invalid,
             'mdc-text-field--no-label': !label,
-            'mdc-text-field--end-aligned': align === 'end'
+            'mdc-text-field--end-aligned': align === 'end',
+            'mdc-text-field--with-internal-counter': textarea && characterCount
         }
@@ -56,3 +56,8 @@ ]);
     var renderedLabel = label ? (react_1.default.createElement(floating_label_1.FloatingLabel, { shake: shakeLabel, float: floatLabel, apiRef: setFloatingLabel, id: labelId }, label)) : null;
-    var renderedCharacterCounter = characterCount ? (react_1.default.createElement(TextFieldCharacterCount, { apiRef: setCharacterCounter })) : null;
+    var renderedCharacterCounter = characterCount ? (react_1.default.createElement("div", { className: "mdc-text-field-character-counter" }, characterCountContent)) : null;
+    var renderTextarea = resizeable ? (react_1.default.createElement("span", { className: "mdc-text-field__resizer" },
+        react_1.default.createElement(base_1.Tag, tslib_1.__assign({}, rest, { element: inputEl, className: "mdc-text-field__input", disabled: disabled, tag: "textarea", ref: inputRef })),
+        renderedCharacterCounter)) : (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(base_1.Tag, tslib_1.__assign({}, rest, { element: inputEl, className: "mdc-text-field__input", disabled: disabled, tag: "textarea", ref: inputRef })),
+        renderedCharacterCounter));
     return (react_1.default.createElement(react_1.default.Fragment, null,
@@ -62,5 +67,6 @@ react_1.default.createElement(TextFieldRoot, tslib_1.__assign({}, rootProps, { element: rootEl, style: style, className: className, ref: ref, "aria-labelledby": labelId }),
             children,
-            !!textarea && renderedCharacterCounter,
             react_1.default.createElement(TextFieldRipple, null),
-            react_1.default.createElement(base_1.Tag, tslib_1.__assign({}, rest, { element: inputEl, className: "mdc-text-field__input", disabled: disabled, tag: textarea ? 'textarea' : 'input', ref: inputRef })),
+            !!prefix && !textarea && react_1.default.createElement(TextFieldPrefix, { prefix: prefix }),
+            textarea ? (renderTextarea) : (react_1.default.createElement(base_1.Tag, tslib_1.__assign({}, rest, { element: inputEl, className: "mdc-text-field__input", disabled: disabled, tag: "input", ref: inputRef }))),
+            !!suffix && !textarea && react_1.default.createElement(TextFieldSuffix, { suffix: suffix }),
             !!outlined ? (react_1.default.createElement(react_1.default.Fragment, null,
@@ -80,6 +86,10 @@ react_1.default.createElement(notched_outline_1.NotchedOutline, { notch: notchWidth }, renderedLabel),
 }));
-var TextFieldCharacterCount = react_1.default.memo(function TextFieldCharacterCount(props) {
-    var content = textfield_character_count_foundation_1.useTextFieldCharacterCountFoundation(props).content;
-    return react_1.default.createElement("div", { className: "mdc-text-field-character-counter" }, content);
+var TextFieldPrefix = react_1.default.memo(function TextFieldPrefix(_a) {
+    var prefix = _a.prefix;
+    return (react_1.default.createElement("span", { className: "mdc-text-field__affix mdc-text-field__affix--prefix" }, prefix));
 });
+var TextFieldSuffix = react_1.default.memo(function TextFieldSuffix(_a) {
+    var suffix = _a.suffix;
+    return (react_1.default.createElement("span", { className: "mdc-text-field__affix mdc-text-field__affix--suffix" }, suffix));
+});
 /** A help text component */
@@ -95,3 +105,3 @@ exports.TextFieldHelperText = base_1.createComponent(function TextFieldHelperText(props, ref) {
     ]);
-    return react_1.default.createElement(base_1.Tag, tslib_1.__assign({ tag: "p" }, rest, { className: className, ref: ref }));
+    return react_1.default.createElement(base_1.Tag, tslib_1.__assign({ tag: "div" }, rest, { className: className, ref: ref }));
 });
@@ -98,0 +108,0 @@ /** An Icon in a TextField */

dist/readme.js

@@ -24,4 +24,2 @@ "use strict";
             react_1.default.createElement(_1.TextField, { outlined: true, label: "outlined..." })),
-        react_1.default.createElement(_doc_utils_1.DocsExample, { label: "Full Width" },
-            react_1.default.createElement(_1.TextField, { fullwidth: true, placeholder: "fullWidth..." })),
         react_1.default.createElement(_doc_utils_1.DocsExample, { label: "No Label" },
@@ -40,7 +38,8 @@ react_1.default.createElement(_1.TextField, { placeholder: "No label" })),
         react_1.default.createElement(_doc_utils_1.DocsExample, null,
-            react_1.default.createElement(_1.TextField, { textarea: true, outlined: true, fullwidth: true, label: "textarea...", rows: 8, maxLength: 20, characterCount: true, helpText: {
-                    persistent: true,
-                    validationMsg: true,
-                    children: 'The field is required'
-                } })),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(_1.TextField, { textarea: true, label: "textarea...", rows: 8, maxLength: 20, characterCount: true, resizeable: true, helpText: {
+                        persistent: true,
+                        validationMsg: true,
+                        children: 'The field is required'
+                    } }))),
         react_1.default.createElement(_doc_utils_1.DocsSubtitle, null, "Validation"),
@@ -47,0 +46,0 @@ react_1.default.createElement(_doc_utils_1.DocsExample, { label: "Disabled" },

dist/textfield-character-count-foundation.d.ts

@@ -1,4 +0,10 @@
-import { TextFieldCharacterCountProps } from '.';
+import { MDCTextFieldCharacterCounterFoundation } from '@material/textfield';
+export interface TextFieldCharacterCountApi {
+    getFoundation: () => MDCTextFieldCharacterCounterFoundation;
+}
+export interface TextFieldCharacterCountProps {
+    apiRef?: (api: TextFieldCharacterCountApi | null) => void;
+}
 export declare const useTextFieldCharacterCountFoundation: (props: TextFieldCharacterCountProps) => {
     content: string | undefined;
 };

dist/textfield-foundation.d.ts

@@ -1,3 +0,4 @@
-import { TextFieldProps, TextFieldCharacterCountApi, TextFieldIconApi } from '.';
+import { TextFieldProps, TextFieldIconApi } from '.';
 import { FloatingLabelApi } from '@rmwc/floating-label';
+import { TextFieldCharacterCountApi } from './textfield-character-count-foundation';
 export declare const useTextFieldFoundation: (props: TextFieldProps) => {
@@ -11,6 +12,7 @@ rootEl: import("@rmwc/base").FoundationElement<any, HTMLElement>;
     lineRippleCenter: number;
-    setCharacterCounter: (api: TextFieldCharacterCountApi | null) => TextFieldCharacterCountApi | null;
+    setCharacterCounter: (api: TextFieldCharacterCountApi | null) => void;
     setLeadingIcon: (api: TextFieldIconApi | null) => TextFieldIconApi | null;
     setTrailingIcon: (api: TextFieldIconApi | null) => TextFieldIconApi | null;
     setFloatingLabel: (api: FloatingLabelApi | null) => FloatingLabelApi | null;
+    characterCountContent: string | undefined;
 };

dist/textfield-foundation.js

@@ -8,2 +8,3 @@ "use strict";
 var textfield_1 = require("@material/textfield");
+var textfield_character_count_foundation_1 = require("./textfield-character-count-foundation");
 var useTextFieldFoundation = function (props) {
@@ -17,3 +18,3 @@ var _a = tslib_1.__read(react_1.useState(false), 2), lineRippleActive = _a[0], setLineRippleActive = _a[1];
     var setCharacterCounter = function (api) {
-        return (characterCounter.current = api);
+        characterCounter.current = api;
     };
@@ -32,2 +33,5 @@ var leadingIcon = react_1.useRef();
     };
+    var characterCountContent = textfield_character_count_foundation_1.useTextFieldCharacterCountFoundation({
+        apiRef: props.characterCount ? setCharacterCounter : undefined
+    }).content;
     var _f = base_1.useFoundation({
@@ -139,12 +143,4 @@ props: props,
     }, [foundation, props.floatLabel]);
-    return tslib_1.__assign({ shakeLabel: shakeLabel,
-        floatLabel: floatLabel,
-        notchWidth: notchWidth,
-        lineRippleActive: lineRippleActive,
-        lineRippleCenter: lineRippleCenter,
-        setCharacterCounter: setCharacterCounter,
-        setLeadingIcon: setLeadingIcon,
-        setTrailingIcon: setTrailingIcon,
-        setFloatingLabel: setFloatingLabel }, elements);
+    return tslib_1.__assign({ shakeLabel: shakeLabel, floatLabel: floatLabel, notchWidth: notchWidth, lineRippleActive: lineRippleActive, lineRippleCenter: lineRippleCenter, setCharacterCounter: setCharacterCounter, setLeadingIcon: setLeadingIcon, setTrailingIcon: setTrailingIcon, setFloatingLabel: setFloatingLabel, characterCountContent: characterCountContent }, elements);
 };
 exports.useTextFieldFoundation = useTextFieldFoundation;

next/index.d.ts

 import * as RMWC from '@rmwc/types';
 import React from 'react';
 import { IconProps } from '@rmwc/icon';
-import { MDCTextFieldCharacterCounterFoundation, MDCTextFieldIconFoundation, MDCTextFieldFoundation } from '@material/textfield';
+import { MDCTextFieldIconFoundation, MDCTextFieldFoundation } from '@material/textfield';
 /*********************************************************************
@@ -32,4 +32,2 @@ * TextField
     textarea?: boolean;
-    /** Makes the TextField fullwidth. */
-    fullwidth?: boolean;
     /** Add a leading icon. */
@@ -45,4 +43,10 @@ icon?: RMWC.IconPropT;
     type?: string;
+    /** Add prefix. */
+    prefix?: string;
+    /** Add suffix. */
+    suffix?: string;
     /** Advanced: A reference to the MDCFoundation. */
     foundationRef?: React.Ref<MDCTextFieldFoundation | null>;
+    /** Make textarea resizeable */
+    resizeable?: boolean;
 }
@@ -53,11 +57,2 @@ export declare type TextFieldHTMLProps = RMWC.HTMLProps<HTMLInputElement, Omit<React.AllHTMLAttributes<HTMLInputElement>, 'label'>>;
 /*********************************************************************
- * Character Count
- *********************************************************************/
-export interface TextFieldCharacterCountApi {
-    getFoundation: () => MDCTextFieldCharacterCounterFoundation;
-}
-export interface TextFieldCharacterCountProps extends IconProps {
-    apiRef?: (api: TextFieldCharacterCountApi | null) => void;
-}
-/*********************************************************************
  * Helper Text
@@ -64,0 +59,0 @@ *********************************************************************/

next/index.js

@@ -10,8 +10,7 @@ import { __assign, __rest } from "tslib";
 import { useTextFieldIconFoundation } from './textfield-icon-foundation';
-import { useTextFieldCharacterCountFoundation } from './textfield-character-count-foundation';
 import { useTextFieldFoundation } from './textfield-foundation';
 /** A TextField component for accepting text input from a user. */
 export var TextField = createComponent(function TextField(props, ref) {
-    var label = props.label, style = props.style, outlined = props.outlined, align = props.align, fullwidth = props.fullwidth, invalid = props.invalid, disabled = props.disabled, helpText = props.helpText, children = props.children, textarea = props.textarea, inputRef = props.inputRef, characterCount = props.characterCount, icon = props.icon, trailingIcon = props.trailingIcon, _a = props.rootProps, rootProps = _a === void 0 ? {} : _a, foundationRef = props.foundationRef, ripple = props.ripple, userFloatLabel = props.floatLabel, rest = __rest(props, ["label", "style", "outlined", "align", "fullwidth", "invalid", "disabled", "helpText", "children", "textarea", "inputRef", "characterCount", "icon", "trailingIcon", "rootProps", "foundationRef", "ripple", "floatLabel"]);
-    var _b = useTextFieldFoundation(props), rootEl = _b.rootEl, inputEl = _b.inputEl, shakeLabel = _b.shakeLabel, floatLabel = _b.floatLabel, notchWidth = _b.notchWidth, lineRippleActive = _b.lineRippleActive, lineRippleCenter = _b.lineRippleCenter, setLeadingIcon = _b.setLeadingIcon, setTrailingIcon = _b.setTrailingIcon, setFloatingLabel = _b.setFloatingLabel, setCharacterCounter = _b.setCharacterCounter;
+    var label = props.label, style = props.style, outlined = props.outlined, align = props.align, invalid = props.invalid, disabled = props.disabled, helpText = props.helpText, children = props.children, textarea = props.textarea, inputRef = props.inputRef, characterCount = props.characterCount, icon = props.icon, trailingIcon = props.trailingIcon, _a = props.rootProps, rootProps = _a === void 0 ? {} : _a, foundationRef = props.foundationRef, ripple = props.ripple, prefix = props.prefix, suffix = props.suffix, resizeable = props.resizeable, userFloatLabel = props.floatLabel, rest = __rest(props, ["label", "style", "outlined", "align", "invalid", "disabled", "helpText", "children", "textarea", "inputRef", "characterCount", "icon", "trailingIcon", "rootProps", "foundationRef", "ripple", "prefix", "suffix", "resizeable", "floatLabel"]);
+    var _b = useTextFieldFoundation(props), rootEl = _b.rootEl, inputEl = _b.inputEl, shakeLabel = _b.shakeLabel, floatLabel = _b.floatLabel, notchWidth = _b.notchWidth, lineRippleActive = _b.lineRippleActive, lineRippleCenter = _b.lineRippleCenter, setLeadingIcon = _b.setLeadingIcon, setTrailingIcon = _b.setTrailingIcon, setFloatingLabel = _b.setFloatingLabel, characterCountContent = _b.characterCountContent;
     var id = useId('textfield', props);
@@ -23,4 +22,4 @@ var labelId = id + '-label';
         {
+            'mdc-text-field--filled': !outlined,
             'mdc-text-field--textarea': textarea,
-            'mdc-text-field--fullwidth': fullwidth,
             'mdc-text-field--outlined': outlined,
@@ -32,3 +31,4 @@ 'mdc-text-field--invalid': invalid,
             'mdc-text-field--no-label': !label,
-            'mdc-text-field--end-aligned': align === 'end'
+            'mdc-text-field--end-aligned': align === 'end',
+            'mdc-text-field--with-internal-counter': textarea && characterCount
         }
@@ -53,3 +53,8 @@ ]);
     var renderedLabel = label ? (React.createElement(FloatingLabel, { shake: shakeLabel, float: floatLabel, apiRef: setFloatingLabel, id: labelId }, label)) : null;
-    var renderedCharacterCounter = characterCount ? (React.createElement(TextFieldCharacterCount, { apiRef: setCharacterCounter })) : null;
+    var renderedCharacterCounter = characterCount ? (React.createElement("div", { className: "mdc-text-field-character-counter" }, characterCountContent)) : null;
+    var renderTextarea = resizeable ? (React.createElement("span", { className: "mdc-text-field__resizer" },
+        React.createElement(Tag, __assign({}, rest, { element: inputEl, className: "mdc-text-field__input", disabled: disabled, tag: "textarea", ref: inputRef })),
+        renderedCharacterCounter)) : (React.createElement(React.Fragment, null,
+        React.createElement(Tag, __assign({}, rest, { element: inputEl, className: "mdc-text-field__input", disabled: disabled, tag: "textarea", ref: inputRef })),
+        renderedCharacterCounter));
     return (React.createElement(React.Fragment, null,
@@ -59,5 +64,6 @@ React.createElement(TextFieldRoot, __assign({}, rootProps, { element: rootEl, style: style, className: className, ref: ref, "aria-labelledby": labelId }),
             children,
-            !!textarea && renderedCharacterCounter,
             React.createElement(TextFieldRipple, null),
-            React.createElement(Tag, __assign({}, rest, { element: inputEl, className: "mdc-text-field__input", disabled: disabled, tag: textarea ? 'textarea' : 'input', ref: inputRef })),
+            !!prefix && !textarea && React.createElement(TextFieldPrefix, { prefix: prefix }),
+            textarea ? (renderTextarea) : (React.createElement(Tag, __assign({}, rest, { element: inputEl, className: "mdc-text-field__input", disabled: disabled, tag: "input", ref: inputRef }))),
+            !!suffix && !textarea && React.createElement(TextFieldSuffix, { suffix: suffix }),
             !!outlined ? (React.createElement(React.Fragment, null,
@@ -77,6 +83,10 @@ React.createElement(NotchedOutline, { notch: notchWidth }, renderedLabel),
 }));
-var TextFieldCharacterCount = React.memo(function TextFieldCharacterCount(props) {
-    var content = useTextFieldCharacterCountFoundation(props).content;
-    return React.createElement("div", { className: "mdc-text-field-character-counter" }, content);
+var TextFieldPrefix = React.memo(function TextFieldPrefix(_a) {
+    var prefix = _a.prefix;
+    return (React.createElement("span", { className: "mdc-text-field__affix mdc-text-field__affix--prefix" }, prefix));
 });
+var TextFieldSuffix = React.memo(function TextFieldSuffix(_a) {
+    var suffix = _a.suffix;
+    return (React.createElement("span", { className: "mdc-text-field__affix mdc-text-field__affix--suffix" }, suffix));
+});
 /** A help text component */
@@ -92,3 +102,3 @@ export var TextFieldHelperText = createComponent(function TextFieldHelperText(props, ref) {
     ]);
-    return React.createElement(Tag, __assign({ tag: "p" }, rest, { className: className, ref: ref }));
+    return React.createElement(Tag, __assign({ tag: "div" }, rest, { className: className, ref: ref }));
 });
@@ -95,0 +105,0 @@ /** An Icon in a TextField */

next/readme.js

@@ -20,4 +20,2 @@ import React from 'react';
             React.createElement(TextField, { outlined: true, label: "outlined..." })),
-        React.createElement(DocsExample, { label: "Full Width" },
-            React.createElement(TextField, { fullwidth: true, placeholder: "fullWidth..." })),
         React.createElement(DocsExample, { label: "No Label" },
@@ -36,7 +34,8 @@ React.createElement(TextField, { placeholder: "No label" })),
         React.createElement(DocsExample, null,
-            React.createElement(TextField, { textarea: true, outlined: true, fullwidth: true, label: "textarea...", rows: 8, maxLength: 20, characterCount: true, helpText: {
-                    persistent: true,
-                    validationMsg: true,
-                    children: 'The field is required'
-                } })),
+            React.createElement("div", null,
+                React.createElement(TextField, { textarea: true, label: "textarea...", rows: 8, maxLength: 20, characterCount: true, resizeable: true, helpText: {
+                        persistent: true,
+                        validationMsg: true,
+                        children: 'The field is required'
+                    } }))),
         React.createElement(DocsSubtitle, null, "Validation"),
@@ -43,0 +42,0 @@ React.createElement(DocsExample, { label: "Disabled" },

next/textfield-character-count-foundation.d.ts

@@ -1,4 +0,10 @@
-import { TextFieldCharacterCountProps } from '.';
+import { MDCTextFieldCharacterCounterFoundation } from '@material/textfield';
+export interface TextFieldCharacterCountApi {
+    getFoundation: () => MDCTextFieldCharacterCounterFoundation;
+}
+export interface TextFieldCharacterCountProps {
+    apiRef?: (api: TextFieldCharacterCountApi | null) => void;
+}
 export declare const useTextFieldCharacterCountFoundation: (props: TextFieldCharacterCountProps) => {
     content: string | undefined;
 };

next/textfield-foundation.d.ts

@@ -1,3 +0,4 @@
-import { TextFieldProps, TextFieldCharacterCountApi, TextFieldIconApi } from '.';
+import { TextFieldProps, TextFieldIconApi } from '.';
 import { FloatingLabelApi } from '@rmwc/floating-label';
+import { TextFieldCharacterCountApi } from './textfield-character-count-foundation';
 export declare const useTextFieldFoundation: (props: TextFieldProps) => {
@@ -11,6 +12,7 @@ rootEl: import("@rmwc/base").FoundationElement<any, HTMLElement>;
     lineRippleCenter: number;
-    setCharacterCounter: (api: TextFieldCharacterCountApi | null) => TextFieldCharacterCountApi | null;
+    setCharacterCounter: (api: TextFieldCharacterCountApi | null) => void;
     setLeadingIcon: (api: TextFieldIconApi | null) => TextFieldIconApi | null;
     setTrailingIcon: (api: TextFieldIconApi | null) => TextFieldIconApi | null;
     setFloatingLabel: (api: FloatingLabelApi | null) => FloatingLabelApi | null;
+    characterCountContent: string | undefined;
 };

next/textfield-foundation.js

@@ -5,2 +5,3 @@ import { __assign, __read, __rest } from "tslib";
 import { MDCTextFieldFoundation } from '@material/textfield';
+import { useTextFieldCharacterCountFoundation } from './textfield-character-count-foundation';
 export var useTextFieldFoundation = function (props) {
@@ -14,3 +15,3 @@ var _a = __read(useState(false), 2), lineRippleActive = _a[0], setLineRippleActive = _a[1];
     var setCharacterCounter = function (api) {
-        return (characterCounter.current = api);
+        characterCounter.current = api;
     };
@@ -29,2 +30,5 @@ var leadingIcon = useRef();
     };
+    var characterCountContent = useTextFieldCharacterCountFoundation({
+        apiRef: props.characterCount ? setCharacterCounter : undefined
+    }).content;
     var _f = useFoundation({
@@ -136,11 +140,3 @@ props: props,
     }, [foundation, props.floatLabel]);
-    return __assign({ shakeLabel: shakeLabel,
-        floatLabel: floatLabel,
-        notchWidth: notchWidth,
-        lineRippleActive: lineRippleActive,
-        lineRippleCenter: lineRippleCenter,
-        setCharacterCounter: setCharacterCounter,
-        setLeadingIcon: setLeadingIcon,
-        setTrailingIcon: setTrailingIcon,
-        setFloatingLabel: setFloatingLabel }, elements);
+    return __assign({ shakeLabel: shakeLabel, floatLabel: floatLabel, notchWidth: notchWidth, lineRippleActive: lineRippleActive, lineRippleCenter: lineRippleCenter, setCharacterCounter: setCharacterCounter, setLeadingIcon: setLeadingIcon, setTrailingIcon: setTrailingIcon, setFloatingLabel: setFloatingLabel, characterCountContent: characterCountContent }, elements);
 };

package.json

 {
   "name": "@rmwc/textfield",
-  "version": "7.0.3",
+  "version": "8.0.0",
   "description": "RMWC TextField component",
@@ -39,12 +39,12 @@ "main": "dist/index.js",
   "dependencies": {
-    "@material/textfield": "^5.1.0",
-    "@rmwc/base": "^7.0.3",
-    "@rmwc/floating-label": "^7.0.3",
-    "@rmwc/icon": "^7.0.3",
-    "@rmwc/line-ripple": "^7.0.3",
-    "@rmwc/notched-outline": "^7.0.3",
-    "@rmwc/ripple": "^7.0.3",
-    "@rmwc/types": "^7.0.3"
+    "@material/textfield": "^8.0.0",
+    "@rmwc/base": "^8.0.0",
+    "@rmwc/floating-label": "^8.0.0",
+    "@rmwc/icon": "^8.0.0",
+    "@rmwc/line-ripple": "^8.0.0",
+    "@rmwc/notched-outline": "^8.0.0",
+    "@rmwc/ripple": "^8.0.0",
+    "@rmwc/types": "^8.0.0"
   },
   "gitHead": "d9befec0e3b258864b71686eecd16c16feb43cf1"
 }

README.md

@@ -29,6 +29,2 @@ # Text Fields
 ```jsx
-<TextField fullwidth placeholder="fullWidth..." />
-```
-
-```jsx
 <TextField placeholder="No label" />
@@ -58,16 +54,17 @@ ```
 ```jsx
-<TextField
-  textarea
-  outlined
-  fullwidth
-  label="textarea..."
-  rows={8}
-  maxLength={20}
-  characterCount
-  helpText={{
-    persistent: true,
-    validationMsg: true,
-    children: 'The field is required'
-  }}
-/>
+<div>
+  <TextField
+    textarea
+    label="textarea..."
+    rows={8}
+    maxLength={20}
+    characterCount
+    resizeable
+    helpText={{
+      persistent: true,
+      validationMsg: true,
+      children: 'The field is required'
+    }}
+  />
+</div>
 ```
@@ -127,3 +124,2 @@
 | `foundationRef` | `React.Ref<MDCTextFieldFoundation \| null>` | Advanced: A reference to the MDCFoundation. |
-| `fullwidth` | `undefined \| false \| true` | Makes the TextField fullwidth. |
 | `helpText` | `React.ReactNode \| TextFieldHelperTextProps` | Adds help text to the field |
@@ -135,4 +131,7 @@ | `icon` | `RMWC.IconPropT` | Add a leading icon. |
 | `outlined` | `undefined \| false \| true` | Outline the TextField. |
+| `prefix` | `undefined \| string` | Add prefix. |
 | `required` | `undefined \| false \| true` | Makes the Textfield required. |
+| `resizeable` | `undefined \| false \| true` | Make textarea resizeable |
 | `rootProps` | `Object` | By default, props spread to the input. These props are for the component's root container. |
+| `suffix` | `undefined \| string` | Add suffix. |
 | `textarea` | `undefined \| false \| true` | Makes a multiline TextField. |
@@ -139,0 +138,0 @@ | `trailingIcon` | `RMWC.IconPropT` | Add a trailing icon. |

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

70191

increased by3.16%

Lines of code

1157

increased by1.4%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

139

decreased by-0.71%

Dependency changes

• + Added@material/animation@8.0.0(transitive)

• + Added@material/base@8.0.0(transitive)

• + Added@material/density@8.0.0(transitive)

• + Added@material/dom@8.0.0(transitive)

• + Added@material/feature-targeting@8.0.0(transitive)

• + Added@material/floating-label@8.0.0(transitive)

• + Added@material/line-ripple@8.0.0(transitive)

• + Added@material/notched-outline@8.0.0(transitive)

• + Added@material/ripple@8.0.0(transitive)

• + Added@material/rtl@8.0.0(transitive)

• + Added@material/shape@8.0.0(transitive)

• + Added@material/textfield@8.0.0(transitive)

• + Added@material/theme@8.0.0(transitive)

• + Added@material/typography@8.0.0(transitive)

• + Added@rmwc/base@8.0.8(transitive)

• + Added@rmwc/floating-label@8.0.8(transitive)

• + Added@rmwc/icon@8.0.8(transitive)

• + Added@rmwc/line-ripple@8.0.8(transitive)

• + Added@rmwc/notched-outline@8.0.8(transitive)

• + Added@rmwc/provider@8.0.8(transitive)

• + Added@rmwc/ripple@8.0.8(transitive)

• + Added@rmwc/types@8.0.8(transitive)

• - Removed@material/animation@5.1.0(transitive)

• - Removed@material/base@5.1.0(transitive)

• - Removed@material/density@5.1.0(transitive)

• - Removed@material/dom@5.1.0(transitive)

• - Removed@material/feature-targeting@5.1.0(transitive)

• - Removed@material/floating-label@5.1.0(transitive)

• - Removed@material/line-ripple@5.1.0(transitive)

• - Removed@material/notched-outline@5.1.0(transitive)

• - Removed@material/ripple@5.1.0(transitive)

• - Removed@material/rtl@5.1.0(transitive)

• - Removed@material/shape@5.1.0(transitive)

• - Removed@material/textfield@5.1.0(transitive)

• - Removed@material/theme@5.1.0(transitive)

• - Removed@material/typography@5.1.0(transitive)

• - Removed@rmwc/base@7.0.3(transitive)

• - Removed@rmwc/floating-label@7.0.3(transitive)

• - Removed@rmwc/icon@7.0.3(transitive)

• - Removed@rmwc/line-ripple@7.0.3(transitive)

• - Removed@rmwc/notched-outline@7.0.3(transitive)

• - Removed@rmwc/provider@7.0.3(transitive)

• - Removed@rmwc/ripple@7.0.3(transitive)

• - Removed@rmwc/types@7.0.3(transitive)

• Updated@material/textfield@^8.0.0

• Updated@rmwc/base@^8.0.0

• Updated@rmwc/floating-label@^8.0.0

• Updated@rmwc/icon@^8.0.0

• Updated@rmwc/line-ripple@^8.0.0

• Updated@rmwc/notched-outline@^8.0.0

• Updated@rmwc/ripple@^8.0.0

• Updated@rmwc/types@^8.0.0