@neovici/cosmoz-autocomplete 9.0.0 → 9.0.2

package/dist/autocomplete/skeleton-span.js

@@ -9,10 +9,10 @@ const style = css `
 		background-position: right;
 		animation: sweep 1.5s cubic-bezier(0.3, 1, 0.3, 1) infinite;
 		border-radius: 3px;
-		width: calc(100% - 50px);
+		width: calc(100% - 20px);
 		max-width: 150px;
 		height: 20px;
-		margin: 10px 0 10px 33px;
+		margin: 10px;
 	}
 
 	:host-context([show-single]) {

package/dist/autocomplete/use-autocomplete.d.ts

@@ -25,8 +25,9 @@ export interface Props<I> extends Base<I> {
     disabled?: boolean;
     onFocus?: (focused?: boolean) => void;
     preserveOrder?: boolean;
+    defaultIndex?: number;
 }
-export declare const useAutocomplete: <I>({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, min, source, textProperty, textual: _textual, valueProperty, keepOpened, keepQuery, preserveOrder, ...thru }: Props<I>) => {
+export declare const useAutocomplete: <I>({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, min, source, textProperty, textual: _textual, valueProperty, keepOpened, keepQuery, preserveOrder, defaultIndex, ...thru }: Props<I>) => {
     active: boolean | undefined;
     query: string;
     textual: (i: I) => string;
@@ -38,6 +39,7 @@ export declare const useAutocomplete: <I>({ value: _value, text, onChange: _onCh
     onText: (e: InputEvent) => void;
     onSelect: (newVal: I) => void;
     onDeselect: (val: I | I[]) => void;
+    defaultIndex: number | undefined;
 };
 export type RProps<I> = ReturnType<typeof useAutocomplete<I>>;
 export {};

package/dist/autocomplete/use-autocomplete.js

@@ -6,7 +6,7 @@ import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
 import { useFocus } from '@neovici/cosmoz-dropdown/use-focus';
 import { useKeys } from './use-keys';
 import { search, normalize, notify, useNotify, EMPTY } from './util';
-export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, min, source, textProperty, textual: _textual, valueProperty, keepOpened, keepQuery, preserveOrder, ...thru }) => {
+export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, min, source, textProperty, textual: _textual, valueProperty, keepOpened, keepQuery, preserveOrder, defaultIndex, ...thru }) => {
     const textual = useMemo(() => (_textual ?? strProp)(textProperty), [_textual, textProperty]), { active, focused, onFocus, setClosed } = useFocus(thru), empty = !text, query = useMemo(() => text?.trim(), [text]), host = useHost(), onText = useNotify(host, _onText, 'text'), onChange = useCallback((val) => {
         _onChange?.(val, () => setClosed(true));
         notify(host, 'value', val);
@@ -79,5 +79,7 @@ export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onTe
                 : [...value, newVal]).slice(-limit));
         }, [meta]),
         onDeselect: useCallback((val) => meta.onChange(without(val)(meta.value)), [meta]),
+        // whenever there is a query, override defaultIndex to 0, so the first result gets selected
+        defaultIndex: query?.length > 0 ? 0 : defaultIndex,
     };
 };

package/dist/listbox/use-items.js

@@ -5,8 +5,11 @@ export const useItems = ({ items, onSelect, defaultIndex = 0, }) => {
         index: defaultIndex,
     }), { index } = position, { length } = items;
     useEffect(() => {
+        // whenever the items list is empty, reset the position to defaultIndex
         setPosition({
-            index: Math.min(position.index, items.length - 1),
+            index: position.index < 0
+                ? defaultIndex
+                : Math.min(position.index, items.length - 1),
             scroll: true,
         });
     }, [items, defaultIndex]);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-autocomplete",
-	"version": "9.0.0",
+	"version": "9.0.2",
 	"description": "A autocomplete input web component",
 	"keywords": [
 		"lit-html",