frst-components 0.22.8 → 0.22.9

package/dist/index.js

@@ -3564,6 +3564,7 @@ const useInputHook = ({ limit, placeholder, onSendMentions, onContentFormat, onC
     const clearDivContent = () => {
         if (!divInputRef.current)
             return;
+        console.log('focus is', focus);
         if ((divInputRef.current.childNodes.length === 0 && !focus)) {
             // create a textnode with the placeholder
             divInputRef.current.innerText = placeholder;
@@ -3627,22 +3628,51 @@ const useInputHook = ({ limit, placeholder, onSendMentions, onContentFormat, onC
     React.useEffect(() => {
         if (!divInputRef.current)
             return;
+        clearDivContent();
+    }, [focus]);
+    React.useEffect(() => {
+        setStyleLimitExceeded(textLength > limit);
+    }, [textLength]);
+    React.useEffect(() => {
+        if (!divInputRef.current)
+            return;
+        divInputRef.current.addEventListener('mousedown', () => {
+            setFocus(true);
+        });
+        divInputRef.current.addEventListener('focus', () => {
+            setFocus(true);
+        });
+        divInputRef.current.addEventListener('blur', () => {
+            setFocus(false);
+        });
         //capture the cursor position on arrow up and down or left and right and check if it´s close to the @ key
         divInputRef.current.addEventListener('keyup', (event) => {
             if (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'Enter') {
                 setShowMention(false);
             }
         });
-        clearDivContent();
-    }, [focus]);
-    React.useEffect(() => {
-        setStyleLimitExceeded(textLength > limit);
-    }, [textLength]);
+        return () => {
+            divInputRef.current?.removeEventListener('mousedown', () => {
+                setFocus(true);
+            });
+            divInputRef.current?.removeEventListener('focus', () => {
+                setFocus(true);
+            });
+            divInputRef.current?.removeEventListener('blur', () => {
+                setFocus(false);
+            });
+            //capture the cursor position on arrow up and down or left and right and check if it´s close to the @ key
+            divInputRef.current.removeEventListener('keyup', (event) => {
+                if (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'Enter') {
+                    setShowMention(false);
+                }
+            });
+        };
+    }, []);
     return {
         handleInput,
         clearDivContent,
         focus,
-        setFocus,
         showMention,
         setShowMention,
         inputSearch,
@@ -3832,9 +3862,9 @@ const Mentions = (mention) => {
 };
 
 function InputComment$1({ placeholder, onChange, limit, users, showCharacterCounter, styles, onSendMentions, onContentFormat, onContentUnformat, disabled, className, value, replyMentionedUser, group_uuid, limitMessageExceeded }) {
-    const { handleInput, isPlaceholder, focus, setFocus, divInputRef, handleMentionUser, mentionTopPosition, setShowMention, showMention, textLength, styleLimitExceeded } = useInputHook({ limit, placeholder, onContentFormat, onContentUnformat, onSendMentions, onChange, value, replyMentionedUser });
+    const { handleInput, isPlaceholder, focus, divInputRef, handleMentionUser, mentionTopPosition, setShowMention, showMention, textLength, styleLimitExceeded } = useInputHook({ limit, placeholder, onContentFormat, onContentUnformat, onSendMentions, onChange, value, replyMentionedUser });
     const showMentions = showMention && ['b1005836-b0a6-4a50-8147-537ebdc64a75', '413c2f36-9195-4fef-86fe-572c49049007'].includes(group_uuid);
-    return (jsxRuntime.jsx(styled.ThemeProvider, { theme: FRSTTheme, children: jsxRuntime.jsxs("div", { style: { minHeight: '48px', ...styles }, tabIndex: 0, children: [jsxRuntime.jsxs(InputWrapper$2, { focus: focus, tabIndex: 1, isPlaceholder: isPlaceholder, isInputLimit: styleLimitExceeded, children: [jsxRuntime.jsx(InputText$4, { tabIndex: 2, contentEditable: true, ref: divInputRef, onFocus: () => setFocus(true), onBlur: () => setFocus(false), onKeyUpCapture: (event) => {
+    return (jsxRuntime.jsx(styled.ThemeProvider, { theme: FRSTTheme, children: jsxRuntime.jsxs("div", { style: { minHeight: '48px', ...styles }, tabIndex: 0, children: [jsxRuntime.jsxs(InputWrapper$2, { focus: focus, tabIndex: 1, isPlaceholder: isPlaceholder, isInputLimit: styleLimitExceeded, children: [jsxRuntime.jsx(InputText$4, { tabIndex: 2, contentEditable: true, ref: divInputRef, onKeyUpCapture: (event) => {
                                 handleInput(event);
                             }, "data-text": "enter", isPlaceholder: isPlaceholder, suppressContentEditableWarning: true, children: jsxRuntime.jsx("p", { children: jsxRuntime.jsx("br", {}) }) }), showMentions && users && users.length > 0 && jsxRuntime.jsx(Mentions, { users: users, top: mentionTopPosition, onSelect: (user) => {
                                 setShowMention(false);

package/dist/src/components/input-comment/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/input-comment/index.tsx"],"names":[],"mappings":";AACA,OAAO,yBAAyB,CAAA;AAGhC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAOvC,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,oBAAoB,EAAE,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE,iBAAiB,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,kBAAkB,EAAE,UAAU,EAAE,oBAAoB,EAAE,EAAE,aAAa,eA0D9P"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/input-comment/index.tsx"],"names":[],"mappings":";AACA,OAAO,yBAAyB,CAAA;AAGhC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAOvC,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,oBAAoB,EAAE,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE,iBAAiB,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,kBAAkB,EAAE,UAAU,EAAE,oBAAoB,EAAE,EAAE,aAAa,eAwD9P"}

package/dist/src/components/input-comment/mentionsStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mentionsStyle.d.ts","sourceRoot":"","sources":["../../../../src/components/input-comment/mentionsStyle.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;UAAsB,OAAO;SAAO,MAAM;YAAU,MAAM;aAAW,MAAM;SAiChG,CAAA;AAED,eAAO,MAAM,YAAY,sEAAiB,CAAA;AAE1C,eAAO,MAAM,WAAW,oEAKvB,CAAA;AAED,eAAO,MAAM,WAAW;aAAyB,OAAO;SAkBvD,CAAA;AAGD,eAAO,MAAM,aAAa,oEAIzB,CAAA;AAED,eAAO,MAAM,aAAa,oEAIzB,CAAC;AAEF,eAAO,MAAM,oBAAoB,oEAQhC,CAAA;AAED,eAAO,MAAM,eAAe,qEAI3B,CAAA;AAED,eAAO,MAAM,wBAAwB,oEAOpC,CAAA;AAED,eAAO,MAAM,mBAAmB,qEAM/B,CAAA;AACD,eAAO,MAAM,MAAM,oEAQlB,CAAA;AACD,eAAO,MAAM,WAAW,qEAkBvB,CAAA"}
+{"version":3,"file":"mentionsStyle.d.ts","sourceRoot":"","sources":["../../../../src/components/input-comment/mentionsStyle.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;UAAsB,OAAO;SAAO,MAAM;YAAU,MAAM;aAAW,MAAM;SAkChG,CAAA;AAED,eAAO,MAAM,YAAY,sEAAiB,CAAA;AAE1C,eAAO,MAAM,WAAW,oEAKvB,CAAA;AAED,eAAO,MAAM,WAAW;aAAyB,OAAO;SAkBvD,CAAA;AAGD,eAAO,MAAM,aAAa,oEAIzB,CAAA;AAED,eAAO,MAAM,aAAa,oEAIzB,CAAC;AAEF,eAAO,MAAM,oBAAoB,oEAQhC,CAAA;AAED,eAAO,MAAM,eAAe,qEAI3B,CAAA;AAED,eAAO,MAAM,wBAAwB,oEAOpC,CAAA;AAED,eAAO,MAAM,mBAAmB,qEAM/B,CAAA;AACD,eAAO,MAAM,MAAM,oEAQlB,CAAA;AACD,eAAO,MAAM,WAAW,qEAYvB,CAAA"}

package/dist/src/components/input-comment/useInputHook.d.ts

@@ -14,7 +14,6 @@ export declare const useInputHook: ({ limit, placeholder, onSendMentions, onCont
     handleInput: (event: React.KeyboardEvent) => void;
     clearDivContent: () => void;
     focus: boolean;
-    setFocus: React.Dispatch<React.SetStateAction<boolean>>;
     showMention: boolean;
     setShowMention: React.Dispatch<React.SetStateAction<boolean>>;
     inputSearch: string;

package/dist/src/components/input-comment/useInputHook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useInputHook.d.ts","sourceRoot":"","sources":["../../../../src/components/input-comment/useInputHook.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,UAAU,UAAU;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAC5C,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,iBAAiB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kBAAkB,CAAC,EAAE,IAAI,CAAA;CAC5B;AAED,eAAO,MAAM,YAAY,oHAAqH,UAAU;yBA2HxH,mBAAmB;;;;;;;;;;8BA/Ed,IAAI;;;;CA8PxC,CAAA"}
+{"version":3,"file":"useInputHook.d.ts","sourceRoot":"","sources":["../../../../src/components/input-comment/useInputHook.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,UAAU,UAAU;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAC5C,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,iBAAiB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kBAAkB,CAAC,EAAE,IAAI,CAAA;CAC5B;AAED,eAAO,MAAM,YAAY,oHAAqH,UAAU;yBA2HxH,mBAAmB;;;;;;;;;8BA/Ed,IAAI;;;;CA6RxC,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "frst-components",
   "homepage": "http://FRST-Falconi.github.io/storybook.frstfalconi.com",
-  "version": "0.22.08",
+  "version": "0.22.09",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",