@neovici/cosmoz-autocomplete 13.1.0 → 13.2.0

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

@@ -28,6 +28,7 @@ const autocomplete = (props) => {
     const hasResultsOrQuery = loading || items.length > 0 || (text != null && text.length > 0);
     return html `<cosmoz-dropdown-next
 			open-on-focus
+			?disabled=${disabled}
 			.opened=${opened}
 			@dropdown-toggle=${onToggle}
 			part="dropdown"
@@ -102,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, }: 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, }) => {
+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({
@@ -28,7 +30,7 @@ export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onTe
                 onChange(values.slice(0, -1));
             }
         },
-        check: () => empty && limit !== 1 && host.matches(':focus-within'),
+        check: () => !disabled && empty && limit !== 1 && host.matches(':focus-within'),
         element: () => host,
     }, []);
     // Clear query when popover closes
@@ -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,15 +80,22 @@ export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onTe
             preserveOrder,
             valueProperty,
             externalSearch,
+            belowMinLength,
         ]),
         onToggle: useCallback((e) => {
+            if (disabled)
+                return;
             setOpened(e.newState === 'open');
-        }, []),
+        }, [disabled]),
         onText: useCallback((e) => {
+            if (disabled)
+                return;
             onText(e.target.value);
             setOpened(true);
-        }, [onText, text, setOpened]),
+        }, [disabled, onText, text, setOpened]),
         onSelect: useCallback((newVal) => {
+            if (disabled)
+                return;
             meta.onSelect?.(newVal, meta);
             const { onChange, onText, limit, min, value: val, keepQuery, keepOpened, setOpened, } = meta;
             if (!keepQuery)
@@ -97,8 +108,12 @@ export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onTe
             onChange((deselect
                 ? without(newVal)(value)
                 : [...value, newVal]).slice(-limit));
-        }, [meta]),
-        onDeselect: useCallback((val) => meta.onChange(without(val)(meta.value)), [meta]),
+        }, [disabled, meta]),
+        onDeselect: useCallback((val) => {
+            if (disabled)
+                return;
+            meta.onChange(without(val)(meta.value));
+        }, [disabled, meta]),
         // whenever there is a query, override defaultIndex to 0, so the first result gets selected
         defaultIndex: query !== undefined && query?.length > 0 ? 0 : defaultIndex,
     };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-autocomplete",
-	"version": "13.1.0",
+	"version": "13.2.0",
 	"type": "module",
 	"description": "A autocomplete input web component",
 	"keywords": [
@@ -79,7 +79,7 @@
 	},
 	"dependencies": {
 		"@lit-labs/virtualizer": "^2.0.0",
-		"@neovici/cosmoz-dropdown": "^7.4.0",
+		"@neovici/cosmoz-dropdown": "^7.5.0",
 		"@neovici/cosmoz-input": "^5.6.0",
 		"@neovici/cosmoz-utils": "^6.19.0",
 		"@pionjs/pion": "^2.7.1",