@szhsin/react-autocomplete - npm Package Compare versions

Comparing version 0.5.0 to 0.5.1

dist/cjs/index.js

@@ -6,9 +6,3 @@ 'use strict';
 const useAutocomplete = ({
-  feature: {
-    onInputChange,
-    onInputClick,
-    onBlur,
-    onKeyDown,
-    onItemClick
-  } = {},
+  feature,
   items = [],
@@ -27,3 +21,9 @@ onChange = () => {}
   };
-  const featureEvent = {
+  const {
+    onInputChange,
+    onInputClick,
+    onBlur,
+    onKeyDown,
+    onItemClick
+  } = (feature == null ? void 0 : feature({
     state,
@@ -34,3 +34,3 @@ props: {
     }
-  };
+  })) || {};
   const getInputProps = () => ({
@@ -40,12 +40,10 @@ value: inputValue,
     onChange: e => onInputChange == null ? void 0 : onInputChange({
-      value: e.target.value,
-      ...featureEvent
+      value: e.target.value
     }),
-    onClick: () => onInputClick == null ? void 0 : onInputClick(featureEvent),
-    onBlur: () => !instance.a && (onBlur == null ? void 0 : onBlur(featureEvent)),
+    onClick: () => onInputClick == null ? void 0 : onInputClick(),
+    onBlur: () => !instance.a && (onBlur == null ? void 0 : onBlur()),
     onKeyDown: ({
       key
     }) => onKeyDown == null ? void 0 : onKeyDown({
-      key,
-      ...featureEvent
+      key
     })
@@ -60,4 +58,3 @@ });
       onItemClick == null || onItemClick({
-        index,
-        ...featureEvent
+        index
       });
@@ -82,13 +79,14 @@ (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
 
-const autocomplete = () => {
-  const updateAndCloseList = ({
-    props: {
-      onChange
-    },
-    state: {
-      inputValue: [, setInputValue],
-      focusIndex: [, setfocusIndex],
-      isOpen: [isOpen, setOpen]
-    }
-  }, value) => {
+const autocomplete = () => ({
+  props: {
+    items,
+    onChange
+  },
+  state: {
+    inputValue: [inputValue, setInputValue],
+    focusIndex: [focusIndex, setfocusIndex],
+    isOpen: [isOpen, setOpen]
+  }
+}) => {
+  const updateAndCloseList = value => {
     if (isOpen) {
@@ -105,15 +103,6 @@ if (value != null) {
     onItemClick: ({
-      index,
-      ...event
-    }) => updateAndCloseList(event, event.props.items[index]),
+      index
+    }) => updateAndCloseList(items[index]),
     onInputChange: ({
-      value,
-      props: {
-        onChange
-      },
-      state: {
-        inputValue: [, setInputValue],
-        focusIndex: [, setfocusIndex],
-        isOpen: [, setOpen]
-      }
+      value
     }) => {
@@ -125,22 +114,7 @@ setInputValue(value);
     },
-    onInputClick: ({
-      state: {
-        isOpen: [, setOpen]
-      }
-    }) => setOpen(true),
-    onBlur: event => updateAndCloseList(event, event.state.inputValue[0]),
+    onInputClick: () => setOpen(true),
+    onBlur: () => updateAndCloseList(inputValue),
     onKeyDown: ({
-      key,
-      ...event
+      key
     }) => {
-      const {
-        props: {
-          items
-        },
-        state: {
-          focusIndex: [focusIndex, setfocusIndex],
-          inputValue: [inputValue, setInputValue],
-          isOpen: [isOpen, setOpen]
-        }
-      } = event;
       const traverseItems = itemIndex => {
@@ -170,6 +144,6 @@ setfocusIndex(itemIndex);
         case 'Enter':
-          updateAndCloseList(event, items[focusIndex]);
+          updateAndCloseList(items[focusIndex]);
           break;
         case 'Escape':
-          updateAndCloseList(event, inputValue);
+          updateAndCloseList(inputValue);
           break;
@@ -176,0 +150,0 @@ }

dist/esm/features/autocomplete.js

@@ -1,12 +0,13 @@
-const autocomplete = () => {
-  const updateAndCloseList = ({
-    props: {
-      onChange
-    },
-    state: {
-      inputValue: [, setInputValue],
-      focusIndex: [, setfocusIndex],
-      isOpen: [isOpen, setOpen]
-    }
-  }, value) => {
+const autocomplete = () => ({
+  props: {
+    items,
+    onChange
+  },
+  state: {
+    inputValue: [inputValue, setInputValue],
+    focusIndex: [focusIndex, setfocusIndex],
+    isOpen: [isOpen, setOpen]
+  }
+}) => {
+  const updateAndCloseList = value => {
     if (isOpen) {
@@ -23,15 +24,6 @@ if (value != null) {
     onItemClick: ({
-      index,
-      ...event
-    }) => updateAndCloseList(event, event.props.items[index]),
+      index
+    }) => updateAndCloseList(items[index]),
     onInputChange: ({
-      value,
-      props: {
-        onChange
-      },
-      state: {
-        inputValue: [, setInputValue],
-        focusIndex: [, setfocusIndex],
-        isOpen: [, setOpen]
-      }
+      value
     }) => {
@@ -43,22 +35,7 @@ setInputValue(value);
     },
-    onInputClick: ({
-      state: {
-        isOpen: [, setOpen]
-      }
-    }) => setOpen(true),
-    onBlur: event => updateAndCloseList(event, event.state.inputValue[0]),
+    onInputClick: () => setOpen(true),
+    onBlur: () => updateAndCloseList(inputValue),
     onKeyDown: ({
-      key,
-      ...event
+      key
     }) => {
-      const {
-        props: {
-          items
-        },
-        state: {
-          focusIndex: [focusIndex, setfocusIndex],
-          inputValue: [inputValue, setInputValue],
-          isOpen: [isOpen, setOpen]
-        }
-      } = event;
       const traverseItems = itemIndex => {
@@ -88,6 +65,6 @@ setfocusIndex(itemIndex);
         case 'Enter':
-          updateAndCloseList(event, items[focusIndex]);
+          updateAndCloseList(items[focusIndex]);
           break;
         case 'Escape':
-          updateAndCloseList(event, inputValue);
+          updateAndCloseList(inputValue);
           break;
@@ -94,0 +71,0 @@ }

dist/esm/hooks/useAutocomplete.js

 import { useRef, useState } from 'react';
 
 const useAutocomplete = ({
-  feature: {
-    onInputChange,
-    onInputClick,
-    onBlur,
-    onKeyDown,
-    onItemClick
-  } = {},
+  feature,
   items = [],
@@ -24,3 +18,9 @@ onChange = () => {}
   };
-  const featureEvent = {
+  const {
+    onInputChange,
+    onInputClick,
+    onBlur,
+    onKeyDown,
+    onItemClick
+  } = (feature == null ? void 0 : feature({
     state,
@@ -31,3 +31,3 @@ props: {
     }
-  };
+  })) || {};
   const getInputProps = () => ({
@@ -37,12 +37,10 @@ value: inputValue,
     onChange: e => onInputChange == null ? void 0 : onInputChange({
-      value: e.target.value,
-      ...featureEvent
+      value: e.target.value
     }),
-    onClick: () => onInputClick == null ? void 0 : onInputClick(featureEvent),
-    onBlur: () => !instance.a && (onBlur == null ? void 0 : onBlur(featureEvent)),
+    onClick: () => onInputClick == null ? void 0 : onInputClick(),
+    onBlur: () => !instance.a && (onBlur == null ? void 0 : onBlur()),
     onKeyDown: ({
       key
     }) => onKeyDown == null ? void 0 : onKeyDown({
-      key,
-      ...featureEvent
+      key
     })
@@ -57,4 +55,3 @@ });
       onItemClick == null || onItemClick({
-        index,
-        ...featureEvent
+        index
       });
@@ -61,0 +58,0 @@ (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();

package.json

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

types/common.d.ts

@@ -7,17 +7,17 @@ /// <reference types="react" />
 }
-interface FeatureProps {
+interface ContextualProps {
     onChange: (value: string) => void;
     items: string[];
 }
-export interface FeatureEvent {
+export interface Contextual {
     state: AutocompleteState;
-    props: FeatureProps;
+    props: ContextualProps;
 }
-type FeatureEventHandler<T = object> = (event: T & FeatureEvent) => void;
-export interface Feature {
+type FeatureEventHandler<E> = (event: E) => void;
+export type Feature = (cx: Contextual) => {
     onInputChange?: FeatureEventHandler<{
         value: string;
     }>;
-    onInputClick?: FeatureEventHandler;
-    onBlur?: FeatureEventHandler;
+    onInputClick?: () => void;
+    onBlur?: () => void;
     onKeyDown?: FeatureEventHandler<{
@@ -29,6 +29,6 @@ key: string;
     }>;
-}
-export interface AutocompleteProps extends Partial<FeatureProps> {
+};
+export interface AutocompleteProps extends Partial<ContextualProps> {
     feature?: Feature;
 }
 export {};

types/hooks/useAutocomplete.d.ts

@@ -9,3 +9,3 @@ import type { InputHTMLAttributes, HTMLAttributes } from 'react';
 }
-declare const useAutocomplete: ({ feature: { onInputChange, onInputClick, onBlur, onKeyDown, onItemClick }, items, onChange }: AutocompleteProps) => {
+declare const useAutocomplete: ({ feature, items, onChange }: AutocompleteProps) => {
     getProps: <T extends keyof GetProps>(elementType: T, option?: GetProps[T][0] | undefined) => GetProps[T][1];
@@ -12,0 +12,0 @@ state: AutocompleteState;

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

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

11977

decreased by-9.86%

Lines of code

338

decreased by-13.33%

No dependency changes