@szhsin/react-autocomplete - npm Package Compare versions

Comparing version 0.6.4 to 0.7.0

dist/cjs/index.js

@@ -6,5 +6,6 @@ 'use strict';
 const useAutocomplete = ({
+  items = [],
+  onChange = () => {},
   feature: useFeature,
-  items = [],
-  onChange = () => {}
+  getItemValue: _getItemValue
 }) => {
@@ -18,2 +19,3 @@ const inputRef = react.useRef(null);
   });
+  const getItemValue = item => item == null ? null : _getItemValue ? _getItemValue(item) : typeof item === 'string' ? item : null;
   const setInputValue = react.useCallback(value => {
@@ -37,2 +39,3 @@ const input = inputRef.current;
     items,
+    getItemValue,
     onChange,
@@ -93,2 +96,3 @@ inputRef,
   items,
+  getItemValue,
   onChange,
@@ -129,4 +133,4 @@ setInputValue,
     if (rovingText) {
-      var _items$nextIndex;
-      setInputValue((_items$nextIndex = items[nextIndex]) != null ? _items$nextIndex : cxInstance.b);
+      var _getItemValue;
+      setInputValue((_getItemValue = getItemValue(items[nextIndex])) != null ? _getItemValue : cxInstance.b);
       const input = inputRef.current;
@@ -155,3 +159,3 @@ cxInstance.c = [input.selectionStart, input.selectionEnd];
     onClick: () => setOpen(true),
-    onBlur: () => updateAndCloseList(items[focusIndex], 'blur'),
+    onBlur: () => updateAndCloseList(getItemValue(items[focusIndex]), 'blur'),
     onKeyDown: ({
@@ -176,3 +180,3 @@ key
         case 'Enter':
-          updateAndCloseList(items[focusIndex], 'submit');
+          updateAndCloseList(getItemValue(items[focusIndex]), 'submit');
           break;
@@ -186,3 +190,3 @@ case 'Escape':
   const getItemProps = option => ({
-    onClick: () => updateAndCloseList(items[option == null ? void 0 : option.index], 'submit')
+    onClick: () => updateAndCloseList(getItemValue(items[option == null ? void 0 : option.index]), 'submit')
   });
@@ -199,3 +203,3 @@ return {
   });
-  return cx => {
+  const useSupercomplete = cx => {
     const {
@@ -241,2 +245,3 @@ getInputProps: _getInputProps,
   };
+  return useSupercomplete;
 };
@@ -243,0 +248,0 @@

dist/esm/features/autocomplete.js

@@ -7,2 +7,3 @@ const autocomplete = ({
   items,
+  getItemValue,
   onChange,
@@ -43,4 +44,4 @@ setInputValue,
     if (rovingText) {
-      var _items$nextIndex;
-      setInputValue((_items$nextIndex = items[nextIndex]) != null ? _items$nextIndex : cxInstance.b);
+      var _getItemValue;
+      setInputValue((_getItemValue = getItemValue(items[nextIndex])) != null ? _getItemValue : cxInstance.b);
       const input = inputRef.current;
@@ -69,3 +70,3 @@ cxInstance.c = [input.selectionStart, input.selectionEnd];
     onClick: () => setOpen(true),
-    onBlur: () => updateAndCloseList(items[focusIndex], 'blur'),
+    onBlur: () => updateAndCloseList(getItemValue(items[focusIndex]), 'blur'),
     onKeyDown: ({
@@ -90,3 +91,3 @@ key
         case 'Enter':
-          updateAndCloseList(items[focusIndex], 'submit');
+          updateAndCloseList(getItemValue(items[focusIndex]), 'submit');
           break;
@@ -100,3 +101,3 @@ case 'Escape':
   const getItemProps = option => ({
-    onClick: () => updateAndCloseList(items[option == null ? void 0 : option.index], 'submit')
+    onClick: () => updateAndCloseList(getItemValue(items[option == null ? void 0 : option.index]), 'submit')
   });
@@ -103,0 +104,0 @@ return {

dist/esm/features/supercomplete.js

@@ -8,3 +8,3 @@ import { useState, useCallback } from 'react';
   });
-  return cx => {
+  const useSupercomplete = cx => {
     const {
@@ -50,4 +50,5 @@ getInputProps: _getInputProps,
   };
+  return useSupercomplete;
 };
 
 export { supercomplete };

dist/esm/hooks/useAutocomplete.js

 import { useRef, useState, useCallback } from 'react';
 
 const useAutocomplete = ({
+  items = [],
+  onChange = () => {},
   feature: useFeature,
-  items = [],
-  onChange = () => {}
+  getItemValue: _getItemValue
 }) => {
@@ -15,2 +16,3 @@ const inputRef = useRef(null);
   });
+  const getItemValue = item => item == null ? null : _getItemValue ? _getItemValue(item) : typeof item === 'string' ? item : null;
   const setInputValue = useCallback(value => {
@@ -34,2 +36,3 @@ const input = inputRef.current;
     items,
+    getItemValue,
     onChange,
@@ -36,0 +39,0 @@ inputRef,

package.json

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

types/common.d.ts

@@ -16,7 +16,7 @@ import type { HTMLAttributes, InputHTMLAttributes } from 'react';
 export type ChangeType = 'submit' | 'input' | 'blur' | 'esc';
-export interface ContextualProps {
+export interface ContextualProps<T> {
     onChange: (value: string, meta: {
         type: ChangeType;
     }) => void;
-    items: string[];
+    items: T[];
 }
@@ -40,4 +40,5 @@ export interface Instance {
 }
-export interface Contextual extends ContextualProps, AutocompleteState {
+export interface Contextual<T> extends ContextualProps<T>, AutocompleteState {
     inputRef: React.RefObject<HTMLInputElement>;
+    getItemValue: (item: T | undefined | null) => string | undefined | null;
     /**
@@ -48,5 +49,9 @@ * ### INTERNAL API ###
 }
-export type Feature<Actions = object> = (cx: Contextual) => GetProps & Actions;
-export interface AutocompleteProps<FeatureActions = object> extends Partial<ContextualProps> {
-    feature: Feature<FeatureActions>;
+export type Feature<T, Actions = object> = (cx: Contextual<T>) => GetProps & Actions;
+interface GetItemValue<T> {
+    getItemValue: (item: T) => string;
 }
+export type AutocompleteProps<T, FeatureActions = object> = Partial<ContextualProps<T>> & {
+    feature: Feature<T, FeatureActions>;
+} & (T extends string ? Partial<GetItemValue<T>> : GetItemValue<T>);
+export {};

types/features/autocomplete.d.ts

 import type { Feature } from '../common';
-declare const autocomplete: (props?: {
+declare const autocomplete: <T>(props?: {
     rovingText?: boolean;
     traverseInput?: boolean;
-}) => Feature;
+}) => Feature<T>;
 export { autocomplete };

types/features/supercomplete.d.ts

@@ -9,3 +9,3 @@ import type { Feature } from '../common';
 }
-declare const supercomplete: () => Feature<{
+declare const supercomplete: <T>() => Feature<T, {
     inlineComplete: (props: {
@@ -12,0 +12,0 @@ index?: number;

types/hooks/useAutocomplete.d.ts

 /// <reference types="react" />
-import type { AutocompleteProps } from '../common';
-declare const useAutocomplete: <FeatureActions>({ feature: useFeature, items, onChange }: AutocompleteProps<FeatureActions>) => {
+import type { GetProps, AutocompleteProps } from '../common';
+declare const useAutocomplete: <T, FeatureActions>({ items, onChange, feature: useFeature, getItemValue: _getItemValue }: AutocompleteProps<T, FeatureActions>) => {
     setInputValue: (value: string) => void;
@@ -13,3 +13,3 @@ focusIndex: number;
     } | undefined) => import("react").HTMLAttributes<HTMLElement>;
-} & FeatureActions;
+} & Omit<GetProps & FeatureActions, "getInputProps" | "getItemProps">;
 export { useAutocomplete };

No alert changes

Improved metrics

Total package byte prevSize

18621

increased by5.19%

Lines of code

569

increased by2.71%

No dependency changes