@neovici/cosmoz-autocomplete 13.1.0 → 13.1.1

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"

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

@@ -27,7 +27,7 @@ export interface Props<I> extends Base<I> {
     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, 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, }: Props<I>) => {
     opened: boolean;
     query: string | undefined;
     textual: (i: I) => string;

package/dist/autocomplete/use-autocomplete.js

@@ -11,7 +11,7 @@ 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, }) => {
     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);
@@ -28,7 +28,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
@@ -78,13 +78,19 @@ export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onTe
             externalSearch,
         ]),
         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 +103,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.1.1",
 	"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",