@neovici/cosmoz-autocomplete 5.2.0 → 5.3.0

package/cosmoz-listbox.js

@@ -1,15 +1,20 @@
-import { html, component, useEffect } from 'haunted';
-import { virtualize } from '@lit-labs/virtualizer/virtualize.js';
+import { html, component, useEffect, useRef } 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';
-import { scrollIntoViewIfNeeded } from './lib/utils';
 
 const svg =
-		'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-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;
@@ -98,23 +103,28 @@ const svg =
 		}
 	`,
 	Listbox = (host) => {
-		const { index, items, renderItem, height, itemHeight } = useListbox(host);
+		const listRef = useRef(undefined);
+		const { position, items, renderItem, height, itemHeight } =
+			useListbox(host);
 
 		useEffect(() => {
-			scrollIntoViewIfNeeded(
-				host.shadowRoot.querySelector(
-					'[data-index="' + index + '"]:not(:hover)'
-				),
-				host
-			);
-		}, [index]);
+			if (!position.scroll) return;
+			const vl = listRef.current[virtualizerRef];
+			if (!vl._layout) return;
+			vl.element(position.index)?.scrollIntoView({ block: 'nearest' });
+		}, [position]);
 
 		return html` <style>
-				${styles({ index, height, itemHeight })}
+				${styles({ ...position, height, itemHeight })}
 			</style>
-			<div class="items">
+			<div class="items" ${ref((el) => (listRef.current = el))}>
 				<div virtualizer-sizer></div>
-				${virtualize({ items, renderItem, scroller: true })}
+				${virtualize({
+					items,
+					renderItem,
+					scroller: true,
+					layout: { _itemSize: { height: itemHeight - 0.00001 } },
+				})}
 			</div>`;
 	};
 

package/lib/use-listbox.js

@@ -6,20 +6,31 @@ import defaultItemRenderer from './item-renderer';
 import { byValue } from './utils';
 
 const useItems = ({ items, onSelect, defaultIndex = 0 }) => {
-		const [index, setIndex] = useState(defaultIndex),
+		const [position, setPosition] = useState({
+				index: defaultIndex,
+			}),
+			{ index } = position,
 			{ length } = items;
 
 		useEffect(() => {
-			setIndex(defaultIndex);
+			setPosition({ index: defaultIndex, scroll: true });
 		}, [items, defaultIndex]);
 
 		useKeyboard({
 			onUp: useCallback(
-				() => setIndex((index) => (index > 0 ? index - 1 : length - 1)),
+				() =>
+					setPosition(({ index }) => ({
+						index: index > 0 ? index - 1 : length - 1,
+						scroll: true,
+					})),
 				[length]
 			),
 			onDown: useCallback(
-				() => setIndex((index) => (index < length - 1 ? index + 1 : 0)),
+				() =>
+					setPosition(({ index }) => ({
+						index: index < length - 1 ? index + 1 : 0,
+						scroll: true,
+					})),
 				[length]
 			),
 			onEnter: useCallback(
@@ -29,8 +40,8 @@ const useItems = ({ items, onSelect, defaultIndex = 0 }) => {
 		});
 
 		return {
-			index,
-			highlight: setIndex,
+			position,
+			highlight: useCallback((index) => setPosition({ index }), []),
 			select: useCallback((item) => onSelect?.(item), [onSelect]),
 		};
 	},
@@ -62,7 +73,7 @@ const useItems = ({ items, onSelect, defaultIndex = 0 }) => {
 				[value, valueProperty]
 			),
 			items = useMemo(() => _items.slice(), [_items, isSelected]),
-			{ index, highlight, select } = useItems({
+			{ position, highlight, select } = useItems({
 				items,
 				onSelect,
 				defaultIndex: isNaN(defaultIndex) ? undefined : Number(defaultIndex),
@@ -77,7 +88,7 @@ const useItems = ({ items, onSelect, defaultIndex = 0 }) => {
 		});
 
 		return {
-			index,
+			position,
 			items,
 			height: Math.min(itemLimit, items.length) * itemHeight,
 			highlight,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-autocomplete",
-	"version": "5.2.0",
+	"version": "5.3.0",
 	"description": "A autocomplete input web component",
 	"keywords": [
 		"lit-html",
@@ -62,7 +62,7 @@
 		}
 	},
 	"dependencies": {
-		"@lit-labs/virtualizer": "^0.7.0",
+		"@lit-labs/virtualizer": "^1.0.0",
 		"@neovici/cosmoz-dropdown": "^3.0.0",
 		"@neovici/cosmoz-input": "^3.0.0",
 		"@neovici/cosmoz-utils": "^5.0.0",
@@ -78,9 +78,10 @@
 		"@semantic-release/changelog": "^6.0.0",
 		"@semantic-release/git": "^10.0.0",
 		"@storybook/storybook-deployer": "^2.8.5",
-		"@web/dev-server-storybook": "^0.5.1",
+		"@web/dev-server-storybook": "^0.6.0",
+		"eslint-import-resolver-exports": "^1.0.0-beta.5",
 		"husky": "^8.0.0",
-		"semantic-release": "^19.0.0",
+		"semantic-release": "^20.0.0",
 		"sinon": "^15.0.0",
 		"typescript": "^4.6.0"
 	}