@neovici/cosmoz-autocomplete 10.5.0 → 10.6.1

package/dist/autocomplete/autocomplete.js

@@ -2,7 +2,7 @@ import '@neovici/cosmoz-input';
 import './skeleton-span';
 import { useHost } from '@neovici/cosmoz-utils/hooks/use-host';
 import { useImperativeApi } from '@neovici/cosmoz-utils/hooks/use-imperative-api';
-import { html, nothing } from 'lit-html'; // eslint-disable-line object-curly-newline
+import { html } from 'lit-html';
 import { live } from 'lit-html/directives/live.js';
 import { until } from 'lit-html/directives/until.js';
 import { when } from 'lit-html/directives/when.js';
@@ -13,10 +13,10 @@ import { useAutocomplete } from './use-autocomplete';
 import { useOverflow } from './use-overflow';
 import { ref } from 'lit-html/directives/ref.js';
 import { useFloating, defaultMiddleware, size, } from '@neovici/cosmoz-dropdown/use-floating';
+import { useEffect } from '@pionjs/pion';
 const inputParts = ['input', 'control', 'label', 'line', 'error', 'wrap']
     .map((part) => `${part}: input-${part}`)
     .join();
-const blank = () => nothing;
 const middleware = [
     size({
         apply({ rects, elements }) {
@@ -27,13 +27,28 @@ const middleware = [
     }),
     ...defaultMiddleware,
 ];
+const shouldShowDropdown = ({ active, loading, items, text, isSingle, showSingle, }) => {
+    if (!active)
+        return false;
+    const hasResultsOrQuery = loading || items.length > 0 || text.length > 0;
+    const disallowedSingle = isSingle && !showSingle;
+    return hasResultsOrQuery && !disallowedSingle;
+};
 const autocomplete = (props) => {
-    const { active, invalid, errorMessage, label, placeholder, disabled, noLabelFloat, alwaysFloatLabel, textual, text, onText, onFocus, onClick, onDeselect, value, limit, min, showSingle, items, source$, placement, } = props, host = useHost(), isOne = limit == 1, // eslint-disable-line eqeqeq
+    const { active, invalid, errorMessage, label, placeholder, disabled, noLabelFloat, alwaysFloatLabel, textual, text, onText, onFocus, onClick, onDeselect, value, limit, min, showSingle, items, source$, placement, loading, } = props, host = useHost(), isOne = limit == 1, // eslint-disable-line eqeqeq
     isSingle = isOne && value?.[0] != null;
     const { styles, setReference, setFloating } = useFloating({
         placement,
         middleware,
     });
+    useEffect(() => {
+        host.addEventListener('focusin', onFocus);
+        host.addEventListener('focusout', onFocus);
+        return () => {
+            host.removeEventListener('focusin', onFocus);
+            host.removeEventListener('focusout', onFocus);
+        };
+    }, [onFocus]);
     useImperativeApi({
         focus: () => host.shadowRoot?.querySelector('#input')?.focus(),
     }, []);
@@ -51,8 +66,6 @@ const autocomplete = (props) => {
 				.errorMessage=${until(source$.then(() => errorMessage, (e) => e.message), errorMessage)}
 				.value=${live(text)}
 				@value-changed=${onText}
-				@focusin=${onFocus}
-				@focusout=${onFocus}
 				@click=${onClick}
 				autocomplete="off"
 				exportparts=${inputParts}
@@ -71,13 +84,20 @@ const autocomplete = (props) => {
     })}
 			</cosmoz-input>
 
-			${when(active && !(isSingle && !showSingle) && items.length > 0, () => listbox({
+			${when(shouldShowDropdown({
+        active,
+        loading,
+        items,
+        text,
+        isSingle,
+        showSingle,
+    }), () => listbox({
         ...props,
         items,
         multi: !isOne,
         setFloating,
         styles,
-    }, when(items.length < 5, () => until(source$.then(blank, blank), html `<cosmoz-autocomplete-skeleton-span></cosmoz-autocomplete-skeleton-span>`))))}`;
+    }, when(loading, () => html `<cosmoz-autocomplete-skeleton-span></cosmoz-autocomplete-skeleton-span>`, () => when(text.length > 0 && items.length === 0, () => html `<slot name="no-result"></slot>`))))}`;
 }, Autocomplete = (props) => {
     const thru = {
         ...props,

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

@@ -34,6 +34,7 @@ export declare const useAutocomplete: <I>({ value: _value, text, onChange: _onCh
     textual: (i: I) => string;
     value: I[];
     source$: Promise<I[]>;
+    loading: boolean;
     items: I[];
     onClick: () => void;
     onFocus: (e: FocusEvent) => void;

package/dist/autocomplete/use-autocomplete.js

@@ -6,6 +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';
+import { usePromise } from '@neovici/cosmoz-utils/hooks/use-promise';
 export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, min, source, textProperty, textual: _textual, valueProperty, keepOpened, keepQuery, preserveOrder, defaultIndex, externalSearch, ...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));
@@ -35,12 +36,14 @@ export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onTe
         setClosed,
         onSelect,
     });
+    const [, , state] = usePromise(source$);
     return {
         active,
         query,
         textual,
         value,
         source$,
+        loading: state === 'pending',
         items: useMemo(() => {
             if (!active)
                 return EMPTY;

package/dist/listbox/index.js

@@ -9,6 +9,8 @@ import { ref } from 'lit-html/directives/ref.js';
 import { styleMap } from 'lit-html/directives/style-map.js';
 import style, { styles } from './style.css';
 import { properties, useListbox } from './use-listbox';
+import { noop } from '@neovici/cosmoz-utils/function';
+const ignore = noop;
 const Listbox = (host) => {
     const listRef = useRef(undefined);
     const { position, items, renderItem, height, itemHeight, setItemHeight } = useListbox(host);
@@ -18,8 +20,9 @@ const Listbox = (host) => {
             return;
         vl.layoutComplete.then(() => {
             host.dispatchEvent(new CustomEvent('layout-complete'));
-            return setItemHeight(vl['_layout']._metricsCache.averageChildSize);
-        });
+            const { averageChildSize, averageMarginSize } = vl['_layout']._metricsCache;
+            return setItemHeight(averageChildSize + averageMarginSize * 2);
+        }, ignore);
     }, [items]);
     useEffect(() => {
         if (!position.scroll)
@@ -28,7 +31,7 @@ const Listbox = (host) => {
         if (!vl)
             return;
         if (!vl?.['_layout']) {
-            vl.layoutComplete.then(() => vl.element(position.index)?.scrollIntoView({ block: 'nearest' }));
+            vl.layoutComplete.then(() => vl.element(position.index)?.scrollIntoView({ block: 'nearest' }), ignore);
             return;
         }
         vl.element(position.index)?.scrollIntoView({ block: 'nearest' });

package/dist/listbox/item-renderer.d.ts

@@ -1,6 +1,7 @@
 import { TemplateResult } from 'lit-html';
 import { Position } from './use-items';
 export interface ItemRendererOpts<I> {
+    items: I[];
     position: Position;
     highlight: (i: number) => void;
     select: (item: I) => void;

package/dist/listbox/use-listbox.js

@@ -37,6 +37,7 @@ export const useListbox = ({ value, valueProperty, items: _items, onSelect, defa
         setItemHeight,
         renderItem: useRenderItem({
             itemRenderer,
+            items,
             position,
             highlight,
             select,

package/package.json

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