@neovici/cosmoz-autocomplete 13.1.1 → 13.2.1

package/dist/autocomplete/autocomplete.d.ts

@@ -24,5 +24,5 @@ export interface Props<I> extends Base<I> {
 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", "external-search", "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", "lazy-open"];
 export { Autocomplete, autocomplete, observedAttributes, style };

package/dist/autocomplete/autocomplete.js

@@ -43,8 +43,8 @@ const autocomplete = (props) => {
 				?always-float-label=${value?.length > 0 || alwaysFloatLabel}
 				?readonly=${isSingle}
 				?disabled=${disabled}
-				?invalid=${guard([source$], () => until(source$.then(() => invalid, () => true), invalid))}
-				.errorMessage=${guard([source$], () => until(source$.then(() => errorMessage, (e) => e.message), errorMessage))}
+				?invalid=${guard([source$, invalid], () => until(source$.then(() => invalid, () => true), invalid))}
+				.errorMessage=${guard([source$, errorMessage], () => until(source$.then(() => errorMessage, (e) => e.message), errorMessage))}
 				.value=${live(text)}
 				@value-changed=${onText}
 				autocomplete="off"
@@ -103,5 +103,6 @@ const autocomplete = (props) => {
     'item-height',
     'item-limit',
     'wrap',
+    'lazy-open',
 ];
 export { Autocomplete, autocomplete, observedAttributes, style };

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

@@ -26,8 +26,9 @@ export interface Props<I> extends Base<I> {
     preserveOrder?: boolean;
     defaultIndex?: number;
     externalSearch?: boolean;
+    lazyOpen?: 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, externalSearch, disabled, }: 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, disabled, lazyOpen, }: Props<I>) => {
     opened: boolean;
     query: string | undefined;
     textual: (i: I) => string;

package/dist/autocomplete/use-autocomplete.js

@@ -11,13 +11,15 @@ const useNotify = (host, fn, name) => useCallback((val) => {
     fn?.(val);
     host.dispatchEvent(new CustomEvent(name, { detail: val }));
 }, [fn]);
-export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, min, source, textProperty, textual: _textual, valueProperty, keepOpened, keepQuery, preserveOrder, defaultIndex, externalSearch, disabled, }) => {
+export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, min, source, textProperty, textual: _textual, valueProperty, keepOpened, keepQuery, preserveOrder, defaultIndex, externalSearch, disabled, lazyOpen, }) => {
     const textual = useMemo(() => (_textual ?? strProp)(textProperty), [_textual, textProperty]), host = useHost(), [opened, setOpened] = useProperty('opened', false), empty = !text, query = useMemo(() => text?.trim(), [text]), onText = useNotify(host, _onText, 'text'), onChange = useCallback((val) => {
         _onChange?.(val, () => setOpened(false));
         notify(host, 'value', val);
-    }, [_onChange]), [options, setOptions] = useState([]), source$ = useMemo(() => Promise.resolve(typeof source === 'function'
-        ? source({ query, active: opened })
-        : source).then(normalize), [source, opened, query]), value = useMemo(() => array(_value), [_value]);
+    }, [_onChange]), [options, setOptions] = useState([]), belowMinLength = Boolean(lazyOpen && !query), source$ = useMemo(() => belowMinLength
+        ? Promise.resolve([])
+        : Promise.resolve(typeof source === 'function'
+            ? source({ query, active: opened })
+            : source).then(normalize), [source, opened, query, belowMinLength]), value = useMemo(() => array(_value), [_value]);
     useEffect(() => source$.then(setOptions), [source$]);
     // Backspace to deselect last chip (when input is empty and multi-select)
     useActivity({
@@ -62,6 +64,8 @@ export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onTe
         items: useMemo(() => {
             if (!opened)
                 return EMPTY;
+            if (belowMinLength)
+                return EMPTY;
             const items = preserveOrder
                 ? options
                 : [...value, ...without(value, prop(valueProperty))(options)];
@@ -76,6 +80,7 @@ export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onTe
             preserveOrder,
             valueProperty,
             externalSearch,
+            belowMinLength,
         ]),
         onToggle: useCallback((e) => {
             if (disabled)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-autocomplete",
-	"version": "13.1.1",
+	"version": "13.2.1",
 	"type": "module",
 	"description": "A autocomplete input web component",
 	"keywords": [