jb-select 6.4.0 → 6.4.2

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/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"}
+{"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,13 +1,15 @@
+'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';
 import { EventProps, useEvents } from './events-hook.js';
+import { useJBSelectAttribute, type JBSelectAttributes } from './attributes-hook.js';
 export type JBSelectEventType<T> = T & {
     target: JBSelectWebComponent
 }
-declare global {
+declare module "react" {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace JSX {
       interface IntrinsicElements {
@@ -24,70 +26,28 @@ declare global {
       }
     }
 }
-
-export const JBSelect = React.forwardRef((props:Props, ref) => {
+export function JBSelect<TValue>(props:Props<TValue>) {
   const element = useRef<JBSelectWebComponent>(null);
-  const [refChangeCount, refChangeCountSetter] = useState(0);
   useImperativeHandle(
-    ref,
-    () => (element ? element.current : {}),
+    props.ref,
+    () => (element ? element.current : undefined),
     [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]);
-  useEffect(() => {
-    if (props.error) {
-      element?.current?.setAttribute('error', props.error);
-    } else {
-      element?.current?.removeAttribute('error');
-    }
-  }, [props.error]);
+
+
   useEvents(element,props);
+  useJBSelectAttribute(element,props);
   return (
-    <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}>
+    <jb-select style={props.style?props.style:undefined} class={props.className?props.className:""} ref={element}>
       {props.children}
     </jb-select>
   );
-});
+};
 
-export type Props = EventProps & {
+export type Props<TValue> = EventProps & JBSelectAttributes<TValue> & {
+    ref?: React.RefObject<JBSelectWebComponent>,
     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,
 }
 JBSelect.displayName = 'JBSelect';

package/react/lib/attributes-hook.ts

@@ -0,0 +1,82 @@
+import { JBSelectWebComponent, type ValidationValue } from "jb-select";
+import { type ValidationItem } from "jb-validation";
+import { RefObject, useEffect } from "react";
+
+export type JBSelectAttributes<TValue> = {
+  validationList?: ValidationItem<ValidationValue<TValue>>[],
+  name?: string,
+  label?: string,
+  error?: string,
+  value?: any,
+  message?: string,
+  placeholder?: string,
+  searchPlaceholder?: string,
+  required?: boolean,
+  getSelectedValueDOM?: (option: any) => HTMLElement,
+
+}
+export function useJBSelectAttribute<TValue>(element: RefObject<JBSelectWebComponent>, props: JBSelectAttributes<TValue>) {
+  useEffect(() => {
+    if (props.message !== null && props.message !== undefined) {
+      element.current?.setAttribute("message", props.message);
+    } else {
+      element.current?.removeAttribute("message");
+    }
+  }, [props.message]);
+  useEffect(() => {
+    if (element && element.current) {
+      element.current.validation.list = props.validationList || [];
+    }
+  }, [props.validationList]);
+  useEffect(() => {
+    if (props.label !== null && props.label !== undefined) {
+      element.current?.setAttribute("label", props.label);
+    } else {
+      element.current?.removeAttribute("label");
+    }
+  }, [props.label]);
+
+  useEffect(() => {
+    if (props.required !== null && props.required !== undefined) {
+      element.current?.setAttribute("required", "");
+    } else {
+      element.current?.removeAttribute("required");
+    }
+  }, [props.required]);
+
+  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]);
+  useEffect(() => {
+    if (props.error) {
+      element?.current?.setAttribute('error', props.error);
+    } else {
+      element?.current?.removeAttribute('error');
+    }
+  }, [props.error]);
+
+  useEffect(() => {
+    if (props.name) {
+      element?.current?.setAttribute('name', props.name || '');
+    } else {
+      element?.current?.removeAttribute('name');
+    }
+  }, [props.name]);
+  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]);
+}