@neovici/cosmoz-autocomplete 7.0.0 → 7.2.0

package/dist/autocomplete/autocomplete.js

@@ -75,11 +75,12 @@ const autocomplete = (props) => {
     'text-property',
     'limit',
     'show-single',
-    'keep-query',
-    'keep-opened',
+    'auto-close',
+    'auto-clear',
     'hide-empty',
     'default-index',
     'item-height',
     'item-limit',
+    'wrap'
 ];
 export { autocomplete, Autocomplete, observedAttributes };

package/dist/autocomplete/chip.d.ts

@@ -7,6 +7,7 @@ interface ChipProps extends Props {
     slot?: string;
     className?: string;
     content: unknown;
+    hidden?: boolean;
 }
-export declare const chip: ({ content, onClear, disabled, className, slot, }: ChipProps) => import("lit-html").TemplateResult<1>;
+export declare const chip: ({ content, onClear, disabled, hidden, className, slot, }: ChipProps) => import("lit-html").TemplateResult<1>;
 export {};

package/dist/autocomplete/chip.js

@@ -36,12 +36,13 @@ export const Chip = ({ onClear, disabled }) => html `
 			</span>`)}
 `;
 customElements.define('cosmoz-autocomplete-chip', component(Chip, { observedAttributes: ['disabled'] }));
-export const chip = ({ content, onClear, disabled, className = 'chip', slot, }) => html `<cosmoz-autocomplete-chip
+export const chip = ({ content, onClear, disabled, hidden, className = 'chip', slot, }) => html `<cosmoz-autocomplete-chip
 		class=${ifDefined(className)}
 		slot=${ifDefined(slot)}
 		part="chip"
 		exportparts="chip-text, chip-clear"
 		?disabled=${disabled}
+		?hidden=${hidden}
 		.onClear=${onClear}
 		title=${ifDefined(typeof content === 'string' ? content : undefined)}
 		>${content}</cosmoz-autocomplete-chip

package/dist/autocomplete/selection.js

@@ -12,5 +12,6 @@ export const selection = ({ value: values, onDeselect, textual, disabled, }) =>
         className: 'badge',
         disabled: true,
         slot: 'control',
+        hidden: true,
     }),
 ];

package/dist/autocomplete/styles.css.js

@@ -3,6 +3,7 @@ export default css `
 	:host {
 		display: block;
 		position: relative;
+		min-width: 35px;
 	}
 
 	cosmoz-input::part(control) {
@@ -41,6 +42,13 @@ export default css `
 		display: none;
 	}
 
+	:host([wrap]) cosmoz-input::part(control) {
+		flex-wrap: wrap;
+	}
+	:host([wrap]) .chip {
+		max-width: 100%;
+	}
+
 	slot {
 		display: contents !important;
 	}

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

@@ -5,8 +5,8 @@ type Source<I> = (opts: {
 interface Base<I> {
     value: I | I[];
     limit?: number;
-    keepQuery?: boolean;
-    keepOpened?: boolean;
+    autoClose?: boolean;
+    autoClear?: boolean;
     onText: (text: string) => void;
     onChange: (value: I[], done?: () => void) => void;
     onSelect: (value: I, meta: Meta<I>) => void;
@@ -26,7 +26,7 @@ export interface Props<I> extends Base<I> {
     disabled?: boolean;
     onFocus?: (focused?: boolean) => void;
 }
-export declare const useAutocomplete: <I>({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, source, textProperty, textual: _textual, valueProperty, external, hideEmpty, keepQuery, keepOpened, ...thru }: Props<I>) => {
+export declare const useAutocomplete: <I>({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, source, textProperty, textual: _textual, valueProperty, external, hideEmpty, autoClose, autoClear, ...thru }: Props<I>) => {
     active: boolean | undefined;
     query: string;
     textual: (i: I) => string;

package/dist/autocomplete/use-autocomplete.js

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'haunted';
+import { useCallback, useMemo, useEffect } from 'haunted';
 import { without, array } from '@neovici/cosmoz-utils/array';
 import { prop, strProp } from '@neovici/cosmoz-utils/object';
 import { useHost } from '@neovici/cosmoz-utils/hooks/use-host';
@@ -6,8 +6,8 @@ import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
 import { useFocus } from '@neovici/cosmoz-dropdown/use-focus';
 import { useKeys } from './use-keys';
 import { search, notify, useNotify, EMPTY$ } from './util';
-export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, source, textProperty, textual: _textual, valueProperty, external, hideEmpty, keepQuery, keepOpened, ...thru }) => {
-    const textual = useMemo(() => (_textual ?? strProp)(textProperty), [_textual, textProperty]), { active, onFocus, setClosed } = useFocus(thru), empty = !text, query = useMemo(() => text?.trim().toLowerCase(), [text]), host = useHost(), onText = useNotify(host, _onText, 'text'), onChange = useCallback((val) => {
+export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, source, textProperty, textual: _textual, valueProperty, external, hideEmpty, autoClose, autoClear, ...thru }) => {
+    const textual = useMemo(() => (_textual ?? strProp)(textProperty), [_textual, textProperty]), { active, focused, onFocus, setClosed } = useFocus(thru), empty = !text, query = useMemo(() => text?.trim().toLowerCase(), [text]), host = useHost(), onText = useNotify(host, _onText, 'text'), onChange = useCallback((val) => {
         _onChange?.(val, () => setClosed(true));
         notify(host, 'value', val);
     }, [_onChange]), source$ = useMemo(() => Promise.resolve(typeof source === 'function' ? source({ query, active }) : source), [source, active, query]), value = useMemo(() => array(_value), [_value]), values$ = useMemo(() => source$.then((source) => [
@@ -15,7 +15,7 @@ export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onTe
         ...without(value, prop(valueProperty))(source),
     ]), [source$, value, valueProperty]);
     useKeys({
-        active,
+        focused,
         empty,
         limit,
         value,
@@ -23,13 +23,17 @@ export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onTe
         onChange,
         onText,
     });
+    useEffect(() => {
+        if (!focused)
+            onText('');
+    }, [focused]);
     const meta = useMeta({
         onText,
         onChange,
         value,
         limit,
-        keepQuery,
-        keepOpened,
+        autoClose,
+        autoClear,
         setClosed,
         onSelect,
     });
@@ -54,17 +58,12 @@ export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onTe
             setClosed(false);
         }, [onText, text, setClosed]),
         onSelect: useCallback((newVal) => {
-            const { onSelect } = meta;
-            if (onSelect) {
-                return onSelect(newVal, meta);
-            }
-            const { onChange, onText, limit, value: val, keepQuery, keepOpened, setClosed, } = meta;
-            if (!keepQuery) {
+            meta.onSelect?.(newVal, meta);
+            const { onChange, onText, limit, value: val, autoClose, autoClear, setClosed, } = meta;
+            if (autoClear)
                 onText('');
-            }
-            if (!keepOpened) {
+            if (autoClose)
                 setClosed(true);
-            }
             const value = array(val);
             onChange((value.includes(newVal)
                 ? without(newVal)(value)

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

@@ -1,5 +1,5 @@
 export interface Props<I> {
-    active?: boolean;
+    focused?: boolean;
     empty?: boolean;
     hideEmpty?: boolean;
     value: I | I[];
@@ -7,4 +7,4 @@ export interface Props<I> {
     onChange: (v: I[]) => void;
     onText: (s: string) => void;
 }
-export declare const useKeys: <I>({ active, empty, ...info }: Props<I>) => void;
+export declare const useKeys: <I>({ focused, empty, ...info }: Props<I>) => void;

package/dist/autocomplete/use-keys.js

@@ -1,8 +1,8 @@
 import { useEffect } from 'haunted';
 import { array } from '@neovici/cosmoz-utils/array';
 import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
-export const useKeys = ({ active, empty, ...info }) => {
-    const enabled = active && empty, meta = useMeta(info);
+export const useKeys = ({ focused, empty, ...info }) => {
+    const enabled = focused && empty, meta = useMeta(info);
     useEffect(() => {
         if (!enabled) {
             return;

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

@@ -1,4 +1,6 @@
-export declare const useOverflow: <I>({ value, active, }: {
+export declare const useOverflow: <I>({ value, active, wrap, limit, }: {
     value: I[];
     active?: boolean | undefined;
+    wrap?: boolean | undefined;
+    limit?: number | undefined;
 }) => void;

package/dist/autocomplete/use-overflow.js

@@ -9,8 +9,6 @@ const overflow = (host) => {
         chip.hidden = false;
     }
     const input = host.shadowRoot.querySelector('cosmoz-input');
-    if (input.matches('[data-one]'))
-        return;
     const limit = input.shadowRoot
         ?.querySelector('.control')
         ?.getBoundingClientRect();
@@ -30,17 +28,21 @@ const overflow = (host) => {
         chips[i].hidden = true;
     }
 };
-export const useOverflow = ({ value, active, }) => {
+export const useOverflow = ({ value, active, wrap, limit, }) => {
     const host = useHost();
+    // eslint-disable-next-line eqeqeq
+    const enabled = !(wrap || limit == 1);
     const doRaf = useMemo(() => raf(() => overflow(host)), []);
     const [width, setWidth] = useState(0);
     useLayoutEffect(() => {
+        if (!enabled)
+            return;
         const input = host.shadowRoot.querySelector('cosmoz-input');
         const observer = new ResizeObserver((e) => {
             setWidth(e[0].contentRect.width);
         });
         observer.observe(input);
         return () => observer.disconnect();
-    }, []);
-    useLayoutEffect(() => doRaf(), [width, active, value]);
+    }, [enabled]);
+    useLayoutEffect(() => (enabled ? doRaf() : undefined), [enabled, width, active, value]);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-autocomplete",
-	"version": "7.0.0",
+	"version": "7.2.0",
 	"description": "A autocomplete input web component",
 	"keywords": [
 		"lit-html",
@@ -68,8 +68,8 @@
 	},
 	"dependencies": {
 		"@lit-labs/virtualizer": "^2.0.0",
-		"@neovici/cosmoz-dropdown": "^3.0.0",
-		"@neovici/cosmoz-input": "^3.0.0",
+		"@neovici/cosmoz-dropdown": "^3.4.0",
+		"@neovici/cosmoz-input": "^3.11.0",
 		"@neovici/cosmoz-utils": "^5.0.0",
 		"haunted": "^5.0.0",
 		"lit-html": "^2.0.0"
@@ -77,12 +77,12 @@
 	"devDependencies": {
 		"@commitlint/cli": "^17.0.0",
 		"@commitlint/config-conventional": "^17.0.0",
-		"@neovici/cfg": "^1.13.0",
+		"@neovici/cfg": "^1.34.0",
 		"@open-wc/testing": "^3.0.0",
 		"@semantic-release/changelog": "^6.0.0",
 		"@semantic-release/git": "^10.0.0",
 		"@storybook/storybook-deployer": "^2.8.5",
-		"@web/dev-server-storybook": "^0.6.0",
+		"@web/dev-server-storybook": "^0.7.0",
 		"eslint-import-resolver-exports": "^1.0.0-beta.5",
 		"husky": "^8.0.0",
 		"semantic-release": "^21.0.0",