@neovici/cosmoz-autocomplete 6.0.0 → 6.2.0

package/dist/autocomplete/autocomplete.d.ts

@@ -0,0 +1,16 @@
+import '@neovici/cosmoz-input';
+import { Props as Base, RProps } from './use-autocomplete';
+export interface Props<I> extends Base<I> {
+    invalid?: boolean;
+    errorMessage?: string;
+    label?: string;
+    placeholder?: string;
+    noLabelFloat?: boolean;
+    alwaysFloatLabel?: boolean;
+    showSingle?: boolean;
+    itemHeight?: number;
+    itemLimit?: number;
+}
+type AProps<I> = Omit<Props<I>, keyof RProps<I>> & RProps<I>;
+declare const autocomplete: <I>(props: AProps<I>) => import("lit-html").TemplateResult<1>, Autocomplete: <I>(props: Props<I>) => import("lit-html").TemplateResult<1>, observedAttributes: string[];
+export { autocomplete, Autocomplete, observedAttributes };

package/dist/autocomplete/autocomplete.js

@@ -0,0 +1,79 @@
+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 'haunted';
+import { useHost } from '@neovici/cosmoz-utils/hooks/use-host';
+import '@neovici/cosmoz-input';
+import { useAutocomplete } from './use-autocomplete';
+import { listbox } from '../listbox';
+import style from './styles.css';
+import { selection } from './selection';
+const blank = () => nothing;
+const inputParts = ['input', 'label', 'line', 'error']
+    .map((part) => `${part}: input-${part}`)
+    .join();
+const autocomplete = (props) => {
+    const { invalid, errorMessage, label, placeholder, disabled, noLabelFloat, alwaysFloatLabel, textual, text, onText, onFocus, onClick, onDeselect, value, limit, showSingle, items$, values$, } = 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,
+    }))));
+    return html ` <style>
+				${style}
+			</style>
+			<cosmoz-input
+				id="input"
+				part="input"
+				.label=${label}
+				.placeholder=${isSingle ? undefined : placeholder}
+				?no-label-float=${noLabelFloat}
+				?always-float-label=${isSingle || alwaysFloatLabel}
+				?readonly=${isSingle}
+				?disabled=${disabled}
+				?invalid=${until(values$.then(() => invalid, () => true), invalid)}
+				.errorMessage=${until(values$.then(() => errorMessage, (e) => e.message), errorMessage)}
+				.value=${live(text)}
+				@value-changed=${onText}
+				@focusin=${onFocus}
+				@focusout=${onFocus}
+				@click=${onClick}
+				autocomplete="off"
+				exportparts=${inputParts}
+			>
+				<slot name="prefix" slot="prefix"></slot>
+				<slot name="suffix" slot="suffix"></slot>
+				${selection({
+        value,
+        isOne,
+        onDeselect,
+        textual,
+        disabled,
+    })}
+				${until(values$.then(blank, blank), html `<div slot="suffix" class="spinner"></div>`)}
+			</cosmoz-input>
+
+			${suggestions}`;
+}, Autocomplete = (props) => autocomplete({
+    ...props,
+    ...useAutocomplete(props),
+}), observedAttributes = [
+    'disabled',
+    'invalid',
+    'no-label-float',
+    'always-float-label',
+    'text-property',
+    'limit',
+    'show-single',
+    'keep-query',
+    'keep-opened',
+    'hide-empty',
+    'default-index',
+    'item-height',
+    'item-limit',
+];
+export { autocomplete, Autocomplete, observedAttributes };

package/dist/autocomplete/index.d.ts

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

package/dist/autocomplete/index.js

@@ -0,0 +1,19 @@
+import { component, useCallback } from 'haunted';
+import { Autocomplete, observedAttributes as atts, } from './autocomplete';
+const Standalone = (host) => {
+    const { onChange, onText, ...props } = host;
+    return Autocomplete({
+        ...props,
+        onChange: useCallback((value, ...args) => {
+            host.value = value;
+            onChange?.(value, ...args);
+        }, [onChange]),
+        onText: useCallback((text) => {
+            host.text = text;
+            onText?.(text);
+        }, [onText]),
+    });
+};
+const observedAttributes = atts;
+customElements.define('cosmoz-autocomplete-ui', component(Autocomplete, { observedAttributes }));
+customElements.define('cosmoz-autocomplete', component(Standalone, { observedAttributes }));

package/dist/autocomplete/selection.d.ts

@@ -0,0 +1,11 @@
+import type { RProps } from './use-autocomplete';
+type Deselect<I> = RProps<I>['onDeselect'];
+interface Props<I> {
+    value: I[];
+    isOne: boolean;
+    onDeselect: Deselect<I>;
+    textual: (i: I) => string;
+    disabled?: boolean;
+}
+export declare const selection: <I>({ value, isOne, onDeselect, textual, disabled, }: Props<I>) => import("lit-html").TemplateResult<1> | undefined;
+export {};

package/dist/autocomplete/selection.js

@@ -0,0 +1,58 @@
+import { html } from 'lit-html'; // eslint-disable-line object-curly-newline
+import { when } from 'lit-html/directives/when.js';
+const clear = html `
+	<svg
+		width="9"
+		height="8"
+		viewBox="0 0 9 8"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<line
+			x1="7.53033"
+			y1="0.994808"
+			x2="1.16637"
+			y2="7.35877"
+			stroke-width="1.5"
+		/>
+		<line
+			x1="7.46967"
+			y1="7.35882"
+			x2="1.10571"
+			y2="0.99486"
+			stroke-width="1.5"
+		/>
+	</svg>
+`;
+const chip = ({ text, onClear, disabled, isOne, }) => html `
+	<div class="chip" part="chip" slot="suffix" title=${text} ?data-one=${isOne}>
+		<span class="chip-text" part="chip-text">${text}</span>
+		${when(!disabled, () => html ` <span class="chip-clear" part="chip-clear" @click=${onClear}>
+					${clear}
+				</span>`)}
+	</div>
+`;
+const badge = ({ value, onDeselect, }) => {
+    const len = value?.length;
+    return when(len > 0, () => html `<div class="badge" slot="suffix" part="badge">
+			${len}
+			<span
+				class="badge-clear"
+				part="chip-clear"
+				@click=${() => onDeselect(value)}
+				>${clear}</span
+			>
+		</div>`);
+};
+export const selection = ({ value, isOne, onDeselect, textual, disabled, }) => {
+    if (isOne || value.length === 1) {
+        const val = value[0];
+        return when(val, () => chip({
+            text: textual(val),
+            onClear: () => onDeselect(val),
+            disabled,
+            isOne,
+        }));
+    }
+    return badge({ value, onDeselect });
+};

package/dist/autocomplete/styles.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string;
+export default _default;

package/dist/autocomplete/styles.css.js

@@ -0,0 +1,107 @@
+import { tagged as css } from '@neovici/cosmoz-utils';
+export default css `
+	:host {
+		display: block;
+		position: relative;
+	}
+	.chip {
+		border-radius: var(--cosmoz-autocomplete-chip-border-radius, 500px);
+		background: var(--cosmoz-autocomplete-chip-bg-color, #cbcfdb);
+		margin: 1px 4px 1px 0;
+		white-space: nowrap;
+		overflow: hidden;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		flex: 0.00001 1 min-content;
+		max-width: 285px;
+		max-width: 28ch;
+	}
+	.chip[data-one] {
+		position: absolute;
+		left: 0;
+		top: 1px;
+		bottom: 1px;
+		right: 0;
+		margin: 0;
+		z-index: 2;
+		pointer-events: auto;
+		max-width: initial;
+	}
+	.chip-text {
+		color: var(--cosmoz-autocomplete-chip-color, #424242);
+		margin: var(--cosmoz-autocomplete-chip-text-margin, 0 10px);
+		font-size: var(--cosmoz-autocomplete-chip-text-font-size, 12px);
+		line-height: var(--cosmoz-autocomplete-chip-text-line-height, 22px);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		flex: 1;
+	}
+	.chip-clear {
+		margin: 2px 4px 2px -6px;
+		background-color: var(--cosmoz-autocomplete-chip-clear-bg-color, #81899b);
+		border-radius: 500px;
+		cursor: pointer;
+		width: 16px;
+		height: 16px;
+		stroke: var(
+			--cosmoz-autocomplete-chip-clear-stroke,
+			var(--cosmoz-autocomplete-chip-bg-color, #cbcfdb)
+		);
+		display: block;
+	}
+
+	.chip-clear svg,
+	.badge-clear svg {
+		display: block;
+		transform: translate(3.5px, 3.5px);
+	}
+
+	.badge {
+		background: var(--cosmoz-autocomplete-chip-bg-color, #cbcfdb);
+		color: var(--cosmoz-autocomplete-chip-color, #424242);
+		font-weight: 500;
+		font-size: 12px;
+		line-height: 22px;
+		padding: 0 4px 0 6px;
+		gap: 4px;
+		border-radius: 90px;
+		text-align: center;
+		box-sizing: border-box;
+		/* fallback for unsupported min-content FF, Safari */
+		flex: 0.01 2 30px;
+		flex: 0 2 min-content;
+		display: flex;
+		align-items: center;
+	}
+	.badge-clear {
+		background-color: var(--cosmoz-autocomplete-chip-clear-bg-color, #81899b);
+		border-radius: 500px;
+		cursor: pointer;
+		width: 16px;
+		height: 16px;
+		stroke: var(--cosmoz-autocomplete-chip-bg-color, #cbcfdb);
+		display: block;
+	}
+
+	slot {
+		display: contents !important;
+	}
+
+	@keyframes rotating {
+		100% {
+			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: rotating 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

@@ -0,0 +1,41 @@
+type Source<I> = (opts: {
+    query: string;
+    active?: boolean;
+}) => PromiseLike<I[]>;
+interface Base<I> {
+    value: I | I[];
+    limit?: number;
+    keepQuery?: boolean;
+    keepOpened?: boolean;
+    onText: (text: string) => void;
+    onChange: (value: I[], done?: () => void) => void;
+    onSelect: (value: I, meta: Meta<I>) => void;
+}
+interface Meta<I> extends Omit<Base<I>, 'value'> {
+    setClosed: (closed: boolean) => void;
+    value: I[];
+}
+export interface Props<I> extends Base<I> {
+    text: string;
+    source: I[] | Source<I>;
+    textProperty?: string;
+    valueProperty?: string;
+    external?: boolean;
+    hideEmpty?: boolean;
+    disabled?: boolean;
+    onFocus?: (focused?: boolean) => void;
+}
+export declare const useAutocomplete: <I>({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, source, textProperty, valueProperty, external, hideEmpty, keepQuery, keepOpened, ...thru }: Props<I>) => {
+    query: string;
+    textual: <O>(o: O) => string;
+    value: I[];
+    values$: Promise<I[]>;
+    items$: Promise<I[]>;
+    onClick: () => void;
+    onFocus: (e: FocusEvent) => void;
+    onText: (e: InputEvent) => void;
+    onSelect: (newVal: I) => void;
+    onDeselect: (val: I | I[]) => void;
+};
+export type RProps<I> = ReturnType<typeof useAutocomplete<I>>;
+export {};

package/dist/autocomplete/use-autocomplete.js

@@ -0,0 +1,74 @@
+import { useCallback, useMemo } from 'haunted';
+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, notify, useNotify, EMPTY$ } from './util';
+export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, source, textProperty, valueProperty, external, hideEmpty, keepQuery, keepOpened, ...thru }) => {
+    const textual = useMemo(() => strProp(textProperty), [textProperty]), { active, onFocus, setClosed } = useFocus(thru), empty = !text, query = useMemo(() => text?.trim().toLowerCase(), [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) => [
+        ...value,
+        ...without(value, prop(valueProperty))(source),
+    ]), [source$, value, valueProperty]);
+    useKeys({
+        active,
+        empty,
+        limit,
+        value,
+        hideEmpty,
+        onChange,
+        onText,
+    });
+    const meta = useMeta({
+        onText,
+        onChange,
+        value,
+        limit,
+        keepQuery,
+        keepOpened,
+        setClosed,
+        onSelect,
+    });
+    return {
+        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]),
+        onClick: useCallback(() => setClosed(false), []),
+        onFocus,
+        onText: useCallback((e) => {
+            onText(e.target.value);
+            setClosed(false);
+        }, [onText, text, setClosed]),
+        onSelect: useCallback((newVal) => {
+            const { onSelect } = meta;
+            if (onSelect) {
+                return onSelect(newVal, meta);
+            }
+            const { onChange, onText, limit, value: val, keepQuery, keepOpened, setClosed, } = meta;
+            if (!keepQuery) {
+                onText('');
+            }
+            if (!keepOpened) {
+                setClosed(true);
+            }
+            const value = array(val);
+            onChange((value.includes(newVal)
+                ? without(newVal)(value)
+                : [...value, newVal]).slice(-limit));
+        }, [meta]),
+        onDeselect: useCallback((val) => meta.onChange(without(val)(meta.value)), [meta]),
+    };
+};

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

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

package/dist/autocomplete/use-keys.js

@@ -0,0 +1,29 @@
+import { useEffect } from 'haunted';
+import { array } from '@neovici/cosmoz-utils/array';
+import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
+export const useKeys = ({ active, empty, ...info }) => {
+    const enabled = active && empty, meta = useMeta(info);
+    useEffect(() => {
+        if (!enabled) {
+            return;
+        }
+        const handler = (e) => {
+            if (e.defaultPrevented) {
+                return;
+            }
+            const { key } = e, values = array(meta.value), isOne = meta.limit == 1; //eslint-disable-line eqeqeq
+            if (values.length > 0 &&
+                (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);
+    }, [enabled, meta]);
+};

package/dist/autocomplete/util.d.ts

@@ -0,0 +1,4 @@
+export declare const search: <I>(source: I[], query: string, textual: (i: I) => string) => I[];
+export declare const notify: <T>(host: EventTarget, name: string, detail: T) => boolean;
+export declare const useNotify: <V>(host: EventTarget, fn: ((v: V) => void) | undefined, name: string) => (val: V) => void;
+export declare const EMPTY: never[], EMPTY$: Promise<never[]>;

package/dist/autocomplete/util.js

@@ -0,0 +1,25 @@
+import { useCallback } from 'haunted';
+export const search = (source, query, textual) => {
+    const matches = [];
+    for (const item of source) {
+        const index = textual(item).toLowerCase().indexOf(query);
+        if (index < 0) {
+            continue;
+        }
+        matches.push({
+            item,
+            index,
+        });
+    }
+    return matches
+        .sort((a, b) => {
+        return a.index - b.index;
+    })
+        .map(({ item }) => item);
+};
+export const notify = (host, name, detail) => host.dispatchEvent(new CustomEvent(name, { detail }));
+export const useNotify = (host, fn, name) => useCallback((val) => {
+    fn?.(val);
+    notify(host, name, val);
+}, [fn]);
+export const EMPTY = [], EMPTY$ = Promise.resolve(EMPTY);

package/dist/index.d.ts

@@ -0,0 +1 @@
+import './autocomplete/';

package/dist/index.js

@@ -0,0 +1 @@
+import './autocomplete/';

package/dist/listbox/index.d.ts

@@ -0,0 +1,20 @@
+import { Props } from './use-listbox';
+export declare const listbox: <I>({ multi, ...thru }: Props<I> & {
+    multi?: boolean | undefined;
+}) => import("lit-html/directive").DirectiveResult<{
+    new (_partInfo: import("lit-html/directive").PartInfo): {
+        _op?: import("lit-html").ChildPart | undefined;
+        _outlet?: HTMLElement | undefined;
+        _content?: unknown;
+        render(content: unknown, outlet?: HTMLElement | undefined): import("lit-html").TemplateResult<1>;
+        update(part: import("lit-html").Part, [content, outlet]: [unknown, (HTMLElement | undefined)?]): import("lit-html").TemplateResult<1>;
+        updateOutlet(outlet: HTMLElement, content: unknown): void;
+        clearOutlet(): void;
+        disconnected(): void;
+        reconnected(): void;
+        isConnected: boolean;
+        _$initialize(part: import("lit-html").Part, parent: import("lit-html").Disconnectable, attributeIndex: number | undefined): void;
+        setValue(value: unknown): void;
+        readonly _$isConnected: boolean;
+    };
+}>;

package/dist/listbox/index.js

@@ -0,0 +1,41 @@
+import { html, component, useEffect, useRef, useMemo } from 'haunted';
+import { ref } from 'lit-html/directives/ref.js';
+import { virtualize, virtualizerRef, } from '@lit-labs/virtualizer/virtualize.js';
+import { portal } from '@neovici/cosmoz-utils/directives/portal';
+import { spreadProps } from '@neovici/cosmoz-utils/directives/spread-props';
+import { props } from '@neovici/cosmoz-utils/object';
+import { useListbox, properties } from './use-listbox';
+import { styles } from './style.css';
+const Listbox = (props) => {
+    const listRef = useRef(undefined);
+    const { position, items, renderItem, height, itemHeight } = useListbox(props);
+    useEffect(() => {
+        if (!position.scroll)
+            return;
+        const vl = listRef.current?.[virtualizerRef];
+        if (!vl?.['_layout'])
+            return;
+        vl.element(position.index)?.scrollIntoView({ block: 'nearest' });
+    }, [position]);
+    const layout = useMemo(() => ({
+        _itemSize: { height: itemHeight - 0.00001 },
+    }), [itemHeight]);
+    return html ` <style>
+			${styles({ ...position, height, itemHeight })}
+		</style>
+		<div class="items" ${ref((el) => (listRef.current = el))}>
+			<div virtualizer-sizer></div>
+			${virtualize({
+        items,
+        renderItem,
+        scroller: true,
+        layout,
+    })}
+		</div>`;
+};
+customElements.define('cosmoz-listbox', component(Listbox));
+export const listbox = ({ multi, ...thru }) => portal(html `<cosmoz-listbox
+			part="listbox"
+			?multi=${multi}
+			...=${spreadProps(props(properties)(thru))}
+		></cosmoz-listbox>`);

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

@@ -0,0 +1,25 @@
+import { TemplateResult } from 'lit-html';
+export interface Opts<I> {
+    highlight: (i: number) => void;
+    select: (item: I) => void;
+    isSelected: (item: I) => void;
+    query: string;
+    textual: (i: I) => string;
+}
+export type Render<I> = (content: unknown, item: I, i: number) => unknown;
+export type ItemRenderer<I> = (item: I, i: number, opts: Opts<I>) => TemplateResult;
+export declare const itemRenderer: <I>(render?: Render<I>) => (item: I, i: number, { highlight, select, textual, query, isSelected, }: {
+    highlight: (i: number) => void;
+    select: (item: I) => void;
+    isSelected: (item: I) => void;
+    query: string;
+    textual: (i: I) => string;
+}) => TemplateResult;
+declare const _default: (item: unknown, i: number, { highlight, select, textual, query, isSelected, }: {
+    highlight: (i: number) => void;
+    select: (item: unknown) => void;
+    isSelected: (item: unknown) => void;
+    query: string;
+    textual: (i: unknown) => string;
+}) => TemplateResult;
+export default _default;

package/dist/listbox/item-renderer.js

@@ -0,0 +1,21 @@
+import { html } from 'lit-html';
+import { identity } from '@neovici/cosmoz-utils/function';
+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>
+			<div class="sizer" virtualizer-sizer>${rendered}</div>`;
+};
+export default itemRenderer();

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

@@ -0,0 +1,7 @@
+declare const style: string;
+export default style;
+export declare const styles: ({ index, height, itemHeight, }: {
+    index?: number | undefined;
+    height: number;
+    itemHeight: number;
+}) => string;

package/dist/listbox/style.css.js

@@ -0,0 +1,104 @@
+import { tagged as css } from '@neovici/cosmoz-utils';
+const svg = 
+/* eslint-disable quotes */
+"data:image/svg+xml,%3Csvg width='11' height='8' viewBox='0 0 11 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath " +
+    "d='M9.5 1L5.20039 7.04766L1.66348 3.46152' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E";
+/* eslint-enable quotes */
+const style = css `
+	:host {
+		position: fixed;
+		z-index: 1000;
+		font-family: var(--paper-font-subhead_-_font-family, initial);
+		background: #fff;
+		min-width: 72px;
+		box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12),
+			0 3px 3px -2px rgba(0, 0, 0, 0.4);
+	}
+	.items {
+		position: relative;
+		overflow-y: auto;
+		contain: layout paint !important;
+		height: 100%;
+	}
+	.item {
+		font-size: 14px;
+		padding: 0 20px;
+		box-sizing: border-box;
+		width: 100%;
+		cursor: pointer;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		transition: background 0.2s;
+		color: var(--cosmoz-listbox-color, #101010);
+	}
+
+	.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);
+	}
+
+	:host([multi]) .item {
+		padding-left: 0;
+	}
+	:host([multi]) .item::before {
+		content: '';
+		font-size: 0;
+		padding: 7.5px;
+		margin: 0 8px;
+		background: #fff;
+		border: 1px solid #d6d6d5;
+		border-radius: 4px;
+		vertical-align: top;
+	}
+	:host([multi]) .item[aria-selected]::before {
+		border-color: #5881f6;
+		/* prettier-ignore */
+		background: url("${svg}") #5881f6 no-repeat 50%;
+	}
+	:host([multi]) .sizer {
+		padding-left: 33px;
+	}
+	.swatch {
+		width: 18px;
+		height: 18px;
+		display: inline-block;
+		box-sizing: border-box;
+		vertical-align: middle;
+		border-radius: 50%;
+		border: 2px solid #eee;
+	}
+`;
+export default style;
+export const styles = ({ index, height, itemHeight, }) => css `
+	${style}
+
+	:host {
+		min-height: ${itemHeight}px;
+		height: ${height}px;
+	}
+
+	.item {
+		line-height: ${itemHeight}px;
+		height: ${itemHeight}px;
+	}
+
+	.item[data-index='${index || '0'}'] {
+		background: var(
+			--cosmoz-listbox-active-color,
+			var(--cosmoz-selection-color, rgba(58, 145, 226, 0.1))
+		);
+	}
+`;

package/dist/listbox/use-items.d.ts

@@ -0,0 +1,14 @@
+export interface UseItems<T> {
+    items: T[];
+    onSelect: (item: T, index?: number) => void;
+    defaultIndex?: number;
+}
+export interface Position {
+    index: number;
+    scroll?: boolean;
+}
+export declare const useItems: <T>({ items, onSelect, defaultIndex, }: UseItems<T>) => {
+    position: Position;
+    highlight: (index: number) => void;
+    select: (item: T) => void;
+};

package/dist/listbox/use-items.js

@@ -0,0 +1,26 @@
+import { useCallback, useEffect, useState } from 'haunted';
+import { useKeyboard } from './use-keyboard';
+export const useItems = ({ items, onSelect, defaultIndex = 0, }) => {
+    const [position, setPosition] = useState({
+        index: defaultIndex,
+    }), { index } = position, { length } = items;
+    useEffect(() => {
+        setPosition({ index: defaultIndex, scroll: true });
+    }, [items, defaultIndex]);
+    useKeyboard({
+        onUp: useCallback(() => setPosition((p) => ({
+            index: p.index > 0 ? p.index - 1 : length - 1,
+            scroll: true,
+        })), [length]),
+        onDown: useCallback(() => setPosition((p) => ({
+            index: p.index < length - 1 ? p.index + 1 : 0,
+            scroll: true,
+        })), [length]),
+        onEnter: useCallback(() => index > -1 && index < length && onSelect?.(items[index], index), [index, items, onSelect]),
+    });
+    return {
+        position,
+        highlight: useCallback((index) => setPosition({ index }), []),
+        select: useCallback((item) => onSelect?.(item), [onSelect]),
+    };
+};

package/dist/listbox/use-keyboard.d.ts

@@ -0,0 +1,8 @@
+type Handler = () => void;
+export interface Handlers {
+    onUp: Handler;
+    onDown: Handler;
+    onEnter: Handler;
+}
+export declare const useKeyboard: (handlers: Handlers) => void;
+export {};

package/dist/listbox/use-keyboard.js

@@ -0,0 +1,32 @@
+import { useEffect } from 'haunted';
+import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
+export const useKeyboard = (handlers) => {
+    const listeners = useMeta(handlers);
+    useEffect(() => {
+        const handler = (e) => {
+            if ((e.ctrlKey && e.altKey) || e.defaultPrevented) {
+                return;
+            }
+            switch (e.key) {
+                case 'Up':
+                case 'ArrowUp':
+                    e.preventDefault();
+                    listeners.onUp();
+                    break;
+                case 'Down':
+                case 'ArrowDown':
+                    e.preventDefault();
+                    listeners.onDown();
+                    break;
+                case 'Enter':
+                    e.preventDefault();
+                    listeners.onEnter();
+                    break;
+                default:
+                    break;
+            }
+        };
+        document.addEventListener('keydown', handler, true);
+        return () => document.removeEventListener('keydown', handler, true);
+    }, [listeners]);
+};

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

@@ -0,0 +1,28 @@
+import { Placement } from '@neovici/cosmoz-dropdown/use-position';
+import { useRenderItem, ItemRenderer } from './use-render-item';
+export declare const properties: string[];
+export interface Props<I> {
+    value: I | I[];
+    valueProperty?: string;
+    items: I[];
+    onSelect: (i: I) => void;
+    defaultIndex?: number;
+    query: string;
+    textual: (i: I) => string;
+    itemRenderer?: ItemRenderer<I>;
+    itemHeight?: number;
+    itemLimit?: number;
+    anchor?: () => HTMLElement | null;
+    confinement?: HTMLElement;
+    placement?: Placement;
+}
+export declare const useListbox: <I>({ value, valueProperty, items: _items, onSelect, defaultIndex, query, textual, itemRenderer, itemHeight, itemLimit, ...thru }: Props<I>) => {
+    position: import("./use-items").Position;
+    items: I[];
+    height: number;
+    highlight: (index: number) => void;
+    select: (item: I) => void;
+    itemHeight: number;
+    renderItem: (item: I, i: number) => import("lit-html").TemplateResult;
+};
+export { useRenderItem };

package/dist/listbox/use-listbox.js

@@ -0,0 +1,54 @@
+import { useMemo } from 'haunted';
+import { useHost } from '@neovici/cosmoz-utils/hooks/use-host';
+import { usePosition } from '@neovici/cosmoz-dropdown/use-position';
+import { byValue } from './util';
+import { useItems } from './use-items';
+import { useRenderItem } from './use-render-item';
+export const properties = [
+    'query',
+    'items',
+    'onSelect',
+    'textual',
+    'anchor',
+    'confinement',
+    'placement',
+    'itemHeight',
+    'itemLimit',
+    'itemRenderer',
+    'defaultIndex',
+    'value',
+    'valueProperty',
+];
+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]), 
+    // TODO: investigate if we can drop this
+    items = useMemo(() => _items.slice(), [_items, isSelected]), { position, highlight, select } = useItems({
+        items,
+        onSelect,
+        defaultIndex: isNaN(defaultIndex)
+            ? undefined
+            : Number(defaultIndex),
+    });
+    usePosition({
+        host: useHost(),
+        ...thru,
+        limit: true,
+    });
+    return {
+        position,
+        items,
+        height: Math.min(itemLimit, items.length) * itemHeight,
+        highlight,
+        select,
+        itemHeight,
+        renderItem: useRenderItem({
+            itemRenderer,
+            highlight,
+            select,
+            textual,
+            query,
+            isSelected,
+        }),
+    };
+};
+export { useRenderItem };

package/dist/listbox/use-render-item.d.ts

@@ -0,0 +1,5 @@
+import { ItemRenderer, Opts } from './item-renderer';
+export declare const useRenderItem: <I>({ itemRenderer, ...meta }: Opts<I> & {
+    itemRenderer?: ItemRenderer<I> | undefined;
+}) => (item: I, i: number) => import("lit-html").TemplateResult;
+export type { ItemRenderer };

package/dist/listbox/use-render-item.js

@@ -0,0 +1,7 @@
+import { useCallback } from 'haunted';
+import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
+import { itemRenderer as mkItemRenderer, } from './item-renderer';
+export const useRenderItem = ({ itemRenderer = mkItemRenderer(), ...meta }) => {
+    const info = useMeta(meta);
+    return useCallback((item, i) => itemRenderer(item, i, info), [info, itemRenderer]);
+};

package/dist/listbox/util.d.ts

@@ -0,0 +1,2 @@
+export declare const byValue: <K extends PropertyKey | undefined, T>(value: T | T[], valueProperty: K) => ((item: T) => boolean) | ((item: T) => T | undefined);
+export declare const mark: (text: string, query: string) => string | (string | import("lit-html").TemplateResult<1>)[];

package/dist/listbox/util.js

@@ -0,0 +1,24 @@
+import { html } from 'lit-html';
+import { array } from '@neovici/cosmoz-utils/array';
+export const byValue = (value, valueProperty) => {
+    if (!valueProperty) {
+        return (item) => array(value).includes(item);
+    }
+    return (item) => array(value).find((value) => value[valueProperty] ===
+        item[valueProperty]);
+};
+export const mark = (text, query) => {
+    if (!query || !text) {
+        return text;
+    }
+    const i = text.toLowerCase().indexOf(query.toLowerCase());
+    if (i < 0) {
+        return text;
+    }
+    const end = i + query.length;
+    return [
+        text.slice(0, i),
+        html `<mark>${text.slice(i, end)}</mark>`,
+        text.slice(end),
+    ];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-autocomplete",
-	"version": "6.0.0",
+	"version": "6.2.0",
 	"description": "A autocomplete input web component",
 	"keywords": [
 		"lit-html",
@@ -67,7 +67,7 @@
 		"./item-renderer": "./dist/listbox/item-renderer.js"
 	},
 	"dependencies": {
-		"@lit-labs/virtualizer": "^1.0.0",
+		"@lit-labs/virtualizer": "^2.0.0",
 		"@neovici/cosmoz-dropdown": "^3.0.0",
 		"@neovici/cosmoz-input": "^3.0.0",
 		"@neovici/cosmoz-utils": "^5.0.0",
@@ -85,8 +85,8 @@
 		"@web/dev-server-storybook": "^0.6.0",
 		"eslint-import-resolver-exports": "^1.0.0-beta.5",
 		"husky": "^8.0.0",
-		"semantic-release": "^20.0.0",
+		"semantic-release": "^21.0.0",
 		"sinon": "^15.0.0",
-		"typescript": "^4.6.0"
+		"typescript": "^5.0.0"
 	}
 }