@szhsin/react-autocomplete - npm Package Compare versions

Comparing version 0.8.0 to 0.8.1

dist/cjs/index.js

@@ -7,2 +7,3 @@ 'use strict';
   onChange = () => {},
+  isItemDisabled = () => false,
   feature: useFeature,
@@ -34,2 +35,3 @@ traversal: useTraversal,
     getItemValue,
+    isItemDisabled,
     onChange,
@@ -41,4 +43,4 @@ inputRef,
     getInputProps: _getInputProps,
-    getItemProps: _getItemProps,
-    ...actions
+    getListProps: _getListProps,
+    ...restFeature
   } = useFeature({
@@ -48,19 +50,21 @@ ...contextual,
   });
-  const {
-    onBlur,
-    ...featureInputProps
-  } = _getInputProps();
-  const getInputProps = () => ({
-    ...featureInputProps,
-    onBlur: e => !instance.a && (onBlur == null ? void 0 : onBlur(e)),
-    ref: inputRef
-  });
-  const getItemProps = option => {
+  const getInputProps = () => {
     const {
+      onBlur,
+      ...rest
+    } = _getInputProps();
+    return {
+      ...rest,
+      onBlur: e => !instance.a && (onBlur == null ? void 0 : onBlur(e)),
+      ref: inputRef
+    };
+  };
+  const getListProps = () => {
+    const {
       onMouseDown,
       onClick,
-      ...featureItemProps
-    } = _getItemProps(option);
+      ...rest
+    } = _getListProps();
     return {
-      ...featureItemProps,
+      ...rest,
       onMouseDown: e => {
@@ -80,5 +84,5 @@ onMouseDown == null || onMouseDown(e);
     getInputProps,
-    getItemProps,
+    getListProps,
     ...state,
-    ...actions
+    ...restFeature
   };
@@ -92,2 +96,3 @@ };
   getItemValue,
+  isItemDisabled,
   traverse,
@@ -170,7 +175,8 @@ onChange,
   }) => ({
-    onClick: () => updateAndCloseList(getItemValue(item), 'submit')
+    onClick: () => !isItemDisabled(item) && updateAndCloseList(getItemValue(item), 'submit')
   });
   return {
     getInputProps,
-    getItemProps
+    getItemProps,
+    getListProps: () => ({})
   };
@@ -229,7 +235,7 @@ };
   traverseInput,
-  isItemDisabled,
   items = []
 }) => ({
   focusItem,
-  setFocusItem
+  setFocusItem,
+  isItemDisabled
 }) => {
@@ -253,3 +259,3 @@ const [instance] = react.useState({
         nextItem = items[nextIndex];
-        if (!nextItem || !(isItemDisabled != null && isItemDisabled(nextItem))) break;
+        if (!nextItem || !isItemDisabled(nextItem)) break;
       } while (nextIndex !== instance.a);
@@ -256,0 +262,0 @@ instance.a = nextIndex;

dist/esm/features/autocomplete.js

@@ -6,2 +6,3 @@ const autocomplete = ({
   getItemValue,
+  isItemDisabled,
   traverse,
@@ -84,7 +85,8 @@ onChange,
   }) => ({
-    onClick: () => updateAndCloseList(getItemValue(item), 'submit')
+    onClick: () => !isItemDisabled(item) && updateAndCloseList(getItemValue(item), 'submit')
   });
   return {
     getInputProps,
-    getItemProps
+    getItemProps,
+    getListProps: () => ({})
   };
@@ -91,0 +93,0 @@ };

dist/esm/hooks/useAutocomplete.js

@@ -5,2 +5,3 @@ import { useRef, useState, useCallback } from 'react';
   onChange = () => {},
+  isItemDisabled = () => false,
   feature: useFeature,
@@ -32,2 +33,3 @@ traversal: useTraversal,
     getItemValue,
+    isItemDisabled,
     onChange,
@@ -39,4 +41,4 @@ inputRef,
     getInputProps: _getInputProps,
-    getItemProps: _getItemProps,
-    ...actions
+    getListProps: _getListProps,
+    ...restFeature
   } = useFeature({
@@ -46,19 +48,21 @@ ...contextual,
   });
-  const {
-    onBlur,
-    ...featureInputProps
-  } = _getInputProps();
-  const getInputProps = () => ({
-    ...featureInputProps,
-    onBlur: e => !instance.a && (onBlur == null ? void 0 : onBlur(e)),
-    ref: inputRef
-  });
-  const getItemProps = option => {
+  const getInputProps = () => {
     const {
+      onBlur,
+      ...rest
+    } = _getInputProps();
+    return {
+      ...rest,
+      onBlur: e => !instance.a && (onBlur == null ? void 0 : onBlur(e)),
+      ref: inputRef
+    };
+  };
+  const getListProps = () => {
+    const {
       onMouseDown,
       onClick,
-      ...featureItemProps
-    } = _getItemProps(option);
+      ...rest
+    } = _getListProps();
     return {
-      ...featureItemProps,
+      ...rest,
       onMouseDown: e => {
@@ -78,5 +82,5 @@ onMouseDown == null || onMouseDown(e);
     getInputProps,
-    getItemProps,
+    getListProps,
     ...state,
-    ...actions
+    ...restFeature
   };
@@ -83,0 +87,0 @@ };

dist/esm/traversals/linearTraversal.js

@@ -5,7 +5,7 @@ import { useState } from 'react';
   traverseInput,
-  isItemDisabled,
   items = []
 }) => ({
   focusItem,
-  setFocusItem
+  setFocusItem,
+  isItemDisabled
 }) => {
@@ -29,3 +29,3 @@ const [instance] = useState({
         nextItem = items[nextIndex];
-        if (!nextItem || !(isItemDisabled != null && isItemDisabled(nextItem))) break;
+        if (!nextItem || !isItemDisabled(nextItem)) break;
       } while (nextIndex !== instance.a);
@@ -32,0 +32,0 @@ instance.a = nextIndex;

package.json

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

types/common.d.ts

 import type { HTMLAttributes, InputHTMLAttributes } from 'react';
 export interface GetProps<T> {
     getInputProps: () => InputHTMLAttributes<HTMLInputElement>;
+    getListProps: () => HTMLAttributes<HTMLElement>;
     getItemProps: (option: {
@@ -16,3 +17,4 @@ item: T;
 export type ChangeType = 'submit' | 'input' | 'blur' | 'esc';
-export interface ContextualProps {
+export interface ContextualProps<T> {
+    isItemDisabled: (item: T) => boolean;
     onChange: (value: string, meta: {
@@ -39,3 +41,3 @@ type: ChangeType;
 }
-export interface Contextual<T> extends ContextualProps, AutocompleteState<T> {
+export interface Contextual<T> extends ContextualProps<T>, AutocompleteState<T> {
     inputRef: React.RefObject<HTMLInputElement>;
@@ -48,5 +50,4 @@ getItemValue: (item: T | undefined | null) => string | undefined | null;
 }
-export interface TraversalProps<T> {
+export interface TraversalProps {
     traverseInput?: boolean;
-    isItemDisabled?: (item: T) => boolean;
 }
@@ -60,3 +61,3 @@ export type Traversal<T> = (cx: Contextual<T>) => {
 }
-export type AutocompleteProps<T, FeatureActions = object> = Partial<ContextualProps> & {
+export type AutocompleteProps<T, FeatureActions = object> = Partial<ContextualProps<T>> & {
     feature: Feature<T, FeatureActions>;
@@ -63,0 +64,0 @@ traversal: Traversal<T>;

types/hooks/useAutocomplete.d.ts

 /// <reference types="react" />
 import type { GetProps, AutocompleteProps } from '../common';
-declare const useAutocomplete: <T, FeatureActions>({ onChange, feature: useFeature, traversal: useTraversal, getItemValue: _getItemValue }: AutocompleteProps<T, FeatureActions>) => {
+declare const useAutocomplete: <T, FeatureActions>({ onChange, isItemDisabled, feature: useFeature, traversal: useTraversal, getItemValue: _getItemValue }: AutocompleteProps<T, FeatureActions>) => {
     setInputValue: (value: string) => void;
@@ -10,6 +10,4 @@ focusItem: T | null | undefined;
     getInputProps: () => import("react").InputHTMLAttributes<HTMLInputElement>;
-    getItemProps: (option: {
-        item: T;
-    }) => import("react").HTMLAttributes<HTMLElement>;
-} & Omit<GetProps<T> & FeatureActions, "getInputProps" | "getItemProps">;
+    getListProps: () => import("react").HTMLAttributes<HTMLElement>;
+} & Omit<GetProps<T> & FeatureActions, "getInputProps" | "getListProps">;
 export { useAutocomplete };

types/traversals/linearTraversal.d.ts

 import type { Traversal, TraversalProps } from '../common';
-interface LinearTraversalProps<T> extends TraversalProps<T> {
+interface LinearTraversalProps<T> extends TraversalProps {
     items?: T[];
 }
-declare const linearTraversal: <T>({ traverseInput, isItemDisabled, items }: LinearTraversalProps<T>) => Traversal<T>;
+declare const linearTraversal: <T>({ traverseInput, items }: LinearTraversalProps<T>) => Traversal<T>;
 export { linearTraversal };

No alert changes

Improved metrics

Total package byte prevSize

20103

increased by0.89%

Lines of code

617

increased by1.82%

No dependency changes