@szhsin/react-autocomplete - npm Package Compare versions

Comparing version 0.5.2 to 0.5.3

dist/cjs/index.js

@@ -14,3 +14,5 @@ 'use strict';
   const [focusIndex, setFocusIndex] = react.useState(-1);
-  const [instance] = react.useState({});
+  const [instance] = react.useState({
+    b: inputValue
+  });
   const state = {
@@ -31,2 +33,3 @@ inputValue,
   } = (feature == null ? void 0 : feature({
+    _: instance,
     items,
@@ -44,7 +47,11 @@ onChange,
     onBlur: () => !instance.a && (onBlur == null ? void 0 : onBlur()),
-    onKeyDown: ({
-      key
-    }) => onKeyDown == null ? void 0 : onKeyDown({
-      key
-    })
+    onKeyDown: e => {
+      const {
+        key
+      } = e;
+      if (items.length && (key === 'ArrowUp' || key === 'ArrowDown')) e.preventDefault();
+      onKeyDown == null || onKeyDown({
+        key
+      });
+    }
   });
@@ -79,2 +86,3 @@ const getItemProps = ({
 const autocomplete = () => ({
+  _,
   items,
@@ -89,7 +97,11 @@ onChange,
 }) => {
+  const updateValue = value => {
+    _.b = value;
+    setInputValue(value);
+    onChange(value);
+  };
   const updateAndCloseList = value => {
     if (isOpen) {
       if (value != null) {
-        setInputValue(value);
-        onChange(value);
+        updateValue(value);
       }
@@ -100,2 +112,14 @@ setOpen(false);
   };
+  const traverseItems = (isUp, baseIndex = -1) => {
+    var _items$nextIndex;
+    let nextIndex = focusIndex;
+    const itemLength = items.length;
+    if (isUp) {
+      if (--nextIndex < baseIndex) nextIndex = itemLength - 1;
+    } else {
+      if (++nextIndex >= itemLength) nextIndex = baseIndex;
+    }
+    setFocusIndex(nextIndex);
+    setInputValue((_items$nextIndex = items[nextIndex]) != null ? _items$nextIndex : _.b);
+  };
   return {
@@ -108,6 +132,5 @@ onItemClick: ({
     }) => {
-      setInputValue(value);
+      updateValue(value);
       setFocusIndex(-1);
       setOpen(true);
-      onChange(value);
     },
@@ -119,13 +142,6 @@ onInputClick: () => setOpen(true),
     }) => {
-      const traverseItems = itemIndex => {
-        setFocusIndex(itemIndex);
-        setInputValue(items[itemIndex]);
-      };
-      let nextIndex = focusIndex;
-      const itemLength = items.length;
       switch (key) {
-        case 'ArrowDown':
+        case 'ArrowUp':
           if (isOpen) {
-            if (++nextIndex >= itemLength) nextIndex = 0;
-            traverseItems(nextIndex);
+            traverseItems(true);
           } else {
@@ -135,6 +151,5 @@ setOpen(true);
           break;
-        case 'ArrowUp':
+        case 'ArrowDown':
           if (isOpen) {
-            if (--nextIndex < 0) nextIndex = itemLength - 1;
-            traverseItems(nextIndex);
+            traverseItems(false);
           } else {
@@ -141,0 +156,0 @@ setOpen(true);

dist/esm/features/autocomplete.js

 const autocomplete = () => ({
+  _,
   items,
@@ -11,7 +12,11 @@ onChange,
 }) => {
+  const updateValue = value => {
+    _.b = value;
+    setInputValue(value);
+    onChange(value);
+  };
   const updateAndCloseList = value => {
     if (isOpen) {
       if (value != null) {
-        setInputValue(value);
-        onChange(value);
+        updateValue(value);
       }
@@ -22,2 +27,14 @@ setOpen(false);
   };
+  const traverseItems = (isUp, baseIndex = -1) => {
+    var _items$nextIndex;
+    let nextIndex = focusIndex;
+    const itemLength = items.length;
+    if (isUp) {
+      if (--nextIndex < baseIndex) nextIndex = itemLength - 1;
+    } else {
+      if (++nextIndex >= itemLength) nextIndex = baseIndex;
+    }
+    setFocusIndex(nextIndex);
+    setInputValue((_items$nextIndex = items[nextIndex]) != null ? _items$nextIndex : _.b);
+  };
   return {
@@ -30,6 +47,5 @@ onItemClick: ({
     }) => {
-      setInputValue(value);
+      updateValue(value);
       setFocusIndex(-1);
       setOpen(true);
-      onChange(value);
     },
@@ -41,13 +57,6 @@ onInputClick: () => setOpen(true),
     }) => {
-      const traverseItems = itemIndex => {
-        setFocusIndex(itemIndex);
-        setInputValue(items[itemIndex]);
-      };
-      let nextIndex = focusIndex;
-      const itemLength = items.length;
       switch (key) {
-        case 'ArrowDown':
+        case 'ArrowUp':
           if (isOpen) {
-            if (++nextIndex >= itemLength) nextIndex = 0;
-            traverseItems(nextIndex);
+            traverseItems(true);
           } else {
@@ -57,6 +66,5 @@ setOpen(true);
           break;
-        case 'ArrowUp':
+        case 'ArrowDown':
           if (isOpen) {
-            if (--nextIndex < 0) nextIndex = itemLength - 1;
-            traverseItems(nextIndex);
+            traverseItems(false);
           } else {
@@ -63,0 +71,0 @@ setOpen(true);

dist/esm/hooks/useAutocomplete.js

@@ -12,3 +12,5 @@ import { useRef, useState } from 'react';
   const [focusIndex, setFocusIndex] = useState(-1);
-  const [instance] = useState({});
+  const [instance] = useState({
+    b: inputValue
+  });
   const state = {
@@ -29,2 +31,3 @@ inputValue,
   } = (feature == null ? void 0 : feature({
+    _: instance,
     items,
@@ -42,7 +45,11 @@ onChange,
     onBlur: () => !instance.a && (onBlur == null ? void 0 : onBlur()),
-    onKeyDown: ({
-      key
-    }) => onKeyDown == null ? void 0 : onKeyDown({
-      key
-    })
+    onKeyDown: e => {
+      const {
+        key
+      } = e;
+      if (items.length && (key === 'ArrowUp' || key === 'ArrowDown')) e.preventDefault();
+      onKeyDown == null || onKeyDown({
+        key
+      });
+    }
   });
@@ -49,0 +56,0 @@ const getItemProps = ({

package.json

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

types/common.d.ts

@@ -13,3 +13,19 @@ export interface AutocompleteState {
 }
+export interface Instance {
+    /**
+     * ### INTERNAL API ###
+     * Whether to bypass onblur event on input
+     */
+    a?: number;
+    /**
+     * ### INTERNAL API ###
+     * The most recent value
+     */
+    b: string;
+}
 export interface Contextual extends ContextualProps, AutocompleteState {
+    /**
+     * ### INTERNAL API ###
+     */
+    _: Instance;
 }
@@ -16,0 +32,0 @@ type FeatureEventHandler<E> = (event: E) => void;

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

Total package byte prevSize

12733

increased by7.81%

Lines of code

389

increased by13.41%

No dependency changes