@neovici/cosmoz-autocomplete 9.0.2 → 10.0.1

package/README.md

@@ -1,5 +1,4 @@
-cosmoz-autocomplete
-==================
+# cosmoz-autocomplete
 
 [![Build Status](https://github.com/Neovici/cosmoz-autocomplete/workflows/Github%20CI/badge.svg)](https://github.com/Neovici/cosmoz-autocomplete/actions?workflow=Github+CI)
 [![Depfu](https://badges.depfu.com/badges/c887733c2e1b6c70285860279a80fa03/overview.svg)](https://depfu.com/github/Neovici/cosmoz-autocomplete?project_id=9639)
@@ -16,13 +15,14 @@ cosmoz-autocomplete
 ### Installing
 
 Using npm:
+
 ```bash
 npm install --save @neovici/cosmoz-autocomplete
 ```
 
 ### Usage
 
-``` javascript
+```javascript
 import { html } from 'lit-html';
-html`<cosmoz-autocomplete .source=${["A", "B","C", "D"]} />`;
+html`<cosmoz-autocomplete .source=${['A', 'B', 'C', 'D']} />`;
 ```

package/dist/autocomplete/autocomplete.d.ts

@@ -2,6 +2,7 @@ import '@neovici/cosmoz-input';
 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;
@@ -14,6 +15,7 @@ export interface Props<I> extends Base<I> {
     itemLimit?: number;
     wrap?: boolean;
     defaultIndex?: number;
+    placement?: Placement;
 }
 type AProps<I> = Omit<Props<I>, keyof RProps<I>> & RProps<I> & {
     onInputRef?: (el?: Element) => void;

package/dist/autocomplete/autocomplete.js

@@ -2,7 +2,6 @@ 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 { useCallback } from '@pionjs/pion';
 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';
@@ -12,21 +11,36 @@ import { selection } from './selection';
 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';
 const inputParts = ['input', 'control', 'label', 'line', 'error', 'wrap']
     .map((part) => `${part}: input-${part}`)
     .join();
 const blank = () => nothing;
+const middleware = [
+    size({
+        apply({ rects, elements }) {
+            Object.assign(elements.floating.style, {
+                minWidth: `${Math.max(rects.reference.width, rects.floating.width)}px`,
+            });
+        },
+    }),
+    ...defaultMiddleware,
+];
 const autocomplete = (props) => {
-    const { active, invalid, errorMessage, label, placeholder, disabled, noLabelFloat, alwaysFloatLabel, textual, text, onText, onFocus, onClick, onDeselect, value, limit, min, showSingle, items, source$, } = 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]);
+    const { active, invalid, errorMessage, label, placeholder, disabled, noLabelFloat, alwaysFloatLabel, textual, text, onText, onFocus, onClick, onDeselect, value, limit, min, showSingle, items, source$, placement, } = props, host = useHost(), isOne = limit == 1, // eslint-disable-line eqeqeq
+    isSingle = isOne && value?.[0] != null;
+    const { styles, setReference, setFloating } = useFloating({
+        placement,
+        middleware,
+    });
     useImperativeApi({
         focus: () => host.shadowRoot?.querySelector('#input')?.focus(),
     }, []);
     return html `<cosmoz-input
 				id="input"
 				part="input"
+				${ref(setReference)}
 				.label=${label}
 				.placeholder=${isSingle ? undefined : placeholder}
 				?no-label-float=${noLabelFloat}
@@ -59,9 +73,10 @@ const autocomplete = (props) => {
 
 			${when(active && !(isSingle && !showSingle), () => listbox({
         ...props,
-        anchor,
         items,
         multi: !isOne,
+        setFloating,
+        styles,
     }, when(items.length < 5, () => until(source$.then(blank, blank), html `<cosmoz-autocomplete-skeleton-span></cosmoz-autocomplete-skeleton-span>`))))}`;
 }, Autocomplete = (props) => {
     const thru = {

package/dist/autocomplete/util.js

@@ -1,11 +1,23 @@
 import { useCallback } from '@pionjs/pion';
+/**
+ * @see https://stackoverflow.com/questions/990904/remove-accents-diacritics-in-a-string-in-javascript
+ * @see https://medium.com/nerd-for-tech/basics-of-javascript-string-normalize-method-f3241174c2d0
+ * @see https://www.codu.co/articles/remove-accents-from-a-javascript-string-skgp1inb
+ *
+ * @param {string} str string from which to remove accents
+ * @returns {string} string w/o accents
+ */
+const removeAccents = (str) => {
+    return str.normalize('NFD').replace(/[\u0300-\u036f]/gu, '');
+};
 export const search = (source, query, textual) => {
     if (!query)
         return source;
-    const qry = query.toLowerCase();
+    const normalizedQuery = removeAccents(query.toLowerCase());
     const matches = [];
     for (const item of source) {
-        const index = textual(item).toLowerCase().indexOf(qry);
+        const normalizedText = removeAccents(textual(item).toLowerCase());
+        const index = normalizedText.indexOf(normalizedQuery);
         if (index < 0) {
             continue;
         }

package/dist/listbox/index.d.ts

@@ -1,4 +1,9 @@
 import { Props } from './use-listbox';
-export declare const listbox: <I>({ multi, ...thru }: Props<I> & {
+import { StyleInfo } from 'lit-html/directives/style-map.js';
+interface ListboxProps<I> extends Props<I> {
     multi?: boolean;
-}, content: unknown) => import("lit-html").TemplateResult<1>;
+    setFloating: (el?: Element) => void;
+    styles: StyleInfo;
+}
+export declare const listbox: <I>({ multi, setFloating, styles, ...thru }: ListboxProps<I>, content: unknown) => import("lit-html").TemplateResult<1>;
+export {};

package/dist/listbox/index.js

@@ -7,6 +7,8 @@ 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';
+import { connectable } from '@neovici/cosmoz-dropdown/connectable';
+import { styleMap } from 'lit-html/directives/style-map.js';
 const Listbox = (props) => {
     const listRef = useRef(undefined);
     const { position, items, renderItem, height, itemHeight } = useListbox(props);
@@ -24,8 +26,8 @@ const Listbox = (props) => {
     }), [itemHeight]);
     return html `<div
 			class="items"
-			${ref((el) => (listRef.current = el))}
 			style="min-height: ${height}px"
+			${ref((el) => (listRef.current = el))}
 		>
 			<div virtualizer-sizer></div>
 			${virtualize({
@@ -37,24 +39,14 @@ const Listbox = (props) => {
 		</div>
 		<slot></slot>`;
 };
-const supportsPopover = () => {
-    // eslint-disable-next-line no-prototype-builtins
-    return HTMLElement.prototype.hasOwnProperty('popover');
-};
-const showPopover = (popover) => {
-    const popoverElement = popover;
-    if (supportsPopover()) {
-        requestAnimationFrame(() => {
-            popoverElement?.showPopover();
-        });
-    }
-};
-customElements.define('cosmoz-listbox', component(Listbox, { styleSheets: [sheet(style)] }));
-export const listbox = ({ multi, ...thru }, content) => html `<cosmoz-listbox
-		${ref(showPopover)}
+customElements.define('cosmoz-listbox', connectable(component(Listbox, { styleSheets: [sheet(style)] })));
+export const listbox = ({ multi, setFloating, styles, ...thru }, content) => html `<cosmoz-listbox
+		style="${styleMap(styles)}"
+		@connected="${(e) => e.target.showPopover?.()}"
 		popover="manual"
 		part="listbox"
 		?multi=${multi}
+		${ref(setFloating)}
 		...=${spreadProps(props(properties)(thru))}
 		>${content}</cosmoz-listbox
 	>`;

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

@@ -1,4 +1,3 @@
-import { Placement } from '@neovici/cosmoz-dropdown/use-position';
 import { useRenderItem, ItemRenderer } from './use-render-item';
 export declare const properties: string[];
 export interface Props<I> {
@@ -12,11 +11,8 @@ export interface Props<I> {
     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>) => {
+export declare const useListbox: <I>({ value, valueProperty, items: _items, onSelect, defaultIndex, query, textual, itemRenderer, itemHeight, itemLimit, }: Props<I>) => {
     position: import("./use-items").Position;
     items: I[];
     height: number;

package/dist/listbox/use-listbox.js

@@ -1,6 +1,4 @@
 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';
 import { useItems } from './use-items';
 import { useRenderItem } from './use-render-item';
@@ -10,8 +8,6 @@ export const properties = [
     'onSelect',
     'textual',
     'anchor',
-    'confinement',
-    'placement',
     'itemHeight',
     'itemLimit',
     'itemRenderer',
@@ -20,7 +16,7 @@ export const properties = [
     'valueProperty',
     'loading',
 ];
-export const useListbox = ({ value, valueProperty, items: _items, onSelect, defaultIndex, query, textual, itemRenderer, itemHeight = 40, itemLimit = 5, ...thru }) => {
+export const useListbox = ({ value, valueProperty, items: _items, onSelect, defaultIndex, query, textual, itemRenderer, itemHeight = 40, itemLimit = 5, }) => {
     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({
@@ -30,11 +26,6 @@ export const useListbox = ({ value, valueProperty, items: _items, onSelect, defa
             ? undefined
             : Number(defaultIndex),
     });
-    usePosition({
-        host: useHost(),
-        ...thru,
-        limit: true,
-    });
     return {
         position,
         items,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-autocomplete",
-	"version": "9.0.2",
+	"version": "10.0.1",
 	"description": "A autocomplete input web component",
 	"keywords": [
 		"lit-html",
@@ -28,6 +28,8 @@
 		"test:watch": "wtr --watch",
 		"e2e": "playwright test",
 		"prepare": "husky",
+		"prettier": "prettier --write \"**/*.{js,ts,json,css,md}\"",
+		"prettier:check": "prettier --check \"**/*.{js,ts,json,css,md}\"",
 		"storybook:start": "storybook dev -p 8000",
 		"storybook:build": "storybook build",
 		"storybook:deploy": "storybook-to-ghpages",
@@ -71,7 +73,7 @@
 	},
 	"dependencies": {
 		"@lit-labs/virtualizer": "^2.0.0",
-		"@neovici/cosmoz-dropdown": "^4.4.0",
+		"@neovici/cosmoz-dropdown": "^5.0.0",
 		"@neovici/cosmoz-input": "^5.0.2",
 		"@neovici/cosmoz-utils": "^6.0.0",
 		"@pionjs/pion": "^2.7.1",
@@ -91,16 +93,16 @@
 		"@storybook/storybook-deployer": "^2.8.5",
 		"@storybook/web-components": "7.6.17",
 		"@types/mocha": "^10.0.6",
-		"@types/node": "^20.12.7",
+		"@types/node": "^22.10.2",
 		"@web/storybook-builder": "^0.1.9",
 		"@web/storybook-framework-web-components": "^0.1.1",
-		"esbuild": "^0.21.0",
+		"esbuild": "^0.24.0",
 		"http-server": "^14.1.1",
 		"husky": "^9.0.0",
 		"rollup-plugin-esbuild": "^6.1.1",
 		"rollup-plugin-terser": "^7.0.2",
 		"semantic-release": "^24.0.0",
-		"sinon": "^18.0.0",
+		"sinon": "^19.0.0",
 		"storybook": "^7.6.17"
 	},
 	"overrides": {