@szhsin/react-autocomplete - npm Package Compare versions

Comparing version 0.6.1 to 0.6.2

dist/cjs/index.js

@@ -29,7 +29,7 @@ 'use strict';
   const {
-    onInputChange,
-    onInputSelect,
-    onInputClick,
-    onBlur,
-    onKeyDown,
+    inputProps: {
+      onBlur,
+      onKeyDown,
+      ...inputProps
+    },
     onItemClick,
@@ -45,6 +45,3 @@ ...actions
   const getInputProps = () => ({
-    ref: inputRef,
-    onChange: onInputChange,
-    onSelect: onInputSelect,
-    onClick: onInputClick,
+    ...inputProps,
     onBlur: e => !instance.a && (onBlur == null ? void 0 : onBlur(e)),
@@ -57,3 +54,4 @@ onKeyDown: e => {
       onKeyDown == null || onKeyDown(e);
-    }
+    },
+    ref: inputRef
   });
@@ -139,46 +137,48 @@ const getItemProps = ({
     }) => updateAndCloseList(items[index], 'submit'),
-    onInputChange: e => {
-      setFocusIndex(-1);
-      setOpen(true);
-      updateValue(e.target.value, 'input');
-    },
-    onInputSelect: e => {
-      const {
-        value,
-        selectionStart,
-        selectionEnd
-      } = e.target;
-      const [start, end] = cxInstance.c;
-      if (cxInstance.b !== value && (selectionStart !== start || selectionEnd !== end)) {
+    inputProps: {
+      onChange: e => {
         setFocusIndex(-1);
-        updateValue(value, 'input');
+        setOpen(true);
+        updateValue(e.target.value, 'input');
+      },
+      onSelect: e => {
+        const {
+          value,
+          selectionStart,
+          selectionEnd
+        } = e.target;
+        const [start, end] = cxInstance.c;
+        if (cxInstance.b !== value && (selectionStart !== start || selectionEnd !== end)) {
+          setFocusIndex(-1);
+          updateValue(value, 'input');
+        }
+      },
+      onClick: () => setOpen(true),
+      onBlur: () => updateAndCloseList(items[focusIndex], 'blur'),
+      onKeyDown: ({
+        key
+      }) => {
+        switch (key) {
+          case 'ArrowUp':
+            if (open) {
+              traverseItems(true);
+            } else {
+              setOpen(true);
+            }
+            break;
+          case 'ArrowDown':
+            if (open) {
+              traverseItems(false);
+            } else {
+              setOpen(true);
+            }
+            break;
+          case 'Enter':
+            updateAndCloseList(items[focusIndex], 'submit');
+            break;
+          case 'Escape':
+            updateAndCloseList(cxInstance.b, 'esc');
+            break;
+        }
       }
-    },
-    onInputClick: () => setOpen(true),
-    onBlur: () => updateAndCloseList(items[focusIndex], 'blur'),
-    onKeyDown: ({
-      key
-    }) => {
-      switch (key) {
-        case 'ArrowUp':
-          if (open) {
-            traverseItems(true);
-          } else {
-            setOpen(true);
-          }
-          break;
-        case 'ArrowDown':
-          if (open) {
-            traverseItems(false);
-          } else {
-            setOpen(true);
-          }
-          break;
-        case 'Enter':
-          updateAndCloseList(items[focusIndex], 'submit');
-          break;
-        case 'Escape':
-          updateAndCloseList(cxInstance.b, 'esc');
-          break;
-      }
     }
@@ -193,3 +193,6 @@ };
   return cx => {
-    const autocompleteFeature = useAutocomplete(cx);
+    const {
+      inputProps,
+      ...rest
+    } = useAutocomplete(cx);
     const [instance] = react.useState({});
@@ -203,6 +206,9 @@ const {
     return {
-      ...autocompleteFeature,
-      onInputChange: e => {
-        instance.c = e.nativeEvent.inputType === 'insertText';
-        autocompleteFeature.onInputChange(e);
+      ...rest,
+      inputProps: {
+        ...inputProps,
+        onChange: e => {
+          instance.c = e.nativeEvent.inputType === 'insertText';
+          inputProps.onChange(e);
+        }
       },
@@ -209,0 +215,0 @@ inlineComplete: react.useCallback(({

dist/esm/features/autocomplete.js

@@ -52,46 +52,48 @@ const autocomplete = ({
     }) => updateAndCloseList(items[index], 'submit'),
-    onInputChange: e => {
-      setFocusIndex(-1);
-      setOpen(true);
-      updateValue(e.target.value, 'input');
-    },
-    onInputSelect: e => {
-      const {
-        value,
-        selectionStart,
-        selectionEnd
-      } = e.target;
-      const [start, end] = cxInstance.c;
-      if (cxInstance.b !== value && (selectionStart !== start || selectionEnd !== end)) {
+    inputProps: {
+      onChange: e => {
         setFocusIndex(-1);
-        updateValue(value, 'input');
+        setOpen(true);
+        updateValue(e.target.value, 'input');
+      },
+      onSelect: e => {
+        const {
+          value,
+          selectionStart,
+          selectionEnd
+        } = e.target;
+        const [start, end] = cxInstance.c;
+        if (cxInstance.b !== value && (selectionStart !== start || selectionEnd !== end)) {
+          setFocusIndex(-1);
+          updateValue(value, 'input');
+        }
+      },
+      onClick: () => setOpen(true),
+      onBlur: () => updateAndCloseList(items[focusIndex], 'blur'),
+      onKeyDown: ({
+        key
+      }) => {
+        switch (key) {
+          case 'ArrowUp':
+            if (open) {
+              traverseItems(true);
+            } else {
+              setOpen(true);
+            }
+            break;
+          case 'ArrowDown':
+            if (open) {
+              traverseItems(false);
+            } else {
+              setOpen(true);
+            }
+            break;
+          case 'Enter':
+            updateAndCloseList(items[focusIndex], 'submit');
+            break;
+          case 'Escape':
+            updateAndCloseList(cxInstance.b, 'esc');
+            break;
+        }
       }
-    },
-    onInputClick: () => setOpen(true),
-    onBlur: () => updateAndCloseList(items[focusIndex], 'blur'),
-    onKeyDown: ({
-      key
-    }) => {
-      switch (key) {
-        case 'ArrowUp':
-          if (open) {
-            traverseItems(true);
-          } else {
-            setOpen(true);
-          }
-          break;
-        case 'ArrowDown':
-          if (open) {
-            traverseItems(false);
-          } else {
-            setOpen(true);
-          }
-          break;
-        case 'Enter':
-          updateAndCloseList(items[focusIndex], 'submit');
-          break;
-        case 'Escape':
-          updateAndCloseList(cxInstance.b, 'esc');
-          break;
-      }
     }
@@ -98,0 +100,0 @@ };

dist/esm/features/supercomplete.js

@@ -9,3 +9,6 @@ import { useState, useCallback } from 'react';
   return cx => {
-    const autocompleteFeature = useAutocomplete(cx);
+    const {
+      inputProps,
+      ...rest
+    } = useAutocomplete(cx);
     const [instance] = useState({});
@@ -19,6 +22,9 @@ const {
     return {
-      ...autocompleteFeature,
-      onInputChange: e => {
-        instance.c = e.nativeEvent.inputType === 'insertText';
-        autocompleteFeature.onInputChange(e);
+      ...rest,
+      inputProps: {
+        ...inputProps,
+        onChange: e => {
+          instance.c = e.nativeEvent.inputType === 'insertText';
+          inputProps.onChange(e);
+        }
       },
@@ -25,0 +31,0 @@ inlineComplete: useCallback(({

dist/esm/hooks/useAutocomplete.js

@@ -27,7 +27,7 @@ import { useRef, useState, useCallback } from 'react';
   const {
-    onInputChange,
-    onInputSelect,
-    onInputClick,
-    onBlur,
-    onKeyDown,
+    inputProps: {
+      onBlur,
+      onKeyDown,
+      ...inputProps
+    },
     onItemClick,
@@ -43,6 +43,3 @@ ...actions
   const getInputProps = () => ({
-    ref: inputRef,
-    onChange: onInputChange,
-    onSelect: onInputSelect,
-    onClick: onInputClick,
+    ...inputProps,
     onBlur: e => !instance.a && (onBlur == null ? void 0 : onBlur(e)),
@@ -55,3 +52,4 @@ onKeyDown: e => {
       onKeyDown == null || onKeyDown(e);
-    }
+    },
+    ref: inputRef
   });
@@ -58,0 +56,0 @@ const getItemProps = ({

package.json

 {
   "name": "@szhsin/react-autocomplete",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "",
@@ -5,0 +5,0 @@ "author": "Zheng Song",

types/common.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import type { InputHTMLAttributes } from 'react';
 export interface AutocompleteState {
@@ -41,7 +41,3 @@ setInputValue: (value: string) => void;
 export type Feature<Actions = object> = (cx: Contextual) => {
-    onInputChange?: React.ChangeEventHandler<HTMLInputElement>;
-    onInputClick?: React.MouseEventHandler<HTMLInputElement>;
-    onInputSelect?: React.ReactEventHandler<HTMLInputElement>;
-    onBlur?: React.FocusEventHandler<HTMLInputElement>;
-    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+    inputProps: InputHTMLAttributes<HTMLInputElement>;
     onItemClick?: (event: React.MouseEvent<HTMLElement>, props: {
@@ -48,0 +44,0 @@ index: number;

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

Improved metrics

Lines of code

544

increased by0.74%

Worsened metrics

Total package byte prevSize

17380

decreased by-1.52%

Number of package files

12

decreased by-7.69%

No dependency changes