@neovici/cosmoz-autocomplete 7.0.0 → 7.1.0

package/dist/autocomplete/autocomplete.js

@@ -81,5 +81,6 @@ const autocomplete = (props) => {
     '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-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.1.0",
 	"description": "A autocomplete input web component",
 	"keywords": [
 		"lit-html",