Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@szhsin/react-autocomplete

Package Overview
Dependencies
Maintainers
1
Versions
45
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@szhsin/react-autocomplete - npm Package Compare versions

Comparing version 0.6.3 to 0.6.4

68

dist/cjs/index.js

@@ -6,3 +6,3 @@ 'use strict';

const useAutocomplete = ({
feature: useFeature = () => ({}),
feature: useFeature,
items = [],

@@ -30,3 +30,4 @@ onChange = () => {}

const {
getProps: getFeatureProps,
getInputProps: _getInputProps,
getItemProps: _getItemProps,
...actions

@@ -44,4 +45,4 @@ } = useFeature({

...featureInputProps
} = getFeatureProps('input');
const inputProps = {
} = _getInputProps();
const getInputProps = () => ({
...featureInputProps,

@@ -57,3 +58,3 @@ onBlur: e => !instance.a && (onBlur == null ? void 0 : onBlur(e)),

ref: inputRef
};
});
const getItemProps = option => {

@@ -64,3 +65,3 @@ const {

...featureItemProps
} = getFeatureProps('item', option);
} = _getItemProps(option);
return {

@@ -80,13 +81,5 @@ ...featureItemProps,

};
const getProps = (elementType, option) => {
switch (elementType) {
case 'item':
return getItemProps(option);
case 'input':
default:
return inputProps;
}
};
return {
getProps,
getInputProps,
getItemProps,
...state,

@@ -144,3 +137,3 @@ ...actions

};
const inputProps = {
const getInputProps = () => ({
onChange: e => {

@@ -191,16 +184,9 @@ setFocusIndex(-1);

}
};
});
const getItemProps = option => ({
onClick: () => updateAndCloseList(items[option.index], 'submit')
onClick: () => updateAndCloseList(items[option == null ? void 0 : option.index], 'submit')
});
return {
getProps: (elementType, option) => {
switch (elementType) {
case 'item':
return getItemProps(option);
case 'input':
default:
return inputProps;
}
}
getInputProps,
getItemProps
};

@@ -215,3 +201,3 @@ };

const {
getProps: _getProps,
getInputProps: _getInputProps,
...rest

@@ -228,18 +214,14 @@ } = useAutocomplete(cx);

...rest,
getProps: (elementType, option) => {
if (elementType === 'input') {
const inputProps = _getProps(elementType);
return {
...inputProps,
onChange: e => {
instance.c = e.nativeEvent.inputType === 'insertText';
inputProps.onChange(e);
}
};
} else {
return _getProps(elementType, option);
}
getInputProps: () => {
const inputProps = _getInputProps();
return {
...inputProps,
onChange: e => {
instance.c = e.nativeEvent.inputType === 'insertText';
inputProps.onChange(e);
}
};
},
inlineComplete: react.useCallback(({
index,
index = 0,
value

@@ -246,0 +228,0 @@ }) => {

@@ -48,3 +48,3 @@ const autocomplete = ({

};
const inputProps = {
const getInputProps = () => ({
onChange: e => {

@@ -95,16 +95,9 @@ setFocusIndex(-1);

}
};
});
const getItemProps = option => ({
onClick: () => updateAndCloseList(items[option.index], 'submit')
onClick: () => updateAndCloseList(items[option == null ? void 0 : option.index], 'submit')
});
return {
getProps: (elementType, option) => {
switch (elementType) {
case 'item':
return getItemProps(option);
case 'input':
default:
return inputProps;
}
}
getInputProps,
getItemProps
};

@@ -111,0 +104,0 @@ };

@@ -10,3 +10,3 @@ import { useState, useCallback } from 'react';

const {
getProps: _getProps,
getInputProps: _getInputProps,
...rest

@@ -23,18 +23,14 @@ } = useAutocomplete(cx);

...rest,
getProps: (elementType, option) => {
if (elementType === 'input') {
const inputProps = _getProps(elementType);
return {
...inputProps,
onChange: e => {
instance.c = e.nativeEvent.inputType === 'insertText';
inputProps.onChange(e);
}
};
} else {
return _getProps(elementType, option);
}
getInputProps: () => {
const inputProps = _getInputProps();
return {
...inputProps,
onChange: e => {
instance.c = e.nativeEvent.inputType === 'insertText';
inputProps.onChange(e);
}
};
},
inlineComplete: useCallback(({
index,
index = 0,
value

@@ -41,0 +37,0 @@ }) => {

import { useRef, useState, useCallback } from 'react';
const useAutocomplete = ({
feature: useFeature = () => ({}),
feature: useFeature,
items = [],

@@ -27,3 +27,4 @@ onChange = () => {}

const {
getProps: getFeatureProps,
getInputProps: _getInputProps,
getItemProps: _getItemProps,
...actions

@@ -41,4 +42,4 @@ } = useFeature({

...featureInputProps
} = getFeatureProps('input');
const inputProps = {
} = _getInputProps();
const getInputProps = () => ({
...featureInputProps,

@@ -54,3 +55,3 @@ onBlur: e => !instance.a && (onBlur == null ? void 0 : onBlur(e)),

ref: inputRef
};
});
const getItemProps = option => {

@@ -61,3 +62,3 @@ const {

...featureItemProps
} = getFeatureProps('item', option);
} = _getItemProps(option);
return {

@@ -77,13 +78,5 @@ ...featureItemProps,

};
const getProps = (elementType, option) => {
switch (elementType) {
case 'item':
return getItemProps(option);
case 'input':
default:
return inputProps;
}
};
return {
getProps,
getInputProps,
getItemProps,
...state,

@@ -90,0 +83,0 @@ ...actions

{
"name": "@szhsin/react-autocomplete",
"version": "0.6.3",
"version": "0.6.4",
"description": "",

@@ -5,0 +5,0 @@ "author": "Zheng Song",

import type { HTMLAttributes, InputHTMLAttributes } from 'react';
export interface GetProps {
input: [never, InputHTMLAttributes<HTMLInputElement>];
item: [{
getInputProps: () => InputHTMLAttributes<HTMLInputElement>;
getItemProps: (option?: {
index?: number;
}, HTMLAttributes<HTMLElement>];
}) => HTMLAttributes<HTMLElement>;
}
export type GetPropsResult<T extends keyof GetProps> = GetProps[T][1];
export type GetPropsFunc<T extends keyof GetProps> = (option?: GetProps[T][0]) => GetPropsResult<T>;
export interface AutocompleteState {

@@ -48,7 +46,5 @@ setInputValue: (value: string) => void;

}
export type Feature<Actions = object> = (cx: Contextual) => {
getProps: <T extends keyof GetProps>(elementType: T, option?: GetProps[T][0]) => GetProps[T][1];
} & Actions;
export type Feature<Actions = object> = (cx: Contextual) => GetProps & Actions;
export interface AutocompleteProps<FeatureActions = object> extends Partial<ContextualProps> {
feature?: Feature<FeatureActions>;
feature: Feature<FeatureActions>;
}

@@ -11,3 +11,3 @@ import type { Feature } from '../common';

inlineComplete: (props: {
index: number;
index?: number;
value: string;

@@ -14,0 +14,0 @@ }) => void;

@@ -1,3 +0,4 @@

import type { GetProps, AutocompleteProps } from '../common';
declare const useAutocomplete: <FeatureActions = object>({ feature: useFeature, items, onChange }: AutocompleteProps<FeatureActions>) => {
/// <reference types="react" />
import type { AutocompleteProps } from '../common';
declare const useAutocomplete: <FeatureActions>({ feature: useFeature, items, onChange }: AutocompleteProps<FeatureActions>) => {
setInputValue: (value: string) => void;

@@ -8,4 +9,7 @@ focusIndex: number;

setOpen: (value: boolean) => void;
getProps: <T extends keyof GetProps>(elementType: T, option?: GetProps[T][0] | undefined) => GetProps[T][1];
getInputProps: () => import("react").InputHTMLAttributes<HTMLInputElement>;
getItemProps: (option?: {
index?: number | undefined;
} | undefined) => import("react").HTMLAttributes<HTMLElement>;
} & FeatureActions;
export { useAutocomplete };
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc