@neovici/cosmoz-autocomplete 2.15.1 → 2.17.2

package/cosmoz-listbox.js

@@ -63,6 +63,7 @@ const Listbox = host => {
 				overflow: hidden;
 				max-width: inherit;
 			}
+			.items > :first-child { line-height: 1;}
 		</style>
 		<div class="items">${ scroll({ items, renderItem }) }</div>`;
 };

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/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,27 +1,11 @@
 import { useCallback, useEffect, useState, useMemo } from 'haunted';
-import getPosition from 'position.js';
+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';
 import { byValue } from './utils';
+import { usePosition } from './use-position';
 
-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';
-	},
-
-	useItems = ({
+const useItems = ({
 		items,
 		onSelect,
 		defaultIndex = 0
@@ -55,35 +39,6 @@ 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 {

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-autocomplete",
-	"version": "2.15.1",
+	"version": "2.17.2",
 	"description": "A autocomplete input web component",
 	"keywords": [
 		"lit-html",
@@ -56,7 +56,7 @@
 		]
 	},
 	"dependencies": {
-		"@neovici/cosmoz-input": "^1.4.0",
+		"@neovici/cosmoz-input": "^1.5.0",
 		"@neovici/cosmoz-utils": "^3.20.0",
 		"@open-wc/lit-helpers": "^0.3.12",
 		"haunted": "^4.7.0",
@@ -65,21 +65,19 @@
 		"position.js": "^0.3.0"
 	},
 	"devDependencies": {
-		"@commitlint/cli": "^12.0.0",
-		"@commitlint/config-conventional": "^12.0.0",
-		"@neovici/eslint-config": "^1.2.0",
+		"@commitlint/cli": "^15.0.0",
+		"@commitlint/config-conventional": "^15.0.0",
+		"@neovici/eslint-config": "^1.3.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",
-		"sinon": "^11.0.0",
-		"typescript": "^4.0.0"
+		"husky": "^7.0.0",
+		"semantic-release": "^18.0.0",
+		"sinon": "^12.0.0",
+		"typescript": "^4.5.0"
 	}
 }