@neovici/cosmoz-autocomplete 7.10.0 → 8.1.0

package/dist/autocomplete/autocomplete.d.ts

@@ -1,5 +1,6 @@
 import '@neovici/cosmoz-input';
 import { Props as Base, RProps } from './use-autocomplete';
+import style from './styles.css';
 export interface Props<I> extends Base<I> {
     invalid?: boolean;
     errorMessage?: string;
@@ -15,4 +16,4 @@ 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: string[];
-export { autocomplete, Autocomplete, observedAttributes };
+export { autocomplete, Autocomplete, observedAttributes, style };

package/dist/autocomplete/autocomplete.js

@@ -2,7 +2,7 @@ import { html, nothing } from 'lit-html'; // eslint-disable-line object-curly-ne
 import { live } from 'lit-html/directives/live.js';
 import { until } from 'lit-html/directives/until.js';
 import { when } from 'lit-html/directives/when.js';
-import { useCallback } from 'haunted';
+import { useCallback } from '@pionjs/pion';
 import { useHost } from '@neovici/cosmoz-utils/hooks/use-host';
 import { useImperativeApi } from '@neovici/cosmoz-utils/hooks/use-imperative-api';
 import '@neovici/cosmoz-input';
@@ -16,7 +16,7 @@ const inputParts = ['input', 'control', 'label', 'line', 'error']
     .map((part) => `${part}: input-${part}`)
     .join();
 const autocomplete = (props) => {
-    const { invalid, errorMessage, label, placeholder, disabled, noLabelFloat, alwaysFloatLabel, textual, text, onText, onFocus, onClick, onDeselect, value, limit, showSingle, items$, values$, } = props, host = useHost(), isOne = limit == 1, // eslint-disable-line eqeqeq
+    const { invalid, errorMessage, label, placeholder, disabled, noLabelFloat, alwaysFloatLabel, textual, text, onText, onFocus, onClick, onDeselect, value, limit, min, showSingle, items$, values$, } = props, host = useHost(), isOne = limit == 1, // eslint-disable-line eqeqeq
     isSingle = isOne && value?.[0] != null, 
     // TODO: Refactor with ref or a state callback
     anchor = useCallback(() => host.shadowRoot.querySelector('#input'), [host, value]), suggestions = until(items$.then((items) => when((!isSingle || showSingle) && items.length, () => listbox({
@@ -28,9 +28,7 @@ const autocomplete = (props) => {
     useImperativeApi({
         focus: () => host.shadowRoot?.querySelector('#input')?.focus(),
     }, []);
-    return html ` <style>
-				${style}
-			</style>
+    return html `
 			<cosmoz-input
 				id="input"
 				part="input"
@@ -56,6 +54,7 @@ const autocomplete = (props) => {
 				<slot name="suffix" slot="suffix"></slot>
 				${selection({
         value,
+        min,
         isOne,
         onDeselect,
         textual,
@@ -80,7 +79,9 @@ const autocomplete = (props) => {
     'text-property',
     'value-property',
     'limit',
+    'min',
     'show-single',
+    'preserve-order',
     'keep-opened',
     'keep-query',
     'hide-empty',
@@ -89,4 +90,4 @@ const autocomplete = (props) => {
     'item-limit',
     'wrap',
 ];
-export { autocomplete, Autocomplete, observedAttributes };
+export { autocomplete, Autocomplete, observedAttributes, style };

package/dist/autocomplete/chip.css.js

@@ -12,6 +12,7 @@ export default css `
 		min-width: 40px;
 		padding: 0 4px 0 8px;
 		gap: 4px;
+		cursor: pointer;
 	}
 	.content {
 		color: var(--cosmoz-autocomplete-chip-color, #424242);

package/dist/autocomplete/chip.d.ts

@@ -1,5 +1,5 @@
 interface Props {
-    onClear?: () => void;
+    onClear?: false | (() => void);
     disabled?: boolean;
 }
 export declare const Chip: ({ onClear, disabled }: Props) => import("lit-html").TemplateResult<1>;

package/dist/autocomplete/chip.js

@@ -1,6 +1,7 @@
-import { html, component } from 'haunted';
-import { when } from 'lit-html/directives/when.js';
+import { sheet } from '@neovici/cosmoz-utils';
+import { component, html } from '@pionjs/pion';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { when } from 'lit-html/directives/when.js';
 import styles from './chip.css';
 const clear = html `
 	<svg
@@ -27,15 +28,15 @@ const clear = html `
 	</svg>
 `;
 export const Chip = ({ onClear, disabled }) => html `
-	<style>
-		${styles}
-	</style>
 	<div class="content" part="content chip-text"><slot></slot></div>
-	${when(!disabled, () => html ` <span class="clear" part="clear chip-clear" @click=${onClear}>
+	${when(onClear && !disabled, () => html ` <span class="clear" part="clear chip-clear" @click=${onClear}>
 				${clear}
 			</span>`)}
 `;
-customElements.define('cosmoz-autocomplete-chip', component(Chip, { observedAttributes: ['disabled'] }));
+customElements.define('cosmoz-autocomplete-chip', component(Chip, {
+    observedAttributes: ['disabled'],
+    styleSheets: [sheet(styles)],
+}));
 export const chip = ({ content, onClear, disabled, hidden, className = 'chip', slot, }) => html `<cosmoz-autocomplete-chip
 		class=${ifDefined(className)}
 		slot=${ifDefined(slot)}

package/dist/autocomplete/index.js

@@ -1,5 +1,6 @@
-import { component, useCallback } from 'haunted';
-import { Autocomplete, observedAttributes as atts, } from './autocomplete';
+import { component, useCallback } from '@pionjs/pion';
+import { Autocomplete, observedAttributes as atts, style, } from './autocomplete';
+import { sheet } from '@neovici/cosmoz-utils';
 const Standalone = (host) => {
     const { onChange, onText, ...props } = host;
     return Autocomplete({
@@ -14,6 +15,6 @@ const Standalone = (host) => {
         }, [onText]),
     });
 };
-const observedAttributes = atts;
-customElements.define('cosmoz-autocomplete-ui', component(Autocomplete, { observedAttributes }));
-customElements.define('cosmoz-autocomplete', component(Standalone, { observedAttributes }));
+const observedAttributes = atts, styleSheets = [sheet(style)];
+customElements.define('cosmoz-autocomplete-ui', component(Autocomplete, { observedAttributes, styleSheets }));
+customElements.define('cosmoz-autocomplete', component(Standalone, { observedAttributes, styleSheets }));

package/dist/autocomplete/selection.d.ts

@@ -2,10 +2,11 @@ import type { RProps } from './use-autocomplete';
 type Deselect<I> = RProps<I>['onDeselect'];
 interface Props<I> {
     value: I[];
+    min?: number;
     isOne: boolean;
     onDeselect: Deselect<I>;
     textual: (i: I) => string;
     disabled?: boolean;
 }
-export declare const selection: <I>({ value: values, onDeselect, textual, disabled, }: Props<I>) => import("lit-html").TemplateResult<1>[];
+export declare const selection: <I>({ value: values, min, onDeselect, textual, disabled, }: Props<I>) => import("lit-html").TemplateResult<1>[];
 export {};

package/dist/autocomplete/selection.js

@@ -1,9 +1,9 @@
 import { html } from 'lit-html';
 import { chip } from './chip';
-export const selection = ({ value: values, onDeselect, textual, disabled, }) => [
+export const selection = ({ value: values, min = 0, onDeselect, textual, disabled, }) => [
     ...values.filter(Boolean).map((value) => chip({
         content: textual(value),
-        onClear: () => onDeselect(value),
+        onClear: values.length > min && (() => onDeselect(value)),
         disabled,
         slot: 'control',
     })),

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

@@ -5,6 +5,7 @@ type Source<I> = (opts: {
 interface Base<I> {
     value: I | I[];
     limit?: number;
+    min?: number;
     keepOpened?: boolean;
     keepQuery?: boolean;
     onText: (text: string) => void;
@@ -25,8 +26,9 @@ export interface Props<I> extends Base<I> {
     hideEmpty?: boolean;
     disabled?: boolean;
     onFocus?: (focused?: boolean) => void;
+    preserveOrder?: boolean;
 }
-export declare const useAutocomplete: <I>({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, source, textProperty, textual: _textual, valueProperty, external, hideEmpty, keepOpened, keepQuery, ...thru }: Props<I>) => {
+export declare const useAutocomplete: <I>({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, min, source, textProperty, textual: _textual, valueProperty, external, hideEmpty, keepOpened, keepQuery, preserveOrder, ...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, useEffect } from 'haunted';
+import { useCallback, useMemo, useEffect } from '@pionjs/pion';
 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,16 +6,16 @@ import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
 import { useFocus } from '@neovici/cosmoz-dropdown/use-focus';
 import { useKeys } from './use-keys';
 import { search, normalize, notify, useNotify, EMPTY$ } from './util';
-export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, source, textProperty, textual: _textual, valueProperty, external, hideEmpty, keepOpened, keepQuery, ...thru }) => {
+export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onText: _onText, onSelect, limit, min, source, textProperty, textual: _textual, valueProperty, external, hideEmpty, keepOpened, keepQuery, preserveOrder, ...thru }) => {
     const textual = useMemo(() => (_textual ?? strProp)(textProperty), [_textual, textProperty]), { active, focused, onFocus, setClosed } = useFocus(thru), empty = !text, query = useMemo(() => text?.trim(), [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) => {
-        return [
+    }, [_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) => preserveOrder
+        ? normalize(source)
+        : [
             ...value,
             ...without(value, prop(valueProperty))(normalize(source)),
-        ];
-    }), [source$, value, valueProperty]);
+        ]), [source$, value, valueProperty]);
     useKeys({
         focused,
         empty,
@@ -34,6 +34,7 @@ export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onTe
         onChange,
         value,
         limit,
+        min,
         keepQuery,
         keepOpened,
         setClosed,
@@ -61,13 +62,15 @@ export const useAutocomplete = ({ value: _value, text, onChange: _onChange, onTe
         }, [onText, text, setClosed]),
         onSelect: useCallback((newVal) => {
             meta.onSelect?.(newVal, meta);
-            const { onChange, onText, limit, value: val, keepQuery, keepOpened, setClosed, } = meta;
+            const { onChange, onText, limit, min, value: val, keepQuery, keepOpened, setClosed, } = meta;
             if (!keepQuery)
                 onText('');
             if (!keepOpened)
                 setClosed(true);
-            const value = array(val);
-            onChange((value.includes(newVal)
+            const value = array(val), deselect = value.includes(newVal);
+            if (deselect && value.length === min)
+                return;
+            onChange((deselect
                 ? without(newVal)(value)
                 : [...value, newVal]).slice(-limit));
         }, [meta]),

package/dist/autocomplete/use-keys.js

@@ -1,4 +1,4 @@
-import { useEffect } from 'haunted';
+import { useEffect } from '@pionjs/pion';
 import { array } from '@neovici/cosmoz-utils/array';
 import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
 export const useKeys = ({ focused, empty, ...info }) => {

package/dist/autocomplete/use-overflow.js

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useState, useMemo } from 'haunted';
+import { useLayoutEffect, useState, useMemo } from '@pionjs/pion';
 import { useHost } from '@neovici/cosmoz-utils/hooks/use-host';
 import { raf } from './util';
 const overflow = (host) => {

package/dist/autocomplete/util.js

@@ -1,4 +1,4 @@
-import { useCallback } from 'haunted';
+import { useCallback } from '@pionjs/pion';
 export const search = (source, query, textual) => {
     const qry = query.toLowerCase();
     const matches = [];

package/dist/listbox/index.js

@@ -1,11 +1,13 @@
-import { html, component, useEffect, useRef, useMemo } from 'haunted';
-import { ref } from 'lit-html/directives/ref.js';
 import { virtualize, virtualizerRef, } from '@lit-labs/virtualizer/virtualize.js';
+import { sheet } from '@neovici/cosmoz-utils';
 import { portal } from '@neovici/cosmoz-utils/directives/portal';
 import { spreadProps } from '@neovici/cosmoz-utils/directives/spread-props';
+import { useStyleSheet } from '@neovici/cosmoz-utils/hooks/use-stylesheet';
 import { props } from '@neovici/cosmoz-utils/object';
-import { useListbox, properties } from './use-listbox';
-import { styles } from './style.css';
+import { component, html, useEffect, useMemo, useRef } from '@pionjs/pion';
+import { ref } from 'lit-html/directives/ref.js';
+import style, { styles } from './style.css';
+import { properties, useListbox } from './use-listbox';
 const Listbox = (props) => {
     const listRef = useRef(undefined);
     const { position, items, renderItem, height, itemHeight } = useListbox(props);
@@ -17,23 +19,21 @@ const Listbox = (props) => {
             return;
         vl.element(position.index)?.scrollIntoView({ block: 'nearest' });
     }, [position]);
+    useStyleSheet(styles({ ...position, height, itemHeight }));
     const layout = useMemo(() => ({
         _itemSize: { height: itemHeight - 0.00001 },
     }), [itemHeight]);
-    return html ` <style>
-			${styles({ ...position, height, itemHeight })}
-		</style>
-		<div class="items" ${ref((el) => (listRef.current = el))}>
-			<div virtualizer-sizer></div>
-			${virtualize({
+    return html `<div class="items" ${ref((el) => (listRef.current = el))}>
+		<div virtualizer-sizer></div>
+		${virtualize({
         items,
         renderItem,
         scroller: true,
         layout,
     })}
-		</div>`;
+	</div>`;
 };
-customElements.define('cosmoz-listbox', component(Listbox));
+customElements.define('cosmoz-listbox', component(Listbox, { styleSheets: [sheet(style)] }));
 export const listbox = ({ multi, ...thru }) => portal(html `<cosmoz-listbox
 			part="listbox"
 			?multi=${multi}

package/dist/listbox/style.css.js

@@ -84,8 +84,6 @@ const style = css `
 `;
 export default style;
 export const styles = ({ index, height, itemHeight, }) => css `
-	${style}
-
 	:host {
 		min-height: ${itemHeight}px;
 		height: ${height}px;

package/dist/listbox/use-items.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'haunted';
+import { useCallback, useEffect, useState } from '@pionjs/pion';
 import { useKeyboard } from './use-keyboard';
 export const useItems = ({ items, onSelect, defaultIndex = 0, }) => {
     const [position, setPosition] = useState({

package/dist/listbox/use-keyboard.js

@@ -1,4 +1,4 @@
-import { useEffect } from 'haunted';
+import { useEffect } from '@pionjs/pion';
 import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
 export const useKeyboard = (handlers) => {
     const listeners = useMeta(handlers);

package/dist/listbox/use-listbox.js

@@ -1,4 +1,4 @@
-import { useMemo } from 'haunted';
+import { useMemo } from '@pionjs/pion';
 import { useHost } from '@neovici/cosmoz-utils/hooks/use-host';
 import { usePosition } from '@neovici/cosmoz-dropdown/use-position';
 import { byValue } from './util';

package/dist/listbox/use-render-item.js

@@ -1,4 +1,4 @@
-import { useCallback } from 'haunted';
+import { useCallback } from '@pionjs/pion';
 import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
 import { itemRenderer as mkItemRenderer, } from './item-renderer';
 export const useRenderItem = ({ itemRenderer = mkItemRenderer(), ...meta }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-autocomplete",
-	"version": "7.10.0",
+	"version": "8.1.0",
 	"description": "A autocomplete input web component",
 	"keywords": [
 		"lit-html",
@@ -68,22 +68,22 @@
 	},
 	"dependencies": {
 		"@lit-labs/virtualizer": "^2.0.0",
-		"@neovici/cosmoz-dropdown": "^3.4.0",
-		"@neovici/cosmoz-input": "^3.11.0",
-		"@neovici/cosmoz-utils": "^5.0.0",
-		"haunted": "^5.0.0",
+		"@neovici/cosmoz-dropdown": "^4.0.0",
+		"@neovici/cosmoz-input": "^4.0.0",
+		"@neovici/cosmoz-utils": "^6.0.0",
+		"@pionjs/pion": "^2.0.0",
 		"lit-html": "^2.0.0 || ^3.0.0"
 	},
 	"devDependencies": {
 		"@commitlint/cli": "^18.0.0",
 		"@commitlint/config-conventional": "^18.0.0",
 		"@neovici/cfg": "^1.34.0",
-		"@open-wc/testing": "^3.0.0",
+		"@open-wc/testing": "^4.0.0",
 		"@semantic-release/changelog": "^6.0.0",
 		"@semantic-release/git": "^10.0.0",
 		"@storybook/storybook-deployer": "^2.8.5",
 		"@types/mocha": "^10.0.3",
-		"@web/dev-server-storybook": "^1.0.0",
+		"@web/dev-server-storybook": "^2.0.0",
 		"husky": "^8.0.0",
 		"rollup-plugin-terser": "^7.0.2",
 		"semantic-release": "^22.0.0",