@acusti/input-text - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

dist/InputText.d.ts

@@ -17,6 +17,9 @@ import * as React from 'react';
     readOnly?: boolean;
+    tabIndex?: number;
     title?: string;
     type?: 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url';
 };
-declare const InputText: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
+declare const InputText: React.ForwardRefExoticComponent<
+    Props & React.RefAttributes<HTMLInputElement>
+>;
 export default InputText;

dist/InputText.js

 import * as React from 'react';
 const { useCallback, useEffect, useImperativeHandle, useRef } = React;
-const InputText = React.forwardRef(({ autoComplete, className, disabled, initialValue, maxLength, minLength, onBlur, onChange, onFocus, onKeyDown, onKeyUp, pattern, placeholder, readOnly, title, type = 'text', }, ref) => {
-    const inputRef = useRef(null);
-    useImperativeHandle(ref, () => inputRef.current);
-    // If props.initialValue changes, override input value from it
-    useEffect(() => {
-        if (!inputRef.current)
-            return;
-        inputRef.current.value = initialValue || '';
-    }, [initialValue]);
-    const isInitialSelectionRef = useRef(true);
-    const handleBlur = useCallback((event) => {
-        if (onBlur)
-            onBlur(event);
-        // When input loses focus, reset isInitialSelection to true for next onSelect event
-        isInitialSelectionRef.current = true;
-    }, [onBlur]);
-    // NOTE Selecting the contents of the input onFocus makes for the best UX,
-    // but it doesn’t work in Safari, so we use the initial onSelect event instead
-    const handleSelect = useCallback(() => {
-        // Do nothing if this isn’t the initial select-on-focus event
-        if (!isInitialSelectionRef.current)
-            return;
-        // This is the initial select-on-focus event, so reset isInitialSelection to false
-        isInitialSelectionRef.current = false;
-        const input = inputRef.current;
-        // Do nothing if input has no value
-        if (!input || !input.value)
-            return;
-        // Do nothing if input is no longer the document’s activeElement
-        if (input.ownerDocument.activeElement !== input)
-            return;
-        // Do nothing if input’s contents are already selected
-        const valueLength = input.value.length;
-        if (input.selectionStart === 0 && input.selectionEnd === valueLength)
-            return;
-        input.selectionStart = 0;
-        input.selectionEnd = valueLength;
-    }, []);
-    return (React.createElement("input", { autoComplete: autoComplete, className: className, defaultValue: initialValue || '', disabled: disabled, maxLength: maxLength, minLength: minLength, onBlur: handleBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onSelect: handleSelect, pattern: pattern, placeholder: placeholder, readOnly: readOnly, ref: inputRef, title: title, type: type }));
-});
+const InputText = React.forwardRef(
+    (
+        {
+            autoComplete,
+            className,
+            disabled,
+            initialValue,
+            maxLength,
+            minLength,
+            onBlur,
+            onChange,
+            onFocus,
+            onKeyDown,
+            onKeyUp,
+            pattern,
+            placeholder,
+            readOnly,
+            tabIndex,
+            title,
+            type = 'text',
+        },
+        ref,
+    ) => {
+        const inputRef = useRef(null);
+        useImperativeHandle(ref, () => inputRef.current);
+        // If props.initialValue changes, override input value from it
+        useEffect(() => {
+            if (!inputRef.current) return;
+            inputRef.current.value = initialValue || '';
+        }, [initialValue]);
+        const isInitialSelectionRef = useRef(true);
+        const handleBlur = useCallback(
+            (event) => {
+                if (onBlur) onBlur(event);
+                // When input loses focus, reset isInitialSelection to true for next onSelect event
+                isInitialSelectionRef.current = true;
+            },
+            [onBlur],
+        );
+        // NOTE Selecting the contents of the input onFocus makes for the best UX,
+        // but it doesn’t work in Safari, so we use the initial onSelect event instead
+        const handleSelect = useCallback(() => {
+            // Do nothing if this isn’t the initial select-on-focus event
+            if (!isInitialSelectionRef.current) return;
+            // This is the initial select-on-focus event, so reset isInitialSelection to false
+            isInitialSelectionRef.current = false;
+            const input = inputRef.current;
+            // Do nothing if input has no value
+            if (!input || !input.value) return;
+            // Do nothing if input is no longer the document’s activeElement
+            if (input.ownerDocument.activeElement !== input) return;
+            // Do nothing if input’s contents are already selected
+            const valueLength = input.value.length;
+            if (input.selectionStart === 0 && input.selectionEnd === valueLength) return;
+            input.selectionStart = 0;
+            input.selectionEnd = valueLength;
+        }, []);
+        return React.createElement('input', {
+            autoComplete: autoComplete,
+            className: className,
+            defaultValue: initialValue || '',
+            disabled: disabled,
+            maxLength: maxLength,
+            minLength: minLength,
+            onBlur: handleBlur,
+            onChange: onChange,
+            onFocus: onFocus,
+            onKeyDown: onKeyDown,
+            onKeyUp: onKeyUp,
+            onSelect: handleSelect,
+            pattern: pattern,
+            placeholder: placeholder,
+            readOnly: readOnly,
+            ref: inputRef,
+            tabIndex: tabIndex,
+            title: title,
+            type: type,
+        });
+    },
+);
 export default InputText;
-//# sourceMappingURL=InputText.js.map
+//# sourceMappingURL=InputText.js.map

package.json

 {
     "name": "@acusti/input-text",
-    "version": "0.2.0",
+    "version": "0.3.0",
     "type": "module",
@@ -5,0 +5,0 @@ "sideEffects": false,

README.md

 # @acusti/input-text
 
-![latest version](https://img.shields.io/npm/v/@acusti/input-text?style=for-the-badge)
-![dependencies status](https://img.shields.io/david/acusti/uikit?path=packages%2Finput-text&style=for-the-badge)
-![bundle size](https://img.shields.io/bundlephobia/minzip/@acusti/input-text?style=for-the-badge)
-![downloads per month](https://img.shields.io/npm/dm/@acusti/input-text?style=for-the-badge)
+[![latest version](https://img.shields.io/npm/v/@acusti/input-text?style=for-the-badge)](https://www.npmjs.com/package/@acusti/input-text)
+[![dependencies status](https://img.shields.io/david/acusti/uikit?path=packages%2Finput-text&style=for-the-badge)](https://david-dm.org/acusti/uikit?path=packages%2Finput-text)
+[![bundle size](https://img.shields.io/bundlephobia/minzip/@acusti/input-text?style=for-the-badge)](https://bundlephobia.com/package/@acusti/input-text)
+[![downloads per month](https://img.shields.io/npm/dm/@acusti/input-text?style=for-the-badge)](https://www.npmjs.com/package/@acusti/input-text)
 
@@ -8,0 +8,0 @@ `InputText` is a React component that renders an uncontrolled input whose

No alert changes

Improved metrics

Total package byte prevSize

8796

increased by12.25%

Lines of code

108

increased by66.15%

No dependency changes