jb-select 6.0.5 → 6.2.0

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/lib/variables.css

@@ -0,0 +1,29 @@
+:host {
+  --p-middle-div-height: var(--jb-select-middle-div-height, 0px);
+  --p-p-color: #1e2832;
+  --p-border-bottom-width: var(--jb-select-border-bottom-width, var(--jb-select-border-width, 3px));
+  --p-base-z-index: 1;
+  --p-mobile-modal-z-index: 900;
+  --p-mobile-modal-height: var(--jb-select-mobile-modal-height, 100vh);
+  /**/
+  --border-color: var(--jb-select-border-color, var(--jb-neutral-10));
+  --message-color: var(--jb-textarea-message-color, var(--jb-text-secondary));
+  --label-color: var(--jb-select-label-color, var(--jb-text-primary));
+  --value-color: var(--jb-textarea-value-color, var(--jb-text-primary));
+  --placeholder-color: var(--jb-input-placeholder-color, var(--jb-neutral-6));
+  --select-box-bg-color: var(--jb-select-bgcolor, var(--jb-neutral-10));
+  --overlay-bg-color:var(--jb-select-overlay-bg-color, oklch(from var(--jb-neutral) l c h / calc(alpha - 0.5)));
+  --modal-label-color:var(--jb-select-modal-label-color, var(--jb-text-contrast));
+  --modal-close-color:var(--jb-select-modal-close-color, var(--jb-white));
+  --close-bg-color:var(--jb-select-close-bg-color, var(--jb-neutral-2));
+  --list-scroll-color:var(--jb-select-list-scroll-color, #c3c3c3);
+  --empty-list-placeholder-color:var(--jb-select-empty-list-placeholder-color, var(--jb-text-secondary))
+}
+
+:host(:state(invalid)) {
+  --message-color: var(--jb-textarea-message-error-color, var(--jb-red));
+}
+
+:host(:focus-within) {
+  --border-color: var(--jb-textarea-border-color-focus, var(--jb-neutral));
+}

package/package.json

@@ -10,9 +10,13 @@
     "jb",
     "jb-select",
     "select",
-    "web component"
+    "autocomplete",
+    "dropdown",
+    "select box",
+    "web component",
+    "react component"
   ],
-  "version": "6.0.5",
+  "version": "6.2.0",
   "bugs": "https://github.com/javadbat/jb-select/issues",
   "license": "MIT",
   "files": [
@@ -23,14 +27,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.8.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;

package/react/dist/index.cjs.js

@@ -1,122 +1,2 @@
-'use strict';
-
-var React = require('react');
-require('jb-select');
-
-/* eslint-disable react/display-name */
-const JBOptionList = React.forwardRef((props, ref) => {
-    const element = React.useRef(null);
-    React.useImperativeHandle(ref, () => (element ? element.current : undefined), [element]);
-    React.useEffect(() => {
-        if (element.current && Array.isArray(props.optionList)) {
-            element.current.optionList = props.optionList;
-        }
-    }, [props.optionList, element]);
-    React.useEffect(() => {
-        if (element.current && typeof props.getTitle == "function") {
-            element.current.setCallback("getTitle", props.getTitle);
-        }
-    }, [props.getTitle, element]);
-    React.useEffect(() => {
-        if (element.current && typeof props.getValue == "function") {
-            element.current.setCallback("getValue", props.getValue);
-        }
-    }, [props.getValue, element]);
-    React.useEffect(() => {
-        if (element.current && typeof props.getContentDOM == "function") {
-            element.current.setCallback("getContentDOM", props.getContentDOM);
-        }
-    }, [props.getContentDOM, element]);
-    return (React.createElement("jb-option-list", { ref: element }));
-});
-JBOptionList.displayName = 'JBOptionList';
-
-function useBindEvent(ref, event, handler, passive = false) {
-    React.useEffect(() => {
-        const dom = ref.current;
-        if (dom) {
-            // initiate the event handler
-            dom.addEventListener(event, handler, passive);
-        }
-        // this will clean up the event every time the component is re-rendered
-        return function cleanup() {
-            if (dom) {
-                dom.removeEventListener(event, handler, passive);
-            }
-        };
-    }, [ref, event, handler, passive]);
-}
-
-/* eslint-disable react/display-name */
-const JBSelect = React.forwardRef((props, ref) => {
-    const element = React.useRef(null);
-    const [refChangeCount, refChangeCountSetter] = React.useState(0);
-    React.useImperativeHandle(ref, () => (element ? element.current : {}), [element]);
-    React.useEffect(() => {
-        refChangeCountSetter(refChangeCount + 1);
-    }, [element.current]);
-    React.useEffect(() => {
-        if (element.current) {
-            element.current.value = props.value;
-        }
-    }, [props.value]);
-    React.useEffect(() => {
-        if (typeof props.getSelectedValueDOM == "function" && element.current && element.current) {
-            element.current.callbacks.getSelectedValueDOM = props.getSelectedValueDOM;
-        }
-    }, [props.getSelectedValueDOM]);
-    React.useEffect(() => {
-        if (props.message !== null && props.message !== undefined) {
-            element.current?.setAttribute("message", props.message);
-        }
-    }, [props.message]);
-    React.useEffect(() => {
-        if (props.placeholder !== null && props.placeholder !== undefined) {
-            element.current?.setAttribute("placeholder", props.placeholder);
-        }
-    }, [props.placeholder]);
-    React.useEffect(() => {
-        if (props.searchPlaceholder !== null && props.searchPlaceholder !== undefined) {
-            element.current?.setAttribute("search-placeholder", props.searchPlaceholder);
-        }
-    }, [props.searchPlaceholder]);
-    function onKeyup(e) {
-        if (typeof props.onKeyup == "function") {
-            props.onKeyup(e);
-        }
-    }
-    function onChange(e) {
-        if (typeof props.onChange == "function") {
-            props.onChange(e);
-        }
-    }
-    function onInput(e) {
-        if (typeof props.onInput == "function") {
-            props.onInput(e);
-        }
-    }
-    useBindEvent(element, 'keyup', onKeyup);
-    useBindEvent(element, 'change', onChange);
-    useBindEvent(element, 'input', onInput);
-    return (React.createElement("jb-select", { style: props.style ? props.style : undefined, class: props.className ? props.className : "", label: props.label, ref: element, required: props.required || 'false', name: props.name ?? undefined }, props.children));
-});
-JBSelect.displayName = 'JBSelect';
-
-/* eslint-disable react/display-name */
-const JBOption = React.forwardRef((props, ref) => {
-    const element = React.useRef(null);
-    const { value, children, className, ...rest } = props;
-    React.useImperativeHandle(ref, () => (element ? element.current : undefined), [element]);
-    React.useEffect(() => {
-        if (element.current && value !== undefined) {
-            element.current.value = value;
-        }
-    }, [value, element]);
-    return (React.createElement("jb-option", { class: className, ref: element, ...rest }, children));
-});
-JBOption.displayName = 'JBOption';
-
-exports.JBOption = JBOption;
-exports.JBOptionList = JBOptionList;
-exports.JBSelect = JBSelect;
-//# sourceMappingURL=index.cjs.js.map
+"use strict";var e=Object.create,t=Object.defineProperty,r=Object.getOwnPropertyDescriptor,l=Object.getOwnPropertyNames,u=Object.getPrototypeOf,n=Object.prototype.hasOwnProperty,c=(e,u,c,a)=>{if(u&&"object"==typeof u||"function"==typeof u)for(var o,s=l(u),i=0,f=s.length;i<f;i++)o=s[i],n.call(e,o)||o===c||t(e,o,{get:(e=>u[e]).bind(null,o),enumerable:!(a=r(u,o))||a.enumerable});return e},a=(r,l,n)=>(n=null!=r?e(u(r)):{},c(!l&&r&&r.__esModule?n:t(n,"default",{value:r,enumerable:!0}),r));const o=a(require("react"));require("jb-select");const s=a(require("jb-core/react")),i=o.default.forwardRef((e,t)=>{let r=(0,o.useRef)(null);return(0,o.useImperativeHandle)(t,()=>r?r.current:void 0,[r]),(0,o.useEffect)(()=>{r.current&&Array.isArray(e.optionList)&&(r.current.optionList=e.optionList)},[e.optionList,r]),(0,o.useEffect)(()=>{r.current&&"function"==typeof e.getTitle&&r.current.setCallback("getTitle",e.getTitle)},[e.getTitle,r]),(0,o.useEffect)(()=>{r.current&&"function"==typeof e.getValue&&r.current.setCallback("getValue",e.getValue)},[e.getValue,r]),(0,o.useEffect)(()=>{r.current&&"function"==typeof e.getContentDOM&&r.current.setCallback("getContentDOM",e.getContentDOM)},[e.getContentDOM,r]),o.default.createElement("jb-option-list",{ref:r})});i.displayName="JBOptionList";const f=o.default.forwardRef((e,t)=>{let r=(0,o.useRef)(null),[l,u]=(0,o.useState)(0);return(0,o.useImperativeHandle)(t,()=>r?r.current:{},[r]),(0,o.useEffect)(()=>{u(l+1)},[r.current]),(0,o.useEffect)(()=>{r.current&&(r.current.value=e.value)},[e.value]),(0,o.useEffect)(()=>{"function"==typeof e.getSelectedValueDOM&&r.current&&r.current&&(r.current.callbacks.getSelectedValueDOM=e.getSelectedValueDOM)},[e.getSelectedValueDOM]),(0,o.useEffect)(()=>{null!==e.message&&void 0!==e.message&&r.current?.setAttribute("message",e.message)},[e.message]),(0,o.useEffect)(()=>{null!==e.placeholder&&void 0!==e.placeholder&&r.current?.setAttribute("placeholder",e.placeholder)},[e.placeholder]),(0,o.useEffect)(()=>{null!==e.searchPlaceholder&&void 0!==e.searchPlaceholder&&r.current?.setAttribute("search-placeholder",e.searchPlaceholder)},[e.searchPlaceholder]),(0,o.useEffect)(()=>{e.error?r?.current?.setAttribute("error",e.error):r?.current?.removeAttribute("error")},[e.error]),(0,s.useEvent)(r,"load",e.onLoad,!0),(0,s.useEvent)(r,"init",e.onInit,!0),(0,s.useEvent)(r,"keyup",e.onKeyUp),(0,s.useEvent)(r,"change",e.onChange),(0,s.useEvent)(r,"input",e.onInput),o.default.createElement("jb-select",{style:e.style?e.style:void 0,class:e.className?e.className:"",label:e.label,ref:r,required:e.required||"false",name:e.name??void 0},e.children)});f.displayName="JBSelect";const d=o.default.forwardRef((e,t)=>{let r=(0,o.useRef)(null),{value:l,children:u,className:n,...c}=e;return(0,o.useImperativeHandle)(t,()=>r?r.current:void 0,[r]),(0,o.useEffect)(()=>{r.current&&void 0!==l&&(r.current.value=l)},[l,r]),o.default.createElement("jb-option",{class:n,ref:r,...c},u)});d.displayName="JBOption",exports.JBOption=d,exports.JBOptionList=i,exports.JBSelect=f;
+//# sourceMappingURL=index.cjs.js.map

package/react/dist/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../lib/JBOptionList.tsx","../../../../common/hooks/use-event.ts","../lib/JBSelect.tsx","../lib/JBOption.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\r\nimport React, { useEffect, useRef, useImperativeHandle } from 'react';\r\n// eslint-disable-next-line no-duplicate-imports\r\nimport { JBOptionListWebComponent } from 'jb-select';\r\ntype TOption = any;\r\ntype TValue = any;\r\n\r\ndeclare global {\r\n  // eslint-disable-next-line @typescript-eslint/no-namespace\r\n  namespace JSX {\r\n    interface IntrinsicElements {\r\n      'jb-option-list': JBOptionListType;\r\n    }\r\n    interface JBOptionListType extends React.DetailedHTMLProps<React.HTMLAttributes<JBOptionListWebComponent<TOption, TValue>>, JBOptionListWebComponent<TOption, TValue>> {\r\n      class?: string,\r\n      // ref:React.RefObject<JBDateInputWebComponent>,\r\n    }\r\n  }\r\n}\r\nexport const JBOptionList = React.forwardRef((props: JBOptionListProps<TOption,TValue>, ref) => {\r\n  const element = useRef<JBOptionListWebComponent<TOption, TValue>>(null);\r\n  useImperativeHandle(\r\n    ref,\r\n    () => (element ? element.current : undefined),\r\n    [element],\r\n  );\r\n  useEffect(() => {\r\n    if (element.current && Array.isArray(props.optionList)) {\r\n      element.current.optionList = props.optionList;\r\n    }\r\n  }, [props.optionList, element]);\r\n  useEffect(() => {\r\n    if (element.current && typeof props.getTitle == \"function\") {\r\n      element.current.setCallback(\"getTitle\",props.getTitle);\r\n    }\r\n  }, [props.getTitle, element]);\r\n  useEffect(() => {\r\n    if (element.current && typeof props.getValue == \"function\") {\r\n      element.current.setCallback(\"getValue\",props.getValue);\r\n    }\r\n  }, [props.getValue, element]);\r\n  useEffect(() => {\r\n    if (element.current && typeof props.getContentDOM == \"function\") {\r\n      element.current.setCallback(\"getContentDOM\",props.getContentDOM);\r\n    }\r\n  }, [props.getContentDOM, element]);\r\n  return (\r\n    <jb-option-list ref={element}>\r\n    </jb-option-list>\r\n  );\r\n});\r\n\r\nexport type JBOptionListProps<TOption,TValue> = {\r\n  optionList: TOption[],\r\n  getTitle?: (option: TOption) => string,\r\n  getValue?: (option: TOption) => TValue,\r\n  getContentDOM?: (option: TOption) => HTMLElement,\r\n}\r\nJBOptionList.displayName = 'JBOptionList';","import { useEffect } from \"react\";\r\n\r\nexport function useEvent(dom:HTMLElement, event:any, handler:any, passive = false) {\r\n  useEffect(() => {\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  });\r\n}\r\nexport function useBindEvent<TRef extends React.MutableRefObject<any|null>,TEvent>(ref:TRef, event:string, handler:(e:TEvent)=>void, passive = false) {\r\n  useEffect(() => {\r\n    const dom = ref.current;\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  },[ref,event,handler,passive]);\r\n}","/* eslint-disable react/display-name */\r\nimport React, { useEffect, useRef, useState, useImperativeHandle,CSSProperties } from 'react';\r\nimport 'jb-select';\r\nimport { useBindEvent } from '../../../../common/hooks/use-event.js';\r\n// eslint-disable-next-line no-duplicate-imports\r\nimport { JBSelectWebComponent } from 'jb-select';\r\nexport type JBSelectEventType<T> = T & {\r\n    target: JBSelectWebComponent\r\n}\r\ndeclare global {\r\n    // eslint-disable-next-line @typescript-eslint/no-namespace\r\n    namespace JSX {\r\n      interface IntrinsicElements {\r\n        'jb-select': JBSelectType;\r\n      }\r\n      interface JBSelectType extends React.DetailedHTMLProps<React.HTMLAttributes<JBSelectWebComponent>, JBSelectWebComponent> {\r\n        class?:string,\r\n        label?: string,\r\n        name?:string,\r\n        required?:string | boolean,\r\n        message?:string,\r\n        tabindex?:string,\r\n        // ref:React.RefObject<JBDateInputWebComponent>,\r\n      }\r\n    }\r\n}\r\n\r\nexport const JBSelect = React.forwardRef((props:JBSelectProps, ref) => {\r\n  const element = useRef<JBSelectWebComponent>(null);\r\n  const [refChangeCount, refChangeCountSetter] = useState(0);\r\n  useImperativeHandle(\r\n    ref,\r\n    () => (element ? element.current : {}),\r\n    [element],\r\n  );\r\n  useEffect(() => {\r\n    refChangeCountSetter(refChangeCount + 1);\r\n  }, [element.current]);\r\n  useEffect(() => {\r\n    if(element.current){\r\n      element.current.value = props.value;\r\n    }\r\n  }, [props.value]);\r\n  useEffect(() => {\r\n    if (typeof props.getSelectedValueDOM == \"function\" && element.current && element.current) {\r\n      element.current.callbacks.getSelectedValueDOM = props.getSelectedValueDOM;\r\n    }\r\n  }, [props.getSelectedValueDOM]);\r\n  useEffect(() => {\r\n    if (props.message !== null && props.message !== undefined ) {\r\n      element.current?.setAttribute(\"message\", props.message);\r\n    }\r\n  }, [props.message]);\r\n  useEffect(() => {\r\n    if (props.placeholder !== null && props.placeholder !== undefined) {\r\n      element.current?.setAttribute(\"placeholder\", props.placeholder);\r\n    }\r\n  }, [props.placeholder]);\r\n  useEffect(() => {\r\n    if (props.searchPlaceholder !== null && props.searchPlaceholder !== undefined) {\r\n      element.current?.setAttribute(\"search-placeholder\", props.searchPlaceholder);\r\n    }\r\n  }, [props.searchPlaceholder]);\r\n  function onKeyup(e:JBSelectEventType<KeyboardEvent>) {\r\n    if ( typeof props.onKeyup == \"function\") {\r\n      props.onKeyup(e);\r\n    }\r\n  }\r\n  function onChange(e:JBSelectEventType<Event>) {\r\n    if (typeof props.onChange ==\"function\") {\r\n      props.onChange(e);\r\n    }\r\n  }\r\n  function onInput(e:JBSelectEventType<InputEvent>) {\r\n    if (typeof props.onInput == \"function\") {\r\n      props.onInput(e);\r\n    }\r\n  }\r\n  useBindEvent(element, 'keyup', onKeyup);\r\n  useBindEvent(element, 'change', onChange);\r\n  useBindEvent(element, 'input', onInput);\r\n  return (\r\n    <jb-select style={props.style?props.style:undefined} class={props.className?props.className:\"\"} label={props.label} ref={element} required={props.required || 'false'} name={props.name??undefined}>\r\n      {props.children}\r\n    </jb-select>\r\n  );\r\n});\r\n\r\nexport type JBSelectProps = {\r\n    style?:CSSProperties,\r\n    label?: string,\r\n    getSelectedValueDOM?: (option:any)=>HTMLElement,\r\n    value?: any,\r\n    onChange?: (e:JBSelectEventType<Event>)=>void,\r\n    onKeyup?: (e:JBSelectEventType<KeyboardEvent>)=>void,\r\n    onInput?: (e:JBSelectEventType<InputEvent>)=>void,\r\n    required?: boolean,\r\n    message?: string,\r\n    placeholder?: string,\r\n    searchPlaceholder?: string,\r\n    className?: string,\r\n    children?:React.ReactNode,\r\n    name?:string\r\n}\r\nJBSelect.displayName = 'JBSelect';","/* eslint-disable react/display-name */\r\nimport React, { useEffect, useRef, useImperativeHandle, PropsWithChildren, ComponentProps } from 'react';\r\nimport { JBOptionWebComponent } from 'jb-select';\r\n//TODO: make it generic when remove forward ref\r\ntype TValue = any;\r\n\r\ndeclare global {\r\n  // eslint-disable-next-line @typescript-eslint/no-namespace\r\n  namespace JSX {\r\n    interface IntrinsicElements {\r\n      'jb-option': JBOptionType;\r\n    }\r\n    interface JBOptionType extends React.DetailedHTMLProps<React.HTMLAttributes<JBOptionWebComponent<TValue>>, JBOptionWebComponent<TValue>> {\r\n      class?: string,\r\n    }\r\n  }\r\n}\r\nexport const JBOption = React.forwardRef((props: JBOptionProps<TValue>, ref) => {\r\n  const element = useRef<JBOptionWebComponent<TValue>>(null);\r\n  const {value,children,className, ...rest} = props;\r\n  useImperativeHandle(\r\n    ref,\r\n    () => (element ? element.current : undefined),\r\n    [element],\r\n  );\r\n  \r\n  useEffect(() => {\r\n    if (element.current && value !== undefined) {\r\n      element.current.value = value;\r\n    }\r\n  }, [value, element]);\r\n\r\n  return (\r\n    <jb-option class={className} ref={element} {...rest}>\r\n      {children}\r\n    </jb-option>\r\n  );\r\n});\r\n\r\ntype Props<TValue> = {\r\n  value:TValue\r\n}\r\n\r\nexport type JBOptionProps<TValue> = PropsWithChildren<JSX.JBOptionType & Props<TValue>>\r\nJBOption.displayName = 'JBOption';"],"names":["useRef","useImperativeHandle","useEffect","useState"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","names":[],"sources":["../lib/JBOptionList.tsx","../lib/events-hook.ts","../lib/JBSelect.tsx","../lib/JBOption.tsx"],"sourcesContent":["","","",""],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;MACY,6BAAuB,cAAA,WAAqB,CAAA,OAAM,QAAO;CAkBrE,MAAO,UAAM,kBAAY,KAAG;AAC1B,gCAAgB,KAAkD,MAAK,UAAA,QAAA,UAAA,WAAA,CACvE,OAKA,EAAA;sBACM,MAAA;MACF,QAAQ,WAAQ,MAAA,QAAa,MAAM,WAAU,CAC/C,SAAA,QAAA,aAAA,MAAA;CAEF,GAAA,CACE,MAAI;AAGN,sBAAU,MAAA;AACV,MAAA,QAAe,kBAAA,MAAA,YAAA,WACT,SAAQ,QAAO,YAAW,YAAc,MAAI,SAAU;KAGxD,MAAM,UACV;sBAEI,MAAA;AACF,MAAA,QAAA,kBAAA,MAAA,YAAA,WACE,SAAM,QAAa,YAAW,YAAA,MAAA,SAAA;CAKlC,GAAA,CAQF,MAAa;;;;;;;;;;ACzCP,SAAU,UAAU,SAA0C,OAAiB;AACnF,6BAAS,SAAS,QAAQ,MAAM,QAAQ,KAAK;AAC7C,6BAAS,SAAS,QAAQ,MAAM,QAAQ,KAAK;AAC7C,6BAAS,SAAS,SAAS,MAAM,QAAQ;AACzC,6BAAS,SAAS,UAAU,MAAM,SAAS;AAC3C,6BAAS,SAAS,SAAS,MAAM,QAAQ;AAC3C;;;;MClBqB,yBAAiB,cAAkB,WAAA,CAAA,OAAA,QAAA;CAsBxD,MAAO,UAAM,kBAAW,KAAM;CAC5B,MAAM,CAAA,gBAAuC,qBAAK,GAAA,oBAAA,EAAA;AAClD,gCAAO,KAAgB,MAAA,UAAA,QAAwB,UAAU,CAAC,GAAA,CAC1D,OAKA,EAAA;sBACE,MAAA;AACE,uBAAiB,iBAAA,EAAA;CACrB,GAAA,CACE,QAAG;sBAEH,MAAA;AACE,MAAA,QAAY,QAChB,SAAe,QAAA,QAAA,MAAA;KAGb,MAAA,KACD,EAAA;AACD,sBAAU,MAAG;AACX,aAAU,MAAO,uBAAmB,cAAY,QAAY,WAAA,QAAA,QAC1D,SAAQ,QAAO,UAAE,sBAA8B,MAAO;CAEzD,GAAE,CACH,MAAU;sBAEN,MAAA;AACF,MAAA,MAAA,YAAA,QAAA,MAAA,YAAA,UACE,SAAM,SAAa,aAAA,WAAA,MAAA,QAAA;WAGnB;AAEJ,sBAAU,MAAA;AACV,MAAA,MAAa,gBAAE,QAAA,MAAA,gBAAA,UACT,SAAM,SAAO,aAAA,eAAA,MAAA,YAAA;WAEV;sBAEP,MAAA;AACE,MAAA,MAAM,sBAAO,QAAA,MAAA,sBAAA,UACjB,SAAU,SAAc,aAAA,sBAAA,MAAA,kBAAA;CAMxB,GAAA,CAgBM,MAAC;;;;;;;;;;;;;;;;;;;MC3FG,yBAAuB,cAAA,WAAmB,CAAqC,OAAM,QAAO;CAgBxG,MAAO,UAAM,kBAAW,KAAM;CAC5B,MAAM,EAAA,OAAO,UAAwC,UAAK,GAAA,MAAA,GAAA;AAC1D,gCAAa,KAAS,MAAA,UAAc,QAAK,UAAQ,WAAA,CACjD,OAMA,EAAA;sBACM,MAAA;MACF,QAAQ,WAAQ,UAAa,UAC/B,SAAA,QAAA,QAAA;CAGF,GAAA,CAKA,OAOM"}

package/react/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './JBOptionList.js';
+export * from './JBSelect.js';
+export * from './JBOption.js';

package/react/dist/index.js

@@ -1,118 +1,2 @@
-import React, { useRef, useImperativeHandle, useEffect, useState } from 'react';
-import 'jb-select';
-
-/* eslint-disable react/display-name */
-const JBOptionList = React.forwardRef((props, ref) => {
-    const element = useRef(null);
-    useImperativeHandle(ref, () => (element ? element.current : undefined), [element]);
-    useEffect(() => {
-        if (element.current && Array.isArray(props.optionList)) {
-            element.current.optionList = props.optionList;
-        }
-    }, [props.optionList, element]);
-    useEffect(() => {
-        if (element.current && typeof props.getTitle == "function") {
-            element.current.setCallback("getTitle", props.getTitle);
-        }
-    }, [props.getTitle, element]);
-    useEffect(() => {
-        if (element.current && typeof props.getValue == "function") {
-            element.current.setCallback("getValue", props.getValue);
-        }
-    }, [props.getValue, element]);
-    useEffect(() => {
-        if (element.current && typeof props.getContentDOM == "function") {
-            element.current.setCallback("getContentDOM", props.getContentDOM);
-        }
-    }, [props.getContentDOM, element]);
-    return (React.createElement("jb-option-list", { ref: element }));
-});
-JBOptionList.displayName = 'JBOptionList';
-
-function useBindEvent(ref, event, handler, passive = false) {
-    useEffect(() => {
-        const dom = ref.current;
-        if (dom) {
-            // initiate the event handler
-            dom.addEventListener(event, handler, passive);
-        }
-        // this will clean up the event every time the component is re-rendered
-        return function cleanup() {
-            if (dom) {
-                dom.removeEventListener(event, handler, passive);
-            }
-        };
-    }, [ref, event, handler, passive]);
-}
-
-/* eslint-disable react/display-name */
-const JBSelect = React.forwardRef((props, ref) => {
-    const element = useRef(null);
-    const [refChangeCount, refChangeCountSetter] = useState(0);
-    useImperativeHandle(ref, () => (element ? element.current : {}), [element]);
-    useEffect(() => {
-        refChangeCountSetter(refChangeCount + 1);
-    }, [element.current]);
-    useEffect(() => {
-        if (element.current) {
-            element.current.value = props.value;
-        }
-    }, [props.value]);
-    useEffect(() => {
-        if (typeof props.getSelectedValueDOM == "function" && element.current && element.current) {
-            element.current.callbacks.getSelectedValueDOM = props.getSelectedValueDOM;
-        }
-    }, [props.getSelectedValueDOM]);
-    useEffect(() => {
-        if (props.message !== null && props.message !== undefined) {
-            element.current?.setAttribute("message", props.message);
-        }
-    }, [props.message]);
-    useEffect(() => {
-        if (props.placeholder !== null && props.placeholder !== undefined) {
-            element.current?.setAttribute("placeholder", props.placeholder);
-        }
-    }, [props.placeholder]);
-    useEffect(() => {
-        if (props.searchPlaceholder !== null && props.searchPlaceholder !== undefined) {
-            element.current?.setAttribute("search-placeholder", props.searchPlaceholder);
-        }
-    }, [props.searchPlaceholder]);
-    function onKeyup(e) {
-        if (typeof props.onKeyup == "function") {
-            props.onKeyup(e);
-        }
-    }
-    function onChange(e) {
-        if (typeof props.onChange == "function") {
-            props.onChange(e);
-        }
-    }
-    function onInput(e) {
-        if (typeof props.onInput == "function") {
-            props.onInput(e);
-        }
-    }
-    useBindEvent(element, 'keyup', onKeyup);
-    useBindEvent(element, 'change', onChange);
-    useBindEvent(element, 'input', onInput);
-    return (React.createElement("jb-select", { style: props.style ? props.style : undefined, class: props.className ? props.className : "", label: props.label, ref: element, required: props.required || 'false', name: props.name ?? undefined }, props.children));
-});
-JBSelect.displayName = 'JBSelect';
-
-/* eslint-disable react/display-name */
-const JBOption = React.forwardRef((props, ref) => {
-    const element = useRef(null);
-    const { value, children, className, ...rest } = props;
-    useImperativeHandle(ref, () => (element ? element.current : undefined), [element]);
-    useEffect(() => {
-        if (element.current && value !== undefined) {
-            element.current.value = value;
-        }
-    }, [value, element]);
-    return (React.createElement("jb-option", { class: className, ref: element, ...rest }, children));
-});
-JBOption.displayName = 'JBOption';
-
-export { JBOption, JBOptionList, JBSelect };
-//# sourceMappingURL=index.js.map
+import e,{useEffect as t,useImperativeHandle as r,useRef as l,useState as n}from"react";import"jb-select";import{useEvent as a}from"jb-core/react";let o=e.forwardRef((n,a)=>{let o=l(null);return r(a,()=>o?o.current:void 0,[o]),t(()=>{o.current&&Array.isArray(n.optionList)&&(o.current.optionList=n.optionList)},[n.optionList,o]),t(()=>{o.current&&"function"==typeof n.getTitle&&o.current.setCallback("getTitle",n.getTitle)},[n.getTitle,o]),t(()=>{o.current&&"function"==typeof n.getValue&&o.current.setCallback("getValue",n.getValue)},[n.getValue,o]),t(()=>{o.current&&"function"==typeof n.getContentDOM&&o.current.setCallback("getContentDOM",n.getContentDOM)},[n.getContentDOM,o]),e.createElement("jb-option-list",{ref:o})});o.displayName="JBOptionList";let c=e.forwardRef((o,c)=>{let u=l(null),[i,s]=n(0);return r(c,()=>u?u.current:{},[u]),t(()=>{s(i+1)},[u.current]),t(()=>{u.current&&(u.current.value=o.value)},[o.value]),t(()=>{"function"==typeof o.getSelectedValueDOM&&u.current&&u.current&&(u.current.callbacks.getSelectedValueDOM=o.getSelectedValueDOM)},[o.getSelectedValueDOM]),t(()=>{null!==o.message&&void 0!==o.message&&u.current?.setAttribute("message",o.message)},[o.message]),t(()=>{null!==o.placeholder&&void 0!==o.placeholder&&u.current?.setAttribute("placeholder",o.placeholder)},[o.placeholder]),t(()=>{null!==o.searchPlaceholder&&void 0!==o.searchPlaceholder&&u.current?.setAttribute("search-placeholder",o.searchPlaceholder)},[o.searchPlaceholder]),t(()=>{o.error?u?.current?.setAttribute("error",o.error):u?.current?.removeAttribute("error")},[o.error]),a(u,"load",o.onLoad,!0),a(u,"init",o.onInit,!0),a(u,"keyup",o.onKeyUp),a(u,"change",o.onChange),a(u,"input",o.onInput),e.createElement("jb-select",{style:o.style?o.style:void 0,class:o.className?o.className:"",label:o.label,ref:u,required:o.required||"false",name:o.name??void 0},o.children)});c.displayName="JBSelect";let u=e.forwardRef((n,a)=>{let o=l(null),{value:c,children:u,className:i,...s}=n;return r(a,()=>o?o.current:void 0,[o]),t(()=>{o.current&&void 0!==c&&(o.current.value=c)},[c,o]),e.createElement("jb-option",{class:i,ref:o,...s},u)});u.displayName="JBOption";export{u as JBOption,o as JBOptionList,c as JBSelect};
+//# sourceMappingURL=index.js.map

package/react/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../lib/JBOptionList.tsx","../../../../common/hooks/use-event.ts","../lib/JBSelect.tsx","../lib/JBOption.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\r\nimport React, { useEffect, useRef, useImperativeHandle } from 'react';\r\n// eslint-disable-next-line no-duplicate-imports\r\nimport { JBOptionListWebComponent } from 'jb-select';\r\ntype TOption = any;\r\ntype TValue = any;\r\n\r\ndeclare global {\r\n  // eslint-disable-next-line @typescript-eslint/no-namespace\r\n  namespace JSX {\r\n    interface IntrinsicElements {\r\n      'jb-option-list': JBOptionListType;\r\n    }\r\n    interface JBOptionListType extends React.DetailedHTMLProps<React.HTMLAttributes<JBOptionListWebComponent<TOption, TValue>>, JBOptionListWebComponent<TOption, TValue>> {\r\n      class?: string,\r\n      // ref:React.RefObject<JBDateInputWebComponent>,\r\n    }\r\n  }\r\n}\r\nexport const JBOptionList = React.forwardRef((props: JBOptionListProps<TOption,TValue>, ref) => {\r\n  const element = useRef<JBOptionListWebComponent<TOption, TValue>>(null);\r\n  useImperativeHandle(\r\n    ref,\r\n    () => (element ? element.current : undefined),\r\n    [element],\r\n  );\r\n  useEffect(() => {\r\n    if (element.current && Array.isArray(props.optionList)) {\r\n      element.current.optionList = props.optionList;\r\n    }\r\n  }, [props.optionList, element]);\r\n  useEffect(() => {\r\n    if (element.current && typeof props.getTitle == \"function\") {\r\n      element.current.setCallback(\"getTitle\",props.getTitle);\r\n    }\r\n  }, [props.getTitle, element]);\r\n  useEffect(() => {\r\n    if (element.current && typeof props.getValue == \"function\") {\r\n      element.current.setCallback(\"getValue\",props.getValue);\r\n    }\r\n  }, [props.getValue, element]);\r\n  useEffect(() => {\r\n    if (element.current && typeof props.getContentDOM == \"function\") {\r\n      element.current.setCallback(\"getContentDOM\",props.getContentDOM);\r\n    }\r\n  }, [props.getContentDOM, element]);\r\n  return (\r\n    <jb-option-list ref={element}>\r\n    </jb-option-list>\r\n  );\r\n});\r\n\r\nexport type JBOptionListProps<TOption,TValue> = {\r\n  optionList: TOption[],\r\n  getTitle?: (option: TOption) => string,\r\n  getValue?: (option: TOption) => TValue,\r\n  getContentDOM?: (option: TOption) => HTMLElement,\r\n}\r\nJBOptionList.displayName = 'JBOptionList';","import { useEffect } from \"react\";\r\n\r\nexport function useEvent(dom:HTMLElement, event:any, handler:any, passive = false) {\r\n  useEffect(() => {\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  });\r\n}\r\nexport function useBindEvent<TRef extends React.MutableRefObject<any|null>,TEvent>(ref:TRef, event:string, handler:(e:TEvent)=>void, passive = false) {\r\n  useEffect(() => {\r\n    const dom = ref.current;\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  },[ref,event,handler,passive]);\r\n}","/* eslint-disable react/display-name */\r\nimport React, { useEffect, useRef, useState, useImperativeHandle,CSSProperties } from 'react';\r\nimport 'jb-select';\r\nimport { useBindEvent } from '../../../../common/hooks/use-event.js';\r\n// eslint-disable-next-line no-duplicate-imports\r\nimport { JBSelectWebComponent } from 'jb-select';\r\nexport type JBSelectEventType<T> = T & {\r\n    target: JBSelectWebComponent\r\n}\r\ndeclare global {\r\n    // eslint-disable-next-line @typescript-eslint/no-namespace\r\n    namespace JSX {\r\n      interface IntrinsicElements {\r\n        'jb-select': JBSelectType;\r\n      }\r\n      interface JBSelectType extends React.DetailedHTMLProps<React.HTMLAttributes<JBSelectWebComponent>, JBSelectWebComponent> {\r\n        class?:string,\r\n        label?: string,\r\n        name?:string,\r\n        required?:string | boolean,\r\n        message?:string,\r\n        tabindex?:string,\r\n        // ref:React.RefObject<JBDateInputWebComponent>,\r\n      }\r\n    }\r\n}\r\n\r\nexport const JBSelect = React.forwardRef((props:JBSelectProps, ref) => {\r\n  const element = useRef<JBSelectWebComponent>(null);\r\n  const [refChangeCount, refChangeCountSetter] = useState(0);\r\n  useImperativeHandle(\r\n    ref,\r\n    () => (element ? element.current : {}),\r\n    [element],\r\n  );\r\n  useEffect(() => {\r\n    refChangeCountSetter(refChangeCount + 1);\r\n  }, [element.current]);\r\n  useEffect(() => {\r\n    if(element.current){\r\n      element.current.value = props.value;\r\n    }\r\n  }, [props.value]);\r\n  useEffect(() => {\r\n    if (typeof props.getSelectedValueDOM == \"function\" && element.current && element.current) {\r\n      element.current.callbacks.getSelectedValueDOM = props.getSelectedValueDOM;\r\n    }\r\n  }, [props.getSelectedValueDOM]);\r\n  useEffect(() => {\r\n    if (props.message !== null && props.message !== undefined ) {\r\n      element.current?.setAttribute(\"message\", props.message);\r\n    }\r\n  }, [props.message]);\r\n  useEffect(() => {\r\n    if (props.placeholder !== null && props.placeholder !== undefined) {\r\n      element.current?.setAttribute(\"placeholder\", props.placeholder);\r\n    }\r\n  }, [props.placeholder]);\r\n  useEffect(() => {\r\n    if (props.searchPlaceholder !== null && props.searchPlaceholder !== undefined) {\r\n      element.current?.setAttribute(\"search-placeholder\", props.searchPlaceholder);\r\n    }\r\n  }, [props.searchPlaceholder]);\r\n  function onKeyup(e:JBSelectEventType<KeyboardEvent>) {\r\n    if ( typeof props.onKeyup == \"function\") {\r\n      props.onKeyup(e);\r\n    }\r\n  }\r\n  function onChange(e:JBSelectEventType<Event>) {\r\n    if (typeof props.onChange ==\"function\") {\r\n      props.onChange(e);\r\n    }\r\n  }\r\n  function onInput(e:JBSelectEventType<InputEvent>) {\r\n    if (typeof props.onInput == \"function\") {\r\n      props.onInput(e);\r\n    }\r\n  }\r\n  useBindEvent(element, 'keyup', onKeyup);\r\n  useBindEvent(element, 'change', onChange);\r\n  useBindEvent(element, 'input', onInput);\r\n  return (\r\n    <jb-select style={props.style?props.style:undefined} class={props.className?props.className:\"\"} label={props.label} ref={element} required={props.required || 'false'} name={props.name??undefined}>\r\n      {props.children}\r\n    </jb-select>\r\n  );\r\n});\r\n\r\nexport type JBSelectProps = {\r\n    style?:CSSProperties,\r\n    label?: string,\r\n    getSelectedValueDOM?: (option:any)=>HTMLElement,\r\n    value?: any,\r\n    onChange?: (e:JBSelectEventType<Event>)=>void,\r\n    onKeyup?: (e:JBSelectEventType<KeyboardEvent>)=>void,\r\n    onInput?: (e:JBSelectEventType<InputEvent>)=>void,\r\n    required?: boolean,\r\n    message?: string,\r\n    placeholder?: string,\r\n    searchPlaceholder?: string,\r\n    className?: string,\r\n    children?:React.ReactNode,\r\n    name?:string\r\n}\r\nJBSelect.displayName = 'JBSelect';","/* eslint-disable react/display-name */\r\nimport React, { useEffect, useRef, useImperativeHandle, PropsWithChildren, ComponentProps } from 'react';\r\nimport { JBOptionWebComponent } from 'jb-select';\r\n//TODO: make it generic when remove forward ref\r\ntype TValue = any;\r\n\r\ndeclare global {\r\n  // eslint-disable-next-line @typescript-eslint/no-namespace\r\n  namespace JSX {\r\n    interface IntrinsicElements {\r\n      'jb-option': JBOptionType;\r\n    }\r\n    interface JBOptionType extends React.DetailedHTMLProps<React.HTMLAttributes<JBOptionWebComponent<TValue>>, JBOptionWebComponent<TValue>> {\r\n      class?: string,\r\n    }\r\n  }\r\n}\r\nexport const JBOption = React.forwardRef((props: JBOptionProps<TValue>, ref) => {\r\n  const element = useRef<JBOptionWebComponent<TValue>>(null);\r\n  const {value,children,className, ...rest} = props;\r\n  useImperativeHandle(\r\n    ref,\r\n    () => (element ? element.current : undefined),\r\n    [element],\r\n  );\r\n  \r\n  useEffect(() => {\r\n    if (element.current && value !== undefined) {\r\n      element.current.value = value;\r\n    }\r\n  }, [value, element]);\r\n\r\n  return (\r\n    <jb-option class={className} ref={element} {...rest}>\r\n      {children}\r\n    </jb-option>\r\n  );\r\n});\r\n\r\ntype Props<TValue> = {\r\n  value:TValue\r\n}\r\n\r\nexport type JBOptionProps<TValue> = PropsWithChildren<JSX.JBOptionType & Props<TValue>>\r\nJBOption.displayName = 'JBOption';"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../lib/JBOptionList.tsx","../lib/events-hook.ts","../lib/JBSelect.tsx","../lib/JBOption.tsx"],"sourcesContent":["","","",""],"mappings":";;;;;MACY,6BAAuB,MAAA,WAAqB,CAAA,OAAM,QAAO;CAkBrE,MAAO,UAAM,OAAY,KAAG;AAC1B,qBAAgB,KAAkD,MAAK,UAAA,QAAA,UAAA,WAAA,CACvE,OAKA,EAAA;WACM,MAAA;MACF,QAAQ,WAAQ,MAAA,QAAa,MAAM,WAAU,CAC/C,SAAA,QAAA,aAAA,MAAA;CAEF,GAAA,CACE,MAAI;AAGN,WAAU,MAAA;AACV,MAAA,QAAe,kBAAA,MAAA,YAAA,WACT,SAAQ,QAAO,YAAW,YAAc,MAAI,SAAU;KAGxD,MAAM,UACV;WAEI,MAAA;AACF,MAAA,QAAA,kBAAA,MAAA,YAAA,WACE,SAAM,QAAa,YAAW,YAAA,MAAA,SAAA;CAKlC,GAAA,CAQF,MAAa;;;;;;;;;;ACzCP,SAAU,UAAU,SAA0C,OAAiB;AACnF,UAAS,SAAS,QAAQ,MAAM,QAAQ,KAAK;AAC7C,UAAS,SAAS,QAAQ,MAAM,QAAQ,KAAK;AAC7C,UAAS,SAAS,SAAS,MAAM,QAAQ;AACzC,UAAS,SAAS,UAAU,MAAM,SAAS;AAC3C,UAAS,SAAS,SAAS,MAAM,QAAQ;AAC3C;;;;MClBqB,yBAAiB,MAAkB,WAAA,CAAA,OAAA,QAAA;CAsBxD,MAAO,UAAM,OAAW,KAAM;CAC5B,MAAM,CAAA,gBAAuC,qBAAK,GAAA,SAAA,EAAA;AAClD,qBAAO,KAAgB,MAAA,UAAA,QAAwB,UAAU,CAAC,GAAA,CAC1D,OAKA,EAAA;WACE,MAAA;AACE,uBAAiB,iBAAA,EAAA;CACrB,GAAA,CACE,QAAG;WAEH,MAAA;AACE,MAAA,QAAY,QAChB,SAAe,QAAA,QAAA,MAAA;KAGb,MAAA,KACD,EAAA;AACD,WAAU,MAAG;AACX,aAAU,MAAO,uBAAmB,cAAY,QAAY,WAAA,QAAA,QAC1D,SAAQ,QAAO,UAAE,sBAA8B,MAAO;CAEzD,GAAE,CACH,MAAU;WAEN,MAAA;AACF,MAAA,MAAA,YAAA,QAAA,MAAA,YAAA,UACE,SAAM,SAAa,aAAA,WAAA,MAAA,QAAA;WAGnB;AAEJ,WAAU,MAAA;AACV,MAAA,MAAa,gBAAE,QAAA,MAAA,gBAAA,UACT,SAAM,SAAO,aAAA,eAAA,MAAA,YAAA;WAEV;WAEP,MAAA;AACE,MAAA,MAAM,sBAAO,QAAA,MAAA,sBAAA,UACjB,SAAU,SAAc,aAAA,sBAAA,MAAA,kBAAA;CAMxB,GAAA,CAgBM,MAAC;;;;;;;;;;;;;;;;;;;MC3FG,yBAAuB,MAAA,WAAmB,CAAqC,OAAM,QAAO;CAgBxG,MAAO,UAAM,OAAW,KAAM;CAC5B,MAAM,EAAA,OAAO,UAAwC,UAAK,GAAA,MAAA,GAAA;AAC1D,qBAAa,KAAS,MAAA,UAAc,QAAK,UAAQ,WAAA,CACjD,OAMA,EAAA;WACM,MAAA;MACF,QAAQ,WAAQ,UAAa,UAC/B,SAAA,QAAA,QAAA;CAGF,GAAA,CAKA,OAOM"}