@neovici/cosmoz-autocomplete 5.3.2 → 6.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-autocomplete",
-	"version": "5.3.2",
+	"version": "6.0.0",
 	"description": "A autocomplete input web component",
 	"keywords": [
 		"lit-html",
@@ -21,14 +21,14 @@
 		"test": "test"
 	},
 	"scripts": {
-		"lint": "eslint --cache --ext .js .",
-		"lint-tsc": "tsc",
+		"lint": "tsc && eslint --cache .",
+		"build": "tsc -p tsconfig.build.json",
 		"start": "wds",
 		"test": "wtr --coverage",
 		"test:watch": "wtr --watch",
+		"prepare": "husky install",
 		"storybook:build": "build-storybook",
-		"storybook:deploy": "storybook-to-ghpages",
-		"prepare": "husky install"
+		"storybook:deploy": "storybook-to-ghpages"
 	},
 	"release": {
 		"plugins": [
@@ -46,8 +46,7 @@
 		"access": "public"
 	},
 	"files": [
-		"*.js",
-		"lib/**/*.js"
+		"dist/"
 	],
 	"commitlint": {
 		"extends": [
@@ -61,14 +60,19 @@
 			]
 		}
 	},
+	"exports": {
+		".": "./dist/index.js",
+		"./autocomplete": "./dist/autocomplete/index.js",
+		"./listbox": "./dist/listbox/index.js",
+		"./item-renderer": "./dist/listbox/item-renderer.js"
+	},
 	"dependencies": {
 		"@lit-labs/virtualizer": "^1.0.0",
 		"@neovici/cosmoz-dropdown": "^3.0.0",
 		"@neovici/cosmoz-input": "^3.0.0",
 		"@neovici/cosmoz-utils": "^5.0.0",
 		"haunted": "^5.0.0",
-		"lit-html": "^2.0.0",
-		"position.js": "^0.3.0"
+		"lit-html": "^2.0.0"
 	},
 	"devDependencies": {
 		"@commitlint/cli": "^17.0.0",

package/cosmoz-autocomplete.js

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

package/cosmoz-listbox.js

@@ -1,145 +0,0 @@
-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 { tagged as css } from '@neovici/cosmoz-utils';
-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 './lib/use-listbox';
-
-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 */
-	styles = ({ index, height, itemHeight }) => css`
-		:host {
-			position: fixed;
-			min-height: ${itemHeight}px;
-			z-index: 1000;
-			height: ${height}px;
-			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;
-			line-height: ${itemHeight}px;
-			height: ${itemHeight}px;
-			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);
-		}
-
-		.item[data-index='${index || '0'}'] {
-			background: var(
-				--cosmoz-listbox-active-color,
-				var(--cosmoz-selection-color, rgba(58, 145, 226, 0.1))
-			);
-		}
-		.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;
-		}
-	`,
-	Listbox = (host) => {
-		const listRef = useRef(undefined);
-		const { position, items, renderItem, height, itemHeight } =
-			useListbox(host);
-
-		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/lib/autocomplete.css.js

@@ -1,108 +0,0 @@
-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/lib/autocomplete.js

@@ -1,190 +0,0 @@
-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 { array } from '@neovici/cosmoz-utils/array';
-import '@neovici/cosmoz-input';
-import { useAutocomplete } from './use-autocomplete';
-import { listbox } from '../cosmoz-listbox';
-import style from './autocomplete.css';
-
-const blank = () => nothing,
-	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>
-	`,
-	renderChip = (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>
-	`,
-	renderBadge = ({ 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>`
-		);
-	},
-	renderSelection = (value, isOne, onDeselect, textual, disabled) => {
-		if (isOne || value.length === 1) {
-			const val = value[0];
-			return when(val, () =>
-				renderChip(textual(val), () => onDeselect(val), disabled, isOne)
-			);
-		}
-		return renderBadge({ value, onDeselect });
-	},
-	inputParts = ['input', 'label', 'line', 'error']
-		.map((part) => `${part}: input-${part}`)
-		.join(),
-	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 && array(value)?.[0] != null,
-			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>
-				${renderSelection(array(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/lib/item-renderer.js

@@ -1,26 +0,0 @@
-import { html } from 'haunted';
-import { mark, identity } from './utils';
-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/lib/on-scrolled.js

@@ -1,37 +0,0 @@
-/**
- * Returns all ancestor ShadowRoot elements
- * @param {HTMLElement} el The element
- * @param {HTMLElement} limit The limit to stop searching
- * @returns {ShadowRoot[]} Array of ancestor roots
- */
-const ancestorRoots = (el, limit = document.body) => {
-		const roots = [];
-		let ancestor = el;
-		while (ancestor && ancestor !== limit) {
-			if (ancestor.assignedSlot) {
-				ancestor = ancestor.assignedSlot;
-				continue;
-			}
-			if (ancestor instanceof ShadowRoot) {
-				roots.push(ancestor);
-				ancestor = ancestor.host;
-				continue;
-			}
-			ancestor = ancestor.parentNode;
-		}
-		return roots;
-	},
-	/**
-	 * Listen to a scroll event in a ancestor root
-	 * @param {HTMLElement} el The element
-	 * @param {function} handler The event handler
-	 * @returns {function} Function to cleanup the event listeners
-	 */
-	onScrolled = (el, handler) => {
-		const roots = ancestorRoots(el);
-		roots.forEach(r => r.addEventListener('scroll', handler, true));
-		return () => {
-			roots.forEach(r => r.removeEventListener('scroll', handler, true));
-		};
-	};
-export { onScrolled };

package/lib/use-autocomplete.js

@@ -1,102 +0,0 @@
-import {
-	useCallback, useMemo
-} from 'haunted';
-import {
-	without, search, strProp, prop, array
-} from './utils';
-import { useHost } from '@neovici/cosmoz-utils/hooks/use-host';
-import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
-import { useFocus } from '@neovici/cosmoz-dropdown/src/use-focus.js';
-import { useKeys } from './use-keys';
-
-const
-	EMPTY = [],
-	EMPTY$ = Promise.resolve(EMPTY),
-	notify = (host, name, detail) => host.dispatchEvent(new CustomEvent(name, { detail })),
-	useNotify = (host, fn, name) => useCallback(val => {
-		fn?.(val);
-		notify(host, name, val);
-	}, [fn]),
-	useAutocomplete = ({
-		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]),
-			values$ = useMemo(() => source$.then(source => [...array(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,
-			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])
-		};
-	};
-
-export { useAutocomplete };

package/lib/use-keyboard.js

@@ -1,35 +0,0 @@
-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/lib/use-keys.js

@@ -1,39 +0,0 @@
-import { useEffect } from 'haunted';
-import { array } from './utils';
-import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
-
-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]);
-};
-
-export { useKeys };
-

package/lib/use-listbox.js

@@ -1,123 +0,0 @@
-import { useCallback, useEffect, useState, useMemo } from 'haunted';
-import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
-import { usePosition } from '@neovici/cosmoz-dropdown/src/use-position.js';
-import { useKeyboard } from './use-keyboard';
-import defaultItemRenderer from './item-renderer';
-import { byValue } from './utils';
-
-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(({ index }) => ({
-						index: index > 0 ? index - 1 : length - 1,
-						scroll: true,
-					})),
-				[length]
-			),
-			onDown: useCallback(
-				() =>
-					setPosition(({ index }) => ({
-						index: index < length - 1 ? 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]),
-		};
-	},
-	useRenderItem = ({ itemRenderer, ...meta }) => {
-		const info = useMeta(meta);
-		return useCallback(
-			(item, i) => (itemRenderer || defaultItemRenderer)(item, i, info),
-			[info, itemRenderer]
-		);
-	},
-	useListbox = (host) => {
-		const {
-				value,
-				valueProperty,
-				items: _items,
-				onSelect,
-				defaultIndex,
-				query,
-				textual,
-				itemRenderer,
-				itemHeight = 40,
-				itemLimit = 5,
-				anchor,
-				confinement,
-				placement,
-			} = host,
-			isSelected = useMemo(
-				() => byValue(value, valueProperty),
-				[value, valueProperty]
-			),
-			items = useMemo(() => _items.slice(), [_items, isSelected]),
-			{ position, highlight, select } = useItems({
-				items,
-				onSelect,
-				defaultIndex: isNaN(defaultIndex) ? undefined : Number(defaultIndex),
-			});
-
-		usePosition({
-			anchor,
-			host,
-			confinement,
-			placement,
-			limit: true,
-		});
-
-		return {
-			position,
-			items,
-			height: Math.min(itemLimit, items.length) * itemHeight,
-			highlight,
-			select,
-			itemHeight,
-			renderItem: useRenderItem({
-				itemRenderer,
-				highlight,
-				select,
-				textual,
-				query,
-				isSelected,
-			}),
-		};
-	},
-	properties = [
-		'query',
-		'items',
-		'onSelect',
-		'textual',
-		'anchor',
-		'confinement',
-		'placement',
-		'itemHeight',
-		'itemLimit',
-		'itemRenderer',
-		'defaultIndex',
-		'value',
-		'styles',
-	];
-
-export { useListbox, useRenderItem, properties };

package/lib/utils.js

@@ -1,62 +0,0 @@
-import { html } from 'lit-html';
-
-import { identity } from '@neovici/cosmoz-utils/function';
-import { array, without } from '@neovici/cosmoz-utils/array';
-import { prop, strProp } from '@neovici/cosmoz-utils/object';
-
-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)
-		];
-	},
-	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);
-	},
-	scrollIntoViewIfNeeded = (el, parent) => {
-		if (el == null) {
-			return;
-		}
-		if (el.scrollIntoViewIfNeeded) {
-			el.scrollIntoViewIfNeeded();
-			return;
-		}
-		const ebox = el.getBoundingClientRect(),
-			pbox = parent.getBoundingClientRect();
-		if (ebox.top >= pbox.top && ebox.top + ebox.height < pbox.top + pbox.height) {
-			return;
-		}
-		el.scrollIntoView();
-	},
-	byValue = (value, valueProperty) => {
-		const valuation = prop(valueProperty);
-		return item => array(value).find(value => valuation(value) === valuation(item));
-	};
-
-export {
-	array, identity, mark, prop, search, without, strProp, scrollIntoViewIfNeeded, byValue
-};