html-combobox-element 0.0.1

package/dist/types/index.d.ts

@@ -0,0 +1,214 @@
+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 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;
+}
+interface ComboboxEventMap extends HTMLElementEventMap {
+    "change": ComboboxEvent;
+    "blur": ComboboxFocusEvent;
+    "focus": ComboboxFocusEvent;
+    "focusin": ComboboxFocusEvent;
+    "focusout": ComboboxFocusEvent;
+    "input": ComboboxInputEvent;
+    "invalid": ComboboxEvent;
+    "selectionchange": ComboboxEvent;
+    "selectstart": ComboboxEvent;
+}
+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;
+}
+interface ComboboxOptionJsxAttributes {
+    value: string;
+    label?: string;
+    selected?: boolean;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'combo-box': React.DetailedHTMLProps<React.HTMLAttributes<HTMLComboboxElement> & ComboboxJsxAttributes, HTMLComboboxElement>;
+            'box-option': React.DetailedHTMLProps<React.HTMLAttributes<HTMLComboboxOptionElement> & ComboboxOptionJsxAttributes, HTMLComboboxOptionElement>;
+            'box-tag': React.DetailedHTMLProps<React.HTMLAttributes<HTMLComboboxTagElement>, HTMLComboboxTagElement>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                'combo-box': React.DetailedHTMLProps<React.HTMLAttributes<HTMLComboboxElement> & ComboboxJsxAttributes, HTMLComboboxElement>;
+                'box-option': React.DetailedHTMLProps<React.HTMLAttributes<HTMLComboboxOptionElement> & ComboboxOptionJsxAttributes, HTMLComboboxOptionElement>;
+                'box-tag': React.DetailedHTMLProps<React.HTMLAttributes<HTMLComboboxTagElement>, HTMLComboboxTagElement>;
+            }
+        }
+    }
+    namespace Solid {
+        namespace JSX {
+            interface IntrinsicElements {
+                'combo-box': any;
+                'box-option': any;
+                'box-tag': any;
+            }
+        }
+    }
+    namespace Vue {
+        namespace JSX {
+            interface IntrinsicElements {
+                'combo-box': any;
+                'box-option': any;
+                'box-tag': any;
+            }
+        }
+    }
+    namespace JSXInternal {
+        interface IntrinsicElements {
+            'combo-box': preact.HTMLAttributes<HTMLComboboxElement> & ComboboxJsxAttributes;
+            'box-option': preact.HTMLAttributes<HTMLComboboxElement> & ComboboxOptionJsxAttributes;
+            'box-tag': preact.HTMLAttributes<HTMLComboboxTagElement> & {};
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'combo-box': React.DetailedHTMLProps<React.HTMLAttributes<HTMLComboboxElement> & ComboboxJsxAttributes, HTMLComboboxElement>;
+            'box-option': React.DetailedHTMLProps<React.HTMLAttributes<HTMLComboboxOptionElement> & ComboboxOptionJsxAttributes, HTMLComboboxOptionElement>;
+            'box-tag': React.DetailedHTMLProps<React.HTMLAttributes<HTMLComboboxTagElement>, HTMLComboboxTagElement>;
+        }
+    }
+}
+declare module 'preact' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'combo-box': any;
+            'box-option': any;
+            'box-tag': any;
+        }
+    }
+    namespace JSXInternal {
+        interface IntrinsicElements {
+            'combo-box': any;
+            'box-option': any;
+            'box-tag': any;
+        }
+    }
+}
+declare module 'solid-js' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'combo-box': any;
+            'box-option': any;
+            'box-tag': any;
+        }
+    }
+}
+declare module 'vue' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'combo-box': any;
+            'box-option': any;
+            'box-tag': any;
+        }
+    }
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}

package/dist/types/tsconfig.types.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../../src/index.ts","../../src/combobox/boolean.attribute.value.normalizer.ts","../../src/combobox/combobox.markup.ts","../../src/combobox/html.combobox.element.ts","../../src/combobox/html.combobox.option.element.ts","../../src/combobox/html.combobox.tag.element.ts","../../src/combobox/index.ts"],"version":"5.9.3"}

package/dist/types/types.d.ts

@@ -0,0 +1,198 @@
+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>;
+
+
+  // For standard events - let TypeScript infer correctly
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: HTMLComboboxElement, ev: HTMLElementEventMap[K]) => any,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+
+  // For your custom events
+  addEventListener<K extends keyof ComboboxEventMap>(
+    type: K,
+    listener: (this: HTMLComboboxElement, ev: ComboboxEventMap[K]) => any,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+
+  // Fallback
+  addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+
+  // Similar for removeEventListener
+  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 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;
+}
+
+interface ComboboxEventMap extends HTMLElementEventMap {
+  "change": ComboboxEvent;
+  "blur": ComboboxFocusEvent;
+  "focus": ComboboxFocusEvent;
+  "focusin": ComboboxFocusEvent;
+  "focusout": ComboboxFocusEvent;
+  "input": ComboboxInputEvent;
+  "invalid": ComboboxEvent;
+  // "select": ComboboxEvent;
+  "selectionchange": ComboboxEvent;
+  "selectstart": ComboboxEvent;
+}
+
+interface HTMLElementTagNameMap {
+  'combo-box': HTMLComboboxElement;
+  'box-option': HTMLComboboxOptionElement;
+  'box-tag': HTMLComboboxTagElement;
+}
+
+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;
+}
+
+declare namespace React {
+  namespace JSX {
+    interface IntrinsicElements {
+      // @ts-ignore
+      'combo-box': React.DetailedHTMLProps<Omit<React.HTMLAttributes<HTMLComboboxElement>, 'defaultValue'>,
+        HTMLComboboxElement
+      > & ComboboxJsxAttributes;
+
+      'box-option': HTMLComboboxOptionElement;
+      'box-tag': HTMLComboboxTagElement;
+    }
+  }
+}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "html-combobox-element",
+  "version": "0.0.1",
+  "description": "The combo-box web-component & customizable select polyfill",
+  "type": "module",
+  "scripts": {
+    "prepare": "husky",
+    "clean": "rm -rf dist",
+    "build:combobox": "tsc -b configs/tsconfig.cjs.json configs/tsconfig.esm.json configs/tsconfig.types.json",
+    "build": "npm-run-all clean build:combobox",
+    "check-types": "tsc --noEmit"
+  },
+  "keywords": [
+    "web-components",
+    "custom elements",
+    "combo-box",
+    "combobox"
+  ],
+  "author": "Roman Konstantin",
+  "license": "MIT",
+  "devDependencies": {
+    "@espcom/eslint-config": "latest",
+    "@types/node": "22.8.6",
+    "@types/react": "^19.2.14",
+    "c8": "10.1.2",
+    "esbuild": "0.25.5",
+    "husky": "9.1.5",
+    "lint-staged": "15.2.9",
+    "npm-run-all": "^4.1.5",
+    "preact": "^10.28.4",
+    "react": "^19.2.4",
+    "solid-js": "^1.9.11",
+    "tsx": "^4.19.2",
+    "typescript": "5.9.3",
+    "vue": "^3.5.28",
+    "xml-splitter": "1.2.1"
+  },
+  "sideEffect": false,
+  "files": [
+    "dist"
+  ],
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts"
+}