@neovici/cosmoz-autocomplete 5.3.2 → 6.1.0

package/dist/listbox/use-keyboard.d.ts

@@ -0,0 +1,8 @@
+type Handler = () => void;
+export interface Handlers {
+    onUp: Handler;
+    onDown: Handler;
+    onEnter: Handler;
+}
+export declare const useKeyboard: (handlers: Handlers) => void;
+export {};

package/dist/listbox/use-keyboard.js

@@ -0,0 +1,32 @@
+import { useEffect } from 'haunted';
+import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
+export const useKeyboard = (handlers) => {
+    const listeners = useMeta(handlers);
+    useEffect(() => {
+        const handler = (e) => {
+            if ((e.ctrlKey && e.altKey) || e.defaultPrevented) {
+                return;
+            }
+            switch (e.key) {
+                case 'Up':
+                case 'ArrowUp':
+                    e.preventDefault();
+                    listeners.onUp();
+                    break;
+                case 'Down':
+                case 'ArrowDown':
+                    e.preventDefault();
+                    listeners.onDown();
+                    break;
+                case 'Enter':
+                    e.preventDefault();
+                    listeners.onEnter();
+                    break;
+                default:
+                    break;
+            }
+        };
+        document.addEventListener('keydown', handler, true);
+        return () => document.removeEventListener('keydown', handler, true);
+    }, [listeners]);
+};

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

@@ -0,0 +1,28 @@
+import { Placement } from '@neovici/cosmoz-dropdown/use-position';
+import { useRenderItem, ItemRenderer } from './use-render-item';
+export declare const properties: string[];
+export interface Props<I> {
+    value: I | I[];
+    valueProperty?: string;
+    items: I[];
+    onSelect: (i: I) => void;
+    defaultIndex?: number;
+    query: string;
+    textual: (i: I) => string;
+    itemRenderer?: ItemRenderer<I>;
+    itemHeight?: number;
+    itemLimit?: number;
+    anchor?: () => HTMLElement | null;
+    confinement?: HTMLElement;
+    placement?: Placement;
+}
+export declare const useListbox: <I>({ value, valueProperty, items: _items, onSelect, defaultIndex, query, textual, itemRenderer, itemHeight, itemLimit, ...thru }: Props<I>) => {
+    position: import("./use-items").Position;
+    items: I[];
+    height: number;
+    highlight: (index: number) => void;
+    select: (item: I) => void;
+    itemHeight: number;
+    renderItem: (item: I, i: number) => import("lit-html").TemplateResult;
+};
+export { useRenderItem };

package/dist/listbox/use-listbox.js

@@ -0,0 +1,54 @@
+import { useMemo } from 'haunted';
+import { useHost } from '@neovici/cosmoz-utils/hooks/use-host';
+import { usePosition } from '@neovici/cosmoz-dropdown/use-position';
+import { byValue } from './util';
+import { useItems } from './use-items';
+import { useRenderItem } from './use-render-item';
+export const properties = [
+    'query',
+    'items',
+    'onSelect',
+    'textual',
+    'anchor',
+    'confinement',
+    'placement',
+    'itemHeight',
+    'itemLimit',
+    'itemRenderer',
+    'defaultIndex',
+    'value',
+    'valueProperty',
+];
+export const useListbox = ({ value, valueProperty, items: _items, onSelect, defaultIndex, query, textual, itemRenderer, itemHeight = 40, itemLimit = 5, ...thru }) => {
+    const isSelected = useMemo(() => byValue(value, valueProperty), [value, valueProperty]), 
+    // TODO: investigate if we can drop this
+    items = useMemo(() => _items.slice(), [_items, isSelected]), { position, highlight, select } = useItems({
+        items,
+        onSelect,
+        defaultIndex: isNaN(defaultIndex)
+            ? undefined
+            : Number(defaultIndex),
+    });
+    usePosition({
+        host: useHost(),
+        ...thru,
+        limit: true,
+    });
+    return {
+        position,
+        items,
+        height: Math.min(itemLimit, items.length) * itemHeight,
+        highlight,
+        select,
+        itemHeight,
+        renderItem: useRenderItem({
+            itemRenderer,
+            highlight,
+            select,
+            textual,
+            query,
+            isSelected,
+        }),
+    };
+};
+export { useRenderItem };

package/dist/listbox/use-render-item.d.ts

@@ -0,0 +1,5 @@
+import { ItemRenderer, Opts } from './item-renderer';
+export declare const useRenderItem: <I>({ itemRenderer, ...meta }: Opts<I> & {
+    itemRenderer?: ItemRenderer<I> | undefined;
+}) => (item: I, i: number) => import("lit-html").TemplateResult;
+export type { ItemRenderer };

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

@@ -0,0 +1,7 @@
+import { useCallback } from 'haunted';
+import { useMeta } from '@neovici/cosmoz-utils/hooks/use-meta';
+import { itemRenderer as mkItemRenderer, } from './item-renderer';
+export const useRenderItem = ({ itemRenderer = mkItemRenderer(), ...meta }) => {
+    const info = useMeta(meta);
+    return useCallback((item, i) => itemRenderer(item, i, info), [info, itemRenderer]);
+};

package/dist/listbox/util.d.ts

@@ -0,0 +1,2 @@
+export declare const byValue: <K extends PropertyKey | undefined, T>(value: T | T[], valueProperty: K) => ((item: T) => boolean) | ((item: T) => T | undefined);
+export declare const mark: (text: string, query: string) => string | (string | import("lit-html").TemplateResult<1>)[];

package/dist/listbox/util.js

@@ -0,0 +1,24 @@
+import { html } from 'lit-html';
+import { array } from '@neovici/cosmoz-utils/array';
+export const byValue = (value, valueProperty) => {
+    if (!valueProperty) {
+        return (item) => array(value).includes(item);
+    }
+    return (item) => array(value).find((value) => value[valueProperty] ===
+        item[valueProperty]);
+};
+export const mark = (text, query) => {
+    if (!query || !text) {
+        return text;
+    }
+    const i = text.toLowerCase().indexOf(query.toLowerCase());
+    if (i < 0) {
+        return text;
+    }
+    const end = i + query.length;
+    return [
+        text.slice(0, i),
+        html `<mark>${text.slice(i, end)}</mark>`,
+        text.slice(end),
+    ];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-autocomplete",
-	"version": "5.3.2",
+	"version": "6.1.0",
 	"description": "A autocomplete input web component",
 	"keywords": [
 		"lit-html",
@@ -21,14 +21,14 @@
 		"test": "test"
 	},
 	"scripts": {
-		"lint": "eslint --cache --ext .js .",
-		"lint-tsc": "tsc",
+		"lint": "tsc && eslint --cache .",
+		"build": "tsc -p tsconfig.build.json",
 		"start": "wds",
 		"test": "wtr --coverage",
 		"test:watch": "wtr --watch",
+		"prepare": "husky install",
 		"storybook:build": "build-storybook",
-		"storybook:deploy": "storybook-to-ghpages",
-		"prepare": "husky install"
+		"storybook:deploy": "storybook-to-ghpages"
 	},
 	"release": {
 		"plugins": [
@@ -46,8 +46,7 @@
 		"access": "public"
 	},
 	"files": [
-		"*.js",
-		"lib/**/*.js"
+		"dist/"
 	],
 	"commitlint": {
 		"extends": [
@@ -61,14 +60,19 @@
 			]
 		}
 	},
+	"exports": {
+		".": "./dist/index.js",
+		"./autocomplete": "./dist/autocomplete/index.js",
+		"./listbox": "./dist/listbox/index.js",
+		"./item-renderer": "./dist/listbox/item-renderer.js"
+	},
 	"dependencies": {
-		"@lit-labs/virtualizer": "^1.0.0",
+		"@lit-labs/virtualizer": "^2.0.0",
 		"@neovici/cosmoz-dropdown": "^3.0.0",
 		"@neovici/cosmoz-input": "^3.0.0",
 		"@neovici/cosmoz-utils": "^5.0.0",
 		"haunted": "^5.0.0",
-		"lit-html": "^2.0.0",
-		"position.js": "^0.3.0"
+		"lit-html": "^2.0.0"
 	},
 	"devDependencies": {
 		"@commitlint/cli": "^17.0.0",
@@ -81,8 +85,8 @@
 		"@web/dev-server-storybook": "^0.6.0",
 		"eslint-import-resolver-exports": "^1.0.0-beta.5",
 		"husky": "^8.0.0",
-		"semantic-release": "^20.0.0",
+		"semantic-release": "^21.0.0",
 		"sinon": "^15.0.0",
-		"typescript": "^4.6.0"
+		"typescript": "^5.0.0"
 	}
 }

package/cosmoz-autocomplete.js

@@ -1,21 +0,0 @@
-import { component, useCallback } from 'haunted';
-import { Autocomplete, observedAttributes } from './lib/autocomplete';
-
-const Standalone = host => {
-	const { onChange, onText, ...props } = host;
-
-	return Autocomplete.call(host, {
-		...props,
-		onChange: useCallback((value, ...args) => {
-			host.value = value;
-			onChange?.(value, ...args);
-		}, [onChange]),
-		onText: useCallback(text => {
-			host.text = text;
-			onText?.(text);
-		}, [onText])
-	});
-};
-
-customElements.define('cosmoz-autocomplete-ui', component(Autocomplete, { observedAttributes }));
-customElements.define('cosmoz-autocomplete', component(Standalone, { observedAttributes }));

package/cosmoz-listbox.js

@@ -1,145 +0,0 @@
-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 { tagged as css } from '@neovici/cosmoz-utils';
-import { portal } from '@neovici/cosmoz-utils/directives/portal';
-import { spreadProps } from '@neovici/cosmoz-utils/directives/spread-props';
-import { props } from '@neovici/cosmoz-utils/object';
-import { useListbox, properties } from './lib/use-listbox';
-
-const svg =
-		/* 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",
-	/* eslint-enable quotes */
-	styles = ({ index, height, itemHeight }) => css`
-		:host {
-			position: fixed;
-			min-height: ${itemHeight}px;
-			z-index: 1000;
-			height: ${height}px;
-			font-family: var(--paper-font-subhead_-_font-family, initial);
-			background: #fff;
-			min-width: 72px;
-			box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
-				0 1px 8px 0 rgba(0, 0, 0, 0.12), 0 3px 3px -2px rgba(0, 0, 0, 0.4);
-		}
-		.items {
-			position: relative;
-			overflow-y: auto;
-			contain: layout paint !important;
-			height: 100%;
-		}
-		.item {
-			font-size: 14px;
-			line-height: ${itemHeight}px;
-			height: ${itemHeight}px;
-			padding: 0 20px;
-			box-sizing: border-box;
-			width: 100%;
-			cursor: pointer;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			transition: background 0.2s;
-			color: var(--cosmoz-listbox-color, #101010);
-		}
-
-		.item[data-index='${index || '0'}'] {
-			background: var(
-				--cosmoz-listbox-active-color,
-				var(--cosmoz-selection-color, rgba(58, 145, 226, 0.1))
-			);
-		}
-		.sizer {
-			position: relative;
-			visibility: hidden;
-			opacity: 0;
-			pointer-events: none;
-			z-index: -1;
-			height: 0;
-			width: auto;
-			padding: 0 20px;
-			overflow: hidden;
-			max-width: inherit;
-			font-size: 14px;
-		}
-
-		:host(:not([multi])) .item[aria-selected] {
-			background: var(--cosmoz-listbox-single-selection-color, #dadada);
-		}
-
-		:host([multi]) .item {
-			padding-left: 0;
-		}
-		:host([multi]) .item::before {
-			content: '';
-			font-size: 0;
-			padding: 7.5px;
-			margin: 0 8px;
-			background: #fff;
-			border: 1px solid #d6d6d5;
-			border-radius: 4px;
-			vertical-align: top;
-		}
-		:host([multi]) .item[aria-selected]::before {
-			border-color: #5881f6;
-			/* prettier-ignore */
-			background: url("${svg}") #5881f6 no-repeat 50%;
-		}
-		:host([multi]) .sizer {
-			padding-left: 33px;
-		}
-		.swatch {
-			width: 18px;
-			height: 18px;
-			display: inline-block;
-			box-sizing: border-box;
-			vertical-align: middle;
-			border-radius: 50%;
-			border: 2px solid #eee;
-		}
-	`,
-	Listbox = (host) => {
-		const listRef = useRef(undefined);
-		const { position, items, renderItem, height, itemHeight } =
-			useListbox(host);
-
-		useEffect(() => {
-			if (!position.scroll) return;
-			const vl = listRef.current[virtualizerRef];
-			if (!vl._layout) return;
-			vl.element(position.index)?.scrollIntoView({ block: 'nearest' });
-		}, [position]);
-
-		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({
-					items,
-					renderItem,
-					scroller: true,
-					layout,
-				})}
-			</div>`;
-	};
-
-customElements.define('cosmoz-listbox', component(Listbox));
-
-export const listbox = ({ multi, ...thru }) =>
-	portal(
-		html`<cosmoz-listbox
-			part="listbox"
-			?multi=${multi}
-			...=${spreadProps(props(properties)(thru))}
-		></cosmoz-listbox>`
-	);

package/lib/autocomplete.js

@@ -1,190 +0,0 @@
-import { html, nothing } from 'lit-html'; // eslint-disable-line object-curly-newline
-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 { useHost } from '@neovici/cosmoz-utils/hooks/use-host';
-import { array } from '@neovici/cosmoz-utils/array';
-import '@neovici/cosmoz-input';
-import { useAutocomplete } from './use-autocomplete';
-import { listbox } from '../cosmoz-listbox';
-import style from './autocomplete.css';
-
-const blank = () => nothing,
-	clear = html`
-		<svg
-			width="9"
-			height="8"
-			viewBox="0 0 9 8"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<line
-				x1="7.53033"
-				y1="0.994808"
-				x2="1.16637"
-				y2="7.35877"
-				stroke-width="1.5"
-			/>
-			<line
-				x1="7.46967"
-				y1="7.35882"
-				x2="1.10571"
-				y2="0.99486"
-				stroke-width="1.5"
-			/>
-		</svg>
-	`,
-	renderChip = (text, onClear, disabled, isOne) => html`
-		<div
-			class="chip"
-			part="chip"
-			slot="suffix"
-			title=${text}
-			?data-one=${isOne}
-		>
-			<span class="chip-text" part="chip-text">${text}</span>
-			${when(
-				!disabled,
-				() =>
-					html` <span class="chip-clear" part="chip-clear" @click=${onClear}>
-						${clear}
-					</span>`
-			)}
-		</div>
-	`,
-	renderBadge = ({ value, onDeselect }) => {
-		const len = value?.length;
-		return when(
-			len > 0,
-			() => html`<div class="badge" slot="suffix" part="badge">
-				${len}
-				<span
-					class="badge-clear"
-					part="chip-clear"
-					@click=${() => onDeselect(value)}
-					>${clear}</span
-				>
-			</div>`
-		);
-	},
-	renderSelection = (value, isOne, onDeselect, textual, disabled) => {
-		if (isOne || value.length === 1) {
-			const val = value[0];
-			return when(val, () =>
-				renderChip(textual(val), () => onDeselect(val), disabled, isOne)
-			);
-		}
-		return renderBadge({ value, onDeselect });
-	},
-	inputParts = ['input', 'label', 'line', 'error']
-		.map((part) => `${part}: input-${part}`)
-		.join(),
-	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
-			isSingle = isOne && array(value)?.[0] != null,
-			anchor = useCallback(
-				() => host.shadowRoot.querySelector('#input'),
-				[host, value]
-			),
-			suggestions = until(
-				items$.then((items) =>
-					when((!isSingle || showSingle) && items.length, () =>
-						listbox({
-							...props,
-							anchor,
-							items,
-							multi: !isOne,
-						})
-					)
-				)
-			);
-
-		return html` <style>
-				${style}
-			</style>
-			<cosmoz-input
-				id="input"
-				part="input"
-				.label=${label}
-				.placeholder=${isSingle ? undefined : placeholder}
-				?no-label-float=${noLabelFloat}
-				?always-float-label=${isSingle || alwaysFloatLabel}
-				?readonly=${isSingle}
-				?disabled=${disabled}
-				?invalid=${until(
-					values$.then(
-						() => invalid,
-						() => true
-					),
-					invalid
-				)}
-				.errorMessage=${until(
-					values$.then(
-						() => errorMessage,
-						(e) => e.message
-					),
-					errorMessage
-				)}
-				.value=${live(text)}
-				@value-changed=${onText}
-				@focusin=${onFocus}
-				@focusout=${onFocus}
-				@click=${onClick}
-				autocomplete="off"
-				exportparts=${inputParts}
-			>
-				<slot name="prefix" slot="prefix"></slot>
-				<slot name="suffix" slot="suffix"></slot>
-				${renderSelection(array(value), isOne, onDeselect, textual, disabled)}
-				${until(
-					values$.then(blank, blank),
-					html`<div slot="suffix" class="spinner"></div>`
-				)}
-			</cosmoz-input>
-
-			${suggestions}`;
-	},
-	Autocomplete = (props) =>
-		autocomplete({
-			...props,
-			...useAutocomplete(props),
-		}),
-	observedAttributes = [
-		'disabled',
-		'invalid',
-		'no-label-float',
-		'always-float-label',
-		'text-property',
-		'limit',
-		'show-single',
-		'keep-query',
-		'keep-opened',
-		'hide-empty',
-		'default-index',
-		'item-height',
-		'item-limit',
-	];
-
-export { autocomplete, Autocomplete, observedAttributes };

package/lib/item-renderer.js

@@ -1,26 +0,0 @@
-import { html } from 'haunted';
-import { mark, identity } from './utils';
-export const itemRenderer =
-	(render = identity) =>
-	(item, i, { highlight, select, textual = identity, query, isSelected }) => {
-		const text = textual(item),
-			content = mark(text, query),
-			rendered = render(content, item, i);
-
-		return html` <div
-				class="item"
-				role="option"
-				part="option"
-				?aria-selected=${isSelected(item)}
-				data-index=${i}
-				@mouseenter=${() => highlight(i)}
-				@click=${() => select(item)}
-				@mousedown=${(e) => e.preventDefault()}
-				title=${text}
-			>
-				${rendered}
-			</div>
-			<div class="sizer" virtualizer-sizer>${rendered}</div>`;
-	};
-
-export default itemRenderer();

package/lib/on-scrolled.js

@@ -1,37 +0,0 @@
-/**
- * Returns all ancestor ShadowRoot elements
- * @param {HTMLElement} el The element
- * @param {HTMLElement} limit The limit to stop searching
- * @returns {ShadowRoot[]} Array of ancestor roots
- */
-const ancestorRoots = (el, limit = document.body) => {
-		const roots = [];
-		let ancestor = el;
-		while (ancestor && ancestor !== limit) {
-			if (ancestor.assignedSlot) {
-				ancestor = ancestor.assignedSlot;
-				continue;
-			}
-			if (ancestor instanceof ShadowRoot) {
-				roots.push(ancestor);
-				ancestor = ancestor.host;
-				continue;
-			}
-			ancestor = ancestor.parentNode;
-		}
-		return roots;
-	},
-	/**
-	 * Listen to a scroll event in a ancestor root
-	 * @param {HTMLElement} el The element
-	 * @param {function} handler The event handler
-	 * @returns {function} Function to cleanup the event listeners
-	 */
-	onScrolled = (el, handler) => {
-		const roots = ancestorRoots(el);
-		roots.forEach(r => r.addEventListener('scroll', handler, true));
-		return () => {
-			roots.forEach(r => r.removeEventListener('scroll', handler, true));
-		};
-	};
-export { onScrolled };