kr-elements 0.0.1-alpha.6 → 0.0.1-alpha.8

package/{combobox.d.ts → dist/types/combobox/combobox.d.ts}

@@ -1,3 +1,6 @@
+import type React from 'react';
+
+
 interface HTMLComboboxTagElement extends HTMLElement {}
 
 interface HTMLComboboxOptionElement extends HTMLOptionElement {

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

@@ -1,2 +1,2 @@
-/// <reference types="combobox.js" />
+/// <reference types="src/combobox/combobox.js" />
 export * from './HTML.combobox.element.js';

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "kr-elements",
-  "version": "0.0.1-alpha.6",
+  "version": "0.0.1-alpha.8",
   "description": "Custom elements",
   "type": "module",
   "scripts": {
     "prepare": "husky",
     "clean": "rm -rf dist",
-    "build:combobox": "tsc -b configs/combobox.tsconfig.cjs.json configs/combobox.tsconfig.esm.json configs/combobox.tsconfig.types.json",
+    "build:combobox": "tsc -b configs/combobox.tsconfig.cjs.json configs/combobox.tsconfig.esm.json configs/combobox.tsconfig.types.json && cp src/combobox/combobox.d.ts dist/types/combobox/combobox.d.ts",
     "generate": "node --import tsx ./scripts/genPackageFiles.ts",
     "build": "npm-run-all clean build:combobox generate",
     "check-types": "tsc --noEmit"
@@ -20,6 +20,7 @@
   "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",
@@ -36,17 +37,17 @@
   "sideEffect": false,
   "files": [
     "dist",
-    "combobox.d.ts"
+    "src/combobox/combobox.d.ts"
   ],
   "exports": {
     "./combobox": {
-      "types": "./combobox.d.ts",
+      "types": "./dist/types/combobox/combobox.d.ts",
       "require": "./dist/cjs/combobox/index.js",
       "import": "./dist/esm/combobox/index.js"
     }
   },
   "main": "dist/cjs/combobox/index.js",
   "module": "dist/esm/combobox/index.js",
-  "types": "combobox.d.ts",
+  "types": "dist/types/combobox/index.d.ts",
   "combobox": "dist/cjs/combobox/index.js"
 }

package/src/combobox/combobox.d.ts

@@ -0,0 +1,199 @@
+import type React from 'react';
+
+
+interface HTMLComboboxTagElement extends HTMLElement {}
+
+interface HTMLComboboxOptionElement extends HTMLOptionElement {
+  value: string
+  label: string
+}
+
+interface HTMLComboboxElement extends HTMLSelectElement {
+  /** The value of internal input
+   *
+   * Internal input is visible when either "searchable" or "filterable" attribute is presented */
+  query: string;
+
+  /** List of selected options value attribute */
+  valueAsArray: 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: NodeListOf<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;
+
+
+  onchange: ((this: HTMLComboboxElement, ev: ComboboxEvent) => any) | null;
+  oninput: ((this: HTMLComboboxElement, ev: ComboboxInputEvent) => any) | null;
+  oninvalid: ((this: HTMLComboboxElement, ev: ComboboxEvent) => any) | null;
+  // onselect: ((this: HTMLComboboxElement, ev: Event) => any) | null;
+}
+
+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;
+}
+
+// Add to tag name map
+declare global {
+  interface HTMLElementTagNameMap {
+    'combo-box': HTMLComboboxElement;
+    'box-option': HTMLComboboxOptionElement;
+    'box-tag': HTMLComboboxTagElement;
+  }
+}
+
+declare namespace JSX {
+  interface IntrinsicElements {
+    'combo-box': React.DetailedHTMLProps<React.HTMLAttributes<HTMLComboboxElement>, HTMLComboboxElement> & {
+      /** The value of internal input
+       *
+       * Internal input is visible when either "searchable" or "filterable" attribute is presented */
+      value?: string;
+
+      /** The value of internal input
+       *
+       * Internal input is visible when either "searchable" or "filterable" attribute is presented */
+      query?: string;
+
+      /** 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;
+
+      /** 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 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;
+
+      /** 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;
+
+
+      multiple?: boolean
+
+      // Events
+      onChange?: (event: React.SyntheticEvent<HTMLComboboxElement>) => void;
+      onInput?: (event: React.FormEvent<HTMLComboboxElement>) => void;
+      onInvalid?: (event: React.FormEvent<HTMLComboboxElement>) => void;
+
+    };
+  }
+}