jb-select 6.0.4 → 6.1.0

package/dist/lib/jb-option/jb-option.d.ts

@@ -0,0 +1,21 @@
+import { type JBSelectWebComponent } from '../jb-select';
+export declare class JBOptionWebComponent<TValue> extends HTMLElement {
+    #private;
+    get value(): TValue;
+    set value(value: TValue);
+    set selected(value: boolean);
+    get selected(): boolean;
+    get optionContent(): Node[];
+    get hidden(): boolean;
+    set hidden(value: boolean);
+    /**
+     * return text content of option (it used in search by default to filter option)
+     */
+    get optionContentText(): string;
+    constructor();
+    connectedCallback(): void;
+    setSelectElement(element: JBSelectWebComponent): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}

package/dist/lib/jb-option/render.d.ts

@@ -0,0 +1 @@
+export declare function renderHTML(): string;

package/dist/lib/jb-option/types.d.ts

@@ -0,0 +1,4 @@
+export type JBOptionElements = {
+    componentWrapper: HTMLDivElement;
+    contentWrapper: HTMLDivElement;
+};

package/dist/lib/jb-option-list/jb-option-list.d.ts

@@ -0,0 +1,10 @@
+import { type OptionListCallbacks } from "./types";
+export declare class JBOptionListWebComponent<TOption, TValue> extends HTMLElement {
+    #private;
+    get callbacks(): OptionListCallbacks<TOption, TValue>;
+    get optionList(): TOption[];
+    set optionList(value: TOption[]);
+    constructor();
+    connectedCallback(): void;
+    setCallback<T extends keyof OptionListCallbacks<TOption, TValue>>(key: T, callbackFn: OptionListCallbacks<TOption, TValue>[T]): void;
+}

package/dist/lib/jb-option-list/types.d.ts

@@ -0,0 +1,5 @@
+export type OptionListCallbacks<TOption, TValue> = {
+    getTitle?: (option: TOption) => string;
+    getValue?: (option: TOption) => TValue;
+    getContentDOM?: ((option: TOption) => HTMLElement);
+};

package/dist/lib/jb-select.d.ts

@@ -0,0 +1,59 @@
+import { JBSelectCallbacks, JBSelectElements, ValidationValue } from "./types";
+import { ShowValidationErrorInput, ValidationHelper, type WithValidation } from "jb-validation";
+import { JBFormInputStandards } from 'jb-form';
+/**
+ *  TValue is the type of value we extract from option
+ */
+export declare class JBSelectWebComponent<TValue = any> extends HTMLElement implements WithValidation<ValidationValue<TValue>>, JBFormInputStandards<TValue> {
+    #private;
+    static get formAssociated(): boolean;
+    callbacks: JBSelectCallbacks<TValue>;
+    elements: JBSelectElements;
+    get value(): TValue;
+    set value(value: TValue);
+    get textValue(): string;
+    set textValue(value: string);
+    get selectedOptionTitle(): string;
+    get placeholder(): string;
+    set placeholder(value: string);
+    get searchPlaceholder(): string;
+    set searchPlaceholder(value: string);
+    get isMobileDevice(): boolean;
+    get isOpen(): boolean;
+    get validation(): ValidationHelper<ValidationValue<TValue>>;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    set required(value: boolean);
+    get required(): boolean;
+    /**
+   * @description will determine if component trigger jb-validation mechanism automatically on user event or it just let user-developer handle validation mechanism by himself
+   */
+    get isAutoValidationDisabled(): boolean;
+    get name(): string;
+    initialValue: TValue | null;
+    get isDirty(): boolean;
+    constructor();
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    focus(): void;
+    blur(): void;
+    /**
+     * @description show given string as a error in message place
+     * @public
+     */
+    showValidationError(error: ShowValidationErrorInput | string): void;
+    clearValidationError(): void;
+    /**
+   * @public
+   * @description this method used to check for validity but doesn't show error to user and just return the result
+   * this method used by #internal of component
+   */
+    checkValidity(): boolean;
+    /**
+    * @public
+   * @description this method used to check for validity and show error to user
+   */
+    reportValidity(): boolean;
+    get validationMessage(): string;
+}

package/dist/lib/types.d.ts

@@ -0,0 +1,27 @@
+import type { JBOptionWebComponent } from "./jb-option/jb-option";
+import type { EventTypeWithTarget } from "jb-core";
+import type { JBSelectWebComponent } from "./jb-select";
+export type JBSelectCallbacks<TValue> = {
+    getSelectedValueDOM?: (value: TValue, content: HTMLElement) => HTMLElement;
+};
+export type JBSelectElements = {
+    input: HTMLInputElement;
+    componentWrapper: HTMLDivElement;
+    selectedValueWrapper: HTMLDivElement;
+    messageBox: HTMLDivElement;
+    optionList: HTMLDivElement;
+    optionListWrapper: HTMLDivElement;
+    optionListSlot: HTMLSlotElement;
+    arrowIcon: HTMLDivElement;
+    label: {
+        wrapper: HTMLLabelElement;
+        text: HTMLSpanElement;
+    };
+    emptyListPlaceholder: HTMLDivElement;
+};
+export type ValidationValue<TValue> = {
+    selectedOption: JBOptionWebComponent<TValue> | null;
+    value: TValue | null;
+    inputtedText: string;
+};
+export type JBSelectEventType<TEvent> = EventTypeWithTarget<TEvent, JBSelectWebComponent>;

package/dist/types.d.ts

@@ -0,0 +1,28 @@
+import type { JBOptionWebComponent } from "./jb-option/jb-option";
+import type { EventTypeWithTarget } from "jb-core";
+import type { JBSelectWebComponent } from "./jb-select";
+export type JBSelectCallbacks<TValue> = {
+    getSelectedValueDOM?: (value: TValue, content: HTMLElement) => HTMLElement;
+};
+export type JBSelectElements = {
+    input: HTMLInputElement;
+    componentWrapper: HTMLDivElement;
+    selectedValueWrapper: HTMLDivElement;
+    messageBox: HTMLDivElement;
+    optionList: HTMLDivElement;
+    optionListWrapper: HTMLDivElement;
+    optionListSlot: HTMLSlotElement;
+    arrowIcon: HTMLDivElement;
+    label: {
+        wrapper: HTMLLabelElement;
+        text: HTMLSpanElement;
+    };
+    emptyListPlaceholder: HTMLDivElement;
+};
+export type ValidationValue<TValue> = {
+    selectedOption: JBOptionWebComponent<TValue> | null;
+    value: TValue | null;
+    inputtedText: string;
+};
+export type JBSelectEventType<TEvent> = EventTypeWithTarget<TEvent, JBSelectWebComponent>;
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../lib/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,SAAS,CAAC;AACjD,OAAO,KAAI,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACvD,MAAM,MAAM,iBAAiB,CAAC,MAAM,IAAI;IACpC,mBAAmB,CAAC,EAAC,CAAC,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,KAAK,WAAW,CAAC;CAC1E,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC3B,KAAK,EAAE,gBAAgB,CAAC;IACxB,gBAAgB,EAAE,cAAc,CAAC;IACjC,oBAAoB,EAAE,cAAc,CAAC;IACrC,UAAU,EAAC,cAAc,CAAC;IAC1B,UAAU,EAAE,cAAc,CAAC;IAC3B,iBAAiB,EAAE,cAAc,CAAC;IAClC,cAAc,EAAC,eAAe,CAAC;IAC/B,SAAS,EAAE,cAAc,CAAC;IAC1B,KAAK,EAAC;QACF,OAAO,EAAE,gBAAgB,CAAC;QAC1B,IAAI,EAAE,eAAe,CAAA;KACxB,CAAC;IACF,oBAAoB,EAAE,cAAc,CAAC;CACxC,CAAA;AACD,MAAM,MAAM,eAAe,CAAC,MAAM,IAAI;IAClC,cAAc,EAAC,oBAAoB,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;IACnD,KAAK,EAAC,MAAM,GAAG,IAAI,CAAC;IACpB,YAAY,EAAC,MAAM,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,iBAAiB,CAAC,MAAM,IAAI,mBAAmB,CAAC,MAAM,EAAC,oBAAoB,CAAC,CAAA"}

package/dist/web-component/jb-select/lib/jb-select.d.ts

@@ -1,6 +1,9 @@
 import { JBSelectCallbacks, JBSelectElements, ValidationValue } from "./types";
 import { ShowValidationErrorInput, ValidationHelper, type WithValidation } from "jb-validation";
 import { JBFormInputStandards } from 'jb-form';
+/**
+ *  TValue is the type of value we extract from option
+ */
 export declare class JBSelectWebComponent<TValue = any> extends HTMLElement implements WithValidation<ValidationValue<TValue>>, JBFormInputStandards<TValue> {
     #private;
     static get formAssociated(): boolean;

package/dist/web-component/jb-select/lib/types.d.ts

@@ -1,4 +1,6 @@
-import { type JBOptionWebComponent } from "./jb-option/jb-option";
+import type { JBOptionWebComponent } from "./jb-option/jb-option";
+import type { EventTypeWithTarget } from "jb-core";
+import type { JBSelectWebComponent } from "./jb-select";
 export type JBSelectCallbacks<TValue> = {
     getSelectedValueDOM?: (value: TValue, content: HTMLElement) => HTMLElement;
 };
@@ -22,3 +24,4 @@ export type ValidationValue<TValue> = {
     value: TValue | null;
     inputtedText: string;
 };
+export type JBSelectEventType<TEvent> = EventTypeWithTarget<TEvent, JBSelectWebComponent>;

package/lib/global.d.ts

@@ -0,0 +1,15 @@
+type FileStringModules = {
+    readonly default: string;
+}
+declare module '*.scss' {
+    const value: FileStringModules;
+    export default value;
+}
+declare module '*.html' {
+    const value: FileStringModules;
+    export default value.default;
+}
+declare module '*.svg' {
+    const value: string;
+    export default value;
+}

package/lib/jb-option/jb-option.ts

@@ -4,6 +4,8 @@ import { renderHTML } from "./render";
 import { JBOptionElements } from "./types";
 
 //TODO: check for filter text to set visibility on mount
+//TODO: add disable option (will be displayed but can not be select)
+//TODO: add highlight to highlight the searched value
 export class JBOptionWebComponent<TValue> extends HTMLElement {
 
   #elements: JBOptionElements;
@@ -41,8 +43,10 @@ export class JBOptionWebComponent<TValue> extends HTMLElement {
     this.#hidden = value;
     if(value){
       this.#elements.componentWrapper.classList.add('--hidden');
+      this.setAttribute("inert","");
     }else{
       this.#elements.componentWrapper.classList.remove('--hidden');
+      this.removeAttribute("inert");
     }
   }
   /**
@@ -73,8 +77,8 @@ export class JBOptionWebComponent<TValue> extends HTMLElement {
   }
   #onFilterChange(e: CustomEvent){
     const {filterText} = e.detail;
-    const optionTextContent = this.optionContentText;
-    if(optionTextContent.includes(filterText)){
+    const optionTextContent = this.optionContentText.toLowerCase();
+    if(optionTextContent.includes(filterText.toLowerCase())){
       this.hidden = false;
     }else{
       this.hidden = true;

package/lib/jb-select.scss

@@ -1,4 +1,4 @@
-@use "../../../common/scss/Medias.scss" as *;
+@use "~jb-core/styles/medias.scss" as *;
 
 :host {
     //define private variable here

package/lib/jb-select.ts

@@ -5,13 +5,17 @@ import {
   JBSelectElements,
   ValidationValue,
 } from "./types";
-import { ShowValidationErrorInput, ValidationHelper, type ValidationItem, type ValidationResult, type WithValidation } from "jb-validation";
-import { isMobile } from "../../../common/scripts/device-detection";
+import { ShowValidationErrorParameters, ValidationHelper, type ValidationItem, type ValidationResult, type WithValidation } from "jb-validation";
+import { isMobile } from "jb-core";
 import { JBFormInputStandards } from 'jb-form';
 // eslint-disable-next-line no-duplicate-imports
 import { JBOptionWebComponent } from "./jb-option/jb-option";
-// eslint-disable-next-line no-duplicate-imports
-//TOption is the type of option, TValue is the type of value we extract from option
+
+//TODO: add IncludeInputInList or freeSolo so user can select item that he wrote without even it exist in select list
+//TODO: handleHomeEndKeys to move focus inside the popup with the Home and End keys.
+/**
+ *  TValue is the type of value we extract from option
+ */
 export class JBSelectWebComponent<TValue = any> extends HTMLElement implements WithValidation<ValidationValue<TValue>>, JBFormInputStandards<TValue> {
   static get formAssociated() {
     return true;
@@ -214,6 +218,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
       "required",
       "placeholder",
       "search-placeholder",
+      "error",
     ];
   }
   attributeChangedCallback(name: string, oldValue: string, newValue: string) {
@@ -249,6 +254,9 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
       case "search-placeholder":
         this.searchPlaceholder = value;
         break;
+      case "error":
+        this.reportValidity();
+        break;
     }
   }
   /**
@@ -527,7 +535,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
    * @description show given string as a error in message place
    * @public
    */
-  showValidationError(error: ShowValidationErrorInput | string) {
+  showValidationError(error: ShowValidationErrorParameters | string) {
     const message = typeof error == "string" ? error : error.message;
     this.elements.messageBox.innerHTML = message;
     this.elements.messageBox.classList.add("--error");
@@ -569,11 +577,18 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
     return selectedOptionDom;
   }
   #getInsideValidation() {
-    const ValidationList: ValidationItem<ValidationValue<TValue>>[] = [];
+    const validationList: ValidationItem<ValidationValue<TValue>>[] = [];
+    if(this.getAttribute("error") !== null && this.getAttribute("error").trim().length > 0){
+      validationList.push({
+        validator: undefined,
+        message: this.getAttribute("error"),
+        stateType: "customError"
+      });
+    }
     if (this.required) {
       const label = this.getAttribute("label") || "";
       const message = `${label} حتما باید انتخاب شود`;
-      ValidationList.push({
+      validationList.push({
         validator: ({ value }) => {
           return value !== null && value !== undefined;
         },
@@ -581,7 +596,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
         stateType: "valueMissing"
       });
     }
-    return ValidationList;
+    return validationList;
   }
   //
   #checkValidity(showError: boolean) {

package/lib/types.ts

@@ -1,5 +1,6 @@
-import { type JBOptionWebComponent } from "./jb-option/jb-option";
-
+import type { JBOptionWebComponent } from "./jb-option/jb-option";
+import type {EventTypeWithTarget} from "jb-core";
+import type{ JBSelectWebComponent } from "./jb-select";
 export type JBSelectCallbacks<TValue> = {
     getSelectedValueDOM?:(value:TValue,content:HTMLElement) => HTMLElement;
 }
@@ -23,4 +24,6 @@ export type ValidationValue<TValue> = {
     selectedOption:JBOptionWebComponent<TValue> | null,
     value:TValue | null,
     inputtedText:string
-}
+}
+
+export type JBSelectEventType<TEvent> = EventTypeWithTarget<TEvent,JBSelectWebComponent>

package/package.json

@@ -10,9 +10,12 @@
     "jb",
     "jb-select",
     "select",
-    "web component"
+    "autocomplete",
+    "dropdown",
+    "web component",
+    "react component"
   ],
-  "version": "6.0.4",
+  "version": "6.1.0",
   "bugs": "https://github.com/javadbat/jb-select/issues",
   "license": "MIT",
   "files": [
@@ -23,14 +26,15 @@
     "react/",
     "react/dist/"
   ],
-  "types": "./dist/web-component/jb-select/lib/index.d.ts",
+  "types": "./dist/index.d.ts",
   "main": "index.js",
   "repository": {
 		"type": "git",
 		"url": "git@github.com:javadbat/jb-select.git"
   },
   "dependencies": {
-    "jb-validation": ">=0.2.0"
+    "jb-validation": ">=0.4.0",
+    "jb-core":">=0.4.0"
   },
   "devDependencies": {
     "jb-form":">=0.6.10"

package/react/README.md

@@ -19,7 +19,7 @@ import {JBSelect} from 'jb-select/react';
 <JBSelect></JBSelect>
 ```
 
-### label
+## label
 use label property to describe your select component.
 
 ```jsx
@@ -120,7 +120,7 @@ render(){
 }
 ```
 
-### Add Icon or Any Element into box
+## Add Icon or Any Element into box
 
 sometimes you want to add icon into the select box before value box.
 you can customize this entire section by adding a div or any other Tag with the `slot="start-section"`
@@ -135,56 +135,16 @@ like the example the below:
 </JBSelect>
 ```
 
-### set custom style
-
-in some cases in your project you need to change defualt style of the component for example you need zero margin or different border-radius and etc.    
-if you want to set a custom style to this component all you need is to set css variable.
-| css variable name                         | description                                                                                   |
-| -------------                             | -------------                                                                                 |
-| --jb-select-margin                        | web-component margin default is `0 0`                                                      |
-| --jb-select-width                         | change the select component width default is `100%`                                           |
-| --jb-select-border-radius                 | web-component border-radius defualt is `16px`                                                 |
-| --jb-select-border-color                  | border color of select in normal mode                                                         |
-| --jb-select-border-color-selected         | border color when user select a value from list                                               |
-| --jb-select-bgcolor                       | background color of input                                                                     |
-| --jb-select-overlay-bgcolor               | background of select overlay when open in mobile and tablet screen                            |
-| --jb-select-list-max-height               | max height of option list                                                                     |
-| --jb-select-border-bottom-width           | width of border bottom                                                                        |
-| --jb-select-border-width                  | width of border                                                                               |
-| --jb-select-label-color                   | color of label default is `#1f1735`                                                           |
-| --jb-input-label-font-size                | label font size default is `0.8em`                                                            |
-| --jb-input-label-font-weight              | color of label defualt is `#1f1735`                                                           |
-| --jb-select-option-color                  | change option text color                                                                      |
-| --jb-select-option-color-hover            | change option text color on hover                                                             |
-| --jb-select-option-background-color       | background of options default is `transparent`                                                |
-| --jb-select-option-background-color-hover | background of options on mouse hover default is `#1073db`                                     |
-| --jb-select-input-color                   | color of input value                                                                          |
-| --jb-select-bgcolor-selected              | set background color for selected status                                                      |
-| --jb-select-selected-value-color          | selected value text color default is `#1f1735`                                                |
-| --jb-select-selected-value-font-size      | font-size of selected value default is `1.1rem`                                               |
-| --jb-select-message-color                 | message text color default is `#929292`                                                       |
-| --jb-select-message-font-size             | font size of message default is `0.7em`                                                       |
-| --jb-select-message-font-weight           | font weight of message box default is `normal`                                                |
-| --jb-select-placeholder-color             | placeholder color default is `initial`                                                        |
-| --jb-select-placeholder-font-size         | placeholder font-size default is `1.1em`                                                      |
-| --jb-select-height                        | jb-select box height                                                                          |
-| --jb-select-mobile-search-input-height    | when user open select on mobile there is a search box input this var will set its height      |
-| --jb-select-mobile-item-list-margin       | when user open select on mobile there is gap between search box & list that can be customized |
-| --jb-select-list-padding                  | padding of opened list box default is `16px 0`                                                |
-| --jb-select-close-bg-color                | close button bg-color default is `#1f1735`                                                    |
-| --jb-select-close-x-color                 | close button x color default is `#fff`                                                        |
-| --jb-select-close-bg-opacity              | close button bg opacity default is `0.4`                                                      |
-| --jb-select-mobile-input-bgcolor          | background color search input when open in mobile                                             |
-| --jb-select-mobile-search-border-width    | when user open select on mobile, search box can have its own border width config              |
-| --jb-select-mobile-search-border-color    | when user open select on mobile, search box can have its own border color config              |
-| --jb-select-mobile-search-border-bottom-width | when user open select on mobile, search box can have its own border bottom width config   |
-| --jb-select-mobile-search-border-bottom-color | when user open select on mobile, search box can have its own border bottom color config   |
-| --jb-select-mobile-search-border-radius    | when user open select on mobile, search box can have its own border radius                   |
-| --jb-select-middle-div-height              | separator line between input and list default is `0px` and hidden but you can cahange it     | 
-| --jb-select-middle-div-color               | change separator line color                                                                  |
-| --jb-select-middle-div-margin              | change seprator line margin                                                                  |
-| --jb-select-middle-div-mobile-margin       | change separator line margin in mobile modal                                                  |
-| --jb-select-middle-div-radius              | change separator line border-radius                                                          |
-| --jb-select-list-scroll-color              | list item scroll color  default is `#c3c3c3`                                                 |
-| --jb-select-list-scroll-border-radius      | list item scroll border-radius default is `4px`                                              |
-| --jb-select-select-box-margin              | margin of internal element called select box that wrapper display element of form in one box |
+## validation
+
+since select has a limited value options, validation have different story here. the only validation i really necessary here is required that indicate if user must select a value before he can move on. so pass `required` prop, then call `checkValidity` function like all other jb web component family. but if you need more customize validation just read [jb-validation](https://github.com/javadbat/jb-validation)
+
+you can also set `error` attribute to pass error directly to the component
+
+```jsx
+<JBSelect error="your error message"></JBSelect>
+```
+
+## set custom style
+
+please read [jb-select](https://github.com/javadbat/jb-select) custom style section.

package/react/dist/JBOption.d.ts

@@ -0,0 +1,19 @@
+import React, { PropsWithChildren } from 'react';
+import { JBOptionWebComponent } from 'jb-select';
+type TValue = any;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'jb-option': JBOptionType;
+        }
+        interface JBOptionType extends React.DetailedHTMLProps<React.HTMLAttributes<JBOptionWebComponent<TValue>>, JBOptionWebComponent<TValue>> {
+            class?: string;
+        }
+    }
+}
+export declare const JBOption: React.ForwardRefExoticComponent<Omit<JBOptionProps<any>, "ref"> & React.RefAttributes<unknown>>;
+type Props<TValue> = {
+    value: TValue;
+};
+export type JBOptionProps<TValue> = PropsWithChildren<JSX.JBOptionType & Props<TValue>>;
+export {};

package/react/dist/JBOptionList.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { JBOptionListWebComponent } from 'jb-select';
+type TOption = any;
+type TValue = any;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'jb-option-list': JBOptionListType;
+        }
+        interface JBOptionListType extends React.DetailedHTMLProps<React.HTMLAttributes<JBOptionListWebComponent<TOption, TValue>>, JBOptionListWebComponent<TOption, TValue>> {
+            class?: string;
+        }
+    }
+}
+export declare const JBOptionList: React.ForwardRefExoticComponent<JBOptionListProps<any, any> & React.RefAttributes<unknown>>;
+export type JBOptionListProps<TOption, TValue> = {
+    optionList: TOption[];
+    getTitle?: (option: TOption) => string;
+    getValue?: (option: TOption) => TValue;
+    getContentDOM?: (option: TOption) => HTMLElement;
+};
+export {};

package/react/dist/JBSelect.d.ts

@@ -0,0 +1,50 @@
+import React, { CSSProperties } from 'react';
+import 'jb-select';
+import { JBSelectWebComponent } from 'jb-select';
+import { EventProps } from './events-hook.js';
+export type JBSelectEventType<T> = T & {
+    target: JBSelectWebComponent;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'jb-select': JBSelectType;
+        }
+        interface JBSelectType extends React.DetailedHTMLProps<React.HTMLAttributes<JBSelectWebComponent>, JBSelectWebComponent> {
+            class?: string;
+            label?: string;
+            name?: string;
+            required?: string | boolean;
+            message?: string;
+            tabindex?: string;
+        }
+    }
+}
+export declare const JBSelect: React.ForwardRefExoticComponent<EventProps & {
+    style?: CSSProperties;
+    label?: string;
+    getSelectedValueDOM?: (option: any) => HTMLElement;
+    value?: any;
+    required?: boolean;
+    message?: string;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    className?: string;
+    children?: React.ReactNode;
+    name?: string;
+    error?: string;
+} & React.RefAttributes<unknown>>;
+export type Props = EventProps & {
+    style?: CSSProperties;
+    label?: string;
+    getSelectedValueDOM?: (option: any) => HTMLElement;
+    value?: any;
+    required?: boolean;
+    message?: string;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    className?: string;
+    children?: React.ReactNode;
+    name?: string;
+    error?: string;
+};

package/react/dist/events-hook.d.ts

@@ -0,0 +1,16 @@
+import { RefObject } from "react";
+import type { JBSelectWebComponent, JBSelectEventType } from 'jb-select';
+export type EventProps = {
+    /**
+     * when component loaded, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount
+     */
+    onLoad?: (e: JBSelectEventType<CustomEvent>) => void;
+    /**
+   * when all property set and ready to use, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount
+   */
+    onInit?: (e: JBSelectEventType<CustomEvent>) => void;
+    onChange?: (e: JBSelectEventType<Event>) => void;
+    onKeyUp?: (e: JBSelectEventType<KeyboardEvent>) => void;
+    onInput?: (e: JBSelectEventType<InputEvent>) => void;
+};
+export declare function useEvents(element: RefObject<JBSelectWebComponent>, props: EventProps): void;