@neovici/cosmoz-autocomplete 10.7.2 → 10.9.0

package/dist/autocomplete/autocomplete.d.ts

@@ -1,8 +1,10 @@
+import { Placement } from '@neovici/cosmoz-dropdown/use-floating';
 import '@neovici/cosmoz-input';
+import { ItemRenderer } from '../listbox/item-renderer';
+import { ChipRenderer } from './selection';
 import './skeleton-span';
 import style from './styles.css';
 import { Props as Base, RProps } from './use-autocomplete';
-import { Placement } from '@neovici/cosmoz-dropdown/use-floating';
 export interface Props<I> extends Base<I> {
     invalid?: boolean;
     errorMessage?: string;
@@ -17,6 +19,8 @@ export interface Props<I> extends Base<I> {
     defaultIndex?: number;
     externalSearch?: boolean;
     placement?: Placement;
+    itemRenderer?: ItemRenderer<I>;
+    chipRenderer?: ChipRenderer<I>;
 }
 type AProps<I> = Omit<Props<I>, keyof RProps<I>> & RProps<I> & {
     onInputRef?: (el?: Element) => void;

package/dist/autocomplete/autocomplete.js

@@ -1,19 +1,19 @@
+import { defaultMiddleware, size, useFloating, } from '@neovici/cosmoz-dropdown/use-floating';
 import '@neovici/cosmoz-input';
-import './skeleton-span';
 import { useHost } from '@neovici/cosmoz-utils/hooks/use-host';
 import { useImperativeApi } from '@neovici/cosmoz-utils/hooks/use-imperative-api';
+import { useEffect } from '@pionjs/pion';
 import { html } from 'lit-html';
 import { live } from 'lit-html/directives/live.js';
+import { ref } from 'lit-html/directives/ref.js';
 import { until } from 'lit-html/directives/until.js';
 import { when } from 'lit-html/directives/when.js';
 import { listbox } from '../listbox';
 import { selection } from './selection';
+import './skeleton-span';
 import style from './styles.css';
 import { useAutocomplete } from './use-autocomplete';
 import { useOverflow } from './use-overflow';
-import { ref } from 'lit-html/directives/ref.js';
-import { useFloating, defaultMiddleware, size, } from '@neovici/cosmoz-dropdown/use-floating';
-import { useEffect } from '@pionjs/pion';
 const inputParts = ['input', 'control', 'label', 'line', 'error', 'wrap']
     .map((part) => `${part}: input-${part}`)
     .join();
@@ -34,7 +34,7 @@ const shouldShowDropdown = ({ active, isSingle, showSingle, }) => {
     return !disallowedSingle;
 };
 const autocomplete = (props) => {
-    const { active, invalid, errorMessage, label, placeholder, disabled, noLabelFloat, alwaysFloatLabel, textual, text, onText, onFocus, onClick, onDeselect, value, limit, min, showSingle, items, source$, placement, loading, } = props, host = useHost(), isOne = limit == 1, // eslint-disable-line eqeqeq
+    const { active, invalid, errorMessage, label, placeholder, disabled, noLabelFloat, alwaysFloatLabel, textual, text, onText, onFocus, onClick, onDeselect, value, limit, min, showSingle, items, source$, placement, loading, chipRenderer, } = props, host = useHost(), isOne = limit == 1, // eslint-disable-line eqeqeq
     isSingle = isOne && value?.[0] != null;
     const { styles, setReference, setFloating } = useFloating({
         placement,
@@ -81,6 +81,7 @@ const autocomplete = (props) => {
         onDeselect,
         textual,
         disabled,
+        chipRenderer,
     })}
 			</cosmoz-input>
 

package/dist/autocomplete/chip.css.js

@@ -3,21 +3,25 @@ export default css `
 	:host {
 		border-radius: var(--cosmoz-autocomplete-chip-border-radius, 500px);
 		background: var(--cosmoz-autocomplete-chip-bg-color, #cbcfdb);
-		margin: 0px 0 2px 0;
+		margin-bottom: 2px;
 		display: flex;
-		flex-direction: row;
 		align-items: center;
 		flex: 0.0001 1 fit-content;
 		max-width: 18ch;
 		min-width: 40px;
-		padding: 0 4px 0 8px;
+		padding-inline: 8px;
 		gap: 4px;
 		cursor: pointer;
 		transform: translateY(var(--cosmoz-autocomplete-chip-translate-y, 0));
 	}
+
 	.content {
 		color: var(--cosmoz-autocomplete-chip-color, #424242);
-		font-family: var(--cosmoz-autocomplete-chip-text-font-family, 'Inter', sans-serif);
+		font-family: var(
+			--cosmoz-autocomplete-chip-text-font-family,
+			'Inter',
+			sans-serif
+		);
 		font-size: var(--cosmoz-autocomplete-chip-text-font-size, 12px);
 		font-weight: var(--cosmoz-autocomplete-chip-text-font-weight, 400);
 		line-height: var(--cosmoz-autocomplete-chip-text-line-height, 22px);
@@ -26,13 +30,16 @@ export default css `
 		white-space: nowrap;
 		flex: auto;
 		min-width: 16px;
+		text-align: center;
 	}
+
 	.clear {
 		background-color: var(--cosmoz-autocomplete-chip-clear-bg-color, #81899b);
 		border-radius: 50%;
 		cursor: pointer;
 		width: 16px;
 		height: 16px;
+		margin-right: -4px;
 		stroke: var(
 			--cosmoz-autocomplete-chip-clear-stroke,
 			var(--cosmoz-autocomplete-chip-bg-color, #cbcfdb)
@@ -40,6 +47,7 @@ export default css `
 		display: var(--cosmoz-autocomplete-chip-clear-display, block);
 		flex: none;
 	}
+
 	.clear:hover {
 		filter: brightness(90%);
 	}

package/dist/autocomplete/chip.d.ts

@@ -3,11 +3,12 @@ interface Props {
     disabled?: boolean;
 }
 export declare const Chip: ({ onClear, disabled }: Props) => import("lit-html").TemplateResult<1>;
-interface ChipProps extends Props {
+export interface ChipProps<I> extends Props {
+    item: I | null;
     slot?: string;
     className?: string;
     content: unknown;
     hidden?: boolean;
 }
-export declare const chip: ({ content, onClear, disabled, hidden, className, slot, }: ChipProps) => import("lit-html").TemplateResult<1>;
+export declare const chip: <I>({ content, onClear, disabled, hidden, className, slot, }: ChipProps<I>) => import("lit-html").TemplateResult<1>;
 export {};

package/dist/autocomplete/index.js

@@ -1,12 +1,20 @@
-import { component, useCallback } from '@pionjs/pion';
+import { component, useCallback, useEffect, useProperty } from '@pionjs/pion';
 import { Autocomplete, observedAttributes, style } from './autocomplete';
 import { sheet } from '@neovici/cosmoz-utils';
 const Standalone = (host) => {
     const { onChange, onText, ...props } = host;
+    const [value, setValue] = useProperty('value');
+    useEffect(() => {
+        if (host.onChange == null)
+            return;
+        // eslint-disable-next-line no-console
+        console.warn('onChange is deprecated; use value-changed and lift instead');
+    }, []);
     return Autocomplete({
         ...props,
+        value,
         onChange: useCallback((value, ...args) => {
-            host.value = value;
+            setValue(value);
             onChange?.(value, ...args);
         }, [onChange]),
         onText: useCallback((text) => {

package/dist/autocomplete/selection.d.ts

@@ -1,5 +1,7 @@
+import { chip as defaultChipRenderer } from './chip';
 import type { RProps } from './use-autocomplete';
 type Deselect<I> = RProps<I>['onDeselect'];
+export type ChipRenderer<I> = typeof defaultChipRenderer<I>;
 interface Props<I> {
     value: I[];
     min?: number;
@@ -7,6 +9,7 @@ interface Props<I> {
     onDeselect: Deselect<I>;
     textual: (i: I) => string;
     disabled?: boolean;
+    chipRenderer?: ChipRenderer<I>;
 }
-export declare const selection: <I>({ value: values, min, onDeselect, textual, disabled, }: Props<I>) => import("lit-html").TemplateResult<1>[];
+export declare const selection: <I>({ value: values, min, onDeselect, textual, disabled, chipRenderer, }: Props<I>) => import("lit-html").TemplateResult<1>[];
 export {};

package/dist/autocomplete/selection.js

@@ -1,13 +1,15 @@
 import { html } from 'lit-html';
-import { chip } from './chip';
-export const selection = ({ value: values, min = 0, onDeselect, textual, disabled, }) => [
-    ...values.filter(Boolean).map((value) => chip({
+import { chip as defaultChipRenderer } from './chip';
+export const selection = ({ value: values, min = 0, onDeselect, textual, disabled, chipRenderer = defaultChipRenderer, }) => [
+    ...values.filter(Boolean).map((value) => chipRenderer({
+        item: value,
         content: textual(value),
         onClear: values.length > min && (() => onDeselect(value)),
         disabled,
         slot: 'control',
     })),
-    chip({
+    chipRenderer({
+        item: null,
         content: html `<span></span>`,
         className: 'badge',
         disabled: true,

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

@@ -3,7 +3,7 @@ type Source<I> = (opts: {
     active?: boolean;
 }) => PromiseLike<I[]>;
 interface Base<I> {
-    value: I | I[];
+    value?: I | I[];
     limit?: number;
     min?: number;
     keepOpened?: boolean;

package/dist/excluding/index.d.ts

@@ -0,0 +1 @@
+import '../autocomplete';

package/dist/excluding/index.js

@@ -0,0 +1,61 @@
+import { component, html, useCallback, useMemo, useProperty, } from '@pionjs/pion';
+import { nothing } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import '../autocomplete';
+import { Autocomplete, observedAttributes, style, } from '../autocomplete/autocomplete';
+import { useExcludingSelection } from './use-excluding-selection';
+import { unwrap } from './utils';
+import excludingStyle from './style.css';
+const isItemExcluded = (value, item) => value?.some((v) => v.item === item && v.excluded);
+const excludedState = (value, item) => (item && isItemExcluded(value, item) ? 'excluded' : nothing);
+const mkItemRenderer = (value) => (item, i, { highlight, select, textual, isSelected }) => {
+    const rendered = textual(item);
+    return html `<div
+				class="item"
+				role="option"
+				part="option ${excludedState(value, item)}"
+				?aria-selected=${isSelected(item)}
+				data-index=${i}
+				@mouseenter=${() => highlight(i)}
+				@click=${() => select(item)}
+				@mousedown=${(e) => e.preventDefault()}
+			>
+				${rendered}
+			</div>
+			<div class="sizer" virtualizer-sizer>${rendered}</div>`;
+};
+const mkChipRenderer = (value, onClear) => ({ item, content, disabled, hidden, className = 'chip', slot, }) => html `<cosmoz-autocomplete-chip
+			class=${ifDefined(className)}
+			slot=${ifDefined(slot)}
+			part="chip"
+			exportparts="chip-text, chip-clear"
+			data-state=${excludedState(value, item)}
+			?disabled=${disabled}
+			?hidden=${hidden}
+			.onClear=${() => onClear(item)}
+			title=${ifDefined(typeof content === 'string' ? content : undefined)}
+		>
+			${content}
+		</cosmoz-autocomplete-chip>`;
+const AutocompleteExcluding = (props) => {
+    const { value, setValue, setExcludingValue } = useExcludingSelection('value');
+    const [text, setText] = useProperty('text');
+    const onClear = useCallback((item) => setValue((values) => values?.filter((i) => i.item !== item)), []);
+    return Autocomplete({
+        ...props,
+        value: useMemo(() => value?.map(unwrap), [value]),
+        onChange: useCallback((value) => {
+            setExcludingValue(value);
+        }, []),
+        text,
+        onText: useCallback((text) => {
+            setText(text);
+        }, []),
+        itemRenderer: useMemo(() => mkItemRenderer(value), [value]),
+        chipRenderer: useMemo(() => mkChipRenderer(value, onClear), [value, onClear]),
+    });
+};
+customElements.define('cosmoz-autocomplete-excluding', component(AutocompleteExcluding, {
+    observedAttributes,
+    styleSheets: [style, excludingStyle],
+}));

package/dist/excluding/style.css.d.ts

@@ -0,0 +1,2 @@
+declare const excludingStyle: string;
+export default excludingStyle;

package/dist/excluding/style.css.js

@@ -0,0 +1,43 @@
+import { css } from '@pionjs/pion';
+const clearSVG = 
+/* eslint-disable quotes */
+"data:image/svg+xml,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath " +
+    "d='M2.5 2.5L8.5 8.5M8.5 2.5L2.5 8.5' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E";
+/* eslint-enable quotes */
+const excludingStyle = css `
+	.chip[data-state='excluded'] {
+		background: var(--cosmoz-autocomplete-excluded-bg-color, rgb(244, 67, 54));
+	}
+
+	cosmoz-autocomplete-chip[data-state='excluded']::part(content) {
+		color: var(--cosmoz-autocomplete-excluded-chip-color, #fff);
+	}
+
+	cosmoz-autocomplete-chip[data-state='excluded']::part(clear) {
+		background-color: var(
+			--cosmoz-autocomplete-excluded-chip-clear-bg-color,
+			#fff
+		);
+		stroke: var(
+			--cosmoz-autocomplete-excluded-chip-clear-stroke,
+			var(--cosmoz-autocomplete-excluded-bg-color, rgb(244, 67, 54))
+		);
+	}
+
+	cosmoz-listbox::part(excluded)::before {
+		border-color: var(
+			--cosmoz-autocomplete-excluded-bg-color,
+			rgb(244, 67, 54)
+		);
+		/* prettier-ignore */
+		background: url("${clearSVG}") var(--cosmoz-autocomplete-excluded-bg-color, rgb(244, 67, 54)) no-repeat 50%;
+	}
+
+	cosmoz-listbox::part(excluded):hover {
+		background: var(
+			--cosmoz-listbox-excluded-active-color,
+			rgba(244, 67, 54, 0.1)
+		);
+	}
+`;
+export default excludingStyle;

package/dist/excluding/types.d.ts

@@ -0,0 +1,4 @@
+export interface WrappedItem<I> {
+    item: I;
+    excluded: boolean;
+}

package/dist/excluding/types.js

@@ -0,0 +1 @@
+export {};

package/dist/excluding/use-excluding-selection.d.ts

@@ -0,0 +1,8 @@
+import { StateUpdater } from '@pionjs/pion';
+import '../autocomplete';
+import { WrappedItem } from './types';
+export declare const useExcludingSelection: <I>(property: string) => {
+    readonly value: WrappedItem<I>[] | undefined;
+    readonly setExcludingValue: StateUpdater<I[] | undefined>;
+    readonly setValue: StateUpdater<WrappedItem<I>[] | undefined>;
+};

package/dist/excluding/use-excluding-selection.js

@@ -0,0 +1,26 @@
+import { invoke } from '@neovici/cosmoz-utils/function';
+import { useCallback, useProperty } from '@pionjs/pion';
+import '../autocomplete';
+import { unwrap, wrap } from './utils';
+export const useExcludingSelection = (property) => {
+    const [value, setValue] = useProperty(property);
+    const setExcludingValue = useCallback((next) => setValue((prev) => {
+        const _next = invoke(next, prev?.map(unwrap));
+        if (!_next)
+            return undefined;
+        if (!prev)
+            return _next.map(wrap);
+        const results = prev.reduce((nextState, item) => {
+            if (_next.includes(item.item))
+                return [...nextState, item];
+            else if (item.excluded)
+                return nextState;
+            return [...nextState, { ...item, excluded: true }];
+        }, []);
+        const newItems = _next
+            .filter((i) => !prev.some((p) => p.item === i))
+            .map(wrap);
+        return [...results, ...newItems];
+    }), []);
+    return { value, setExcludingValue, setValue };
+};

package/dist/excluding/utils.d.ts

@@ -0,0 +1,3 @@
+import { WrappedItem } from './types';
+export declare const wrap: <I>(item: I) => WrappedItem<I>;
+export declare const unwrap: <I>(item: WrappedItem<I>) => I;

package/dist/excluding/utils.js

@@ -0,0 +1,2 @@
+export const wrap = (item) => ({ item, excluded: false });
+export const unwrap = (item) => item.item;

package/dist/listbox/style.css.js

@@ -1,6 +1,6 @@
 import { css } from '@pionjs/pion';
 import { when } from 'lit-html/directives/when.js';
-const svg = 
+const checkSVG = 
 /* eslint-disable quotes */
 "data:image/svg+xml,%3Csvg width='11' height='8' viewBox='0 0 11 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath " +
     "d='M9.5 1L5.20039 7.04766L1.66348 3.46152' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E";
@@ -10,7 +10,10 @@ const style = css `
 		position: fixed;
 		z-index: 1000;
 		font-family: var(--paper-font-subhead_-_font-family, inherit);
-		background: var(--cosmoz-autocomplete-listbox-bg, rgba(255, 255, 255, 0.75));
+		background: var(
+			--cosmoz-autocomplete-listbox-bg,
+			rgba(255, 255, 255, 0.75)
+		);
 		min-width: 50px;
 		backdrop-filter: blur(16px) saturate(180%);
 		-webkit-backdrop-filter: blur(16px) saturate(180%);
@@ -81,6 +84,7 @@ const style = css `
 	:host([multi]) .item {
 		padding-left: 0;
 	}
+
 	:host([multi]) .item::before {
 		content: '';
 		font-size: 0;
@@ -91,14 +95,17 @@ const style = css `
 		border-radius: 4px;
 		vertical-align: top;
 	}
+
 	:host([multi]) .item[aria-selected]::before {
 		border-color: #5881f6;
 		/* prettier-ignore */
-		background: url("${svg}") #5881f6 no-repeat 50%;
+		background: url("${checkSVG}") #5881f6 no-repeat 50%;
 	}
+
 	:host([multi]) .sizer {
 		padding-left: 33px;
 	}
+
 	.swatch {
 		width: 18px;
 		height: 18px;
@@ -107,6 +114,7 @@ const style = css `
 		vertical-align: middle;
 		border-radius: 50%;
 	}
+
 	[virtualizer-sizer]:not(.sizer) {
 		line-height: 1;
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-autocomplete",
-	"version": "10.7.2",
+	"version": "10.9.0",
 	"description": "A autocomplete input web component",
 	"keywords": [
 		"lit-html",