html-combobox-element 0.0.2 → 0.0.4

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 (!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();
+    }
 }
 exports.HTMLComboboxTagElement = HTMLComboboxTagElement;
 if (!window.customElements.get('box-tag')) {

package/dist/cjs/combobox/index.d.ts

@@ -0,0 +1 @@
+export * from './HTML.combobox.element.js';

package/dist/cjs/index.d.ts

@@ -0,0 +1,253 @@
+export * from './combobox/index.js';
+interface HTMLComboboxTagElement extends HTMLElement {
+}
+interface HTMLComboboxOptionElement extends HTMLOptionElement {
+    value: string;
+    label: string;
+}
+interface HTMLComboboxElement extends HTMLSelectElement {
+    /** List of selected options value attribute */
+    valueAsArray: string[];
+    multiple: boolean;
+    /** The value of internal input
+     *
+     * Internal input is visible when either "searchable" or "filterable" attribute is presented */
+    query: string;
+    /** The placeholder of internal input
+     *
+     * Internal input is visible when either "searchable" or "filterable" attribute is presented
+     *
+     * When <combo-box> is empty, this value is also shown as <combo-box> placeholder itself
+     * */
+    placeholder: string;
+    /** When is true, the clear-all-button is shown in the <combo-box> itself,
+     * and the clear-button is shown for each selected tag.
+     *
+     * If multiple attribute is set to "true", this is also enabled.
+     *
+     * If multiple attribute is set to "false", i.e. the <combo-box> is used as a <select>,
+     * then setting this attribute to "true" will make the clear-button of selected tag visible
+     * */
+    clearable: boolean;
+    /** When is true, the internal input is shown.
+     *
+     * When user type something, available options are not filtered by this query.
+     * You have to set an "input" listener to the <combo-box> and filter options by yourself
+     *
+     * Setting both "searchable" and "filterable" make no sense, the "searchable" will have priority
+     * */
+    searchable: boolean;
+    /** When is true, the internal input is shown.
+     *
+     * When user type something, available options are filtered by this query.
+     *
+     * Setting both "filterable" and "searchable" make no sense, the "searchable" will have priority
+     * */
+    filterable: boolean;
+    selectedOptions: HTMLCollectionOf<HTMLComboboxOptionElement>;
+    addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLComboboxElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+    addEventListener<K extends keyof ComboboxEventMap>(type: K, listener: (this: HTMLComboboxElement, ev: ComboboxEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLComboboxElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+    removeEventListener<K extends keyof ComboboxEventMap>(type: K, listener: (this: HTMLComboboxElement, ev: ComboboxEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+interface ComboboxEventMap extends HTMLElementEventMap {
+    "change": ComboboxEvent;
+    "blur": ComboboxFocusEvent;
+    "focus": ComboboxFocusEvent;
+    "focusin": ComboboxFocusEvent;
+    "focusout": ComboboxFocusEvent;
+    "input": ComboboxInputEvent;
+    "invalid": ComboboxEvent;
+    "selectionchange": ComboboxEvent;
+    "selectstart": ComboboxEvent;
+}
+/** Own attributes/properties of `<combo-box>`, shared by every JSX integration below. */
+export interface ComboboxJsxAttributes {
+    /** The value of the internal input.
+     *
+     * The internal input is visible when either the `searchable` or `filterable` attribute is present.
+     *
+     * Setting ""
+     * */
+    query?: string;
+    /** A comma-separated list of descendant `<box-option>` value attributes to be selected by default.
+     *
+     * When the `multiple` attribute is present, only the first option will be selected.
+     *
+     * Alternatively, you can set default selections by adding the `selected` attribute directly to individual `<box-option>` elements. */
+    value?: string;
+    /** This Boolean attribute indicates that multiple options can be selected.
+     *
+     * When present, users can select multiple options. When absent, only one option can be selected at a time (the `<combo-box>` behaves like a `<select>`). */
+    multiple?: boolean;
+    /** The placeholder for the internal input.
+     *
+     * The internal input is visible when either the `searchable` or `filterable` attribute is present.
+     *
+     * When the `<combo-box>` is empty, this value is also shown as the `<combo-box>` placeholder itself. */
+    placeholder?: string;
+    /** When present, the clear-all button is shown in the `<combo-box>` itself, and the clear button is shown for each selected tag.
+     *
+     * This attribute is automatically enabled when the `multiple` attribute is present.
+     *
+     * When the `multiple` attribute is absent (single-select mode), setting `clearable` makes the clear button visible on the selected tag. */
+    clearable?: boolean;
+    /** When present, the internal input is shown.
+     *
+     * As the user types, available options are **not** filtered by the query. You must attach an `input` listener to the `<combo-box>` and filter options manually.
+     *
+     * Setting both `searchable` and `filterable` is not recommended—`searchable` takes precedence. */
+    searchable?: boolean;
+    /** When present, the internal input is shown.
+     *
+     * As the user types, available options are filtered by the query automatically.
+     *
+     * Setting both `filterable` and `searchable` is not recommended—`searchable` takes precedence. */
+    filterable?: boolean;
+    /** A Boolean attribute indicating that at least one option must be selected. */
+    required?: boolean;
+    disabled?: boolean;
+}
+export interface ComboboxOptionJsxAttributes {
+    value: string;
+    label?: string;
+    selected?: boolean;
+}
+/**
+ * Generic HTML/JSX passthrough attributes (class, style, event handlers, `data-*`, `aria-*`, ...).
+ *
+ * These are intentionally framework-agnostic: they don't reference React's, Preact's, Vue's
+ * or Solid's own type packages, so this file never requires any of them to be installed just
+ * to be imported. Every framework below layers `ComboboxJsxAttributes`/`ComboboxOptionJsxAttributes`
+ * on top of this instead of that framework's own `HTMLAttributes` type.
+ */
+export interface ComboboxCommonAttributes {
+    id?: string;
+    class?: string;
+    className?: string;
+    style?: unknown;
+    slot?: string;
+    title?: string;
+    tabIndex?: number;
+    hidden?: boolean;
+    children?: unknown;
+    ref?: unknown;
+    key?: string | number;
+    onChange?: (event: ComboboxEvent) => void;
+    onInput?: (event: ComboboxInputEvent) => void;
+    onFocus?: (event: ComboboxFocusEvent) => void;
+    onBlur?: (event: ComboboxFocusEvent) => void;
+    onInvalid?: (event: ComboboxEvent) => void;
+    [key: `data-${string}`]: unknown;
+    [key: `aria-${string}`]: unknown;
+    [key: `on${string}`]: ((event: any) => void) | undefined;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'combo-box': HTMLComboboxElement;
+        'box-option': HTMLComboboxOptionElement;
+        'box-tag': HTMLComboboxTagElement;
+    }
+    interface ComboboxEvent extends Event {
+        readonly target: HTMLComboboxElement;
+        readonly currentTarget: HTMLComboboxElement;
+    }
+    interface ComboboxInputEvent extends InputEvent {
+        readonly target: HTMLComboboxElement;
+        readonly currentTarget: HTMLComboboxElement;
+    }
+    interface ComboboxFocusEvent extends FocusEvent {
+        readonly target: HTMLComboboxElement;
+    }
+    type ComboboxElementAttributes = ComboboxCommonAttributes & ComboboxJsxAttributes;
+    type ComboboxOptionElementAttributes = ComboboxCommonAttributes & ComboboxOptionJsxAttributes;
+    type ComboboxTagElementAttributes = ComboboxCommonAttributes;
+    namespace JSX {
+        interface IntrinsicElements {
+            'combo-box': ComboboxElementAttributes;
+            'box-option': ComboboxOptionElementAttributes;
+            'box-tag': ComboboxTagElementAttributes;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'combo-box': ComboboxElementAttributes;
+            'box-option': ComboboxOptionElementAttributes;
+            'box-tag': ComboboxTagElementAttributes;
+        }
+    }
+}
+declare module 'react/jsx-runtime' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'combo-box': ComboboxElementAttributes;
+            'box-option': ComboboxOptionElementAttributes;
+            'box-tag': ComboboxTagElementAttributes;
+        }
+    }
+}
+declare module 'react/jsx-dev-runtime' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'combo-box': ComboboxElementAttributes;
+            'box-option': ComboboxOptionElementAttributes;
+            'box-tag': ComboboxTagElementAttributes;
+        }
+    }
+}
+declare module 'preact' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'combo-box': ComboboxElementAttributes;
+            'box-option': ComboboxOptionElementAttributes;
+            'box-tag': ComboboxTagElementAttributes;
+        }
+    }
+    namespace JSXInternal {
+        interface IntrinsicElements {
+            'combo-box': ComboboxElementAttributes;
+            'box-option': ComboboxOptionElementAttributes;
+            'box-tag': ComboboxTagElementAttributes;
+        }
+    }
+}
+declare module 'preact/jsx-runtime' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'combo-box': ComboboxElementAttributes;
+            'box-option': ComboboxOptionElementAttributes;
+            'box-tag': ComboboxTagElementAttributes;
+        }
+    }
+}
+declare module 'solid-js' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'combo-box': ComboboxElementAttributes;
+            'box-option': ComboboxOptionElementAttributes;
+            'box-tag': ComboboxTagElementAttributes;
+        }
+    }
+}
+declare module 'solid-js/jsx-runtime' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'combo-box': ComboboxElementAttributes;
+            'box-option': ComboboxOptionElementAttributes;
+            'box-tag': ComboboxTagElementAttributes;
+        }
+    }
+}
+declare module 'vue' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'combo-box': ComboboxElementAttributes;
+            'box-option': ComboboxOptionElementAttributes;
+            'box-tag': ComboboxTagElementAttributes;
+        }
+    }
+}

package/dist/cjs/index.js

@@ -1,8 +1,4 @@
 "use strict";
-/// <reference types="solid-js" />
-/// <reference types="preact" />
-/// <reference types="react" />
-/// <reference types="vue" />
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -19,65 +15,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;
-//     }
-//   }
-// }

package/dist/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}