@acusti/input-text - npm Package Compare versions

Comparing version 0.11.0 to 0.12.0

dist/InputText.d.ts

@@ -8,5 +8,7 @@ import * as React from 'react';
     max?: number;
+    maxHeight?: number | string;
     maxLength?: number;
     min?: number;
     minLength?: number;
+    multiLine?: boolean;
     name?: string;
@@ -13,0 +15,0 @@ onBlur?: (event: React.FocusEvent<HTMLInputElement>) => unknown;

dist/InputText.js

 import * as React from 'react';
 const { useCallback, useEffect, useImperativeHandle, useRef } = React;
-const InputText = React.forwardRef(({ autoComplete, className, disabled, initialValue, max, maxLength, min, minLength, name, onBlur, onChange, onFocus, onKeyDown, onKeyUp, pattern, placeholder, readOnly, required, selectTextOnFocus, step, tabIndex, title, type = 'text', }, ref) => {
+const InputText = React.forwardRef(({ autoComplete, className, disabled, initialValue, max, maxHeight = Infinity, maxLength, min, minLength, multiLine, name, onBlur, onChange, onFocus, onKeyDown, onKeyUp, pattern, placeholder, readOnly, required, selectTextOnFocus, step, tabIndex, title, type = 'text', }, ref) => {
     const inputRef = useRef(null);
@@ -19,2 +19,12 @@ useImperativeHandle(ref, () => inputRef.current);
     }, [onBlur]);
+    const setInputHeight = useCallback(() => {
+        const input = inputRef.current;
+        if (!multiLine || !input)
+            return;
+        input.style.height = '';
+        const height = Math.min(input.scrollHeight, typeof maxHeight === 'string' ? parseFloat(maxHeight) : maxHeight);
+        input.style.height = `${height}px`;
+    }, [maxHeight, multiLine]);
+    // Initialize input height in useEffect
+    useEffect(setInputHeight, []);
     // NOTE Selecting the contents of the input onFocus makes for the best UX,
@@ -42,5 +52,8 @@ // but it doesn’t work in Safari, so we use the initial onSelect event instead
     }, []);
-    return (React.createElement("input", { autoComplete: autoComplete, className: className, defaultValue: initialValue || '', disabled: disabled, max: max, maxLength: maxLength, min: min, minLength: minLength, name: name, onBlur: selectTextOnFocus ? handleBlur : onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onSelect: selectTextOnFocus ? handleSelect : undefined, pattern: pattern, placeholder: placeholder, readOnly: readOnly, required: required, ref: inputRef, step: step, tabIndex: tabIndex, title: title, type: type }));
+    const Element = (multiLine ? 'textarea' : 'input');
+    return (React.createElement(Element, Object.assign({ autoComplete: autoComplete, className: className, defaultValue: initialValue || '', disabled: disabled, maxLength: maxLength, minLength: minLength, name: name, onBlur: selectTextOnFocus ? handleBlur : onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onSelect: selectTextOnFocus ? handleSelect : undefined, pattern: pattern, placeholder: placeholder, readOnly: readOnly, required: required, ref: inputRef, tabIndex: tabIndex, title: title, type: type }, (multiLine
+        ? { onInput: setInputHeight, rows: 1 }
+        : { max, min, step }))));
 });
 export default InputText;
 //# sourceMappingURL=InputText.js.map

package.json

 {
     "name": "@acusti/input-text",
-    "version": "0.11.0",
+    "version": "0.12.0",
     "type": "module",
@@ -25,3 +25,3 @@ "sideEffects": false,
         "@types/react": "^18.0.15",
-        "typescript": "~4.6.4"
+        "typescript": "^4.8.4"
     },
@@ -28,0 +28,0 @@ "peerDependencies": {

README.md

@@ -9,4 +9,4 @@ # @acusti/input-text
 `InputText` is a React component that renders an uncontrolled input whose
-value is overwritten whenever props.initialValue changes. Also, if
-props.selectTextOnFocus is true, it selects the entire contents of the
-input whenever the input is focused.
+value is overwritten whenever `props.initialValue` changes. Also, if
+`props.selectTextOnFocus` is true, it selects the entire contents of the
+input whenever the input is focused. Lastly, if `props.mutliLine` is true, it renders a textarea element that autogrows and shrinks to adjust to the length of its contents.

No alert changes

Improved metrics

Total package byte prevSize

15743

increased by17.19%

Lines of code

227

increased by17.01%

No dependency changes