@neovici/cosmoz-autocomplete 10.3.0 → 10.5.0

package/dist/autocomplete/autocomplete.d.ts

@@ -11,14 +11,15 @@ export interface Props<I> extends Base<I> {
     noLabelFloat?: boolean;
     alwaysFloatLabel?: boolean;
     showSingle?: boolean;
-    itemHeight?: number;
+    itemHeight?: number | 'auto';
     itemLimit?: number;
     wrap?: boolean;
     defaultIndex?: number;
+    externalSearch?: boolean;
     placement?: Placement;
 }
 type AProps<I> = Omit<Props<I>, keyof RProps<I>> & RProps<I> & {
     onInputRef?: (el?: Element) => void;
 };
-declare const autocomplete: <I>(props: AProps<I>) => import("lit-html").TemplateResult<1>, Autocomplete: <I>(props: Props<I>) => import("lit-html").TemplateResult<1>, observedAttributes: readonly ["disabled", "invalid", "no-label-float", "always-float-label", "text-property", "value-property", "limit", "min", "show-single", "preserve-order", "keep-opened", "keep-query", "default-index", "item-height", "item-limit", "wrap"];
+declare const autocomplete: <I>(props: AProps<I>) => import("lit-html").TemplateResult<1>, Autocomplete: <I>(props: Props<I>) => import("lit-html").TemplateResult<1>, observedAttributes: readonly ["disabled", "invalid", "no-label-float", "always-float-label", "text-property", "value-property", "limit", "min", "show-single", "preserve-order", "keep-opened", "keep-query", "default-index", "external-search", "item-height", "item-limit", "wrap"];
 export { Autocomplete, autocomplete, observedAttributes, style };

package/dist/autocomplete/autocomplete.js

@@ -71,7 +71,7 @@ const autocomplete = (props) => {
     })}
 			</cosmoz-input>
 
-			${when(active && !(isSingle && !showSingle), () => listbox({
+			${when(active && !(isSingle && !showSingle) && items.length > 0, () => listbox({
         ...props,
         items,
         multi: !isOne,
@@ -99,6 +99,7 @@ const autocomplete = (props) => {
     'keep-opened',
     'keep-query',
     'default-index',
+    'external-search',
     'item-height',
     'item-limit',
     'wrap',

package/dist/autocomplete/use-autocomplete.d.ts

@@ -26,8 +26,9 @@ export interface Props<I> extends Base<I> {
     onFocus?: (focused?: boolean) => void;
     preserveOrder?: boolean;
     defaultIndex?: number;
+    externalSearch?: boolean;
 }
-export declare const useAutocomplete: <I>({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, min, source, textProperty, textual: _textual, valueProperty, keepOpened, keepQuery, preserveOrder, defaultIndex, ...thru }: Props<I>) => {
+export declare const useAutocomplete: <I>({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, min, source, textProperty, textual: _textual, valueProperty, keepOpened, keepQuery, preserveOrder, defaultIndex, externalSearch, ...thru }: Props<I>) => {
     active: boolean | undefined;
     query: string;
     textual: (i: I) => string;

package/dist/autocomplete/use-autocomplete.js

@@ -6,7 +6,7 @@ import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
 import { useFocus } from '@neovici/cosmoz-dropdown/use-focus';
 import { useKeys } from './use-keys';
 import { search, normalize, notify, useNotify, EMPTY } from './util';
-export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, min, source, textProperty, textual: _textual, valueProperty, keepOpened, keepQuery, preserveOrder, defaultIndex, ...thru }) => {
+export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, min, source, textProperty, textual: _textual, valueProperty, keepOpened, keepQuery, preserveOrder, defaultIndex, externalSearch, ...thru }) => {
     const textual = useMemo(() => (_textual ?? strProp)(textProperty), [_textual, textProperty]), { active, focused, onFocus, setClosed } = useFocus(thru), empty = !text, query = useMemo(() => text?.trim(), [text]), host = useHost(), onText = useNotify(host, _onText, 'text'), onChange = useCallback((val) => {
         _onChange?.(val, () => setClosed(true));
         notify(host, 'value', val);
@@ -47,7 +47,7 @@ export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onTe
             const items = preserveOrder
                 ? options
                 : [...value, ...without(value, prop(valueProperty))(options)];
-            return search(items, query, textual);
+            return externalSearch ? items : search(items, query, textual);
         }, [
             options,
             active,
@@ -57,6 +57,7 @@ export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onTe
             value,
             preserveOrder,
             valueProperty,
+            externalSearch,
         ]),
         onClick: useCallback(() => setClosed(false), []),
         onFocus,

package/dist/listbox/index.d.ts

@@ -1,5 +1,5 @@
-import { Props } from './use-listbox';
 import { StyleInfo } from 'lit-html/directives/style-map.js';
+import { Props } from './use-listbox';
 interface ListboxProps<I> extends Props<I> {
     multi?: boolean;
     setFloating: (el?: Element) => void;

package/dist/listbox/index.js

@@ -1,29 +1,39 @@
 import { virtualize, virtualizerRef, } from '@lit-labs/virtualizer/virtualize.js';
+import { connectable } from '@neovici/cosmoz-dropdown/connectable';
 import { sheet } from '@neovici/cosmoz-utils';
 import { spreadProps } from '@neovici/cosmoz-utils/directives/spread-props';
 import { useStyleSheet } from '@neovici/cosmoz-utils/hooks/use-stylesheet';
 import { props } from '@neovici/cosmoz-utils/object';
-import { component, html, useEffect, useMemo, useRef } from '@pionjs/pion';
+import { component, html, useEffect, useRef } from '@pionjs/pion';
 import { ref } from 'lit-html/directives/ref.js';
+import { styleMap } from 'lit-html/directives/style-map.js';
 import style, { styles } from './style.css';
 import { properties, useListbox } from './use-listbox';
-import { connectable } from '@neovici/cosmoz-dropdown/connectable';
-import { styleMap } from 'lit-html/directives/style-map.js';
-const Listbox = (props) => {
+const Listbox = (host) => {
     const listRef = useRef(undefined);
-    const { position, items, renderItem, height, itemHeight } = useListbox(props);
+    const { position, items, renderItem, height, itemHeight, setItemHeight } = useListbox(host);
+    useEffect(() => {
+        const vl = listRef.current?.[virtualizerRef];
+        if (!vl)
+            return;
+        vl.layoutComplete.then(() => {
+            host.dispatchEvent(new CustomEvent('layout-complete'));
+            return setItemHeight(vl['_layout']._metricsCache.averageChildSize);
+        });
+    }, [items]);
     useEffect(() => {
         if (!position.scroll)
             return;
         const vl = listRef.current?.[virtualizerRef];
-        if (!vl?.['_layout'])
+        if (!vl)
+            return;
+        if (!vl?.['_layout']) {
+            vl.layoutComplete.then(() => vl.element(position.index)?.scrollIntoView({ block: 'nearest' }));
             return;
+        }
         vl.element(position.index)?.scrollIntoView({ block: 'nearest' });
     }, [position]);
-    useStyleSheet(styles({ ...position, height, itemHeight }));
-    const layout = useMemo(() => ({
-        _itemSize: { height: itemHeight - 0.00001 },
-    }), [itemHeight]);
+    useStyleSheet(styles({ ...position, itemHeight, auto: host.itemHeight === 'auto' }));
     return html `<div
 			class="items"
 			style="min-height: ${height}px"
@@ -34,7 +44,6 @@ const Listbox = (props) => {
         items,
         renderItem,
         scroller: true,
-        layout,
     })}
 		</div>
 		<slot></slot>`;

package/dist/listbox/item-renderer.d.ts

@@ -1,5 +1,7 @@
 import { TemplateResult } from 'lit-html';
-export interface Opts<I> {
+import { Position } from './use-items';
+export interface ItemRendererOpts<I> {
+    position: Position;
     highlight: (i: number) => void;
     select: (item: I) => void;
     isSelected: (item: I) => void;
@@ -7,19 +9,7 @@ export interface Opts<I> {
     textual: (i: I) => string;
 }
 export type Render<I> = (content: unknown, item: I, i: number) => unknown;
-export type ItemRenderer<I> = (item: I, i: number, opts: Opts<I>) => TemplateResult;
-export declare const itemRenderer: <I>(render?: Render<I>) => (item: I, i: number, { highlight, select, textual, query, isSelected, }: {
-    highlight: (i: number) => void;
-    select: (item: I) => void;
-    isSelected: (item: I) => void;
-    query: string;
-    textual: (i: I) => string;
-}) => TemplateResult;
-declare const _default: (item: unknown, i: number, { highlight, select, textual, query, isSelected, }: {
-    highlight: (i: number) => void;
-    select: (item: unknown) => void;
-    isSelected: (item: unknown) => void;
-    query: string;
-    textual: (i: unknown) => string;
-}) => TemplateResult;
+export type ItemRenderer<I> = (item: I, i: number, opts: ItemRendererOpts<I>) => TemplateResult;
+export declare const itemRenderer: <I>(render?: Render<I>) => (item: I, i: number, { highlight, select, textual, query, isSelected, }: ItemRendererOpts<I>) => TemplateResult;
+declare const _default: (item: unknown, i: number, { highlight, select, textual, query, isSelected, }: ItemRendererOpts<unknown>) => TemplateResult;
 export default _default;

package/dist/listbox/item-renderer.js

@@ -3,7 +3,7 @@ import { html } from 'lit-html';
 import { mark } from './util';
 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
+    return html `<div
 				class="item"
 				role="option"
 				part="option"

package/dist/listbox/style.css.d.ts

@@ -1,7 +1,7 @@
 declare const style: string;
 export default style;
-export declare const styles: ({ index, height, itemHeight, }: {
+export declare const styles: ({ index, itemHeight, auto, }: {
     index?: number;
-    height: number;
     itemHeight: number;
+    auto: boolean;
 }) => string;

package/dist/listbox/style.css.js

@@ -1,4 +1,5 @@
-import { tagged as css } from '@neovici/cosmoz-utils';
+import { css } from '@pionjs/pion';
+import { when } from 'lit-html/directives/when.js';
 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 " +
@@ -9,10 +10,7 @@ const style = css `
 		position: fixed;
 		z-index: 1000;
 		font-family: var(--paper-font-subhead_-_font-family, inherit);
-		background: var(
-			--cosmoz-autocomplete-listbox-bg,
-			rgba(255, 255, 255, 0.2)
-		);
+		background: var(--cosmoz-autocomplete-listbox-bg, rgba(255, 255, 255, 0.2));
 		min-width: 50px;
 		backdrop-filter: blur(16px) saturate(180%);
 		-webkit-backdrop-filter: blur(16px) saturate(180%);
@@ -22,12 +20,23 @@ const style = css `
 			0 1.5px 6px 0 rgba(0, 0, 0, 0.1);
 		text-transform: var(--cosmoz-autocomplete-listbox-text-transform, initial);
 		overflow: hidden;
+		transition:
+			opacity 150ms ease-in-out,
+			transform 100ms ease-in-out;
 	}
 	:host(:popover-open) {
 		box-sizing: border-box;
 		display: block;
 		margin: 0;
 		border: 1px solid rgba(200, 200, 200, 0.25);
+
+		opacity: 1;
+		transform: translateY(0);
+
+		@starting-style {
+			opacity: 0;
+			transform: translateY(-50px);
+		}
 	}
 	:host([popover]) {
 		padding: 0;
@@ -103,16 +112,13 @@ const style = css `
 	}
 `;
 export default style;
-export const styles = ({ index, height, itemHeight, }) => css `
-	:host {
-		xmin-height: ${itemHeight}px;
-		xheight: ${height}px;
-	}
-
-	.item {
-		line-height: ${itemHeight}px;
-		height: ${itemHeight}px;
-	}
+export const styles = ({ index, itemHeight, auto, }) => css `
+	${when(!auto, () => css `
+			.item {
+				line-height: ${itemHeight}px;
+				height: ${itemHeight}px;
+			}
+		`)}
 
 	.item[data-index='${index || '0'}'] {
 		background: var(

package/dist/listbox/use-item-height.d.ts

@@ -0,0 +1 @@
+export declare const useItemHeight: (initialItemHeight: number | "auto") => readonly [number, (v: number) => void];

package/dist/listbox/use-item-height.js

@@ -0,0 +1,8 @@
+import { useState } from '@pionjs/pion';
+export const useItemHeight = (initialItemHeight) => {
+    const auto = initialItemHeight === 'auto', [itemHeight, setItemHeight] = useState(auto ? 40 : initialItemHeight);
+    return [
+        itemHeight,
+        (v) => (auto ? setItemHeight(v) : undefined),
+    ];
+};

package/dist/listbox/use-listbox.d.ts

@@ -9,16 +9,17 @@ export interface Props<I> {
     query: string;
     textual: (i: I) => string;
     itemRenderer?: ItemRenderer<I>;
-    itemHeight?: number;
+    itemHeight?: number | 'auto';
     itemLimit?: number;
 }
-export declare const useListbox: <I>({ value, valueProperty, items: _items, onSelect, defaultIndex, query, textual, itemRenderer, itemHeight, itemLimit, }: Props<I>) => {
+export declare const useListbox: <I>({ value, valueProperty, items: _items, onSelect, defaultIndex, query, textual, itemRenderer, itemHeight: _itemHeight, itemLimit, }: Props<I>) => {
     position: import("./use-items").Position;
     items: I[];
     height: number;
     highlight: (index: number) => void;
     select: (item: I) => void;
     itemHeight: number;
+    setItemHeight: (v: number) => void;
     renderItem: (item: I, i: number) => import("lit-html").TemplateResult;
 };
 export { useRenderItem };

package/dist/listbox/use-listbox.js

@@ -2,6 +2,7 @@ import { useMemo } from '@pionjs/pion';
 import { byValue } from './util';
 import { useItems } from './use-items';
 import { useRenderItem } from './use-render-item';
+import { useItemHeight } from './use-item-height';
 export const properties = [
     'query',
     'items',
@@ -16,7 +17,7 @@ export const properties = [
     'valueProperty',
     'loading',
 ];
-export const useListbox = ({ value, valueProperty, items: _items, onSelect, defaultIndex, query, textual, itemRenderer, itemHeight = 40, itemLimit = 5, }) => {
+export const useListbox = ({ value, valueProperty, items: _items, onSelect, defaultIndex, query, textual, itemRenderer, itemHeight: _itemHeight = 40, itemLimit = 5, }) => {
     const isSelected = useMemo(() => byValue(value, valueProperty), [value, valueProperty]), 
     // TODO: investigate if we can drop this
     items = useMemo(() => _items.slice(), [_items, isSelected]), { position, highlight, select } = useItems({
@@ -25,7 +26,7 @@ export const useListbox = ({ value, valueProperty, items: _items, onSelect, defa
         defaultIndex: isNaN(defaultIndex)
             ? undefined
             : Number(defaultIndex),
-    });
+    }), [itemHeight, setItemHeight] = useItemHeight(_itemHeight);
     return {
         position,
         items,
@@ -33,8 +34,10 @@ export const useListbox = ({ value, valueProperty, items: _items, onSelect, defa
         highlight,
         select,
         itemHeight,
+        setItemHeight,
         renderItem: useRenderItem({
             itemRenderer,
+            position,
             highlight,
             select,
             textual,

package/dist/listbox/use-render-item.d.ts

@@ -1,5 +1,5 @@
-import { ItemRenderer, Opts } from './item-renderer';
-export declare const useRenderItem: <I>({ itemRenderer, ...meta }: Opts<I> & {
+import { ItemRenderer, ItemRendererOpts } from './item-renderer';
+export declare const useRenderItem: <I>({ itemRenderer, ...meta }: ItemRendererOpts<I> & {
     itemRenderer?: ItemRenderer<I>;
 }) => (item: I, i: number) => import("lit-html").TemplateResult;
 export type { ItemRenderer };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-autocomplete",
-	"version": "10.3.0",
+	"version": "10.5.0",
 	"description": "A autocomplete input web component",
 	"keywords": [
 		"lit-html",