jb-textarea 3.4.0 → 3.6.0

package/react/dist/JBTextarea.js

@@ -1,93 +1,2 @@
-import React, { useEffect, useState, useRef, useImperativeHandle } from 'react';
-import 'jb-textarea';
-
-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 no-inner-declarations */
-// eslint-disable-next-line react/display-name
-const JBTextarea = React.forwardRef((props, ref) => {
-    {
-        //we set this state so when ref change we have a render and our event listener will be updated
-        const [refChangeCount, refChangeCountSetter] = useState(0);
-        const element = useRef(null);
-        useImperativeHandle(ref, () => (element ? element.current : {}), [element]);
-        useEffect(() => {
-            refChangeCountSetter(refChangeCount + 1);
-        }, [element.current]);
-        function onChange(e) {
-            if (props.onChange) {
-                props.onChange(e);
-            }
-        }
-        function onKeydown(e) {
-            if (props.onKeydown) {
-                props.onKeydown(e);
-            }
-        }
-        function onInput(e) {
-            if (props.onInput) {
-                props.onInput(e);
-            }
-        }
-        function onKeyup(e) {
-            if (props.onKeyup) {
-                props.onKeyup(e);
-            }
-        }
-        function onFocus(e) {
-            if (props.onFocus && e instanceof FocusEvent) {
-                props.onFocus(e);
-            }
-        }
-        function onBlur(e) {
-            if (props.onBlur && e instanceof FocusEvent) {
-                props.onBlur(e);
-            }
-        }
-        useEffect(() => {
-            const value = props.value || '';
-            if (element.current) {
-                element.current.value = value;
-            }
-        }, [props.value]);
-        useEffect(() => {
-            if (element.current) {
-                element.current.validation.list = props.validationList || [];
-            }
-        }, [props.validationList]);
-        useEffect(() => {
-            if (element.current && props.required !== undefined) {
-                props.required ? element.current.setAttribute("required", '') : element.current.removeAttribute("required");
-            }
-        }, [props.required]);
-        useEffect(() => {
-            if (element.current) {
-                element.current.autoHeight = props.autoHeight || false;
-            }
-        }, [props.autoHeight]);
-        useBindEvent(element, 'change', onChange);
-        useBindEvent(element, 'keydown', onKeydown);
-        useBindEvent(element, 'input', onInput);
-        useBindEvent(element, 'keyup', onKeyup);
-        useBindEvent(element, 'focus', onFocus);
-        useBindEvent(element, 'blur', onBlur);
-        return (React.createElement("jb-textarea", { placeholder: props.placeholder, class: props.className, style: props.style, ref: element, label: props.label, message: props.message, name: props.name }));
-    }
-});
-
-export { JBTextarea };
-//# sourceMappingURL=JBTextarea.js.map
+import e,{useEffect as r,useImperativeHandle as t,useRef as o}from"react";import"jb-textarea";import{useEvent as a}from"jb-core/react";let n=e.forwardRef((n,u)=>{{var i;let l=o(null);return t(u,()=>l?l.current:void 0,[l]),r(()=>{let e=i.value||"";l.current&&(l.current.value=e)},[(i=n).value]),r(()=>{l.current&&(l.current.validation.list=i.validationList||[])},[i.validationList]),r(()=>{l.current&&void 0!==i.required&&(i.required?l.current.setAttribute("required",""):l.current.removeAttribute("required"))},[i.required]),r(()=>{l.current&&(l.current.autoHeight=i.autoHeight||!1)},[i.autoHeight]),r(()=>{i.error?l?.current?.setAttribute("error",i.error):l?.current?.removeAttribute("error")},[i.error]),a(l,"load",n.onLoad,!0),a(l,"init",n.onInit,!0),a(l,"change",n.onChange),a(l,"keydown",n.onKeyDown),a(l,"input",n.onInput),a(l,"keyup",n.onKeyUp),a(l,"focus",n.onFocus),a(l,"blur",n.onBlur),e.createElement("jb-textarea",{placeholder:n.placeholder,class:n.className,style:n.style,ref:l,label:n.label,message:n.message,name:n.name})}});export{n as JBTextarea};
+//# sourceMappingURL=JBTextarea.js.map

package/react/dist/JBTextarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"JBTextarea.js","sources":["../../../../common/hooks/use-event.ts","../lib/JBTextarea.tsx"],"sourcesContent":["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 no-inner-declarations */\r\nimport React, { useRef, useEffect, useImperativeHandle, useState, CSSProperties } from 'react';\r\nimport 'jb-textarea';\r\n// eslint-disable-next-line no-duplicate-imports\r\nimport {JBTextareaWebComponent, type ValidationValue} from 'jb-textarea';\r\nimport { useBindEvent } from '../../../../common/hooks/use-event.js';\r\nimport { type ValidationItem } from \"jb-validation\";\r\ndeclare global {\r\n    // eslint-disable-next-line @typescript-eslint/no-namespace\r\n    namespace JSX {\r\n      interface IntrinsicElements {\r\n        'jb-textarea': JBTextareaType;\r\n      }\r\n      interface JBTextareaType extends React.DetailedHTMLProps<React.HTMLAttributes<JBTextareaWebComponent>, JBTextareaWebComponent> {\r\n        class?:string,\r\n        label?: string,\r\n        name?:string,\r\n        message?:string,\r\n        placeholder?:string,\r\n        // ref:React.RefObject<JBDateInputWebComponent>,\r\n      }\r\n    }\r\n}\r\n// eslint-disable-next-line react/display-name\r\nconst JBTextarea = React.forwardRef((props:JBTextareaProps, ref) => {\r\n  {\r\n    //we set this state so when ref change we have a render and our event listener will be updated\r\n    const [refChangeCount , refChangeCountSetter] = useState(0);\r\n    const element = useRef<JBTextareaWebComponent>(null);\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    function onChange(e:JBTextareaEventType<Event>) {\r\n      if (props.onChange) {\r\n        props.onChange(e);\r\n      }\r\n    }\r\n    function onKeydown(e:JBTextareaEventType<KeyboardEvent>) {\r\n      if (props.onKeydown) {\r\n        props.onKeydown(e);\r\n      }\r\n    }\r\n    function onInput(e:JBTextareaEventType<InputEvent>) {\r\n      if (props.onInput) {\r\n        props.onInput(e);\r\n      }\r\n    }\r\n    function onKeyup(e:JBTextareaEventType<KeyboardEvent>) {\r\n      if (props.onKeyup) {\r\n        props.onKeyup(e);\r\n      }\r\n    }\r\n    function onFocus(e:JBTextareaEventType<FocusEvent>) {\r\n      if (props.onFocus && e instanceof FocusEvent) {\r\n        props.onFocus(e);\r\n      }\r\n    }\r\n    function onBlur(e:JBTextareaEventType<FocusEvent>) {\r\n      if (props.onBlur && e instanceof FocusEvent) {\r\n        props.onBlur(e);\r\n      }\r\n    }\r\n    useEffect(() => {\r\n      const value:string = props.value || '';\r\n      if(element.current){\r\n        element.current.value = value;\r\n      }\r\n    }, [props.value]);\r\n\r\n    useEffect(() => {\r\n      if(element.current){\r\n        element.current.validation.list = props.validationList || [];\r\n      }\r\n    }, [props.validationList]);\r\n    useEffect(() => {\r\n      if(element.current && props.required!== undefined){\r\n        props.required?element.current.setAttribute(\"required\",''):element.current.removeAttribute(\"required\");\r\n      }\r\n    }, [props.required]);\r\n\r\n    useEffect(() => {\r\n      if(element.current){\r\n        element.current.autoHeight = props.autoHeight || false;\r\n      }\r\n    }, [props.autoHeight]);\r\n    useBindEvent(element, 'change', onChange);\r\n    useBindEvent(element, 'keydown', onKeydown);\r\n    useBindEvent(element, 'input', onInput);\r\n    useBindEvent(element, 'keyup', onKeyup);\r\n    useBindEvent(element, 'focus', onFocus);\r\n    useBindEvent(element, 'blur', onBlur);\r\n    return (\r\n      <jb-textarea placeholder={props.placeholder} class={props.className} style={props.style} ref={element} label={props.label} message={props.message} name={props.name}></jb-textarea>\r\n    );\r\n  }\r\n});\r\nexport type JBTextareaEventType<T> = T & {\r\n    target: JBTextareaWebComponent\r\n}\r\ntype JBTextareaProps = {\r\n    label?: string,\r\n    value?: string | null | undefined,\r\n    onChange?: (e:JBTextareaEventType<Event>)=>void,\r\n    onFocus?:(e:JBTextareaEventType<FocusEvent>)=>void,\r\n    onBlur?:(e:JBTextareaEventType<FocusEvent>)=>void,\r\n    onKeydown?: (e:JBTextareaEventType<KeyboardEvent>)=>void,\r\n    onKeyup?: (e:JBTextareaEventType<KeyboardEvent>)=>void,\r\n    onInput?: (e:JBTextareaEventType<InputEvent>)=>void,\r\n    onBeforeinput?: (e:JBTextareaEventType<InputEvent>)=>void,\r\n    placeholder?:string,\r\n    className?: string,\r\n    style?:CSSProperties,\r\n    validationList?:ValidationItem<ValidationValue>[],\r\n    autoHeight?: boolean,\r\n    message?:string,\r\n    name?:string,\r\n    required?:boolean\r\n}\r\nexport {JBTextarea};"],"names":[],"mappings":";;;AAgBM,SAAU,YAAY,CAAuD,GAAQ,EAAE,KAAY,EAAE,OAAwB,EAAE,OAAO,GAAG,KAAK,EAAA;IAClJ,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC;AACxB,QAAA,IAAI,GAAG,EAAE;;YAEP,GAAG,CAAC,gBAAgB,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;AAC/C,SAAA;;AAED,QAAA,OAAO,SAAS,OAAO,GAAA;AACrB,YAAA,IAAG,GAAG,EAAC;gBACL,GAAG,CAAC,mBAAmB,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;AAClD,aAAA;AACH,SAAC,CAAC;KACH,EAAC,CAAC,GAAG,EAAC,KAAK,EAAC,OAAO,EAAC,OAAO,CAAC,CAAC,CAAC;AACjC;;AC9BA;AAuBA;AACM,MAAA,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAAqB,EAAE,GAAG,KAAI;AACjE,IAAA;;QAEE,MAAM,CAAC,cAAc,EAAG,oBAAoB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;AAC5D,QAAA,MAAM,OAAO,GAAG,MAAM,CAAyB,IAAI,CAAC,CAAC;QACrD,mBAAmB,CACjB,GAAG,EACH,OAAO,OAAO,GAAG,OAAO,CAAC,OAAO,GAAG,EAAE,CAAC,EACtC,CAAC,OAAO,CAAC,CACV,CAAC;QACF,SAAS,CAAC,MAAI;AACZ,YAAA,oBAAoB,CAAC,cAAc,GAAC,CAAC,CAAC,CAAC;AACzC,SAAC,EAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;QACrB,SAAS,QAAQ,CAAC,CAA4B,EAAA;YAC5C,IAAI,KAAK,CAAC,QAAQ,EAAE;AAClB,gBAAA,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;AACnB,aAAA;SACF;QACD,SAAS,SAAS,CAAC,CAAoC,EAAA;YACrD,IAAI,KAAK,CAAC,SAAS,EAAE;AACnB,gBAAA,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AACpB,aAAA;SACF;QACD,SAAS,OAAO,CAAC,CAAiC,EAAA;YAChD,IAAI,KAAK,CAAC,OAAO,EAAE;AACjB,gBAAA,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAClB,aAAA;SACF;QACD,SAAS,OAAO,CAAC,CAAoC,EAAA;YACnD,IAAI,KAAK,CAAC,OAAO,EAAE;AACjB,gBAAA,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAClB,aAAA;SACF;QACD,SAAS,OAAO,CAAC,CAAiC,EAAA;AAChD,YAAA,IAAI,KAAK,CAAC,OAAO,IAAI,CAAC,YAAY,UAAU,EAAE;AAC5C,gBAAA,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAClB,aAAA;SACF;QACD,SAAS,MAAM,CAAC,CAAiC,EAAA;AAC/C,YAAA,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,YAAY,UAAU,EAAE;AAC3C,gBAAA,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACjB,aAAA;SACF;QACD,SAAS,CAAC,MAAK;AACb,YAAA,MAAM,KAAK,GAAU,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;YACvC,IAAG,OAAO,CAAC,OAAO,EAAC;AACjB,gBAAA,OAAO,CAAC,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;AAC/B,aAAA;AACH,SAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QAElB,SAAS,CAAC,MAAK;YACb,IAAG,OAAO,CAAC,OAAO,EAAC;AACjB,gBAAA,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC,cAAc,IAAI,EAAE,CAAC;AAC9D,aAAA;AACH,SAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;QAC3B,SAAS,CAAC,MAAK;YACb,IAAG,OAAO,CAAC,OAAO,IAAI,KAAK,CAAC,QAAQ,KAAI,SAAS,EAAC;gBAChD,KAAK,CAAC,QAAQ,GAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,EAAC,EAAE,CAAC,GAAC,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;AACxG,aAAA;AACH,SAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;QAErB,SAAS,CAAC,MAAK;YACb,IAAG,OAAO,CAAC,OAAO,EAAC;gBACjB,OAAO,CAAC,OAAO,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC;AACxD,aAAA;AACH,SAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;AACvB,QAAA,YAAY,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC1C,QAAA,YAAY,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;AAC5C,QAAA,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;AACxC,QAAA,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;AACxC,QAAA,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;AACxC,QAAA,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AACtC,QAAA,QACE,KAAa,CAAA,aAAA,CAAA,aAAA,EAAA,EAAA,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAA,CAAgB,EACnL;AACH,KAAA;AACH,CAAC;;;;"}
+{"version":3,"file":"JBTextarea.js","names":[],"sources":["../lib/events-hook.ts","../lib/attributes-hook.ts","../lib/JBTextarea.tsx"],"sourcesContent":["","",""],"mappings":";;;;;AAsBM,SAAU,UAAU,SAA4C,OAAiB;AACrF,UAAS,SAAS,QAAQ,MAAM,QAAQ,KAAK;AAC7C,UAAS,SAAS,QAAQ,MAAM,QAAQ,KAAK;AAC7C,UAAS,SAAS,UAAU,MAAM,SAAS;AAC3C,UAAS,SAAS,WAAW,MAAM,UAAU;AAC7C,UAAS,SAAS,SAAS,MAAM,QAAQ;AACzC,UAAS,SAAS,SAAS,MAAM,QAAQ;AACzC,UAAS,SAAS,SAAS,MAAM,QAAQ;AACzC,UAAS,SAAS,QAAQ,MAAM,OAAO;AACzC;;;;ACpBM,SAAU,uBAAuB,SAA4C,OAA2B;AAE5G,WAAU,MAAG;EACX,MAAM,QAAe,MAAM,SAAS;AACpC,MAAG,QAAQ,QACT,SAAQ,QAAQ,QAAQ;CAE3B,GAAE,CAEH,MAAU;WAEN,MAAA;AACF,MAAA,QAAA,QACE,SAAM,QAAc,WAAE,OAAA,MAAA,kBAAA,CAAA;WAGtB;AAEJ,WAAU,MAAA;AAEV,MAAA,QAAe,WAAA,MAAA,aAAA,UACV,OAAA,WAAgB,QAAA,QAAA,aAAA,YAAA,GAAA,GAAA,QAAA,QAAA,gBAAA,WAAA;KAGjB,MAAM,QAEV,EAAA;WACM,MAAM;MACR,QAAO,QACT,SAAA,QAAA,aAAA,MAAA,cAAA;KAEA,MAAA,UACD,EAAA;AACH,WAAA,MAAA;;;;;;;;ACrBA,MAAA,2BAAA,MAAA,WAAA,CAAA,OAAA,QAAA;CACA;EAEI,MAAA,UAAA,OAAA,KAAA;AACA,sBAAgB,KAA+B,MAAK,UAAA,QAAA,UAAA,WAAA,CACpD,OAKA,EAAA;AACA,yBAAkB,SAAM,MAAA;AACxB,YACE,SAAA,MAAA;AAEJ,uBAAA,MAAA,cAAA,eAAA;GACA,aAAA,MAAA;GAUM,OAAU,MAAC"}

package/react/dist/JBTextarea.umd.js

@@ -1,98 +1,2 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('jb-textarea')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'jb-textarea'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JBTextarea = {}, global.React));
-})(this, (function (exports, React) { 'use strict';
-
-  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 no-inner-declarations */
-  // eslint-disable-next-line react/display-name
-  const JBTextarea = React.forwardRef((props, ref) => {
-      {
-          //we set this state so when ref change we have a render and our event listener will be updated
-          const [refChangeCount, refChangeCountSetter] = React.useState(0);
-          const element = React.useRef(null);
-          React.useImperativeHandle(ref, () => (element ? element.current : {}), [element]);
-          React.useEffect(() => {
-              refChangeCountSetter(refChangeCount + 1);
-          }, [element.current]);
-          function onChange(e) {
-              if (props.onChange) {
-                  props.onChange(e);
-              }
-          }
-          function onKeydown(e) {
-              if (props.onKeydown) {
-                  props.onKeydown(e);
-              }
-          }
-          function onInput(e) {
-              if (props.onInput) {
-                  props.onInput(e);
-              }
-          }
-          function onKeyup(e) {
-              if (props.onKeyup) {
-                  props.onKeyup(e);
-              }
-          }
-          function onFocus(e) {
-              if (props.onFocus && e instanceof FocusEvent) {
-                  props.onFocus(e);
-              }
-          }
-          function onBlur(e) {
-              if (props.onBlur && e instanceof FocusEvent) {
-                  props.onBlur(e);
-              }
-          }
-          React.useEffect(() => {
-              const value = props.value || '';
-              if (element.current) {
-                  element.current.value = value;
-              }
-          }, [props.value]);
-          React.useEffect(() => {
-              if (element.current) {
-                  element.current.validation.list = props.validationList || [];
-              }
-          }, [props.validationList]);
-          React.useEffect(() => {
-              if (element.current && props.required !== undefined) {
-                  props.required ? element.current.setAttribute("required", '') : element.current.removeAttribute("required");
-              }
-          }, [props.required]);
-          React.useEffect(() => {
-              if (element.current) {
-                  element.current.autoHeight = props.autoHeight || false;
-              }
-          }, [props.autoHeight]);
-          useBindEvent(element, 'change', onChange);
-          useBindEvent(element, 'keydown', onKeydown);
-          useBindEvent(element, 'input', onInput);
-          useBindEvent(element, 'keyup', onKeyup);
-          useBindEvent(element, 'focus', onFocus);
-          useBindEvent(element, 'blur', onBlur);
-          return (React.createElement("jb-textarea", { placeholder: props.placeholder, class: props.className, style: props.style, ref: element, label: props.label, message: props.message, name: props.name }));
-      }
-  });
-
-  exports.JBTextarea = JBTextarea;
-
-}));
-//# sourceMappingURL=JBTextarea.umd.js.map
+var e,t;e=this,t=function(e,t,r,u){"use strict";var n=Object.create,a=Object.defineProperty,o=Object.getOwnPropertyDescriptor,l=Object.getOwnPropertyNames,c=Object.getPrototypeOf,i=Object.prototype.hasOwnProperty,s=(e,t,r,u)=>{if(t&&"object"==typeof t||"function"==typeof t)for(var n,c=l(t),s=0,f=c.length;s<f;s++)n=c[s],i.call(e,n)||n===r||a(e,n,{get:(e=>t[e]).bind(null,n),enumerable:!(u=o(t,n))||u.enumerable});return e},f=(e,t,r)=>(r=null!=e?n(c(e)):{},s(!t&&e&&e.__esModule?r:a(r,"default",{value:e,enumerable:!0}),e));t=f(t),u=f(u);let d=t.default.forwardRef((e,r)=>{{let n=(0,t.useRef)(null);return(0,t.useImperativeHandle)(r,()=>n?n.current:void 0,[n]),(0,t.useEffect)(()=>{let t=e.value||"";n.current&&(n.current.value=t)},[e.value]),(0,t.useEffect)(()=>{n.current&&(n.current.validation.list=e.validationList||[])},[e.validationList]),(0,t.useEffect)(()=>{n.current&&void 0!==e.required&&(e.required?n.current.setAttribute("required",""):n.current.removeAttribute("required"))},[e.required]),(0,t.useEffect)(()=>{n.current&&(n.current.autoHeight=e.autoHeight||!1)},[e.autoHeight]),(0,t.useEffect)(()=>{e.error?n?.current?.setAttribute("error",e.error):n?.current?.removeAttribute("error")},[e.error]),(0,u.useEvent)(n,"load",e.onLoad,!0),(0,u.useEvent)(n,"init",e.onInit,!0),(0,u.useEvent)(n,"change",e.onChange),(0,u.useEvent)(n,"keydown",e.onKeyDown),(0,u.useEvent)(n,"input",e.onInput),(0,u.useEvent)(n,"keyup",e.onKeyUp),(0,u.useEvent)(n,"focus",e.onFocus),(0,u.useEvent)(n,"blur",e.onBlur),t.default.createElement("jb-textarea",{placeholder:e.placeholder,class:e.className,style:e.style,ref:n,label:e.label,message:e.message,name:e.name})}});e.JBTextarea=d},"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("jb-textarea"),require("jb-core/react")):"function"==typeof define&&define.amd?define(["exports","react","jb-textarea","jb-core/react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).JBTextareaReact={},e.React,e.JBTextarea,e.JBCoreReact);
+//# sourceMappingURL=JBTextarea.umd.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"JBTextarea.umd.js","sources":["../../../../common/hooks/use-event.ts","../lib/JBTextarea.tsx"],"sourcesContent":["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 no-inner-declarations */\r\nimport React, { useRef, useEffect, useImperativeHandle, useState, CSSProperties } from 'react';\r\nimport 'jb-textarea';\r\n// eslint-disable-next-line no-duplicate-imports\r\nimport {JBTextareaWebComponent, type ValidationValue} from 'jb-textarea';\r\nimport { useBindEvent } from '../../../../common/hooks/use-event.js';\r\nimport { type ValidationItem } from \"jb-validation\";\r\ndeclare global {\r\n    // eslint-disable-next-line @typescript-eslint/no-namespace\r\n    namespace JSX {\r\n      interface IntrinsicElements {\r\n        'jb-textarea': JBTextareaType;\r\n      }\r\n      interface JBTextareaType extends React.DetailedHTMLProps<React.HTMLAttributes<JBTextareaWebComponent>, JBTextareaWebComponent> {\r\n        class?:string,\r\n        label?: string,\r\n        name?:string,\r\n        message?:string,\r\n        placeholder?:string,\r\n        // ref:React.RefObject<JBDateInputWebComponent>,\r\n      }\r\n    }\r\n}\r\n// eslint-disable-next-line react/display-name\r\nconst JBTextarea = React.forwardRef((props:JBTextareaProps, ref) => {\r\n  {\r\n    //we set this state so when ref change we have a render and our event listener will be updated\r\n    const [refChangeCount , refChangeCountSetter] = useState(0);\r\n    const element = useRef<JBTextareaWebComponent>(null);\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    function onChange(e:JBTextareaEventType<Event>) {\r\n      if (props.onChange) {\r\n        props.onChange(e);\r\n      }\r\n    }\r\n    function onKeydown(e:JBTextareaEventType<KeyboardEvent>) {\r\n      if (props.onKeydown) {\r\n        props.onKeydown(e);\r\n      }\r\n    }\r\n    function onInput(e:JBTextareaEventType<InputEvent>) {\r\n      if (props.onInput) {\r\n        props.onInput(e);\r\n      }\r\n    }\r\n    function onKeyup(e:JBTextareaEventType<KeyboardEvent>) {\r\n      if (props.onKeyup) {\r\n        props.onKeyup(e);\r\n      }\r\n    }\r\n    function onFocus(e:JBTextareaEventType<FocusEvent>) {\r\n      if (props.onFocus && e instanceof FocusEvent) {\r\n        props.onFocus(e);\r\n      }\r\n    }\r\n    function onBlur(e:JBTextareaEventType<FocusEvent>) {\r\n      if (props.onBlur && e instanceof FocusEvent) {\r\n        props.onBlur(e);\r\n      }\r\n    }\r\n    useEffect(() => {\r\n      const value:string = props.value || '';\r\n      if(element.current){\r\n        element.current.value = value;\r\n      }\r\n    }, [props.value]);\r\n\r\n    useEffect(() => {\r\n      if(element.current){\r\n        element.current.validation.list = props.validationList || [];\r\n      }\r\n    }, [props.validationList]);\r\n    useEffect(() => {\r\n      if(element.current && props.required!== undefined){\r\n        props.required?element.current.setAttribute(\"required\",''):element.current.removeAttribute(\"required\");\r\n      }\r\n    }, [props.required]);\r\n\r\n    useEffect(() => {\r\n      if(element.current){\r\n        element.current.autoHeight = props.autoHeight || false;\r\n      }\r\n    }, [props.autoHeight]);\r\n    useBindEvent(element, 'change', onChange);\r\n    useBindEvent(element, 'keydown', onKeydown);\r\n    useBindEvent(element, 'input', onInput);\r\n    useBindEvent(element, 'keyup', onKeyup);\r\n    useBindEvent(element, 'focus', onFocus);\r\n    useBindEvent(element, 'blur', onBlur);\r\n    return (\r\n      <jb-textarea placeholder={props.placeholder} class={props.className} style={props.style} ref={element} label={props.label} message={props.message} name={props.name}></jb-textarea>\r\n    );\r\n  }\r\n});\r\nexport type JBTextareaEventType<T> = T & {\r\n    target: JBTextareaWebComponent\r\n}\r\ntype JBTextareaProps = {\r\n    label?: string,\r\n    value?: string | null | undefined,\r\n    onChange?: (e:JBTextareaEventType<Event>)=>void,\r\n    onFocus?:(e:JBTextareaEventType<FocusEvent>)=>void,\r\n    onBlur?:(e:JBTextareaEventType<FocusEvent>)=>void,\r\n    onKeydown?: (e:JBTextareaEventType<KeyboardEvent>)=>void,\r\n    onKeyup?: (e:JBTextareaEventType<KeyboardEvent>)=>void,\r\n    onInput?: (e:JBTextareaEventType<InputEvent>)=>void,\r\n    onBeforeinput?: (e:JBTextareaEventType<InputEvent>)=>void,\r\n    placeholder?:string,\r\n    className?: string,\r\n    style?:CSSProperties,\r\n    validationList?:ValidationItem<ValidationValue>[],\r\n    autoHeight?: boolean,\r\n    message?:string,\r\n    name?:string,\r\n    required?:boolean\r\n}\r\nexport {JBTextarea};"],"names":["useEffect","useState","useRef","useImperativeHandle"],"mappings":"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"}
+{"version":3,"file":"JBTextarea.umd.js","names":[],"sources":["../lib/events-hook.ts","../lib/attributes-hook.ts","../lib/JBTextarea.tsx"],"sourcesContent":["","",""],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBM,SAAU,UAAU,SAA4C,OAAiB;AACrF,6BAAS,SAAS,QAAQ,MAAM,QAAQ,KAAK;AAC7C,6BAAS,SAAS,QAAQ,MAAM,QAAQ,KAAK;AAC7C,6BAAS,SAAS,UAAU,MAAM,SAAS;AAC3C,6BAAS,SAAS,WAAW,MAAM,UAAU;AAC7C,6BAAS,SAAS,SAAS,MAAM,QAAQ;AACzC,6BAAS,SAAS,SAAS,MAAM,QAAQ;AACzC,6BAAS,SAAS,SAAS,MAAM,QAAQ;AACzC,6BAAS,SAAS,QAAQ,MAAM,OAAO;AACzC;;;;ACpBM,SAAU,uBAAuB,SAA4C,OAA2B;AAE5G,sBAAU,MAAG;EACX,MAAM,QAAe,MAAM,SAAS;AACpC,MAAG,QAAQ,QACT,SAAQ,QAAQ,QAAQ;CAE3B,GAAE,CAEH,MAAU;sBAEN,MAAA;AACF,MAAA,QAAA,QACE,SAAM,QAAc,WAAE,OAAA,MAAA,kBAAA,CAAA;WAGtB;AAEJ,sBAAU,MAAA;AAEV,MAAA,QAAe,WAAA,MAAA,aAAA,UACV,OAAA,WAAgB,QAAA,QAAA,aAAA,YAAA,GAAA,GAAA,QAAA,QAAA,gBAAA,WAAA;KAGjB,MAAM,QAEV,EAAA;sBACM,MAAM;MACR,QAAO,QACT,SAAA,QAAA,aAAA,MAAA,cAAA;KAEA,MAAA,UACD,EAAA;AACH,sBAAA,MAAA;;;;;;;;ACrBA,MAAA,2BAAA,cAAA,WAAA,CAAA,OAAA,QAAA;CACA;EAEI,MAAA,UAAA,kBAAA,KAAA;AACA,iCAAgB,KAA+B,MAAK,UAAA,QAAA,UAAA,WAAA,CACpD,OAKA,EAAA;AACA,yBAAkB,SAAM,MAAA;AACxB,YACE,SAAA,MAAA;AAEJ,uBAAA,cAAA,cAAA,eAAA;GACA,aAAA,MAAA;GAUM,OAAU,MAAC"}

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

@@ -0,0 +1,11 @@
+import { JBTextareaWebComponent, type ValidationValue } from "jb-textarea";
+import { type ValidationItem } from "jb-validation";
+import { RefObject } from "react";
+export type JBTextareaAttributes = {
+    value?: string | null | undefined;
+    validationList?: ValidationItem<ValidationValue>[];
+    autoHeight?: boolean;
+    required?: boolean;
+    error?: string;
+};
+export declare function useJBTextareaAttribute(element: RefObject<JBTextareaWebComponent>, props: JBTextareaAttributes): void;

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

@@ -0,0 +1,20 @@
+import { RefObject } from "react";
+import type { JBTextareaWebComponent, JBTextareaEventType } from 'jb-textarea';
+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: JBTextareaEventType<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: JBTextareaEventType<CustomEvent>) => void;
+    onChange?: (e: JBTextareaEventType<Event>) => void;
+    onFocus?: (e: JBTextareaEventType<FocusEvent>) => void;
+    onBlur?: (e: JBTextareaEventType<FocusEvent>) => void;
+    onKeyDown?: (e: JBTextareaEventType<KeyboardEvent>) => void;
+    onKeyUp?: (e: JBTextareaEventType<KeyboardEvent>) => void;
+    onInput?: (e: JBTextareaEventType<InputEvent>) => void;
+    onBeforeinput?: (e: JBTextareaEventType<InputEvent>) => void;
+};
+export declare function useEvents(element: RefObject<JBTextareaWebComponent>, props: EventProps): void;

package/react/dist/lib/JBTextarea.d.ts

@@ -0,0 +1,44 @@
+import React, { CSSProperties } from 'react';
+import 'jb-textarea';
+import { JBTextareaWebComponent, type ValidationValue } from 'jb-textarea';
+import { type ValidationItem } from "jb-validation";
+import { EventProps } from './events-hook.js';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'jb-textarea': JBTextareaType;
+        }
+        interface JBTextareaType extends React.DetailedHTMLProps<React.HTMLAttributes<JBTextareaWebComponent>, JBTextareaWebComponent> {
+            class?: string;
+            label?: string;
+            name?: string;
+            message?: string;
+            placeholder?: string;
+        }
+    }
+}
+declare const JBTextarea: React.ForwardRefExoticComponent<EventProps & {
+    label?: string;
+    value?: string | null | undefined;
+    placeholder?: string;
+    className?: string;
+    style?: CSSProperties;
+    validationList?: ValidationItem<ValidationValue>[];
+    autoHeight?: boolean;
+    message?: string;
+    name?: string;
+    required?: boolean;
+} & React.RefAttributes<unknown>>;
+export type Props = EventProps & {
+    label?: string;
+    value?: string | null | undefined;
+    placeholder?: string;
+    className?: string;
+    style?: CSSProperties;
+    validationList?: ValidationItem<ValidationValue>[];
+    autoHeight?: boolean;
+    message?: string;
+    name?: string;
+    required?: boolean;
+};
+export { JBTextarea };

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

@@ -0,0 +1,20 @@
+import { RefObject } from "react";
+import type { JBTextareaWebComponent, JBTextareaEventType } from 'jb-textarea';
+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: JBTextareaEventType<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: JBTextareaEventType<CustomEvent>) => void;
+    onChange?: (e: JBTextareaEventType<Event>) => void;
+    onFocus?: (e: JBTextareaEventType<FocusEvent>) => void;
+    onBlur?: (e: JBTextareaEventType<FocusEvent>) => void;
+    onKeyDown?: (e: JBTextareaEventType<KeyboardEvent>) => void;
+    onKeyUp?: (e: JBTextareaEventType<KeyboardEvent>) => void;
+    onInput?: (e: JBTextareaEventType<InputEvent>) => void;
+    onBeforeinput?: (e: JBTextareaEventType<InputEvent>) => void;
+};
+export declare function useEvents(element: RefObject<JBTextareaWebComponent>, props: EventProps): void;

package/react/dist/web-component/jb-textarea/react/lib/JBTextarea.d.ts

@@ -2,6 +2,7 @@ import React, { CSSProperties } from 'react';
 import 'jb-textarea';
 import { JBTextareaWebComponent, type ValidationValue } from 'jb-textarea';
 import { type ValidationItem } from "jb-validation";
+import { EventProps } from './events-hook.js';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -16,20 +17,21 @@ declare global {
         }
     }
 }
-declare const JBTextarea: React.ForwardRefExoticComponent<JBTextareaProps & React.RefAttributes<unknown>>;
-export type JBTextareaEventType<T> = T & {
-    target: JBTextareaWebComponent;
-};
-type JBTextareaProps = {
+declare const JBTextarea: React.ForwardRefExoticComponent<EventProps & {
+    label?: string;
+    value?: string | null | undefined;
+    placeholder?: string;
+    className?: string;
+    style?: CSSProperties;
+    validationList?: ValidationItem<ValidationValue>[];
+    autoHeight?: boolean;
+    message?: string;
+    name?: string;
+    required?: boolean;
+} & React.RefAttributes<unknown>>;
+export type Props = EventProps & {
     label?: string;
     value?: string | null | undefined;
-    onChange?: (e: JBTextareaEventType<Event>) => void;
-    onFocus?: (e: JBTextareaEventType<FocusEvent>) => void;
-    onBlur?: (e: JBTextareaEventType<FocusEvent>) => void;
-    onKeydown?: (e: JBTextareaEventType<KeyboardEvent>) => void;
-    onKeyup?: (e: JBTextareaEventType<KeyboardEvent>) => void;
-    onInput?: (e: JBTextareaEventType<InputEvent>) => void;
-    onBeforeinput?: (e: JBTextareaEventType<InputEvent>) => void;
     placeholder?: string;
     className?: string;
     style?: CSSProperties;

package/react/dist/web-component/jb-textarea/react/lib/events-hook.d.ts

@@ -0,0 +1,20 @@
+import { RefObject } from "react";
+import type { JBTextareaWebComponent, JBTextareaEventType } from 'jb-textarea';
+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: JBTextareaEventType<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: JBTextareaEventType<CustomEvent>) => void;
+    onChange?: (e: JBTextareaEventType<Event>) => void;
+    onFocus?: (e: JBTextareaEventType<FocusEvent>) => void;
+    onBlur?: (e: JBTextareaEventType<FocusEvent>) => void;
+    onKeyDown?: (e: JBTextareaEventType<KeyboardEvent>) => void;
+    onKeyUp?: (e: JBTextareaEventType<KeyboardEvent>) => void;
+    onInput?: (e: JBTextareaEventType<InputEvent>) => void;
+    onBeforeinput?: (e: JBTextareaEventType<InputEvent>) => void;
+};
+export declare function useEvents(element: RefObject<JBTextareaWebComponent>, props: EventProps): void;

package/react/lib/JBTextarea.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable no-inner-declarations */
-import React, { useRef, useEffect, useImperativeHandle, useState, CSSProperties } from 'react';
+import React, { useRef, useImperativeHandle, CSSProperties } from 'react';
 import 'jb-textarea';
 // eslint-disable-next-line no-duplicate-imports
-import {JBTextareaWebComponent, type ValidationValue} from 'jb-textarea';
-import { useBindEvent } from '../../../../common/hooks/use-event.js';
-import { type ValidationItem } from "jb-validation";
+import {JBTextareaWebComponent} from 'jb-textarea';
+import { EventProps, useEvents } from './events-hook.js';
+import { JBTextareaAttributes, useJBTextareaAttribute } from './attributes-hook.js';
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace JSX {
@@ -22,103 +22,29 @@ declare global {
     }
 }
 // eslint-disable-next-line react/display-name
-const JBTextarea = React.forwardRef((props:JBTextareaProps, ref) => {
+const JBTextarea = React.forwardRef((props:Props, ref) => {
   {
     //we set this state so when ref change we have a render and our event listener will be updated
-    const [refChangeCount , refChangeCountSetter] = useState(0);
     const element = useRef<JBTextareaWebComponent>(null);
     useImperativeHandle(
       ref,
-      () => (element ? element.current : {}),
+      () => (element ? element.current : undefined),
       [element],
     );
-    useEffect(()=>{
-      refChangeCountSetter(refChangeCount+1);
-    },[element.current]);
-    function onChange(e:JBTextareaEventType<Event>) {
-      if (props.onChange) {
-        props.onChange(e);
-      }
-    }
-    function onKeydown(e:JBTextareaEventType<KeyboardEvent>) {
-      if (props.onKeydown) {
-        props.onKeydown(e);
-      }
-    }
-    function onInput(e:JBTextareaEventType<InputEvent>) {
-      if (props.onInput) {
-        props.onInput(e);
-      }
-    }
-    function onKeyup(e:JBTextareaEventType<KeyboardEvent>) {
-      if (props.onKeyup) {
-        props.onKeyup(e);
-      }
-    }
-    function onFocus(e:JBTextareaEventType<FocusEvent>) {
-      if (props.onFocus && e instanceof FocusEvent) {
-        props.onFocus(e);
-      }
-    }
-    function onBlur(e:JBTextareaEventType<FocusEvent>) {
-      if (props.onBlur && e instanceof FocusEvent) {
-        props.onBlur(e);
-      }
-    }
-    useEffect(() => {
-      const value:string = props.value || '';
-      if(element.current){
-        element.current.value = value;
-      }
-    }, [props.value]);
-
-    useEffect(() => {
-      if(element.current){
-        element.current.validation.list = props.validationList || [];
-      }
-    }, [props.validationList]);
-    useEffect(() => {
-      if(element.current && props.required!== undefined){
-        props.required?element.current.setAttribute("required",''):element.current.removeAttribute("required");
-      }
-    }, [props.required]);
-
-    useEffect(() => {
-      if(element.current){
-        element.current.autoHeight = props.autoHeight || false;
-      }
-    }, [props.autoHeight]);
-    useBindEvent(element, 'change', onChange);
-    useBindEvent(element, 'keydown', onKeydown);
-    useBindEvent(element, 'input', onInput);
-    useBindEvent(element, 'keyup', onKeyup);
-    useBindEvent(element, 'focus', onFocus);
-    useBindEvent(element, 'blur', onBlur);
+    useJBTextareaAttribute(element, props);
+    useEvents(element,props);
     return (
       <jb-textarea placeholder={props.placeholder} class={props.className} style={props.style} ref={element} label={props.label} message={props.message} name={props.name}></jb-textarea>
     );
   }
 });
-export type JBTextareaEventType<T> = T & {
-    target: JBTextareaWebComponent
-}
-type JBTextareaProps = {
+
+export type Props = EventProps & JBTextareaAttributes & {
     label?: string,
-    value?: string | null | undefined,
-    onChange?: (e:JBTextareaEventType<Event>)=>void,
-    onFocus?:(e:JBTextareaEventType<FocusEvent>)=>void,
-    onBlur?:(e:JBTextareaEventType<FocusEvent>)=>void,
-    onKeydown?: (e:JBTextareaEventType<KeyboardEvent>)=>void,
-    onKeyup?: (e:JBTextareaEventType<KeyboardEvent>)=>void,
-    onInput?: (e:JBTextareaEventType<InputEvent>)=>void,
-    onBeforeinput?: (e:JBTextareaEventType<InputEvent>)=>void,
     placeholder?:string,
     className?: string,
-    style?:CSSProperties,
-    validationList?:ValidationItem<ValidationValue>[],
-    autoHeight?: boolean,
     message?:string,
+    style?:CSSProperties,
     name?:string,
-    required?:boolean
 }
 export {JBTextarea};

package/react/lib/attributes-hook.ts

@@ -0,0 +1,45 @@
+import { JBTextareaWebComponent, type ValidationValue } from "jb-textarea";
+import { type ValidationItem } from "jb-validation";
+import { RefObject, useEffect } from "react";
+
+export type JBTextareaAttributes = {
+  value?: string | null | undefined,
+  validationList?:ValidationItem<ValidationValue>[],
+  autoHeight?: boolean,
+  required?:boolean
+  error?: string,
+}
+export function useJBTextareaAttribute(element: RefObject<JBTextareaWebComponent>, props: JBTextareaAttributes) {
+
+  useEffect(() => {
+    const value:string = props.value || '';
+    if(element.current){
+      element.current.value = value;
+    }
+  }, [props.value]);
+
+  useEffect(() => {
+    if(element.current){
+      element.current.validation.list = props.validationList || [];
+    }
+  }, [props.validationList]);
+  useEffect(() => {
+    if(element.current && props.required!== undefined){
+      props.required?element.current.setAttribute("required",''):element.current.removeAttribute("required");
+    }
+  }, [props.required]);
+
+  useEffect(() => {
+    if(element.current){
+      element.current.autoHeight = props.autoHeight || false;
+    }
+  }, [props.autoHeight]);
+  
+  useEffect(() => {
+    if (props.error) {
+      element?.current?.setAttribute('error', props.error);
+    } else {
+      element?.current?.removeAttribute('error');
+    }
+  }, [props.error]);
+}

package/react/lib/events-hook.ts

@@ -0,0 +1,32 @@
+import { useEvent } from "jb-core/react";
+import { RefObject } from "react";
+import type { JBTextareaWebComponent, JBTextareaEventType } from 'jb-textarea';
+
+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: JBTextareaEventType<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: JBTextareaEventType<CustomEvent>) => void,
+  onChange?: (e: JBTextareaEventType<Event>) => void,
+  onFocus?: (e: JBTextareaEventType<FocusEvent>) => void,
+  onBlur?: (e: JBTextareaEventType<FocusEvent>) => void,
+  onKeyDown?: (e: JBTextareaEventType<KeyboardEvent>) => void,
+  onKeyUp?: (e: JBTextareaEventType<KeyboardEvent>) => void,
+  onInput?: (e: JBTextareaEventType<InputEvent>) => void,
+  onBeforeinput?: (e: JBTextareaEventType<InputEvent>) => void,
+
+}
+export function useEvents(element: RefObject<JBTextareaWebComponent>, props: EventProps) {
+  useEvent(element, 'load', props.onLoad, true);
+  useEvent(element, 'init', props.onInit, true);
+  useEvent(element, 'change', props.onChange);
+  useEvent(element, 'keydown', props.onKeyDown);
+  useEvent(element, 'input', props.onInput);
+  useEvent(element, 'keyup', props.onKeyUp);
+  useEvent(element, 'focus', props.onFocus);
+  useEvent(element, 'blur', props.onBlur);
+}

package/react/package.json

@@ -24,7 +24,7 @@
     "dist/"
   ],
   "main": "index.js",
-  "types": "./dist/web-component/jb-textarea/react/lib/JBTextarea.d.ts",
+  "types": "./dist/JBTextarea.d.ts",
   "repository": {
 		"type": "git",
 		"url": "git@github.com:javadbat/jb-textarea.git"