html-combobox-element 0.0.2-beta.5 → 0.0.2-beta.7

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

@@ -15,41 +15,70 @@ 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 Combobox_markup_js_1.ComboboxMarkup(this.shadowRoot, this.#internals);
         this.shadowRoot.innerHTML = Combobox_markup_js_1.ComboboxMarkup.template;
         this.shadowRoot.adoptedStyleSheets = _a.styleSheet;
         this.#observer = new MutationObserver(this.#onOptionsChanges);
+        this.#markup.connect();
     }
     // Lifecycle callbacks
     connectedCallback() {
-        this.#markup.connect();
-        this.#initialAttributesSynchronization();
+        // super.setAttribute('tabindex', '0');
+        this.shadowRoot.addEventListener('optionselectedstatechange', this.#onOptionSelectedStateChanges);
+        this.shadowRoot.addEventListener('tagcleared', this.#onClearTag);
         this.#onOptionsChanges([{ addedNodes: Array.from(this.children) }]);
+        this.#initialAttributesSynchronization();
         this.#observer.observe(this, _a.observerOptions);
-        this.#markup.clearAllButton.addEventListener('click', this.#onClear);
+        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();
+    }
+    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 HTML_combobox_option_element_js_1.HTMLComboboxOptionElement || node instanceof HTMLOptGroupElement) {
+            this.#markup.optionsContainer?.insertBefore(node, referenceNode);
+        }
+        else {
+            super.insertBefore(node, referenceNode);
+        }
+        return node;
+    };
+    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
@@ -66,22 +95,17 @@ 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');
@@ -107,7 +131,9 @@ class HTMLComboboxElement extends HTMLElement {
     }
     set disabled(value) {
         this.#internals.ariaDisabled = String(value);
-        super.toggleAttribute('disabled', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
+        value = (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value);
+        super.toggleAttribute('disabled', value);
+        super.toggleAttribute('inert', value);
     }
     get form() {
         return this.#internals.form;
@@ -158,34 +184,11 @@ 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
@@ -232,64 +235,38 @@ 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) => {
         records.forEach(record => {
             record.addedNodes.forEach(node => {
-                if (node instanceof HTML_combobox_option_element_js_1.HTMLComboboxOptionElement) {
-                    node.addEventListener('click', this.#onSelectOption);
-                    if (node.selected) {
-                        if (this.multiple) {
-                            this.#selectOption(node);
-                        }
-                        else if (this.#values.size === 0) {
-                            this.#selectOption(node);
-                        }
-                    }
-                }
                 if (node instanceof HTML_combobox_option_element_js_1.HTMLComboboxOptionElement || node instanceof HTMLOptGroupElement) {
                     this.#markup.optionsContainer.append(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();
+        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'));
+            }
         }
-    }
-    #onSelectOption = (event) => {
-        const target = event.target;
-        if (target) {
-            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);
+        else {
+            if (this.#values.has(value)) {
+                this.#values.delete(value);
+                const control = this.#markup.getTagByValue(value);
+                control?.remove();
                 this.#setValidityAndFormValue();
                 this.dispatchEvent(new Event('change'));
             }
@@ -298,25 +275,90 @@ class HTMLComboboxElement extends HTMLElement {
     #onClearTag = (event) => {
         const target = event.target;
         if (target) {
-            const tag = target.closest('box-tag');
-            if (tag) {
-                const value = tag.getAttribute('value');
-                const option = this.#markup.getOptionByValue(value);
-                option.removeAttribute('selected');
-                this.#values.delete(value);
-                tag.remove();
-                this.#setValidityAndFormValue();
-                this.dispatchEvent(new Event('change'));
-            }
+            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();
+                }
+            });
         }
     };
-    #onClear = () => {
+    #onClearAll = () => {
         this.formResetCallback();
     };
+    #onPickerToggle = (event) => {
+        const state = Reflect.get(event, 'newState');
+        const oldState = Reflect.get(event, 'oldState');
+        if (state === oldState)
+            return;
+        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) {
+                this.#markup.sort(this.#markup.searchInput.value);
+            }
+            if (this.searchable) {
+                this.dispatchEvent(new Event('search'));
+            }
+            return;
+        }
+        if (event.key === 'Enter' && activeElement instanceof HTML_combobox_option_element_js_1.HTMLComboboxOptionElement) {
+            if (!activeElement.selected) {
+                event.stopPropagation();
+                return;
+            }
+        }
+        if (event.key === 'Enter' && activeElement instanceof HTMLElement && activeElement.part.contains('clear-tag')) {
+            activeElement.click();
+            return;
+        }
+        if (event.key === 'Escape' || event.key === 'Enter') {
+            this.#markup.closeDropdown();
+            this.blur();
+        }
+    };
+    #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({});
@@ -324,6 +366,7 @@ class HTMLComboboxElement extends HTMLElement {
     }
     #initialAttributesSynchronization() {
         for (const key of _a.OWN_IDL) {
+            // @ts-ignore
             this[key] = this.getAttribute(key);
         }
     }

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

@@ -4,16 +4,57 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HTMLComboboxOptionElement = void 0;
 const Boolean_attribute_value_normalizer_js_1 = require("./Boolean.attribute.value.normalizer.js");
 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 _a) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
+    static onNavigate(event) {
+        if (!event.target ||
+            !(event.target instanceof _a) ||
+            event.key === 'Tab' ||
+            event.key === 'Enter')
+            return;
+        event.preventDefault();
+        if (event.key === 'ArrowDown') {
+            const next = event.target.nextElementSibling;
+            if (next && next instanceof _a) {
+                next.focus();
+            }
+        }
+        if (event.key === 'ArrowUp') {
+            const prev = event.target.previousElementSibling;
+            if (prev && prev instanceof _a) {
+                prev.focus();
+            }
+        }
+    }
     connectedCallback() {
+        this.addEventListener('keydown', _a.onNavigate);
+        this.addEventListener('focusout', _a.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', _a.EventInit));
     }
+    disconnectedCallback() {
+        this.removeEventListener('click', this.#toggleSelection);
+        this.removeEventListener('keydown', _a.onNavigate);
+        this.removeEventListener('focusout', _a.captureFocus);
+    }
+    #toggleSelection = (event) => {
+        event.stopPropagation();
+        this.selected = !this.selected;
+    };
     get value() {
         return this.getAttribute('value');
     }
@@ -34,15 +75,34 @@ class HTMLComboboxOptionElement extends HTMLElement {
         return this.hasAttribute('selected');
     }
     set selected(value) {
-        super.toggleAttribute('selected', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
+        const prev = this.selected;
+        const force = (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value);
+        if (prev === force)
+            return;
+        super.toggleAttribute('selected', force);
+        this.part.toggle('selected', force);
+        if (this.isConnected) {
+            this.dispatchEvent(new Event('optionselectedstatechange', _a.EventInit));
+        }
+    }
+    get disabled() {
+        return this.hasAttribute('disabled');
+    }
+    set disabled(value) {
+        const force = (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value);
+        super.toggleAttribute('disabled', force);
+        this.part.toggle('disabled', force);
+        super.toggleAttribute('inert', force);
     }
     #initialAttributesSynchronization() {
         for (const key of _a.OWN_IDL) {
+            // @ts-ignore
             this[key] = this.getAttribute(key);
         }
     }
     setAttribute(name, value) {
         if (_a.OWN_IDL.has(name)) {
+            // @ts-ignore
             this[name] = value;
         }
         else {
@@ -51,12 +111,18 @@ class HTMLComboboxOptionElement extends HTMLElement {
     }
     removeAttribute(name) {
         if (_a.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);
+    }
 }
 exports.HTMLComboboxOptionElement = HTMLComboboxOptionElement;
 _a = HTMLComboboxOptionElement;

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

@@ -2,19 +2,38 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HTMLComboboxTagElement = void 0;
 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"]');
+        if (!control?.checkVisibility()) {
+            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();
+    }
 }
 exports.HTMLComboboxTagElement = HTMLComboboxTagElement;
 if (!window.customElements.get('box-tag')) {

package/dist/cjs/index.js

@@ -19,65 +19,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./combobox/index.js"), exports);
-// 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;
-//     }
-//   }
-// }