html-combobox-element 0.0.1 → 0.0.2-beta.10

package/dist/esm/combobox/HTML.combobox.element.js

@@ -3,7 +3,7 @@ import { HTMLComboboxOptionElement } from './HTML.combobox.option.element.js';
 import { toBoolean } from './Boolean.attribute.value.normalizer.js';
 export class HTMLComboboxElement extends HTMLElement {
     static OWN_IDL = new Set(['required', 'disabled', 'clearable', 'multiple', 'filterable', 'searchable', 'value', 'placeholder', 'query']);
-    static observerOptions = { childList: true, attributes: false, subtree: false };
+    static observerOptions = { childList: true };
     static styleSheet = [new CSSStyleSheet];
     static formAssociated = true;
     shadowRoot;
@@ -11,41 +11,82 @@ export class HTMLComboboxElement extends HTMLElement {
     #observer;
     #markup;
     #values = new Set;
+    #prevValue = '';
+    #changed = false;
     constructor() {
         super();
         this.#internals = this.attachInternals();
         this.#internals.role = "combobox";
         this.#internals.ariaHasPopup = "dialog";
-        this.shadowRoot = this.attachShadow({ mode: 'closed', delegatesFocus: true });
+        this.shadowRoot = this.attachShadow({ mode: 'open', delegatesFocus: true }); //delegatesFocus: true
         this.#markup = new ComboboxMarkup(this.shadowRoot, this.#internals);
-        this.shadowRoot.innerHTML = ComboboxMarkup.template;
+        // console.log(ComboboxMarkup.markup)
+        this.shadowRoot.appendChild(ComboboxMarkup.markup.content.cloneNode(true));
+        // this.shadowRoot.innerHTML = ComboboxMarkup.template;
         this.shadowRoot.adoptedStyleSheets = HTMLComboboxElement.styleSheet;
         this.#observer = new MutationObserver(this.#onOptionsChanges);
+        this.#markup.connect();
     }
+    // static c = false
     // Lifecycle callbacks
     connectedCallback() {
-        this.#markup.connect();
+        // super.setAttribute('tabindex', '0');
+        this.#markup.onHostConnected();
+        this.shadowRoot.addEventListener('optionselectedstatechange', this.#onOptionSelectedStateChanges);
+        this.shadowRoot.addEventListener('tagcleared', this.#onClearTag);
+        // this.#onOptionsChanges([{ addedNodes: Array.from(this.children) }] as unknown as MutationRecord[]);
         this.#initialAttributesSynchronization();
-        this.#onOptionsChanges([{ addedNodes: Array.from(this.children) }]);
-        this.#observer.observe(this, HTMLComboboxElement.observerOptions);
-        this.#markup.clearAllButton.addEventListener('click', this.#onClear);
+        this.#observer.observe(this.#markup.optionsContainer, HTMLComboboxElement.observerOptions);
+        this.addEventListener('keydown', this.#onKeyDown);
+        this.#markup.clearAllButton.addEventListener('click', this.#onClearAll);
         this.#markup.searchInput.addEventListener('input', this.#onInput);
+        this.#markup.dropdown.addEventListener('toggle', this.#onPickerToggle);
+        this.#setValidityAndFormValue();
+        // if (!HTMLComboboxElement.c) {
+        //   HTMLComboboxElement.c = true;
+        //   this.showPicker()
+        // }
+    }
+    insertBefore = (node, referenceNode) => {
+        // Since we just move options to the #markup.optionsContainer, they are no more part of this children
+        // next time, when someone is calling this(combo-box).insertBefore, an error will be thrown:
+        // Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
+        // Here we overwrite this method, and if new node is HTMLComboboxOptionElement,
+        // we just delegate this job to the real option parent: optionsContainer
+        if (node instanceof HTMLComboboxOptionElement || node instanceof HTMLOptGroupElement) {
+            this.#markup.optionsContainer?.insertBefore(node, referenceNode);
+        }
+        else {
+            super.insertBefore(node, referenceNode);
+        }
+        return node;
+    };
+    removeChild(child) {
+        // console.log(child, 'removed')
+        return child;
+    }
+    get changed() {
+        return this.#changed;
     }
     disconnectedCallback() {
         this.#observer.disconnect();
         this.#markup.disconnect();
-        this.#markup.clearAllButton.removeEventListener('click', this.#onClear);
+        this.removeEventListener('keydown', this.#onKeyDown);
+        this.#markup.clearAllButton.removeEventListener('click', this.#onClearAll);
         this.#markup.searchInput.removeEventListener('input', this.#onInput);
+        this.#markup.dropdown.removeEventListener('toggle', this.#onPickerToggle);
+        this.shadowRoot.removeEventListener('optionselectedstatechange', this.#onOptionSelectedStateChanges);
+        this.shadowRoot.removeEventListener('tagcleared', this.#onClearTag);
     }
     formResetCallback() {
-        this.#values = new Set;
         this.selectedOptions.forEach(option => option.selected = false);
-        this.#markup.tagsContainer.replaceChildren();
-        this.#setValidityAndFormValue();
-        this.dispatchEvent(new Event('change'));
+        this.dispatchEvent(new Event('reset'));
+        requestAnimationFrame(() => this.#markup.searchInput?.focus());
     }
-    formDisabledCallback(isDisabled) {
-        this.disabled = isDisabled;
+    formDisabledCallback() {
+        // toDo
+        // when inside fieldset, this callback is only invoked for the first time
+        // isDisabled: boolean
     }
     // Instance properties
     // <combo-box> specific properties
@@ -62,22 +103,17 @@ export class HTMLComboboxElement extends HTMLElement {
             value = '';
         value = String(value);
         super.setAttribute('query', value);
-        if (this.#markup.connected) {
-            this.#markup.searchInput.value = value;
-        }
+        this.#markup?.setInputValue(value);
     }
     get placeholder() {
         return this.getAttribute('placeholder');
     }
     set placeholder(value) {
         if (value == null)
-            value = '';
+            value = ' ';
         value = String(value);
         super.setAttribute('placeholder', value);
-        if (this.#markup.connected) {
-            this.#markup.placeholder.innerText = value;
-            this.#markup.searchInput.placeholder = value;
-        }
+        this.#markup?.setPlaceholder(value);
     }
     get clearable() {
         return this.hasAttribute('clearable');
@@ -103,7 +139,9 @@ export class HTMLComboboxElement extends HTMLElement {
     }
     set disabled(value) {
         this.#internals.ariaDisabled = String(value);
-        super.toggleAttribute('disabled', toBoolean(value));
+        value = toBoolean(value);
+        super.toggleAttribute('disabled', value);
+        super.toggleAttribute('inert', value);
     }
     get form() {
         return this.#internals.form;
@@ -154,34 +192,11 @@ export class HTMLComboboxElement extends HTMLElement {
     set value(value) {
         if (this.value === value || typeof value !== 'string')
             return;
-        const prevValue = new Set(this.#values);
-        this.#values = new Set;
         const values = value.split(',').filter(Boolean);
-        Promise.resolve(values)
-            .then(values => {
-            if (values.length) {
-                if (!this.multiple) {
-                    if (this.#values.size === 0) {
-                        values.length = 1;
-                    }
-                    else {
-                        values.length = 0;
-                    }
-                }
-                for (const key of values) {
-                    const option = this.#markup.getOptionByValue(key);
-                    if (option)
-                        this.#selectOption(option);
-                }
-            }
-            for (const key of prevValue) {
-                if (this.#values.has(key))
-                    continue;
-                const option = this.#markup.getOptionByValue(key);
-                const tag = this.#markup.getTagByValue(key);
-                tag?.remove();
-                option?.toggleAttribute('selected', false);
-            }
+        this.#values = new Set(values);
+        this.#markup.options.forEach(option => {
+            const value = option.value;
+            option.selected = this.#values.has(value);
         });
     }
     // Instance methods
@@ -228,91 +243,152 @@ export class HTMLComboboxElement extends HTMLElement {
         }
     }
     // Internal
-    #onInput = (event) => {
-        if (!this.searchable && this.filterable) {
-            if (event.target && event.target instanceof HTMLInputElement) {
-                this.#markup.sort(event.target.value);
-            }
-        }
-    };
     #onOptionsChanges = (records) => {
+        // console.log(records)
         records.forEach(record => {
-            record.addedNodes.forEach(node => {
-                if (node instanceof HTMLComboboxOptionElement) {
-                    node.addEventListener('click', this.#onSelectOption);
-                    if (node.selected) {
-                        if (this.multiple) {
-                            this.#selectOption(node);
-                        }
-                        else if (this.#values.size === 0) {
-                            this.#selectOption(node);
-                        }
+            record.removedNodes.forEach(option => {
+                if (option instanceof HTMLComboboxOptionElement) {
+                    // console.log(e)
+                    const value = option.value;
+                    if (this.#values.has(value)) {
+                        this.#values.delete(value);
+                        const control = this.#markup.getTagByValue(value);
+                        control?.remove();
                     }
                 }
-                if (node instanceof HTMLComboboxOptionElement || node instanceof HTMLOptGroupElement) {
-                    this.#markup.optionsContainer.append(node);
-                }
             });
+            // record.removedNodes.forEach(node => {
+            //   console.log(node);
+            // })
         });
-        this.#markup.invalidateOptionsCache();
-        this.#setValidityAndFormValue();
     };
-    #selectOption(option) {
-        if (this.#values.has(option.value))
-            return;
+    #onOptionSelectedStateChanges = (event) => {
+        const option = event.target;
         const value = option.value;
-        this.#values.add(value);
-        option.toggleAttribute('selected', true);
-        const control = this.#markup.createAndAppendTag(option);
-        control?.addEventListener('click', this.#onClearTag);
-        if (!this.multiple) {
-            this.#markup.closeDropdown();
-        }
-    }
-    #onSelectOption = (event) => {
-        const target = event.target;
-        if (target && target instanceof HTMLElement) {
-            const option = target.closest('box-option');
-            if (option) {
-                if (this.#values.has(option.value))
-                    return;
-                if (!this.multiple) {
-                    event.stopPropagation();
-                    this.#values.forEach(value => {
-                        this.#markup.getTagByValue(value)?.remove();
-                        this.#markup.getOptionByValue(value)?.toggleAttribute('selected', false);
-                    });
-                    this.#values.clear();
-                    this.#markup.tagsContainer.replaceChildren();
-                }
-                this.#selectOption(option);
+        // console.log(event, value, option)
+        if (option.selected) {
+            if (!this.multiple) {
+                this.#values.forEach(value => {
+                    const prevOption = this.#markup.getOptionByValue(value);
+                    if (prevOption) {
+                        prevOption.selected = false;
+                    }
+                });
+            }
+            if (!this.#values.has(value)) {
+                this.#values.add(value);
+                this.#markup.createAndAppendTag(option);
                 this.#setValidityAndFormValue();
                 this.dispatchEvent(new Event('change'));
             }
         }
-    };
-    #onClearTag = (event) => {
-        const target = event.target;
-        if (target && target instanceof HTMLElement) {
-            const tag = target.closest('box-tag');
-            if (tag) {
-                const value = tag.getAttribute('value');
-                const option = this.#markup.getOptionByValue(value);
-                option.removeAttribute('selected');
+        else {
+            if (this.#values.has(value)) {
                 this.#values.delete(value);
-                tag.remove();
+                const control = this.#markup.getTagByValue(value);
+                control?.remove();
                 this.#setValidityAndFormValue();
                 this.dispatchEvent(new Event('change'));
             }
         }
     };
-    #onClear = () => {
+    #onClearTag = (event) => {
+        const target = event.target;
+        if (target) {
+            const option = this.#markup.getOptionByValue(target.value);
+            if (option)
+                option.selected = false;
+            requestAnimationFrame(() => {
+                if (this.#values.size) {
+                    this.focus();
+                }
+                else if (this.searchable || this.filterable) {
+                    this.#markup.searchInput?.focus();
+                }
+                else {
+                    this.focus();
+                }
+            });
+        }
+    };
+    #onClearAll = () => {
         this.formResetCallback();
     };
+    #onPickerToggle = (event) => {
+        const state = Reflect.get(event, 'newState');
+        const oldState = Reflect.get(event, 'oldState');
+        if (state === oldState)
+            return;
+        // console.log(event)
+        if (state === 'open') {
+            this.#prevValue = this.value;
+            this.#changed = true;
+        }
+        else {
+            this.#changed = this.#prevValue !== this.value;
+            this.dispatchEvent(new Event('close'));
+        }
+    };
+    #onKeyDown = (event) => {
+        if (this.#internals.ariaExpanded !== 'true')
+            return;
+        const activeElement = this.shadowRoot.activeElement;
+        if (!activeElement) {
+            // ??? how we should react ???
+            return;
+        }
+        if (activeElement === this.#markup.searchInput && event.key === 'Enter') {
+            event.stopPropagation();
+            if (!this.searchable && this.filterable) {
+                console.log('sss');
+                this.#markup.sort(this.#markup.searchInput.value);
+            }
+            if (this.searchable) {
+                this.dispatchEvent(new Event('search'));
+            }
+            return;
+        }
+        if (event.key === 'Enter' && activeElement instanceof HTMLComboboxOptionElement) {
+            if (!activeElement.selected) {
+                event.stopPropagation();
+                return;
+            }
+        }
+        if (event.key === 'Enter' && activeElement.part.contains('clear-tag')) {
+            // @ts-ignore
+            // this.#onClearTag(event);
+            // event.stopPropagation();
+            // event.preventDefault()
+            // @ts-ignore
+            activeElement.click();
+            // event.stopPropagation();
+            return;
+        }
+        if (event.key === 'Escape' || event.key === 'Enter') {
+            this.#markup.closeDropdown();
+            this.blur();
+        }
+        // console.log(event, this.#internals.ariaExpanded)
+        // if (event.key !== 'Enter') return;
+    };
+    #onInput = () => {
+        this.query = this.#markup.searchInput.value;
+        if (!this.searchable && this.filterable) {
+            this.#markup.sort(this.#markup.searchInput?.value || '');
+        }
+    };
     #setValidityAndFormValue() {
+        this.#markup.clearAllButton?.toggleAttribute('disabled', !Boolean(this.#values.size));
+        let empty = false;
+        if (this.#values.size === 0)
+            empty = true;
+        if (this.#values.size > 0 && !this.clearable && !this.multiple && (this.searchable || this.filterable)) {
+            empty = true;
+        }
+        this.#markup.searchInput?.toggleAttribute('autofocus', empty);
         this.#internals.setFormValue(this.value);
         if (this.required && this.value === '') {
-            this.#internals.setValidity({ valueMissing: true });
+            this.#internals.setValidity({ valueMissing: true }, 'Value missing');
         }
         else {
             this.#internals.setValidity({});
@@ -320,6 +396,7 @@ export class HTMLComboboxElement extends HTMLElement {
     }
     #initialAttributesSynchronization() {
         for (const key of HTMLComboboxElement.OWN_IDL) {
+            // @ts-ignore
             this[key] = this.getAttribute(key);
         }
     }

package/dist/esm/combobox/HTML.combobox.option.element.js

@@ -1,15 +1,67 @@
 import { toBoolean } from './Boolean.attribute.value.normalizer.js';
 export class HTMLComboboxOptionElement extends HTMLElement {
-    static OWN_IDL = new Set(['value', 'label', 'selected']);
+    static OWN_IDL = new Set(['value', 'label', 'selected', 'disabled']);
+    static EventInit = { bubbles: true, cancelable: true, composed: true };
+    static captureFocus(event) {
+        if (event.relatedTarget && event.relatedTarget instanceof HTMLComboboxOptionElement) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
+    static onNavigate(event) {
+        // event.stopPropagation();
+        // const target = event.target as HTMLComboboxOptionElement;
+        // if (event.key === 'Enter') {
+        //   event.preventDefault();
+        //   target.click();
+        //   return;
+        // }
+        // if (event.key === 'Tab') return;
+        // event.preventDefault();
+        // console.log(event.target)
+        if (!event.target ||
+            !(event.target instanceof HTMLComboboxOptionElement) ||
+            event.key === 'Tab' ||
+            event.key === 'Enter')
+            return;
+        event.preventDefault();
+        if (event.key === 'ArrowDown') {
+            const next = event.target.nextElementSibling;
+            if (next && next instanceof HTMLComboboxOptionElement) {
+                next.focus();
+            }
+        }
+        if (event.key === 'ArrowUp') {
+            const prev = event.target.previousElementSibling;
+            if (prev && prev instanceof HTMLComboboxOptionElement) {
+                prev.focus();
+            }
+        }
+    }
     connectedCallback() {
+        this.addEventListener('keydown', HTMLComboboxOptionElement.onNavigate);
+        this.addEventListener('focusout', HTMLComboboxOptionElement.captureFocus);
+        this.addEventListener('click', this.#toggleSelection);
         this.#initialAttributesSynchronization();
         this.part.add('option');
         super.setAttribute('tabindex', "0");
         super.setAttribute('role', "option");
-        if (!this.value) {
-            this.value = this.textContent;
-        }
+        if (!this.value)
+            this.value = this.label;
+        if (!this.textContent)
+            this.textContent = this.value;
+        this.dispatchEvent(new Event('optionselectedstatechange', HTMLComboboxOptionElement.EventInit));
     }
+    disconnectedCallback() {
+        this.removeEventListener('click', this.#toggleSelection);
+        this.removeEventListener('keydown', HTMLComboboxOptionElement.onNavigate);
+        this.removeEventListener('focusout', HTMLComboboxOptionElement.captureFocus);
+    }
+    #toggleSelection = (event) => {
+        // console.log('#toggleSelection', this.value)
+        event.stopPropagation();
+        this.selected = !this.selected;
+    };
     get value() {
         return this.getAttribute('value');
     }
@@ -30,15 +82,38 @@ export class HTMLComboboxOptionElement extends HTMLElement {
         return this.hasAttribute('selected');
     }
     set selected(value) {
-        super.toggleAttribute('selected', toBoolean(value));
+        const prev = this.selected;
+        const force = toBoolean(value);
+        if (prev === force) {
+            // console.log(prev, value, this.value)
+            return;
+        }
+        super.toggleAttribute('selected', force);
+        this.part.toggle('selected', force);
+        // this.dispatchEvent(new Event('optionselectedstatechange', HTMLComboboxOptionElement.EventInit));
+        if (this.isConnected) {
+            // console.log('new optionselectedstatechange', this.value)
+            this.dispatchEvent(new Event('optionselectedstatechange', HTMLComboboxOptionElement.EventInit));
+        }
+    }
+    get disabled() {
+        return this.hasAttribute('disabled');
+    }
+    set disabled(value) {
+        const force = toBoolean(value);
+        super.toggleAttribute('disabled', force);
+        this.part.toggle('disabled', force);
+        super.toggleAttribute('inert', force);
     }
     #initialAttributesSynchronization() {
         for (const key of HTMLComboboxOptionElement.OWN_IDL) {
+            // @ts-ignore
             this[key] = this.getAttribute(key);
         }
     }
     setAttribute(name, value) {
         if (HTMLComboboxOptionElement.OWN_IDL.has(name)) {
+            // @ts-ignore
             this[name] = value;
         }
         else {
@@ -47,12 +122,18 @@ export class HTMLComboboxOptionElement extends HTMLElement {
     }
     removeAttribute(name) {
         if (HTMLComboboxOptionElement.OWN_IDL.has(name)) {
+            // @ts-ignore
             this[name] = null;
         }
         else {
             super.removeAttribute(name);
         }
     }
+    toggleAttribute(name, force) {
+        if (name === 'selected')
+            this.part.toggle(name, force);
+        return super.toggleAttribute(name, force);
+    }
 }
 if (!window.customElements.get('box-option')) {
     window.customElements.define('box-option', HTMLComboboxOptionElement);

package/dist/esm/combobox/HTML.combobox.tag.element.js

@@ -1,17 +1,37 @@
 export class HTMLComboboxTagElement extends HTMLElement {
-    constructor() {
-        super();
+    static EventInit = { bubbles: true, cancelable: true, composed: true };
+    get value() {
+        return this.getAttribute('value') || '';
     }
     connectedCallback() {
         this.part.add('tag');
-        if (this.parentElement) {
-            if (this.parentElement.hasAttribute('multiple')) {
-                if (!this.querySelector('[part*="clear-tag"]')) {
-                    throw new Error(`A <button> with part="clear-tag" is required for <combo-box> with multiple attribute`);
-                }
+        const control = this.querySelector('[part*="clear-tag"]');
+        // @ts-ignore
+        if (!this.hasAttribute('visible')) {
+            super.setAttribute('tabindex', '0');
+        }
+        control?.addEventListener('focusout', HTMLComboboxTagElement.captureFocus);
+        control?.addEventListener('click', HTMLComboboxTagElement.onClearTag);
+        const root = this.getRootNode();
+        if (root?.host.hasAttribute('multiple')) {
+            if (!control) {
+                throw new Error(`A <button> with part="clear-tag" is required for <combo-box> with multiple attribute`);
             }
         }
     }
+    disconnectedCallback() {
+        const control = this.querySelector('[part*="clear-tag"]');
+        control?.removeEventListener('focusout', HTMLComboboxTagElement.captureFocus);
+        control?.removeEventListener('click', HTMLComboboxTagElement.onClearTag);
+    }
+    static onClearTag(event) {
+        const target = event.target;
+        target?.parentElement?.dispatchEvent(new Event('tagcleared', HTMLComboboxTagElement.EventInit));
+    }
+    static captureFocus(event) {
+        event.stopPropagation();
+        event.preventDefault();
+    }
 }
 if (!window.customElements.get('box-tag')) {
     window.customElements.define('box-tag', HTMLComboboxTagElement);

package/dist/esm/index.js

@@ -3,65 +3,3 @@
 /// <reference types="react" />
 /// <reference types="vue" />
 export * from './combobox/index.js';
-// declare global {
-//   namespace React {
-//     namespace JSX {
-//       interface IntrinsicElements {
-//         'combo-box': React.DetailedHTMLProps<Omit<React.HTMLAttributes<HTMLComboboxElement>, 'defaultValue'>,
-//           HTMLComboboxElement
-//         > & ComboboxJsxAttributes;
-//
-//         'box-option': React.DetailedHTMLProps<
-//           React.HTMLAttributes<HTMLComboboxOptionElement>,
-//           HTMLComboboxOptionElement>
-//         & ComboboxOptionJsxAttributes;
-//
-//         'box-tag': React.DetailedHTMLProps<React.HTMLAttributes<HTMLComboboxTagElement>, HTMLComboboxTagElement>;
-//       }
-//     }
-//   }
-//
-//
-//   namespace preact {
-//     namespace JSX {
-//       interface IntrinsicElements {
-//         'combo-box': preact.HTMLAttributes<HTMLComboboxElement> & ComboboxJsxAttributes;
-//         'box-option': preact.HTMLAttributes<HTMLComboboxOptionElement> & ComboboxOptionJsxAttributes;
-//         'box-tag': preact.HTMLAttributes<HTMLComboboxTagElement>;
-//       }
-//     }
-//   }
-//
-// }
-//
-// declare module 'preact' {
-//   namespace JSX {
-//     interface IntrinsicElements {
-//       'combo-box': preact.HTMLAttributes<HTMLComboboxElement> & ComboboxJsxAttributes;
-//       'box-option': preact.HTMLAttributes<HTMLComboboxOptionElement> & ComboboxOptionJsxAttributes;
-//       'box-tag': preact.HTMLAttributes<HTMLComboboxTagElement>;
-//     }
-//   }
-// }
-//
-// // Solid
-// declare module 'solid-js' {
-//   namespace JSX {
-//     interface IntrinsicElements {
-//       'combo-box': HTMLAttributes<HTMLComboboxElement> & ComboboxJsxAttributes
-//       'box-option': HTMLAttributes<HTMLComboboxOptionElement> & ComboboxOptionJsxAttributes
-//       'box-tag': HTMLAttributes<HTMLElement>
-//     }
-//   }
-// }
-//
-//
-// declare global {
-//   namespace JSX {
-//     interface IntrinsicElements {
-//       'combo-box': ComboboxJsxAttributes;
-//       'box-option': ComboboxOptionJsxAttributes;
-//       'box-tag': HTMLElement;
-//     }
-//   }
-// }