@neovici/cosmoz-autocomplete 10.7.0 → 10.7.2

package/dist/autocomplete/autocomplete.js

@@ -27,12 +27,11 @@ const middleware = [
     }),
     ...defaultMiddleware,
 ];
-const shouldShowDropdown = ({ active, loading, items, text, isSingle, showSingle, }) => {
+const shouldShowDropdown = ({ active, isSingle, showSingle, }) => {
     if (!active)
         return false;
-    const hasResultsOrQuery = loading || items.length > 0 || text.length > 0;
     const disallowedSingle = isSingle && !showSingle;
-    return hasResultsOrQuery && !disallowedSingle;
+    return !disallowedSingle;
 };
 const autocomplete = (props) => {
     const { active, invalid, errorMessage, label, placeholder, disabled, noLabelFloat, alwaysFloatLabel, textual, text, onText, onFocus, onClick, onDeselect, value, limit, min, showSingle, items, source$, placement, loading, } = props, host = useHost(), isOne = limit == 1, // eslint-disable-line eqeqeq
@@ -52,6 +51,7 @@ const autocomplete = (props) => {
     useImperativeApi({
         focus: () => host.shadowRoot?.querySelector('#input')?.focus(),
     }, []);
+    const hasResultsOrQuery = loading || items.length > 0 || (text != null && text.length > 0);
     return html `<cosmoz-input
 				id="input"
 				part="input"
@@ -86,9 +86,6 @@ const autocomplete = (props) => {
 
 			${when(shouldShowDropdown({
         active,
-        loading,
-        items,
-        text,
         isSingle,
         showSingle,
     }), () => listbox({
@@ -96,8 +93,13 @@ const autocomplete = (props) => {
         items,
         multi: !isOne,
         setFloating,
-        styles,
-    }, when(loading, () => html `<cosmoz-autocomplete-skeleton-span></cosmoz-autocomplete-skeleton-span>`, () => when(text.length > 0 && items.length === 0, () => html `<slot name="no-result"></slot>`))))}`;
+        styles: {
+            ...styles,
+            // WORKAROUND: hide the listbox if there are no results, don't remove it from DOM
+            // TODO: revert https://github.com/Neovici/cosmoz-autocomplete/pull/206 after https://github.com/pionjs/pion/issues/64 is fixed
+            display: hasResultsOrQuery ? undefined : 'none',
+        },
+    }, when(loading, () => html `<cosmoz-autocomplete-skeleton-span></cosmoz-autocomplete-skeleton-span>`, () => when(text != null && text.length > 0 && items.length === 0, () => html `<slot name="no-result"></slot>`))))}`;
 }, Autocomplete = (props) => {
     const thru = {
         ...props,

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

@@ -1,5 +1,5 @@
 type Source<I> = (opts: {
-    query: string;
+    query?: string;
     active?: boolean;
 }) => PromiseLike<I[]>;
 interface Base<I> {
@@ -17,7 +17,7 @@ interface Meta<I> extends Omit<Base<I>, 'value'> {
     value: I[];
 }
 export interface Props<I> extends Base<I> {
-    text: string;
+    text?: string;
     source: I[] | Source<I>;
     textProperty?: string;
     textual?: (prop?: string) => (i: I) => string;
@@ -30,7 +30,7 @@ export interface Props<I> extends Base<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;
+    query: string | undefined;
     textual: (i: I) => string;
     value: I[];
     source$: Promise<I[]>;

package/dist/autocomplete/use-autocomplete.js

@@ -84,6 +84,6 @@ export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onTe
         }, [meta]),
         onDeselect: useCallback((val) => meta.onChange(without(val)(meta.value)), [meta]),
         // whenever there is a query, override defaultIndex to 0, so the first result gets selected
-        defaultIndex: query?.length > 0 ? 0 : defaultIndex,
+        defaultIndex: (query !== undefined && query?.length > 0) ? 0 : defaultIndex,
     };
 };

package/dist/autocomplete/use-overflow.js

@@ -1,6 +1,7 @@
 import { useLayoutEffect, useState, useMemo } from '@pionjs/pion';
 import { useHost } from '@neovici/cosmoz-utils/hooks/use-host';
 import { raf } from './util';
+// eslint-disable-next-line max-statements
 const overflow = (host) => {
     const chips = host.shadowRoot.querySelectorAll('.chip');
     const badge = host.shadowRoot.querySelector('.badge');

package/dist/autocomplete/util.d.ts

@@ -1,4 +1,4 @@
-export declare const search: <I>(source: I[], query: string, textual: (i: I) => string) => I[];
+export declare const search: <I>(source: I[], query: string | undefined, textual: (i: I) => string) => I[];
 export declare const normalize: <I>(source: I[] | false | null) => I[];
 export declare const notify: <T>(host: EventTarget, name: string, detail: T) => boolean;
 export declare const useNotify: <V>(host: EventTarget, fn: undefined | ((v: V) => void), name: string) => (val: V) => void;

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

@@ -6,7 +6,7 @@ export interface ItemRendererOpts<I> {
     highlight: (i: number) => void;
     select: (item: I) => void;
     isSelected: (item: I) => void;
-    query: string;
+    query?: string;
     textual: (i: I) => string;
 }
 export type Render<I> = (content: unknown, item: I, i: number) => unknown;

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

@@ -6,7 +6,7 @@ export interface Props<I> {
     items: I[];
     onSelect: (i: I) => void;
     defaultIndex?: number;
-    query: string;
+    query?: string;
     textual: (i: I) => string;
     itemRenderer?: ItemRenderer<I>;
     itemHeight?: number | 'auto';

package/dist/listbox/util.d.ts

@@ -1,2 +1,2 @@
 export declare const byValue: <K extends PropertyKey | undefined, T>(value: T | T[], valueProperty: K) => ((item: T) => boolean) | ((item: T) => T | undefined);
-export declare const mark: (text: string, query: string) => string | (string | import("lit-html").TemplateResult<1>)[];
+export declare const mark: (text: string, query: string | undefined) => string | (string | import("lit-html").TemplateResult<1>)[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-autocomplete",
-	"version": "10.7.0",
+	"version": "10.7.2",
 	"description": "A autocomplete input web component",
 	"keywords": [
 		"lit-html",
@@ -87,15 +87,9 @@
 		"@playwright/test": "^1.43.1",
 		"@semantic-release/changelog": "^6.0.0",
 		"@semantic-release/git": "^10.0.0",
-		"@storybook/addon-essentials": "^7.0.0",
-		"@storybook/addon-links": "^7.0.0",
-		"@storybook/builder-vite": "7.6.17",
-		"@storybook/storybook-deployer": "^2.8.5",
-		"@storybook/web-components": "7.6.17",
+		"@storybook/web-components-vite": "^9.1.4",
 		"@types/mocha": "^10.0.6",
 		"@types/node": "^22.10.2",
-		"@web/storybook-builder": "^0.1.9",
-		"@web/storybook-framework-web-components": "^0.1.1",
 		"esbuild": "^0.24.0",
 		"http-server": "^14.1.1",
 		"husky": "^9.0.0",
@@ -104,7 +98,7 @@
 		"rollup-plugin-terser": "^7.0.2",
 		"semantic-release": "^24.0.0",
 		"sinon": "^19.0.0",
-		"storybook": "^7.6.17"
+		"storybook": "^9.1.4"
 	},
 	"overrides": {
 		"conventional-changelog-conventionalcommits": ">= 8.0.0"