@neovici/cosmoz-autocomplete 5.3.2 → 6.1.0

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
-};