@neovici/cosmoz-autocomplete 10.4.0 → 10.6.0

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), () => 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);
@@ -19,7 +21,7 @@ const Listbox = (host) => {
         vl.layoutComplete.then(() => {
             host.dispatchEvent(new CustomEvent('layout-complete'));
             return setItemHeight(vl['_layout']._metricsCache.averageChildSize);
-        });
+        }, ignore);
     }, [items]);
     useEffect(() => {
         if (!position.scroll)
@@ -28,7 +30,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/item-renderer.js

@@ -4,17 +4,18 @@ import { mark } from './util';
 export const itemRenderer = (render = identity) => (item, i, { highlight, select, textual = identity, query, isSelected, }) => {
     const text = textual(item), content = mark(text, query), rendered = render(content, item, i);
     return html `<div
-			class="item"
-			role="option"
-			part="option"
-			?aria-selected=${isSelected(item)}
-			data-index=${i}
-			@mouseenter=${() => highlight(i)}
-			@click=${() => select(item)}
-			@mousedown=${(e) => e.preventDefault()}
-			title=${text}
-		>
-			${rendered}
-		</div>`;
+				class="item"
+				role="option"
+				part="option"
+				?aria-selected=${isSelected(item)}
+				data-index=${i}
+				@mouseenter=${() => highlight(i)}
+				@click=${() => select(item)}
+				@mousedown=${(e) => e.preventDefault()}
+				title=${text}
+			>
+				${rendered}
+			</div>
+			<div class="sizer" virtualizer-sizer>${rendered}</div>`;
 };
 export default itemRenderer();

package/dist/listbox/style.css.d.ts

@@ -1,6 +1,6 @@
 declare const style: string;
 export default style;
-export declare const styles: ({ index, itemHeight, auto }: {
+export declare const styles: ({ index, itemHeight, auto, }: {
     index?: number;
     itemHeight: number;
     auto: boolean;

package/dist/listbox/style.css.js

@@ -1,4 +1,4 @@
-import { tagged as css } from '@neovici/cosmoz-utils';
+import { css } from '@pionjs/pion';
 import { when } from 'lit-html/directives/when.js';
 const svg = 
 /* eslint-disable quotes */
@@ -20,12 +20,23 @@ const style = css `
 			0 1.5px 6px 0 rgba(0, 0, 0, 0.1);
 		text-transform: var(--cosmoz-autocomplete-listbox-text-transform, initial);
 		overflow: hidden;
+		transition:
+			opacity 150ms ease-in-out,
+			transform 100ms ease-in-out;
 	}
 	:host(:popover-open) {
 		box-sizing: border-box;
 		display: block;
 		margin: 0;
 		border: 1px solid rgba(200, 200, 200, 0.25);
+
+		opacity: 1;
+		transform: translateY(0);
+
+		@starting-style {
+			opacity: 0;
+			transform: translateY(-50px);
+		}
 	}
 	:host([popover]) {
 		padding: 0;
@@ -49,6 +60,20 @@ const style = css `
 		overflow: hidden;
 	}
 
+	.sizer {
+		position: relative;
+		visibility: hidden;
+		opacity: 0;
+		pointer-events: none;
+		z-index: -1;
+		height: 0;
+		width: auto;
+		padding: 0 20px;
+		overflow: hidden;
+		max-width: inherit;
+		font-size: 14px;
+	}
+
 	:host(:not([multi])) .item[aria-selected] {
 		background: var(--cosmoz-listbox-single-selection-color, #dadada);
 	}
@@ -71,6 +96,9 @@ const style = css `
 		/* prettier-ignore */
 		background: url("${svg}") #5881f6 no-repeat 50%;
 	}
+	:host([multi]) .sizer {
+		padding-left: 33px;
+	}
 	.swatch {
 		width: 18px;
 		height: 18px;
@@ -79,12 +107,12 @@ const style = css `
 		vertical-align: middle;
 		border-radius: 50%;
 	}
-	[virtualizer-sizer] {
+	[virtualizer-sizer]:not(.sizer) {
 		line-height: 1;
 	}
 `;
 export default style;
-export const styles = ({ index, itemHeight, auto }) => css `
+export const styles = ({ index, itemHeight, auto, }) => css `
 	${when(!auto, () => css `
 			.item {
 				line-height: ${itemHeight}px;

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.4.0",
+	"version": "10.6.0",
 	"description": "A autocomplete input web component",
 	"keywords": [
 		"lit-html",