kr-elements 0.0.1-alpha.12 → 0.0.1-alpha.14

package/dist/cjs/combobox/Boolean.attribute.value.normalizer.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.toBoolean = toBoolean;
+/** Transform invalid (nullish or stringed) values to correct boolean value */
 function toBoolean(value) {
     if (value == null || value === 'false' || value === false)
         value = false;

package/dist/cjs/combobox/Combobox.markup.js

@@ -39,12 +39,15 @@ class ComboboxMarkup {
         this.optionsContainer.querySelectorAll('box-option')
             .forEach(option => {
             if (query === '') {
+                // option.style.order = "unset";
                 option.style.display = "initial";
             }
             else if (!regex.test(option.label)) {
+                // option.style.order = "-1";
                 option.style.display = "none";
             }
             else {
+                // option.style.order = "unset";
                 option.style.order = "initial";
             }
         });
@@ -85,6 +88,7 @@ class ComboboxMarkup {
         try {
             this.setDropdownPosition(this.#shadowRoot.host.getBoundingClientRect());
             this.dropdown.style.display = 'flex';
+            // @ts-ignore
             this.dropdown.showPopover();
             this.#internals.ariaExpanded = "true";
         }
@@ -96,6 +100,7 @@ class ComboboxMarkup {
         if (event.composedPath().includes(this.#shadowRoot.host))
             return;
         try {
+            // @ts-ignore
             this.dropdown.hidePopover();
             this.dropdown.style.display = 'none';
             this.#internals.ariaExpanded = "false";

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

@@ -26,6 +26,7 @@ class HTMLComboboxElement extends HTMLElement {
         this.shadowRoot.adoptedStyleSheets = _a.styleSheet;
         this.#observer = new MutationObserver(this.#onOptionsChanges);
     }
+    // Lifecycle callbacks
     connectedCallback() {
         this.#markup.connect();
         this.#initialAttributesSynchronization();
@@ -48,6 +49,8 @@ class HTMLComboboxElement extends HTMLElement {
     formDisabledCallback(isDisabled) {
         this.disabled = isDisabled;
     }
+    // Instance properties
+    // readonly
     get valueAsArray() {
         return Array.from(this.#values);
     }
@@ -60,6 +63,7 @@ class HTMLComboboxElement extends HTMLElement {
     get willValidate() {
         return this.internals.willValidate;
     }
+    // configurable
     get value() {
         return this.valueAsArray.join(',');
     }
@@ -155,6 +159,7 @@ class HTMLComboboxElement extends HTMLElement {
             this.#markup.searchInput.placeholder = value;
         }
     }
+    // Instance methods
     setAttribute(name, value) {
         if (_a.booleanAttributes.has(name)) {
             Reflect.set(this, name, (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
@@ -190,6 +195,7 @@ class HTMLComboboxElement extends HTMLElement {
             this.internals.setValidity({ customError: true }, message);
         }
     }
+    // Internal
     #onInput = (event) => {
         if (this.filterable) {
             if (event.target && event.target instanceof HTMLInputElement) {

package/dist/cjs/tsconfig.cjs.tsbuildinfo

@@ -1 +1 @@
-{"root":["../../src/index.ts","../../src/types.d.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"}
+{"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/esm/combobox/Boolean.attribute.value.normalizer.js

@@ -1,3 +1,4 @@
+/** Transform invalid (nullish or stringed) values to correct boolean value */
 export function toBoolean(value) {
     if (value == null || value === 'false' || value === false)
         value = false;

package/dist/esm/combobox/Combobox.markup.js

@@ -36,12 +36,15 @@ export class ComboboxMarkup {
         this.optionsContainer.querySelectorAll('box-option')
             .forEach(option => {
             if (query === '') {
+                // option.style.order = "unset";
                 option.style.display = "initial";
             }
             else if (!regex.test(option.label)) {
+                // option.style.order = "-1";
                 option.style.display = "none";
             }
             else {
+                // option.style.order = "unset";
                 option.style.order = "initial";
             }
         });
@@ -82,6 +85,7 @@ export class ComboboxMarkup {
         try {
             this.setDropdownPosition(this.#shadowRoot.host.getBoundingClientRect());
             this.dropdown.style.display = 'flex';
+            // @ts-ignore
             this.dropdown.showPopover();
             this.#internals.ariaExpanded = "true";
         }
@@ -93,6 +97,7 @@ export class ComboboxMarkup {
         if (event.composedPath().includes(this.#shadowRoot.host))
             return;
         try {
+            // @ts-ignore
             this.dropdown.hidePopover();
             this.dropdown.style.display = 'none';
             this.#internals.ariaExpanded = "false";

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

@@ -22,6 +22,7 @@ export class HTMLComboboxElement extends HTMLElement {
         this.shadowRoot.adoptedStyleSheets = HTMLComboboxElement.styleSheet;
         this.#observer = new MutationObserver(this.#onOptionsChanges);
     }
+    // Lifecycle callbacks
     connectedCallback() {
         this.#markup.connect();
         this.#initialAttributesSynchronization();
@@ -44,6 +45,8 @@ export class HTMLComboboxElement extends HTMLElement {
     formDisabledCallback(isDisabled) {
         this.disabled = isDisabled;
     }
+    // Instance properties
+    // readonly
     get valueAsArray() {
         return Array.from(this.#values);
     }
@@ -56,6 +59,7 @@ export class HTMLComboboxElement extends HTMLElement {
     get willValidate() {
         return this.internals.willValidate;
     }
+    // configurable
     get value() {
         return this.valueAsArray.join(',');
     }
@@ -151,6 +155,7 @@ export class HTMLComboboxElement extends HTMLElement {
             this.#markup.searchInput.placeholder = value;
         }
     }
+    // Instance methods
     setAttribute(name, value) {
         if (HTMLComboboxElement.booleanAttributes.has(name)) {
             Reflect.set(this, name, toBoolean(value));
@@ -186,6 +191,7 @@ export class HTMLComboboxElement extends HTMLElement {
             this.internals.setValidity({ customError: true }, message);
         }
     }
+    // Internal
     #onInput = (event) => {
         if (this.filterable) {
             if (event.target && event.target instanceof HTMLInputElement) {

package/dist/esm/tsconfig.esm.tsbuildinfo

@@ -1 +1 @@
-{"root":["../../src/index.ts","../../src/types.d.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"}
+{"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/combobox/Boolean.attribute.value.normalizer.d.ts

@@ -1,2 +1,3 @@
+/** Transform invalid (nullish or stringed) values to correct boolean value */
 export declare function toBoolean(value: any): boolean;
 //# sourceMappingURL=Boolean.attribute.value.normalizer.d.ts.map

package/dist/types/combobox/Boolean.attribute.value.normalizer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Boolean.attribute.value.normalizer.d.ts","sourceRoot":"","sources":["../../../src/combobox/Boolean.attribute.value.normalizer.ts"],"names":[],"mappings":"AACA,wBAAgB,SAAS,CAAC,KAAK,EAAE,GAAG,WAInC"}
+{"version":3,"file":"Boolean.attribute.value.normalizer.d.ts","sourceRoot":"","sources":["../../../src/combobox/Boolean.attribute.value.normalizer.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,wBAAgB,SAAS,CAAC,KAAK,EAAE,GAAG,WAInC"}

package/dist/types/index.d.ts

@@ -1,2 +1,134 @@
 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;
+}
+declare global {
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                'combo-box': React.DetailedHTMLProps<Omit<React.HTMLAttributes<HTMLComboboxElement>, 'defaultValue'>, HTMLComboboxElement> & ComboboxJsxAttributes;
+                'box-option': HTMLComboboxOptionElement;
+                'box-tag': HTMLComboboxTagElement;
+            }
+        }
+    }
+}
 //# sourceMappingURL=index.d.ts.map

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

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

package/dist/types/tsconfig.types.tsbuildinfo

@@ -1 +1 @@
-{"root":["../../src/index.ts","../../src/types.d.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"}
+{"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

@@ -179,13 +179,15 @@ interface ComboboxJsxAttributes {
 
   /** A Boolean attribute indicating that at least one option must be selected. */
   required?: boolean;
+
+  disabled?: boolean;
 }
 
 declare namespace React {
   namespace JSX {
     interface IntrinsicElements {
-      'combo-box': React.DetailedHTMLProps<
-        Omit<React.HTMLAttributes<HTMLComboboxElement>, 'defaultValue'>,
+      // @ts-ignore
+      'combo-box': React.DetailedHTMLProps<Omit<React.HTMLAttributes<HTMLComboboxElement>, 'defaultValue'>,
         HTMLComboboxElement
       > & ComboboxJsxAttributes;
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "kr-elements",
-  "version": "0.0.1-alpha.12",
+  "version": "0.0.1-alpha.14",
   "description": "Custom elements",
   "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 && cp src/types.d.ts dist/types/types.d.ts",
+    "build:combobox": "tsc -b configs/tsconfig.cjs.json configs/tsconfig.esm.json configs/tsconfig.types.json",
     "generate": "node --import tsx ./scripts/genPackageFiles.ts",
     "build": "npm-run-all clean build:combobox generate",
     "check-types": "tsc --noEmit"
@@ -39,5 +39,5 @@
   ],
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
-  "types": "dist/types.d.ts"
+  "types": "dist/types/index.d.ts"
 }