jb-textarea 3.3.2 → 3.4.0

package/README.md

@@ -1,15 +1,24 @@
 # jb-textarea
 
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/jb-textarea)
+[![GitHub license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://raw.githubusercontent.com/javadbat/jb-textarea/master/LICENSE)
+[![NPM Downloads](https://img.shields.io/npm/dw/jb-textarea)](https://www.npmjs.com/package/jb-textarea)
+
 simple textarea web component to input long text
 
 - lightweight
 - zero dependency
+- advance validation with [jb-validation](https://github.com/javadbat/jb-validation) module
 - help you manage validation in easy way
 - config auto height grow ability with max height
 - web component so you can use it with any framework you need
 
 sample: <https://codepen.io/javadbat/pen/poRZVXe>
 
+## using with JS frameworks
+
+to use this component in **react** see [`jb-textarea/react`](https://github.com/javadbat/jb-textarea/tree/main/react);
+
 ## installation and setup
 
 ```bash
@@ -120,7 +129,7 @@ if you want to set a custom style to this web-component all you need is to set c
 
 ## Other Related Docs:
 
-- see [jb-textarea-react](https://github.com/javadbat/jb-textarea-react) if you want to use this component in react.
+- see [`jb-textarea/react`](https://github.com/javadbat/jb-textarea/tree/main/react) if you want to use this component in react.
 
 - see [All JB Design system Component List](https://github.com/javadbat/design-system/blob/master/docs/component-list.md) for more components.
 

package/index.js

@@ -1 +1,2 @@
+import './dist/jb-textarea.js';
 export * from './dist/jb-textarea.js';

package/package.json

@@ -13,14 +13,16 @@
     "web component",
     "web-component"
   ],
-  "version": "3.3.2",
+  "version": "3.4.0",
   "bugs": "https://github.com/javadbat/jb-textarea/issues",
   "license": "MIT",
   "files": [
     "LICENSE",
     "README.md",
     "lib/",
-    "dist/"
+    "dist/",
+    "react/",
+    "react/dist/"
   ],
   "main": "index.js",
   "types": "./dist/web-component/jb-textarea/lib/jb-textarea.d.ts",

package/react/README.md

@@ -0,0 +1,121 @@
+# jb-textarea-react
+
+simple textarea react component to input long text
+
+- lightweight
+- zero dependency
+- help you manage validation in easy way
+- config auto height grow ability with max height
+
+Demo : [codeSandbox preview](https://3f63dj.csb.app/samples/jb-textarea) for just see the demo and [codeSandbox editor](https://codesandbox.io/p/sandbox/jb-design-system-3f63dj?file=%2Fsrc%2Fsamples%2FJBTextarea.tsx) if you want to see and play with code
+
+## installation and setup
+
+```cmd
+npm i jb-textarea-react
+```
+
+```jsx
+import {JBTextarea} from 'jb-textarea/react';
+
+<JBTextarea label="label" value={valueState} message="text under the box"></JBTextarea>
+```
+
+## get and set value
+
+```jsx
+<JBTextarea label="label" value={valueState} onChange={(e)=>{setValueState(e.target.value)}}></JBTextarea>
+```
+## set validation
+
+you can set validation to your input by creating a validationList array and passing in to validationList props:
+
+``` javascript
+    const validationList = [
+        {
+            validator: /.{3}/g,
+            message: 'description must have 3 char at least'
+        },
+    //you can use function as a validator too
+        {
+            validator: (valueString)=>{return valueString == "hello"},
+            message: 'you can only type hello in the box'
+        },
+    //you can also return string in validator if you want custom error message in some edge cases
+        {
+            validator: (valueString)=>{
+               if(valueString.includes("*")){
+                return 'you cant write * in your text'
+               }
+               return true;
+            },
+            message: 'default error when return false'
+        },
+    ];
+```
+```jsx
+    <JBInput validationList={validationList}></JBInput>
+```
+
+## check validation
+
+you can check if an input value meet your validation standard by creating a ref of the element using `React.createRef()`.
+```javascript
+    const elementRef = React.createRef();
+    const isValid = elementRef.current.validation.checkValidity(true).isAllValid;
+```
+if `isValid` is `true` the value of input is valid.
+
+
+## events
+
+```js
+<JBTextarea  onChange={(e)=>{}}></JBTextarea>
+<JBTextarea  onKeydown={(e)=>{}}></JBTextarea>
+<JBTextarea  onKeyup={(e)=>{}}></JBTextarea>
+<JBTextarea  onKeypress={(e)=>{}}></JBTextarea>
+<JBTextarea  onInput={(e)=>{}}></JBTextarea>
+```
+
+## auto height grow
+
+you can set `autoHeight` to true so when user type something and text overflow a textarea height component will grow by itself in boundary of `--jb-textarea-min-height` and `--jb-textarea-max-height` that you set by css variable 
+
+```js
+<JBTextarea  autoHeight></JBTextarea>
+```
+
+the good point of set boundary with css variable is you can set different min or max base on device by CSS media queries.
+
+## set custom style
+
+in some cases in your project you need to change default style of web-component for example you need zero margin or different border-radius and etc.    
+if you want to set a custom style to this web-component all you need is to set css variable in parent scope of web-component 
+| css variable name                     | description                                                                                   |
+| -------------                         | -------------                                                                                 |
+| --jb-textarea-margin                  | web-component margin default is `0 12px`                                                      |
+| --jb-textarea-border-radius           | web-component border-radius default is `16px`                                                 |
+| --jb-textarea-border-width            | web-component border-width default is `1px`                                                   |
+| --jb-textarea-border-color            | border color of select in normal mode                                                         |
+| --jb-textarea-border-color-focus      | border color of select in normal mode                                                         |
+| --jb-textarea-bgcolor                 | background color of input                                                                     |
+| --jb-textarea-border-botton-width     | border bottom thickness default is `3px`                                                      |
+| --jb-textarea-label-font-size         | font size of input label default is `0.8em`                                                   |
+| --jb-textarea-value-font-size         | font size of input value default is `1.1em`                                                   |
+| --jb-textarea-value-color             | color of value default in `initial`                                                           |
+| --jb-textarea-message-font-size       | font size of message we show under input                                                      |
+| --jb-textarea-message-error-color     | change color of error we show under input default is `red`                                    |
+| --jb-textarea-min-height              | minimum height of text area default is `80px`                                                 |
+| --jb-textarea-max-height              | minimum height of text area default is `none`                                                 |
+| --jb-textarea-placeholder-color       | placeholder color default is 'initial'                                                        |
+| --jb-textarea-placeholder-font-size   | placeholder font-size default is `initial`                                                    |
+| --jb-textarea-label-color             | label color default is `#1f1735`                                                              |    
+| --jb-textarea-value-color             | value color                                                                                   |
+
+## Other Related Docs:
+
+- see [jb-textarea](https://github.com/javadbat/jb-textarea) if you want to use this component as a web-component in other frameworks.
+
+- see [All JB Design system Component List](https://github.com/javadbat/design-system/blob/master/docs/component-list.md) for more components.
+
+- use [Contribution Guide](https://github.com/javadbat/design-system/blob/master/docs/contribution-guide.md) if you want to contribute in this component.

package/react/dist/JBTextarea.cjs.js

@@ -0,0 +1,95 @@
+'use strict';
+
+var React = require('react');
+require('jb-textarea');
+
+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.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"JBTextarea.cjs.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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"}

package/react/dist/JBTextarea.js

@@ -0,0 +1,93 @@
+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

package/react/dist/JBTextarea.js.map

@@ -0,0 +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":"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"}

package/react/dist/JBTextarea.umd.js

@@ -0,0 +1,98 @@
+(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

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

@@ -0,0 +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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"}

package/react/dist/common/hooks/use-event.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function useEvent(dom: HTMLElement, event: any, handler: any, passive?: boolean): void;
+export declare function useBindEvent<TRef extends React.MutableRefObject<any | null>, TEvent>(ref: TRef, event: string, handler: (e: TEvent) => void, passive?: boolean): void;

package/react/dist/common/hooks/useLazyRef.d.ts

@@ -0,0 +1,4 @@
+import { MutableRefObject } from "react";
+type InitFunc<T> = () => T;
+export declare const useLazyRef: <T>(initValFunc: InitFunc<T>) => MutableRefObject<any>;
+export {};

package/react/dist/common/hooks/useMobx.d.ts

@@ -0,0 +1,4 @@
+type Initializers = any[];
+type Constructor<T extends object = object> = new (...args: any[]) => T;
+export declare const useMobx: <T extends object>(Store: Constructor<T>, initializers: Initializers) => T;
+export {};

package/react/dist/common/scripts/device-detection.d.ts

@@ -0,0 +1 @@
+export declare const isMobile: () => boolean;

package/react/dist/common/scripts/persian-helper.d.ts

@@ -0,0 +1,3 @@
+declare function faToEnDigits(input: string | number): string;
+declare function enToFaDigits(input: string | number): string;
+export { enToFaDigits, faToEnDigits };

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

@@ -0,0 +1,42 @@
+import React, { CSSProperties } from 'react';
+import 'jb-textarea';
+import { JBTextareaWebComponent, type ValidationValue } from 'jb-textarea';
+import { type ValidationItem } from "jb-validation";
+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<JBTextareaProps & React.RefAttributes<unknown>>;
+export type JBTextareaEventType<T> = T & {
+    target: JBTextareaWebComponent;
+};
+type JBTextareaProps = {
+    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;
+    name?: string;
+    required?: boolean;
+};
+export { JBTextarea };

package/react/index.js

@@ -0,0 +1 @@
+export * from './dist/JBTextarea.js';

package/react/lib/JBTextarea.tsx

@@ -0,0 +1,124 @@
+/* eslint-disable no-inner-declarations */
+import React, { useRef, useEffect, useImperativeHandle, useState, 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";
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    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,
+        // ref:React.RefObject<JBDateInputWebComponent>,
+      }
+    }
+}
+// eslint-disable-next-line react/display-name
+const JBTextarea = React.forwardRef((props:JBTextareaProps, 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],
+    );
+    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);
+    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 = {
+    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,
+    name?:string,
+    required?:boolean
+}
+export {JBTextarea};

package/react/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "jb-textarea-react",
+  "description": "textarea react component",
+  "type": "module",
+  "author": {
+		"name": "mohammad javad bathaei",
+		"email": "javadbat@gmail.com"
+	},
+  "keywords": [
+    "jb",
+    "jb-textarea",
+    "textarea",
+    "long input",
+    "multiline input",
+    "react component"
+  ],
+  "version": "3.2.0",
+  "bugs": "https://github.com/javadbat/jb-textarea/issues",
+  "license": "MIT",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "lib/",
+    "dist/"
+  ],
+  "main": "index.js",
+  "types": "./dist/web-component/jb-textarea/react/lib/JBTextarea.d.ts",
+  "repository": {
+		"type": "git",
+		"url": "git@github.com:javadbat/jb-textarea.git"
+  },
+  "dependencies": {
+    "jb-textarea": ">=3.2.0"
+  }
+}

package/react/tsconfig.json

@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "baseUrl": "."
+    },
+    "include": [
+        "../../../common/scripts/**/*.ts",
+        "../../../common/hooks/**/*.ts",
+        "../../../common/hooks/**/*.js",
+        "lib/**/*.ts",
+        "lib/**/*.tsx"
+    ],
+    "exclude": [
+        "node_modules",
+        "**/*.spec.ts",
+        "dist",
+    ],
+    "extends":"../../tsconfig-react.json"
+}