jb-select 6.4.1 → 6.5.0

package/lib/{jb-select.scss → jb-select.css}

@@ -1,9 +1,6 @@
-@use "~jb-core/styles/medias.scss" as *;
-@use './variables.css';
+/* @use "~jb-core/styles/medias.scss" as *; */
 
-:host {
-
-}
+@custom-media --tablet-until (max-width: 768px);
 
 .jb-select-web-component {
     width: var(--jb-select-width, 100%);
@@ -12,7 +9,7 @@
     box-sizing: border-box;
 
     &.--focused {
-        @include mobile-tablet {
+        @media(--tablet-until) {
             position: fixed;
             bottom: 0;
             top: initial;
@@ -27,26 +24,26 @@
         }
 
         .select-box {
-            @include mobile-tablet {
+            @media(--tablet-until) {
                 height: var(--jb-select-mobile-search-input-height, var(--jb-select-height, 40px));
                 background-color: var(--jb-select-mobile-input-bgcolor, var(--select-box-bg-color));
-                border-width: var(--jb-select-mobile-search-border-width, var(--jb-select-border-width, 1px));
+                border-width: var(--jb-select-mobile-search-border-width, var(--border-width));
                 border-color: var(--jb-select-mobile-search-border-color, var(--border-color));
-                border-bottom-width: var(--jb-select-mobile-search-border-bottom-width, var(--p-border-bottom-width));
+                border-bottom-width: var(--jb-select-mobile-search-border-bottom-width, var(--border-bottom-width));
                 border-bottom-color: var(--jb-select-mobile-search-border-bottom-color, var(--jb-select-border-bottom-color, var(--border-color)));
                 border-radius: var(--jb-select-mobile-search-border-radius, var(--border-radius));
             }
 
             .front-box {
                 .arrow-icon {
-                    @include mobile-tablet {
+                    @media(--tablet-until) {
                         display: none;
                     }
                 }
             }
 
             .selected-value-wrapper {
-                @include mobile-tablet {
+                @media(--tablet-until) {
                     opacity: 0;
                     transition: none;
                 }
@@ -58,13 +55,13 @@
         .middle-divider {
             display: block;
 
-            @include mobile-tablet {
+            @media(--tablet-until) {
                 margin: var(--jb-select-middle-div-mobile-margin, 16px 0 0 0);
             }
         }
 
         .select-list-wrapper {
-            @include mobile-tablet {
+            @media(--tablet-until) {
                 position: initial;
                 margin: var(--jb-select-mobile-item-list-margin, 16px 0);
                 border-radius: var(--jb-select-mobile-item-list-border-radius, var(--border-radius));
@@ -72,12 +69,12 @@
         }
 
         .label-wrapper {
-            @include mobile-tablet {
+            @media(--tablet-until) {
                 display: flex;
             }
 
             label {
-                @include mobile-tablet {
+                @media(--tablet-until) {
                     color: var(--modal-label-color);
                     font-size: 1.5em;
                     display: flex;
@@ -88,7 +85,7 @@
             .close-button {
                 display: none;
 
-                @include mobile-tablet {
+                @media(--tablet-until) {
                     display: flex;
                     width: 48px;
                     height: 48px;
@@ -111,11 +108,11 @@
 
     &.--has-value {
 
-        //if user select a option and value is setted and not null
+        /*if user select a option and value is setted and not null*/
         .select-box {
             border-color: var(--jb-select-border-color-selected, var(--border-color));
             background-color: var(--jb-select-bgcolor-selected, var(--select-box-bg-color));
-            @include mobile-tablet {
+            @media(--tablet-until) {
                 &:focus-within {
                     background-color: var(--jb-select-mobile-input-bgcolor, var(--select-box-bg-color));
                 }
@@ -146,8 +143,8 @@
         width: 100%;
         box-sizing: border-box;
         height: var(--jb-select-height, 2.5rem);
-        border: solid var(--jb-select-border-width, 1px) var(--border-color);
-        border-bottom: solid var(--p-border-bottom-width) var(--border-color);
+        border: solid var(--border-width) var(--border-color);
+        border-bottom: solid var(--border-bottom-width) var(--border-color);
         border-radius: var(--border-radius);
         background-color: var(--select-box-bg-color);
         margin: var(--jb-select-select-box-margin, 4px 0px 0px 0px);
@@ -162,7 +159,7 @@
             border-bottom-color: var(--jb-select-border-color, var(--border-color));
             border-radius: var(--border-radius) var(--border-radius) 0 0;
 
-            @include mobile-tablet {
+            @media(--tablet-until) {
                 border-radius: var(--jb-select-mobile-search-border-radius, var(--border-radius));
             }
         }
@@ -321,7 +318,7 @@
             }
 
 
-            @include mobile-tablet {
+            @media(--tablet-until) {
                 max-height: calc(var(--mobile-modal-height) - 15rem);
             }
 

package/lib/jb-select.ts

@@ -1,5 +1,5 @@
-import HTML from "./jb-select.html";
-import CSS from "./jb-select.scss";
+import CSS from "./jb-select.css";
+import VariablesCSS from "./variables.css";
 import {
   JBSelectCallbacks,
   JBSelectElements,
@@ -11,6 +11,9 @@ import { JBFormInputStandards } from 'jb-form';
 // eslint-disable-next-line no-duplicate-imports
 import { JBOptionWebComponent } from "./jb-option/jb-option";
 import { registerDefaultVariables } from 'jb-core/theme';
+import { renderHTML } from "./render";
+import { dictionary } from "./i18n";
+import { i18n } from "jb-core/i18n";
 
 //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.
@@ -63,6 +66,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
   }
   set placeholder(value: string) {
     this.#placeholder = value;
+    this.#internals.ariaPlaceholder = value;
     if (this.value !== null && this.value !== undefined) {
       this.elements.input.placeholder = "";
     } else {
@@ -111,13 +115,16 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
     this.elements.input.disabled = value;
     if (value) {
       (this.#internals as any).states?.add("disabled");
+      this.#internals.ariaDisabled = "true";
     } else {
       (this.#internals as any).states?.delete("disabled");
+      this.#internals.ariaDisabled = "false";
     }
   }
   #required = false;
   set required(value: boolean) {
     this.#required = value;
+    this.#internals.ariaRequired = value?"true":"false";
     this.#validation.checkValiditySync({ showError: false });
   }
   get required() {
@@ -166,7 +173,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
       delegatesFocus: true,
     });
     registerDefaultVariables();
-    const html = `<style>${CSS}</style>` + "\n" + HTML;
+    const html = `<style>${CSS} ${VariablesCSS}</style>` + "\n" + renderHTML();
     const element = document.createElement("template");
     element.innerHTML = html;
     shadowRoot.appendChild(element.content.cloneNode(true));
@@ -231,6 +238,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
     switch (name) {
       case "label":
         this.elements.label.text.innerHTML = value;
+        this.#internals.ariaLabel = value;
         if (value == null || value == undefined || value == "") {
           this.elements.label.wrapper.classList.add("--hide");
         } else {
@@ -238,6 +246,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
         }
         break;
       case "message":
+        this.#internals.ariaDescription = value;
         this.elements.messageBox.innerHTML = value;
         break;
       case "value":
@@ -252,6 +261,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
         break;
       case "placeholder":
         this.placeholder = value;
+        this.#internals.ariaPlaceholder = value;
         break;
       case "search-placeholder":
         this.searchPlaceholder = value;
@@ -589,7 +599,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
     }
     if (this.required) {
       const label = this.getAttribute("label") || "";
-      const message = `${label} حتما باید انتخاب شود`;
+      const message = dictionary.get(i18n,"requireMessage")(label || null);
       validationList.push({
         validator: ({ value }) => {
           return value !== null && value !== undefined;

package/lib/{jb-select.html → render.ts}

@@ -1,4 +1,6 @@
-<div class="jb-select-web-component">
+export function renderHTML(): string {
+  return /* html */ `
+  <div class="jb-select-web-component">
     <div class="label-wrapper">
         <label class="--hide"><span class="label-value"></span></label>
         <!-- close button will be visible on mobile modal -->
@@ -47,4 +49,6 @@
         </div>
     </div>
     <div class="message-box"></div>
-</div>
+  </div>
+  `;
+}

package/lib/variables.css

@@ -1,6 +1,7 @@
 :host {
   --border-radius:var(--jb-select-border-radius, var(--jb-radius));
   --middle-div-height: var(--jb-select-middle-div-height, 0px);
+  --border-width: var(--jb-select-border-width, 1px);
   --border-bottom-width: var(--jb-select-border-bottom-width, var(--jb-select-border-width, 3px));
   --base-z-index: 1;
   --mobile-modal-z-index: 900;

package/package.json

@@ -16,7 +16,7 @@
     "web component",
     "react component"
   ],
-  "version": "6.4.1",
+  "version": "6.5.0",
   "bugs": "https://github.com/javadbat/jb-select/issues",
   "license": "MIT",
   "files": [
@@ -35,9 +35,9 @@
   },
   "dependencies": {
     "jb-validation": ">=0.4.0",
-    "jb-core":">=0.14.0"
+    "jb-core":">=0.18.1"
   },
   "devDependencies": {
-    "jb-form":">=0.6.10"
+    "jb-form":">=0.7.1"
   }
 }

package/react/README.md

@@ -8,7 +8,9 @@ Demo :  Demo: [codeSandbox preview](https://3f63dj.csb.app/samples/jb-select) fo
 
 ## installation
 
-run `npm install jb-select` to install package with npm
+```sh
+npm install jb-select
+```
 
 ## usage
 

package/react/dist/JBOption.d.ts

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 import { JBOptionWebComponent } from 'jb-select';
 type TValue = any;
-declare global {
+declare module "react" {
     namespace JSX {
         interface IntrinsicElements {
             'jb-option': JBOptionType;
@@ -15,5 +15,5 @@ export declare const JBOption: React.ForwardRefExoticComponent<Omit<JBOptionProp
 type Props<TValue> = {
     value: TValue;
 };
-export type JBOptionProps<TValue> = PropsWithChildren<JSX.JBOptionType & Props<TValue>>;
+export type JBOptionProps<TValue> = PropsWithChildren<React.JSX.JBOptionType & Props<TValue>>;
 export {};

package/react/dist/JBOptionList.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { JBOptionListWebComponent } from 'jb-select';
 type TOption = any;
 type TValue = any;
-declare global {
+declare module "react" {
     namespace JSX {
         interface IntrinsicElements {
             'jb-option-list': JBOptionListType;

package/react/dist/JBSelect.d.ts

@@ -6,7 +6,7 @@ import { type JBSelectAttributes } from './attributes-hook.js';
 export type JBSelectEventType<T> = T & {
     target: JBSelectWebComponent;
 };
-declare global {
+declare module "react" {
     namespace JSX {
         interface IntrinsicElements {
             'jb-select': JBSelectType;
@@ -21,15 +21,13 @@ declare global {
         }
     }
 }
-type TValue = any;
-export declare const JBSelect: React.ForwardRefExoticComponent<EventProps & JBSelectAttributes<any> & {
-    style?: CSSProperties;
-    className?: string;
-    children?: React.ReactNode;
-} & React.RefAttributes<unknown>>;
-export type Props = EventProps & JBSelectAttributes<TValue> & {
+export declare function JBSelect<TValue>(props: Props<TValue>): React.JSX.Element;
+export declare namespace JBSelect {
+    var displayName: string;
+}
+export type Props<TValue> = EventProps & JBSelectAttributes<TValue> & {
+    ref?: React.RefObject<JBSelectWebComponent>;
     style?: CSSProperties;
     className?: string;
     children?: React.ReactNode;
 };
-export {};

package/react/dist/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=Object.create,t=Object.defineProperty,r=Object.getOwnPropertyDescriptor,l=Object.getOwnPropertyNames,u=Object.getPrototypeOf,n=Object.prototype.hasOwnProperty,a=(e,u,a,c)=>{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===a||t(e,o,{get:(e=>u[e]).bind(null,o),enumerable:!(c=r(u,o))||c.enumerable});return e},c=(r,l,n)=>(n=null!=r?e(u(r)):{},a(!l&&r&&r.__esModule?n:t(n,"default",{value:r,enumerable:!0}),r));const o=c(require("react"));require("jb-select");const s=c(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);return(0,o.useImperativeHandle)(t,()=>r?r.current:void 0,[r]),(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),(0,o.useEffect)(()=>{null!==e.message&&void 0!==e.message?r.current?.setAttribute("message",e.message):r.current?.removeAttribute("message")},[e.message]),(0,o.useEffect)(()=>{r&&r.current&&(r.current.validation.list=e.validationList||[])},[e.validationList]),(0,o.useEffect)(()=>{null!==e.label&&void 0!==e.label?r.current?.setAttribute("label",e.label):r.current?.removeAttribute("label")},[e.label]),(0,o.useEffect)(()=>{null!==e.required&&void 0!==e.required?r.current?.setAttribute("required",""):r.current?.removeAttribute("required")},[e.required]),(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,o.useEffect)(()=>{e.name?r?.current?.setAttribute("name",e.name||""):r?.current?.removeAttribute("name")},[e.name]),(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]),o.default.createElement("jb-select",{style:e.style?e.style:void 0,class:e.className?e.className:"",ref:r},e.children)});f.displayName="JBSelect";const d=o.default.forwardRef((e,t)=>{let r=(0,o.useRef)(null),{value:l,children:u,className:n,...a}=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,...a},u)});d.displayName="JBOption",exports.JBOption=d,exports.JBOptionList=i,exports.JBSelect=f;
+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})});function f(e){let t=(0,o.useRef)(null);return(0,o.useImperativeHandle)(e.ref,()=>t?t.current:void 0,[t]),(0,s.useEvent)(t,"load",e.onLoad,!0),(0,s.useEvent)(t,"init",e.onInit,!0),(0,s.useEvent)(t,"keyup",e.onKeyUp),(0,s.useEvent)(t,"change",e.onChange),(0,s.useEvent)(t,"input",e.onInput),(0,o.useEffect)(()=>{null!==e.message&&void 0!==e.message?t.current?.setAttribute("message",e.message):t.current?.removeAttribute("message")},[e.message]),(0,o.useEffect)(()=>{t&&t.current&&(t.current.validation.list=e.validationList||[])},[e.validationList]),(0,o.useEffect)(()=>{null!==e.label&&void 0!==e.label?t.current?.setAttribute("label",e.label):t.current?.removeAttribute("label")},[e.label]),(0,o.useEffect)(()=>{null!==e.required&&void 0!==e.required?t.current?.setAttribute("required",""):t.current?.removeAttribute("required")},[e.required]),(0,o.useEffect)(()=>{null!==e.placeholder&&void 0!==e.placeholder&&t.current?.setAttribute("placeholder",e.placeholder)},[e.placeholder]),(0,o.useEffect)(()=>{null!==e.searchPlaceholder&&void 0!==e.searchPlaceholder&&t.current?.setAttribute("search-placeholder",e.searchPlaceholder)},[e.searchPlaceholder]),(0,o.useEffect)(()=>{e.error?t?.current?.setAttribute("error",e.error):t?.current?.removeAttribute("error")},[e.error]),(0,o.useEffect)(()=>{e.name?t?.current?.setAttribute("name",e.name||""):t?.current?.removeAttribute("name")},[e.name]),(0,o.useEffect)(()=>{t.current&&(t.current.value=e.value)},[e.value]),(0,o.useEffect)(()=>{"function"==typeof e.getSelectedValueDOM&&t.current&&t.current&&(t.current.callbacks.getSelectedValueDOM=e.getSelectedValueDOM)},[e.getSelectedValueDOM]),o.default.createElement("jb-select",{style:e.style?e.style:void 0,class:e.className?e.className:"",ref:t},e.children)}i.displayName="JBOptionList",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","names":[],"sources":["../lib/JBOptionList.tsx","../lib/events-hook.ts","../lib/attributes-hook.ts","../lib/JBSelect.tsx","../lib/JBOption.tsx"],"sourcesContent":["","","","",""],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","names":[],"sources":["../lib/JBOptionList.tsx","../lib/events-hook.ts","../lib/attributes-hook.ts","../lib/JBSelect.tsx","../lib/JBOption.tsx"],"sourcesContent":[],"mappings":"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"}

package/react/dist/index.js

@@ -1,2 +1,2 @@
-import e,{useEffect as t,useImperativeHandle as r,useRef as l}from"react";import"jb-select";import{useEvent as n}from"jb-core/react";let a=e.forwardRef((n,a)=>{let u=l(null);return r(a,()=>u?u.current:void 0,[u]),t(()=>{u.current&&Array.isArray(n.optionList)&&(u.current.optionList=n.optionList)},[n.optionList,u]),t(()=>{u.current&&"function"==typeof n.getTitle&&u.current.setCallback("getTitle",n.getTitle)},[n.getTitle,u]),t(()=>{u.current&&"function"==typeof n.getValue&&u.current.setCallback("getValue",n.getValue)},[n.getValue,u]),t(()=>{u.current&&"function"==typeof n.getContentDOM&&u.current.setCallback("getContentDOM",n.getContentDOM)},[n.getContentDOM,u]),e.createElement("jb-option-list",{ref:u})});a.displayName="JBOptionList";let u=e.forwardRef((a,u)=>{var o;let c=l(null);return r(u,()=>c?c.current:void 0,[c]),n(c,"load",a.onLoad,!0),n(c,"init",a.onInit,!0),n(c,"keyup",a.onKeyUp),n(c,"change",a.onChange),n(c,"input",a.onInput),t(()=>{null!==o.message&&void 0!==o.message?c.current?.setAttribute("message",o.message):c.current?.removeAttribute("message")},[(o=a).message]),t(()=>{c&&c.current&&(c.current.validation.list=o.validationList||[])},[o.validationList]),t(()=>{null!==o.label&&void 0!==o.label?c.current?.setAttribute("label",o.label):c.current?.removeAttribute("label")},[o.label]),t(()=>{null!==o.required&&void 0!==o.required?c.current?.setAttribute("required",""):c.current?.removeAttribute("required")},[o.required]),t(()=>{null!==o.placeholder&&void 0!==o.placeholder&&c.current?.setAttribute("placeholder",o.placeholder)},[o.placeholder]),t(()=>{null!==o.searchPlaceholder&&void 0!==o.searchPlaceholder&&c.current?.setAttribute("search-placeholder",o.searchPlaceholder)},[o.searchPlaceholder]),t(()=>{o.error?c?.current?.setAttribute("error",o.error):c?.current?.removeAttribute("error")},[o.error]),t(()=>{o.name?c?.current?.setAttribute("name",o.name||""):c?.current?.removeAttribute("name")},[o.name]),t(()=>{c.current&&(c.current.value=o.value)},[o.value]),t(()=>{"function"==typeof o.getSelectedValueDOM&&c.current&&c.current&&(c.current.callbacks.getSelectedValueDOM=o.getSelectedValueDOM)},[o.getSelectedValueDOM]),e.createElement("jb-select",{style:a.style?a.style:void 0,class:a.className?a.className:"",ref:c},a.children)});u.displayName="JBSelect";let o=e.forwardRef((n,a)=>{let u=l(null),{value:o,children:c,className:i,...s}=n;return r(a,()=>u?u.current:void 0,[u]),t(()=>{u.current&&void 0!==o&&(u.current.value=o)},[o,u]),e.createElement("jb-option",{class:i,ref:u,...s},c)});o.displayName="JBOption";export{o as JBOption,a as JBOptionList,u as JBSelect};
+import e,{useEffect as t,useImperativeHandle as r,useRef as l}from"react";import"jb-select";import{useEvent as n}from"jb-core/react";let a=e.forwardRef((n,a)=>{let u=l(null);return r(a,()=>u?u.current:void 0,[u]),t(()=>{u.current&&Array.isArray(n.optionList)&&(u.current.optionList=n.optionList)},[n.optionList,u]),t(()=>{u.current&&"function"==typeof n.getTitle&&u.current.setCallback("getTitle",n.getTitle)},[n.getTitle,u]),t(()=>{u.current&&"function"==typeof n.getValue&&u.current.setCallback("getValue",n.getValue)},[n.getValue,u]),t(()=>{u.current&&"function"==typeof n.getContentDOM&&u.current.setCallback("getContentDOM",n.getContentDOM)},[n.getContentDOM,u]),e.createElement("jb-option-list",{ref:u})});function u(a){var u;let o=l(null);return r(a.ref,()=>o?o.current:void 0,[o]),n(o,"load",a.onLoad,!0),n(o,"init",a.onInit,!0),n(o,"keyup",a.onKeyUp),n(o,"change",a.onChange),n(o,"input",a.onInput),t(()=>{null!==u.message&&void 0!==u.message?o.current?.setAttribute("message",u.message):o.current?.removeAttribute("message")},[(u=a).message]),t(()=>{o&&o.current&&(o.current.validation.list=u.validationList||[])},[u.validationList]),t(()=>{null!==u.label&&void 0!==u.label?o.current?.setAttribute("label",u.label):o.current?.removeAttribute("label")},[u.label]),t(()=>{null!==u.required&&void 0!==u.required?o.current?.setAttribute("required",""):o.current?.removeAttribute("required")},[u.required]),t(()=>{null!==u.placeholder&&void 0!==u.placeholder&&o.current?.setAttribute("placeholder",u.placeholder)},[u.placeholder]),t(()=>{null!==u.searchPlaceholder&&void 0!==u.searchPlaceholder&&o.current?.setAttribute("search-placeholder",u.searchPlaceholder)},[u.searchPlaceholder]),t(()=>{u.error?o?.current?.setAttribute("error",u.error):o?.current?.removeAttribute("error")},[u.error]),t(()=>{u.name?o?.current?.setAttribute("name",u.name||""):o?.current?.removeAttribute("name")},[u.name]),t(()=>{o.current&&(o.current.value=u.value)},[u.value]),t(()=>{"function"==typeof u.getSelectedValueDOM&&o.current&&o.current&&(o.current.callbacks.getSelectedValueDOM=u.getSelectedValueDOM)},[u.getSelectedValueDOM]),e.createElement("jb-select",{style:a.style?a.style:void 0,class:a.className?a.className:"",ref:o},a.children)}a.displayName="JBOptionList",u.displayName="JBSelect";let o=e.forwardRef((n,a)=>{let u=l(null),{value:o,children:c,className:i,...s}=n;return r(a,()=>u?u.current:void 0,[u]),t(()=>{u.current&&void 0!==o&&(u.current.value=o)},[o,u]),e.createElement("jb-option",{class:i,ref:u,...s},c)});o.displayName="JBOption";export{o as JBOption,a as JBOptionList,u as JBSelect};
 //# sourceMappingURL=index.js.map

package/react/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../lib/JBOptionList.tsx","../lib/events-hook.ts","../lib/attributes-hook.ts","../lib/JBSelect.tsx","../lib/JBOption.tsx"],"sourcesContent":["","","","",""],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../lib/JBOptionList.tsx","../lib/events-hook.ts","../lib/attributes-hook.ts","../lib/JBSelect.tsx","../lib/JBOption.tsx"],"sourcesContent":[],"mappings":";;;;;AAEA,MAAY,+BAAuB,MAAA,WAAqB,CAAA,OAAM,QAAO;CAkBrE,MAAO,UAAM,OAAY,KAAG;AAC1B,qBAAgB,KAAkD,MAAK,UAAA,QAAA,kBAAA,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;;;;;;;;;;AC1Cb,SAAgB,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;;;;ACNA,SAAgB,qBAA6B,SAA0C,OAAiC;AACtH,WAAU,MAAG;AACX,MAAI,MAAM,YAAY,QAAQ,MAAM,mBAClC,SAAQ,SAAS,aAAa,WAAW,MAAM,QAAQ;eAClD,SAAA,gBAAA,UAAA;KAGL,MAAM,OACV,EAAA;WACM,MAAA;MACF,WAAQ,QAAQ,QAClB,SAAA,QAAA,WAAA,OAAA,MAAA,kBAAA,CAAA;CAEF,GAAA,CACE,MAAI;WAEJ,MAAA;YAAO,UAAA,QAAA,MAAA,iBACL,SAAQ,SAAS,aAAA,SAAgB,MAAQ,MAAA;MAEzC,SAAY,SAAC,gBAAA,QAAA;WAIb;WACK,MAAA;MACL,MAAA,aAAiB,QAAA,MAAgB,oBACnC,SAAA,SAAA,aAAA,YAAA,GAAA;MAGF,SAAe,SAAA,gBAAA,WAAA;KAGb,MAAA,QACD,EAAA;AACD,WAAU,MAAG;AACX,MAAI,MAAM,gBAAA,QAAsB,MAAQ,uBACtC,SAAQ,SAAS,aAAa,eAAA,MAAoB,YAAQ;CAE7D,GAAE,CACH,MAAU;WAEN,MAAA;AACF,MAAA,MAAA,sBAAA,QAAA,MAAA,sCAAO,SAAA,aAAA,sBAAA,MAAA,kBAAA;KAGL,MAAM,iBAEV,EAAA;WACM,MAAM;MACR,MAAA,MACF,UAAA,SAAA,aAAA,SAAA,MAAA,MAAA;MACE,UAAS,SAAS,gBAAgB,QAAO;CAE5C,GAAE,CACH,MAAU;WAEN,MAAA;AACF,MAAA,MAAA,KACE,UAAa,SAAA,aAAA,QAAA,MAAA,QAAA,GAAA;MAEX,UAAO,SAAM,gBAAmB,OAAI;KAGtC,MAAM,IACZ,EAAA;;;;;;;;;;;AC1EA,SAAS,SAAA,OAA+C;CAqBxD,MAAM,UAAU,OAAiB,KAAmB;AAClD,qBAAgB,MAA6B,KAAK,MAAA,UAAA,QAAA,kBAAA,CAClD,OAOA,EAAA;AACA,WAAA,SAAA,MAAqB;AACrB,sBACE,SAAA,MAAA;AAIJ,wBAAA,MAAA,cAAA,aAAA;EAAC,OAAA,MAAA,QAAA,MAAA;EAQO,OAAC,MAAW,YAAa,MAAA,YAAA;;;;;;;;AClDjC,MAAY,2BAAuB,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,kBAAQ,CACjD,OAMA,EAAA;WACM,MAAA;MACF,QAAQ,WAAQ,iBAClB,SAAA,QAAA,QAAA;CAGF,GAAA,CAKA,OAOM"}

package/react/dist/index.umd.js

@@ -1,2 +1,2 @@
-var e,t;e=this,t=function(e,t,r,l){"use strict";var u=Object.create,n=Object.defineProperty,a=Object.getOwnPropertyDescriptor,c=Object.getOwnPropertyNames,o=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty,i=(e,t,r,l)=>{if(t&&"object"==typeof t||"function"==typeof t)for(var u,o=c(t),i=0,f=o.length;i<f;i++)u=o[i],s.call(e,u)||u===r||n(e,u,{get:(e=>t[e]).bind(null,u),enumerable:!(l=a(t,u))||l.enumerable});return e},f=(e,t,r)=>(r=null!=e?u(o(e)):{},i(!t&&e&&e.__esModule?r:n(r,"default",{value:e,enumerable:!0}),e));t=f(t),l=f(l);let d=t.default.forwardRef((e,r)=>{let l=(0,t.useRef)(null);return(0,t.useImperativeHandle)(r,()=>l?l.current:void 0,[l]),(0,t.useEffect)(()=>{l.current&&Array.isArray(e.optionList)&&(l.current.optionList=e.optionList)},[e.optionList,l]),(0,t.useEffect)(()=>{l.current&&"function"==typeof e.getTitle&&l.current.setCallback("getTitle",e.getTitle)},[e.getTitle,l]),(0,t.useEffect)(()=>{l.current&&"function"==typeof e.getValue&&l.current.setCallback("getValue",e.getValue)},[e.getValue,l]),(0,t.useEffect)(()=>{l.current&&"function"==typeof e.getContentDOM&&l.current.setCallback("getContentDOM",e.getContentDOM)},[e.getContentDOM,l]),t.default.createElement("jb-option-list",{ref:l})});d.displayName="JBOptionList";let p=t.default.forwardRef((e,r)=>{let u=(0,t.useRef)(null);return(0,t.useImperativeHandle)(r,()=>u?u.current:void 0,[u]),(0,l.useEvent)(u,"load",e.onLoad,!0),(0,l.useEvent)(u,"init",e.onInit,!0),(0,l.useEvent)(u,"keyup",e.onKeyUp),(0,l.useEvent)(u,"change",e.onChange),(0,l.useEvent)(u,"input",e.onInput),(0,t.useEffect)(()=>{null!==e.message&&void 0!==e.message?u.current?.setAttribute("message",e.message):u.current?.removeAttribute("message")},[e.message]),(0,t.useEffect)(()=>{u&&u.current&&(u.current.validation.list=e.validationList||[])},[e.validationList]),(0,t.useEffect)(()=>{null!==e.label&&void 0!==e.label?u.current?.setAttribute("label",e.label):u.current?.removeAttribute("label")},[e.label]),(0,t.useEffect)(()=>{null!==e.required&&void 0!==e.required?u.current?.setAttribute("required",""):u.current?.removeAttribute("required")},[e.required]),(0,t.useEffect)(()=>{null!==e.placeholder&&void 0!==e.placeholder&&u.current?.setAttribute("placeholder",e.placeholder)},[e.placeholder]),(0,t.useEffect)(()=>{null!==e.searchPlaceholder&&void 0!==e.searchPlaceholder&&u.current?.setAttribute("search-placeholder",e.searchPlaceholder)},[e.searchPlaceholder]),(0,t.useEffect)(()=>{e.error?u?.current?.setAttribute("error",e.error):u?.current?.removeAttribute("error")},[e.error]),(0,t.useEffect)(()=>{e.name?u?.current?.setAttribute("name",e.name||""):u?.current?.removeAttribute("name")},[e.name]),(0,t.useEffect)(()=>{u.current&&(u.current.value=e.value)},[e.value]),(0,t.useEffect)(()=>{"function"==typeof e.getSelectedValueDOM&&u.current&&u.current&&(u.current.callbacks.getSelectedValueDOM=e.getSelectedValueDOM)},[e.getSelectedValueDOM]),t.default.createElement("jb-select",{style:e.style?e.style:void 0,class:e.className?e.className:"",ref:u},e.children)});p.displayName="JBSelect";let b=t.default.forwardRef((e,r)=>{let l=(0,t.useRef)(null),{value:u,children:n,className:a,...c}=e;return(0,t.useImperativeHandle)(r,()=>l?l.current:void 0,[l]),(0,t.useEffect)(()=>{l.current&&void 0!==u&&(l.current.value=u)},[u,l]),t.default.createElement("jb-option",{class:a,ref:l,...c},n)});b.displayName="JBOption",e.JBOption=b,e.JBOptionList=d,e.JBSelect=p},"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("jb-select"),require("jb-core/react")):"function"==typeof define&&define.amd?define(["exports","react","jb-select","jb-core/react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).JBSelectReact={},e.React,e.JBSelect,e.JBCoreReact);
+var e,t;e=this,t=function(e,t,r,l){var u=Object.create,n=Object.defineProperty,c=Object.getOwnPropertyDescriptor,a=Object.getOwnPropertyNames,o=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty,i=(e,t,r,l)=>{if(t&&"object"==typeof t||"function"==typeof t)for(var u,o=a(t),i=0,f=o.length;i<f;i++)u=o[i],s.call(e,u)||u===r||n(e,u,{get:(e=>t[e]).bind(null,u),enumerable:!(l=c(t,u))||l.enumerable});return e},f=(e,t,r)=>(r=null!=e?u(o(e)):{},i(!t&&e&&e.__esModule?r:n(r,"default",{value:e,enumerable:!0}),e));t=f(t),l=f(l);let d=t.default.forwardRef((e,r)=>{let l=(0,t.useRef)(null);return(0,t.useImperativeHandle)(r,()=>l?l.current:void 0,[l]),(0,t.useEffect)(()=>{l.current&&Array.isArray(e.optionList)&&(l.current.optionList=e.optionList)},[e.optionList,l]),(0,t.useEffect)(()=>{l.current&&"function"==typeof e.getTitle&&l.current.setCallback("getTitle",e.getTitle)},[e.getTitle,l]),(0,t.useEffect)(()=>{l.current&&"function"==typeof e.getValue&&l.current.setCallback("getValue",e.getValue)},[e.getValue,l]),(0,t.useEffect)(()=>{l.current&&"function"==typeof e.getContentDOM&&l.current.setCallback("getContentDOM",e.getContentDOM)},[e.getContentDOM,l]),t.default.createElement("jb-option-list",{ref:l})});function p(e){let r=(0,t.useRef)(null);return(0,t.useImperativeHandle)(e.ref,()=>r?r.current:void 0,[r]),(0,l.useEvent)(r,"load",e.onLoad,!0),(0,l.useEvent)(r,"init",e.onInit,!0),(0,l.useEvent)(r,"keyup",e.onKeyUp),(0,l.useEvent)(r,"change",e.onChange),(0,l.useEvent)(r,"input",e.onInput),(0,t.useEffect)(()=>{null!==e.message&&void 0!==e.message?r.current?.setAttribute("message",e.message):r.current?.removeAttribute("message")},[e.message]),(0,t.useEffect)(()=>{r&&r.current&&(r.current.validation.list=e.validationList||[])},[e.validationList]),(0,t.useEffect)(()=>{null!==e.label&&void 0!==e.label?r.current?.setAttribute("label",e.label):r.current?.removeAttribute("label")},[e.label]),(0,t.useEffect)(()=>{null!==e.required&&void 0!==e.required?r.current?.setAttribute("required",""):r.current?.removeAttribute("required")},[e.required]),(0,t.useEffect)(()=>{null!==e.placeholder&&void 0!==e.placeholder&&r.current?.setAttribute("placeholder",e.placeholder)},[e.placeholder]),(0,t.useEffect)(()=>{null!==e.searchPlaceholder&&void 0!==e.searchPlaceholder&&r.current?.setAttribute("search-placeholder",e.searchPlaceholder)},[e.searchPlaceholder]),(0,t.useEffect)(()=>{e.error?r?.current?.setAttribute("error",e.error):r?.current?.removeAttribute("error")},[e.error]),(0,t.useEffect)(()=>{e.name?r?.current?.setAttribute("name",e.name||""):r?.current?.removeAttribute("name")},[e.name]),(0,t.useEffect)(()=>{r.current&&(r.current.value=e.value)},[e.value]),(0,t.useEffect)(()=>{"function"==typeof e.getSelectedValueDOM&&r.current&&r.current&&(r.current.callbacks.getSelectedValueDOM=e.getSelectedValueDOM)},[e.getSelectedValueDOM]),t.default.createElement("jb-select",{style:e.style?e.style:void 0,class:e.className?e.className:"",ref:r},e.children)}d.displayName="JBOptionList",p.displayName="JBSelect";let b=t.default.forwardRef((e,r)=>{let l=(0,t.useRef)(null),{value:u,children:n,className:c,...a}=e;return(0,t.useImperativeHandle)(r,()=>l?l.current:void 0,[l]),(0,t.useEffect)(()=>{l.current&&void 0!==u&&(l.current.value=u)},[u,l]),t.default.createElement("jb-option",{class:c,ref:l,...a},n)});b.displayName="JBOption",e.JBOption=b,e.JBOptionList=d,e.JBSelect=p},"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("jb-select"),require("jb-core/react")):"function"==typeof define&&define.amd?define(["exports","react","jb-select","jb-core/react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).JBSelectReact={},e.React,e.JBSelect,e.JBCoreReact);
 //# sourceMappingURL=index.umd.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.umd.js","names":[],"sources":["../lib/JBOptionList.tsx","../lib/events-hook.ts","../lib/attributes-hook.ts","../lib/JBSelect.tsx","../lib/JBOption.tsx"],"sourcesContent":["","","","",""],"mappings":"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"}
+{"version":3,"file":"index.umd.js","names":[],"sources":["../lib/JBOptionList.tsx","../lib/events-hook.ts","../lib/attributes-hook.ts","../lib/JBSelect.tsx","../lib/JBOption.tsx"],"sourcesContent":[],"mappings":"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"}

package/react/lib/JBOption.tsx

@@ -1,10 +1,11 @@
+'use client'
 /* eslint-disable react/display-name */
 import React, { useEffect, useRef, useImperativeHandle, PropsWithChildren, ComponentProps } from 'react';
 import { JBOptionWebComponent } from 'jb-select';
 //TODO: make it generic when remove forward ref
 type TValue = any;
 
-declare global {
+declare module "react" {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace JSX {
     interface IntrinsicElements {
@@ -41,5 +42,5 @@ type Props<TValue> = {
   value:TValue
 }
 
-export type JBOptionProps<TValue> = PropsWithChildren<JSX.JBOptionType & Props<TValue>>
+export type JBOptionProps<TValue> = PropsWithChildren<React.JSX.JBOptionType & Props<TValue>>
 JBOption.displayName = 'JBOption';

package/react/lib/JBOptionList.tsx

@@ -1,3 +1,4 @@
+'use client'
 /* eslint-disable react/display-name */
 import React, { useEffect, useRef, useImperativeHandle } from 'react';
 // eslint-disable-next-line no-duplicate-imports
@@ -5,7 +6,7 @@ import { JBOptionListWebComponent } from 'jb-select';
 type TOption = any;
 type TValue = any;
 
-declare global {
+declare module "react" {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace JSX {
     interface IntrinsicElements {

package/react/lib/JBSelect.tsx

@@ -1,5 +1,6 @@
+'use client'
 /* eslint-disable react/display-name */
-import React, { useEffect, useRef, useState, useImperativeHandle,CSSProperties } from 'react';
+import React, { useRef, useImperativeHandle,CSSProperties } from 'react';
 import 'jb-select';
 // eslint-disable-next-line no-duplicate-imports
 import { JBSelectWebComponent } from 'jb-select';
@@ -8,7 +9,7 @@ import { useJBSelectAttribute, type JBSelectAttributes } from './attributes-hook
 export type JBSelectEventType<T> = T & {
     target: JBSelectWebComponent
 }
-declare global {
+declare module "react" {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace JSX {
       interface IntrinsicElements {
@@ -25,12 +26,10 @@ declare global {
       }
     }
 }
-//TODO: use generic when using react19 ref
-type TValue = any;
-export const JBSelect = React.forwardRef((props:Props, ref) => {
+export function JBSelect<TValue>(props:Props<TValue>) {
   const element = useRef<JBSelectWebComponent>(null);
   useImperativeHandle(
-    ref,
+    props.ref,
     () => (element ? element.current : undefined),
     [element],
   );
@@ -43,9 +42,10 @@ export const JBSelect = React.forwardRef((props:Props, ref) => {
       {props.children}
     </jb-select>
   );
-});
+};
 
-export type Props = EventProps & JBSelectAttributes<TValue> & {
+export type Props<TValue> = EventProps & JBSelectAttributes<TValue> & {
+    ref?: React.RefObject<JBSelectWebComponent>,
     style?:CSSProperties,
     className?: string,
     children?:React.ReactNode,