@neovici/cosmoz-autocomplete 2.15.0 → 2.17.1

package/cosmoz-listbox.js

@@ -10,7 +10,7 @@ const Listbox = host => {
 	const { index, items, renderItem, height, itemHeight } = useListbox(host);
 
 	useEffect(() => {
-		scrollIntoViewIfNeeded(host.shadowRoot.querySelector('[data-index="' + index + '"]'), host);
+		scrollIntoViewIfNeeded(host.shadowRoot.querySelector('[data-index="' + index + '"]:not(:hover)'), host);
 	}, [index]);
 
 	return html`

package/lib/autocomplete.js

@@ -150,7 +150,7 @@ const
 				.errorMessage=${ until(values$.then(() => errorMessage, e => e.message), errorMessage) }
 				.value=${ live(text) }
 				@value-changed=${ onText }
-				@focused-changed=${ onFocus }
+				@focusin=${ onFocus } @focusout=${ onFocus }
 				@click=${ onClick }
 				autocomplete="off"
 				exportparts=${ inputParts }

package/lib/item-renderer.js

@@ -1,5 +1,5 @@
 import { html } from 'haunted';
-import { mark, identity, prop, array } from './utils';
+import { mark, identity } from './utils';
 export default (
 	item,
 	i,
@@ -8,17 +8,15 @@ export default (
 		select,
 		textual = identity,
 		query,
-		value,
-		valueProperty
+		isSelected
 	}
 ) => {
 	const text = textual(item),
-		content = mark(text, query),
-		valuation = prop(valueProperty),
-		selected = array(value).find(value => valuation(value) === valuation(item));
+		content = mark(text, query);
+
 	return html`
 		<div class="item"
-			role="option" part="option" ?aria-selected=${ selected }
+			role="option" part="option" ?aria-selected=${ isSelected(item) }
 			data-index=${ i }
 			@mouseenter=${ () => highlight(i) }
 			@click=${ () => select(item) }

package/lib/use-focus.js

@@ -1,10 +1,21 @@
 import { useEffect, useState, useCallback } from 'haunted';
 import { useMeta } from '@neovici/cosmoz-utils/lib/hooks/use-meta';
 
+const isFocused = t => t.matches(':focus-within'),
+	blurEvs = ['focusout', 'blur'],
+	isBlurEvent = type => blurEvs.includes(type);
+
 export const useFocus = ({ disabled, onFocus }) => {
-	const [{ focused, closed }, setFocus] = useState({ focused: false, closed: false }),
+	const [{ focused, closed } = {}, setState] = useState(),
 		active = focused && !disabled,
-		meta = useMeta({ closed });
+		meta = useMeta({ closed, onFocus }),
+		setClosed = useCallback(closed => setState(p => ({ ...p, closed })), []),
+		onToggle = useCallback(e => {
+			const target = e.currentTarget;
+			return isFocused(target)
+				? setState(p => ({ focused: true, closed: !p?.closed }))
+				: target.focus();
+		}, []);
 
 	useEffect(() => {
 		if (!active) {
@@ -17,10 +28,10 @@ export const useFocus = ({ disabled, onFocus }) => {
 			const { closed } = meta;
 			if (e.key === 'Escape' && !closed) {
 				e.preventDefault();
-				setFocus(p => ({ ...p, closed: true }));
+				setClosed(true);
 			} else if (['ArrowUp', 'Up'].includes(e.key) && closed) {
 				e.preventDefault();
-				setFocus(p => ({ ...p, closed: false }));
+				setClosed(false);
 			}
 		};
 		document.addEventListener('keydown', handler, true);
@@ -29,11 +40,14 @@ export const useFocus = ({ disabled, onFocus }) => {
 
 	return {
 		active: active && !closed,
-		setClosed: useCallback(closed => setFocus(p => ({ ...p, closed })), []),
+		setClosed,
+		onToggle,
 		onFocus: useCallback(e => {
-			const focused = e.target.focused;
-			setFocus({ focused, closed: false });
-			onFocus?.(focused);
-		}, [onFocus])
+			const target = e.currentTarget,
+				focused = isFocused(target) || isBlurEvent(e.type)
+					&& e.relatedTarget?.closest('[data-dropdown]');
+			setState({ focused });
+			meta.onFocus?.(focused);
+		}, [meta])
 	};
 };

package/lib/use-listbox.js

@@ -1,26 +1,11 @@
-import { useCallback, useEffect, useState } from 'haunted';
-import getPosition from 'position.js';
+import { useCallback, useEffect, useState, useMemo } from 'haunted';
+import { useMeta } from '@neovici/cosmoz-utils/lib/hooks/use-meta';
 import { useKeyboard } from './use-keyboard';
-import { onScrolled } from './on-scrolled';
 import defaultItemRenderer from './item-renderer';
-import { useMeta } from '@neovici/cosmoz-utils/lib/hooks/use-meta';
-
-const defaultPlacement = ['bottom-left', 'bottom-right', 'bottom', 'top-left', 'top-right', 'top'],
-	position = (host, anchor, placement = defaultPlacement, confinement) => {
-		const anchorBounds = anchor.getBoundingClientRect(),
-			hostBounds = host.getBoundingClientRect(),
-			{ popupOffset: offset } = getPosition(hostBounds, anchorBounds, placement, {
-				fixed: true,
-				adjustXY: 'both',
-				offsetParent: confinement
-			}),
-			{ style } = host;
-		style.left = offset.left + 'px';
-		style.top = offset.top + 'px';
-		style.minWidth = Math.max(anchorBounds.width, hostBounds.width) + 'px';
-	},
+import { byValue } from './utils';
+import { usePosition } from './use-position';
 
-	useItems = ({
+const useItems = ({
 		items,
 		onSelect,
 		defaultIndex = 0
@@ -54,43 +39,12 @@ const defaultPlacement = ['bottom-left', 'bottom-right', 'bottom', 'top-left', '
 		return useCallback((item, i) => itemRenderer(item, i, info), [info, itemRenderer]);
 	},
 
-	usePosition = ({
-		anchor: anchorage, host, confinement, placement
-	}) => {
-		useEffect(() => {
-			const anchor = typeof anchorage === 'function' ? anchorage() : anchorage;
-			if (anchor == null) {
-				return;
-			}
-			let rid;
-			const reposition = () => position(host, anchor, placement, confinement),
-				ro = new ResizeObserver(reposition);
-
-			ro.observe(host);
-			ro.observe(anchor);
-
-			const onReposition = () => {
-					cancelAnimationFrame(rid);
-					rid = requestAnimationFrame(reposition);
-				},
-				offScroll = onScrolled(anchor, onReposition);
-			window.addEventListener('resize', onReposition, true);
-
-			return () => {
-				ro.unobserve(host);
-				ro.unobserve(anchor);
-				offScroll();
-				window.removeEventListener('resize', onReposition, true);
-				cancelAnimationFrame(rid);
-			};
-		}, [anchorage, confinement, placement]);
-	},
 
 	useListbox = host => {
 		const {
 				value,
 				valueProperty,
-				items,
+				items: _items,
 				onSelect,
 				defaultIndex,
 				query,
@@ -102,6 +56,8 @@ const defaultPlacement = ['bottom-left', 'bottom-right', 'bottom', 'top-left', '
 				confinement,
 				placement
 			} = host,
+			isSelected = useMemo(() => byValue(value, valueProperty), [value, valueProperty]),
+			items = useMemo(() => _items.slice(), [_items, isSelected]),
 			{
 				index,
 				highlight,
@@ -132,8 +88,7 @@ const defaultPlacement = ['bottom-left', 'bottom-right', 'bottom', 'top-left', '
 				select,
 				textual,
 				query,
-				value,
-				valueProperty
+				isSelected
 			})
 		};
 	},

package/lib/use-position.js

@@ -0,0 +1,49 @@
+import { useEffect } from 'haunted';
+import getPosition from 'position.js';
+import { onScrolled } from './on-scrolled';
+
+const defaultPlacement = ['bottom-left', 'bottom-right', 'bottom', 'top-left', 'top-right', 'top'],
+	position = (host, anchor, placement = defaultPlacement, confinement) => {
+		const anchorBounds = anchor.getBoundingClientRect(),
+			hostBounds = host.getBoundingClientRect(),
+			{ popupOffset: offset } = getPosition(hostBounds, anchorBounds, placement, {
+				fixed: true,
+				adjustXY: 'both',
+				offsetParent: confinement
+			}),
+			{ style } = host;
+		style.left = offset.left + 'px';
+		style.top = offset.top + 'px';
+		style.minWidth = Math.max(anchorBounds.width, hostBounds.width) + 'px';
+	},
+	usePosition = ({ anchor: anchorage, host, confinement, placement }) => {
+		useEffect(() => {
+			const anchor = typeof anchorage === 'function' ? anchorage() : anchorage;
+			if (anchor == null) {
+				return;
+			}
+			let rid;
+			const reposition = () => position(host, anchor, placement, confinement),
+				ro = new ResizeObserver(reposition);
+
+			ro.observe(host);
+			ro.observe(anchor);
+
+			const onReposition = () => {
+					cancelAnimationFrame(rid);
+					rid = requestAnimationFrame(reposition);
+				},
+				offScroll = onScrolled(anchor, onReposition);
+			window.addEventListener('resize', onReposition, true);
+
+			return () => {
+				ro.unobserve(host);
+				ro.unobserve(anchor);
+				offScroll();
+				window.removeEventListener('resize', onReposition, true);
+				cancelAnimationFrame(rid);
+			};
+		}, [anchorage, confinement, placement]);
+	};
+
+export { usePosition };

package/lib/utils.js

@@ -51,8 +51,12 @@ const mark = (text, query) => {
 			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
+	array, identity, mark, prop, search, without, strProp, scrollIntoViewIfNeeded, byValue
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-autocomplete",
-	"version": "2.15.0",
+	"version": "2.17.1",
 	"description": "A autocomplete input web component",
 	"keywords": [
 		"lit-html",
@@ -65,20 +65,19 @@
 		"position.js": "^0.3.0"
 	},
 	"devDependencies": {
-		"@commitlint/cli": "^12.0.0",
-		"@commitlint/config-conventional": "^12.0.0",
+		"@commitlint/cli": "^13.0.0",
+		"@commitlint/config-conventional": "^13.0.0",
 		"@neovici/eslint-config": "^1.2.0",
 		"@open-wc/demoing-storybook": "^2.1.0",
 		"@open-wc/testing": "^2.5.32",
-		"@semantic-release/changelog": "^5.0.1",
-		"@semantic-release/git": "^9.0.0",
+		"@semantic-release/changelog": "^6.0.0",
+		"@semantic-release/git": "^10.0.0",
 		"@storybook/storybook-deployer": "^2.8.5",
 		"@web/test-runner": "^0.13.0",
 		"@web/test-runner-selenium": "^0.5.0",
-		"@webcomponents/webcomponentsjs": "^2.4.0",
 		"eslint": "^7.0.0",
-		"husky": "^6.0.0",
-		"semantic-release": "^17.4.0",
+		"husky": "^7.0.0",
+		"semantic-release": "^18.0.0",
 		"sinon": "^11.0.0",
 		"typescript": "^4.0.0"
 	}