@neovici/cosmoz-autocomplete 8.9.2 → 9.0.1

package/dist/autocomplete/autocomplete.d.ts

@@ -1,6 +1,7 @@
 import '@neovici/cosmoz-input';
-import { Props as Base, RProps } from './use-autocomplete';
+import './skeleton-span';
 import style from './styles.css';
+import { Props as Base, RProps } from './use-autocomplete';
 export interface Props<I> extends Base<I> {
     invalid?: boolean;
     errorMessage?: string;
@@ -17,5 +18,5 @@ export interface Props<I> extends Base<I> {
 type AProps<I> = Omit<Props<I>, keyof RProps<I>> & RProps<I> & {
     onInputRef?: (el?: Element) => void;
 };
-declare const autocomplete: <I>(props: AProps<I>) => import("lit-html").TemplateResult<1>, Autocomplete: <I>(props: Props<I>) => import("lit-html").TemplateResult<1>, observedAttributes: readonly ["disabled", "invalid", "no-label-float", "always-float-label", "text-property", "value-property", "limit", "min", "show-single", "preserve-order", "keep-opened", "keep-query", "hide-empty", "default-index", "item-height", "item-limit", "wrap"];
-export { autocomplete, Autocomplete, observedAttributes, style };
+declare const autocomplete: <I>(props: AProps<I>) => import("lit-html").TemplateResult<1>, Autocomplete: <I>(props: Props<I>) => import("lit-html").TemplateResult<1>, observedAttributes: readonly ["disabled", "invalid", "no-label-float", "always-float-label", "text-property", "value-property", "limit", "min", "show-single", "preserve-order", "keep-opened", "keep-query", "default-index", "item-height", "item-limit", "wrap"];
+export { Autocomplete, autocomplete, observedAttributes, style };

package/dist/autocomplete/autocomplete.js

@@ -1,34 +1,30 @@
+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 { useCallback } from '@pionjs/pion';
 import { html, nothing } from 'lit-html'; // eslint-disable-line object-curly-newline
 import { live } from 'lit-html/directives/live.js';
 import { until } from 'lit-html/directives/until.js';
 import { when } from 'lit-html/directives/when.js';
-import { useCallback } from '@pionjs/pion';
-import { useHost } from '@neovici/cosmoz-utils/hooks/use-host';
-import { useImperativeApi } from '@neovici/cosmoz-utils/hooks/use-imperative-api';
-import '@neovici/cosmoz-input';
-import { useAutocomplete } from './use-autocomplete';
 import { listbox } from '../listbox';
-import style from './styles.css';
 import { selection } from './selection';
+import style from './styles.css';
+import { useAutocomplete } from './use-autocomplete';
 import { useOverflow } from './use-overflow';
-const blank = () => nothing;
 const inputParts = ['input', 'control', 'label', 'line', 'error', 'wrap']
     .map((part) => `${part}: input-${part}`)
     .join();
+const blank = () => nothing;
 const autocomplete = (props) => {
-    const { invalid, errorMessage, label, placeholder, disabled, noLabelFloat, alwaysFloatLabel, textual, text, onText, onFocus, onClick, onDeselect, value, limit, min, showSingle, items$, values$, } = 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$, } = props, host = useHost(), isOne = limit == 1, // eslint-disable-line eqeqeq
     isSingle = isOne && value?.[0] != null, 
     // TODO: Refactor with ref or a state callback
-    anchor = useCallback(() => host.shadowRoot.querySelector('#input'), [host, value]), suggestions = until(items$.then((items) => when((!isSingle || showSingle) && items.length, () => listbox({
-        ...props,
-        anchor,
-        items,
-        multi: !isOne,
-    }))));
+    anchor = useCallback(() => host.shadowRoot.querySelector('#input'), [host, value]);
     useImperativeApi({
         focus: () => host.shadowRoot?.querySelector('#input')?.focus(),
     }, []);
-    return html ` <cosmoz-input
+    return html `<cosmoz-input
 				id="input"
 				part="input"
 				.label=${label}
@@ -37,8 +33,8 @@ const autocomplete = (props) => {
 				?always-float-label=${value?.length > 0 || alwaysFloatLabel}
 				?readonly=${isSingle}
 				?disabled=${disabled}
-				?invalid=${until(values$.then(() => invalid, () => true), invalid)}
-				.errorMessage=${until(values$.then(() => errorMessage, (e) => e.message), errorMessage)}
+				?invalid=${until(source$.then(() => invalid, () => true), invalid)}
+				.errorMessage=${until(source$.then(() => errorMessage, (e) => e.message), errorMessage)}
 				.value=${live(text)}
 				@value-changed=${onText}
 				@focusin=${onFocus}
@@ -59,10 +55,14 @@ const autocomplete = (props) => {
         textual,
         disabled,
     })}
-				${until(values$.then(blank, blank), html `<div slot="suffix" class="spinner"></div>`)}
 			</cosmoz-input>
 
-			${suggestions}`;
+			${when(active && !(isSingle && !showSingle), () => listbox({
+        ...props,
+        anchor,
+        items,
+        multi: !isOne,
+    }, when(items.length < 5, () => until(source$.then(blank, blank), html `<cosmoz-autocomplete-skeleton-span></cosmoz-autocomplete-skeleton-span>`))))}`;
 }, Autocomplete = (props) => {
     const thru = {
         ...props,
@@ -83,10 +83,9 @@ const autocomplete = (props) => {
     'preserve-order',
     'keep-opened',
     'keep-query',
-    'hide-empty',
     'default-index',
     'item-height',
     'item-limit',
     'wrap',
 ];
-export { autocomplete, Autocomplete, observedAttributes, style };
+export { Autocomplete, autocomplete, observedAttributes, style };

package/dist/autocomplete/chip.js

@@ -29,7 +29,12 @@ const clear = html `
 `;
 export const Chip = ({ onClear, disabled }) => html `
 	<div class="content" part="content chip-text"><slot></slot></div>
-	${when(onClear && !disabled, () => html ` <span class="clear" part="clear chip-clear" @click=${onClear}>
+	${when(onClear && !disabled, () => html `<span
+				class="clear"
+				part="clear chip-clear"
+				@mousedown=${(ev) => ev.preventDefault()}
+				@click=${onClear}
+			>
 				${clear}
 			</span>`)}
 `;

package/dist/autocomplete/skeleton-span.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/autocomplete/skeleton-span.js

@@ -0,0 +1,31 @@
+import { component, css } from '@pionjs/pion';
+import { nothing } from 'lit-html';
+const style = css `
+	:host {
+		display: inline-block;
+		vertical-align: middle;
+		background-image: linear-gradient(90deg, #e0e0e0, #f5f5f5, #e0e0e0);
+		background-size: 1000%;
+		background-position: right;
+		animation: sweep 1.5s cubic-bezier(0.3, 1, 0.3, 1) infinite;
+		border-radius: 3px;
+		width: calc(100% - 20px);
+		max-width: 150px;
+		height: 20px;
+		margin: 10px;
+	}
+
+	:host-context([show-single]) {
+		margin-left: 20px;
+	}
+
+	@keyframes sweep {
+		0% {
+			background-position: right;
+		}
+		100% {
+			background-position: left;
+		}
+	}
+`;
+customElements.define('cosmoz-autocomplete-skeleton-span', component(() => nothing, { styleSheets: [style] }));

package/dist/autocomplete/styles.css.js

@@ -52,26 +52,4 @@ export default css `
 	slot {
 		display: contents !important;
 	}
-	
-	@keyframes rotateAnimation {
-		from {
-			transform: rotate(0deg);
-		}
-		to {
-			transform: rotate(360deg);
-		}
-	}
-
-	.spinner {
-		border-radius: 50%;
-		width: 22px;
-		height: 22px;
-		border: 2px solid rgba(0, 0, 0, 0.1);
-		border-top: 2px solid #5f5a92;
-		animation: rotateAnimation 1.2s infinite
-			cubic-bezier(0.785, 0.135, 0.15, 0.86);
-		box-sizing: border-box;
-		margin-top: -3px;
-		flex: none;
-	}
 `;

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

@@ -22,19 +22,17 @@ export interface Props<I> extends Base<I> {
     textProperty?: string;
     textual?: (prop?: string) => (i: I) => string;
     valueProperty?: string;
-    external?: boolean;
-    hideEmpty?: boolean;
     disabled?: boolean;
     onFocus?: (focused?: boolean) => void;
     preserveOrder?: boolean;
 }
-export declare const useAutocomplete: <I>({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, min, source, textProperty, textual: _textual, valueProperty, external, hideEmpty, 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, ...thru }: Props<I>) => {
     active: boolean | undefined;
     query: string;
     textual: (i: I) => string;
     value: I[];
-    values$: Promise<I[]>;
-    items$: Promise<I[]>;
+    source$: Promise<I[]>;
+    items: I[];
     onClick: () => void;
     onFocus: (e: FocusEvent) => void;
     onText: (e: InputEvent) => void;

package/dist/autocomplete/use-autocomplete.js

@@ -1,27 +1,22 @@
-import { useCallback, useMemo, useEffect } from '@pionjs/pion';
+import { useCallback, useMemo, useEffect, useState } from '@pionjs/pion';
 import { without, array } from '@neovici/cosmoz-utils/array';
 import { prop, strProp } from '@neovici/cosmoz-utils/object';
 import { useHost } from '@neovici/cosmoz-utils/hooks/use-host';
 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, external, hideEmpty, keepOpened, keepQuery, preserveOrder, ...thru }) => {
+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 }) => {
     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);
-    }, [_onChange]), source$ = useMemo(() => Promise.resolve(typeof source === 'function' ? source({ query, active }) : source), [source, active, query]), value = useMemo(() => array(_value), [_value]), values$ = useMemo(() => source$.then((source) => preserveOrder
-        ? normalize(source)
-        : [
-            ...value,
-            ...without(value, prop(valueProperty))(normalize(source)),
-        ]), [source$, value, valueProperty]);
+    }, [_onChange]), [options, setOptions] = useState([]), source$ = useMemo(() => Promise.resolve(typeof source === 'function' ? source({ query, active }) : source).then(normalize), [source, active, query]), value = useMemo(() => array(_value), [_value]);
+    useEffect(() => source$.then(setOptions), [source$]);
     useKeys({
         focused,
         empty,
         limit,
         value,
-        hideEmpty,
         onChange,
         onText,
     });
@@ -45,15 +40,24 @@ export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onTe
         query,
         textual,
         value,
-        values$,
-        items$: useMemo(() => {
-            if (!active || (hideEmpty && empty)) {
-                return EMPTY$;
-            }
-            return query && !external
-                ? values$.then((values) => search(values, query, textual))
-                : values$;
-        }, [values$, active, query, textual, external, hideEmpty, empty]),
+        source$,
+        items: useMemo(() => {
+            if (!active)
+                return EMPTY;
+            const items = preserveOrder
+                ? options
+                : [...value, ...without(value, prop(valueProperty))(options)];
+            return search(items, query, textual);
+        }, [
+            options,
+            active,
+            query,
+            textual,
+            empty,
+            value,
+            preserveOrder,
+            valueProperty,
+        ]),
         onClick: useCallback(() => setClosed(false), []),
         onFocus,
         onText: useCallback((e) => {

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

@@ -1,10 +1,9 @@
 export interface Props<I> {
     focused?: boolean;
     empty?: boolean;
-    hideEmpty?: boolean;
     value: I | I[];
     limit?: number;
     onChange: (v: I[]) => void;
     onText: (s: string) => void;
 }
-export declare const useKeys: <I>({ focused, empty, ...info }: Props<I>) => void;
+export declare const useKeys: <I>({ focused, empty, ...rest }: Props<I>) => void;

package/dist/autocomplete/use-keys.js

@@ -1,8 +1,8 @@
 import { useEffect } from '@pionjs/pion';
 import { array } from '@neovici/cosmoz-utils/array';
 import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
-export const useKeys = ({ focused, empty, ...info }) => {
-    const enabled = focused && empty, meta = useMeta(info);
+export const useKeys = ({ focused, empty, ...rest }) => {
+    const enabled = focused && empty, meta = useMeta(rest);
     useEffect(() => {
         if (!enabled) {
             return;
@@ -16,12 +16,6 @@ export const useKeys = ({ focused, empty, ...info }) => {
                 (key === 'Backspace' || (isOne && key.length === 1))) {
                 return meta.onChange(values.slice(0, -1));
             }
-            else if (meta.hideEmpty &&
-                values.length < 1 &&
-                ['Up', 'ArrowUp', 'Down', 'ArrowDown'].includes(key)) {
-                meta.onText(' ');
-                e.preventDefault();
-            }
         };
         document.addEventListener('keydown', handler, true);
         return () => document.removeEventListener('keydown', handler, true);

package/dist/autocomplete/util.d.ts

@@ -2,7 +2,7 @@ export declare const search: <I>(source: I[], query: string, textual: (i: I) =>
 export declare const normalize: <I>(source: I[] | false | null) => I[];
 export declare const notify: <T>(host: EventTarget, name: string, detail: T) => boolean;
 export declare const useNotify: <V>(host: EventTarget, fn: undefined | ((v: V) => void), name: string) => (val: V) => void;
-export declare const EMPTY: never[], EMPTY$: Promise<never[]>;
+export declare const EMPTY: never[];
 type Arr = unknown[];
 type ArrFn<T extends Arr> = (...args: T) => void;
 export declare const raf: <A extends Arr, F extends ArrFn<A> = ArrFn<A>>(fn: F) => (...args: A) => () => void;

package/dist/autocomplete/util.js

@@ -1,5 +1,7 @@
 import { useCallback } from '@pionjs/pion';
 export const search = (source, query, textual) => {
+    if (!query)
+        return source;
     const qry = query.toLowerCase();
     const matches = [];
     for (const item of source) {
@@ -12,11 +14,7 @@ export const search = (source, query, textual) => {
             index,
         });
     }
-    return matches
-        .sort((a, b) => {
-        return a.index - b.index;
-    })
-        .map(({ item }) => item);
+    return matches.sort((a, b) => a.index - b.index).map(({ item }) => item);
 };
 export const normalize = (source) => {
     if (source === false || source == null)
@@ -28,7 +26,7 @@ export const useNotify = (host, fn, name) => useCallback((val) => {
     fn?.(val);
     notify(host, name, val);
 }, [fn]);
-export const EMPTY = [], EMPTY$ = Promise.resolve(EMPTY);
+export const EMPTY = [];
 export const raf = (fn) => (...args) => {
     let id;
     const cleanup = () => {

package/dist/listbox/index.d.ts

@@ -1,4 +1,4 @@
 import { Props } from './use-listbox';
 export declare const listbox: <I>({ multi, ...thru }: Props<I> & {
     multi?: boolean;
-}) => import("lit-html").TemplateResult<1>;
+}, content: unknown) => import("lit-html").TemplateResult<1>;

package/dist/listbox/index.js

@@ -23,18 +23,19 @@ const Listbox = (props) => {
         _itemSize: { height: itemHeight - 0.00001 },
     }), [itemHeight]);
     return html `<div
-		class="items"
-		${ref((el) => (listRef.current = el))}
-		style="min-height: ${height}px"
-	>
-		<div virtualizer-sizer></div>
-		${virtualize({
+			class="items"
+			${ref((el) => (listRef.current = el))}
+			style="min-height: ${height}px"
+		>
+			<div virtualizer-sizer></div>
+			${virtualize({
         items,
         renderItem,
         scroller: true,
         layout,
     })}
-	</div>`;
+		</div>
+		<slot></slot>`;
 };
 const supportsPopover = () => {
     // eslint-disable-next-line no-prototype-builtins
@@ -49,12 +50,11 @@ const showPopover = (popover) => {
     }
 };
 customElements.define('cosmoz-listbox', component(Listbox, { styleSheets: [sheet(style)] }));
-export const listbox = ({ multi, ...thru }) => {
-    return html `<cosmoz-listbox
+export const listbox = ({ multi, ...thru }, content) => html `<cosmoz-listbox
 		${ref(showPopover)}
 		popover="manual"
 		part="listbox"
 		?multi=${multi}
 		...=${spreadProps(props(properties)(thru))}
-	></cosmoz-listbox>`;
-};
+		>${content}</cosmoz-listbox
+	>`;

package/dist/listbox/item-renderer.js

@@ -1,5 +1,5 @@
-import { html } from 'lit-html';
 import { identity } from '@neovici/cosmoz-utils/function';
+import { html } from 'lit-html';
 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);

package/dist/listbox/style.css.js

@@ -16,6 +16,7 @@ const style = css `
 			0 1px 8px 0 rgba(0, 0, 0, 0.12),
 			0 3px 3px -2px rgba(0, 0, 0, 0.4);
 		text-transform: var(--cosmoz-autocomplete-listbox-text-transform, initial);
+		overflow: hidden;
 	}
 	:host(:popover-open) {
 		box-sizing: border-box;
@@ -30,7 +31,6 @@ const style = css `
 		position: relative;
 		overflow-y: auto;
 		contain: layout paint !important;
-		height: 100%;
 	}
 	.item {
 		font-size: 14px;
@@ -100,8 +100,8 @@ const style = css `
 export default style;
 export const styles = ({ index, height, itemHeight, }) => css `
 	:host {
-		min-height: ${itemHeight}px;
-		height: ${height}px;
+		xmin-height: ${itemHeight}px;
+		xheight: ${height}px;
 	}
 
 	.item {

package/dist/listbox/use-items.js

@@ -5,7 +5,10 @@ export const useItems = ({ items, onSelect, defaultIndex = 0, }) => {
         index: defaultIndex,
     }), { index } = position, { length } = items;
     useEffect(() => {
-        setPosition({ index: defaultIndex, scroll: true });
+        setPosition({
+            index: Math.min(position.index, items.length - 1),
+            scroll: true,
+        });
     }, [items, defaultIndex]);
     useKeyboard({
         onUp: useCallback(() => setPosition((p) => ({

package/dist/listbox/use-listbox.js

@@ -18,6 +18,7 @@ export const properties = [
     'defaultIndex',
     'value',
     'valueProperty',
+    'loading',
 ];
 export const useListbox = ({ value, valueProperty, items: _items, onSelect, defaultIndex, query, textual, itemRenderer, itemHeight = 40, itemLimit = 5, ...thru }) => {
     const isSelected = useMemo(() => byValue(value, valueProperty), [value, valueProperty]), 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-autocomplete",
-	"version": "8.9.2",
+	"version": "9.0.1",
 	"description": "A autocomplete input web component",
 	"keywords": [
 		"lit-html",
@@ -74,7 +74,7 @@
 		"@neovici/cosmoz-dropdown": "^4.4.0",
 		"@neovici/cosmoz-input": "^5.0.2",
 		"@neovici/cosmoz-utils": "^6.0.0",
-		"@pionjs/pion": "^2.0.0",
+		"@pionjs/pion": "^2.7.1",
 		"lit-html": "^2.0.0 || ^3.0.0"
 	},
 	"devDependencies": {