frst-components 0.22.22 → 0.22.24

package/dist/index.js

@@ -3422,7 +3422,6 @@ const LimitCharsExceededMessage = styled__default["default"].span `
 // transform: scale(0.845);
 
 const useInputHook = ({ limit, placeholder, onSendMentions, onContentFormat, onContentUnformat, onChange, value, replyMentionedUser }) => {
-    const [focus, setFocus] = React.useState(false);
     const [showMention, setShowMention] = React.useState(false);
     const [inputSearch, setInputSearch] = React.useState('');
     const divInputRef = React.useRef(null);
@@ -3591,15 +3590,23 @@ const useInputHook = ({ limit, placeholder, onSendMentions, onContentFormat, onC
         //if divInputRef is not focused 
         const isFocused = divInputRef.current === document.activeElement;
         if (divInputRef.current && !isFocused) {
+            if (divInputRef.current.childNodes.length <= 0)
+                return true;
             divInputRef.current.childNodes.forEach((child) => {
                 if (child.textContent.length <= 0) {
                     isEmpty = true;
                 }
+                else {
+                    isEmpty = false;
+                    return false;
+                }
             });
         }
         return isEmpty;
     };
     const handlePlaceholderInputText = (isPlaceHolderFocus = false) => {
+        if (document.activeElement?.id === 'input-comment-component')
+            return;
         // if divInputRef has any element hide the placeholder
         if (isPlaceHolderFocus) {
             divPlaceholder.current?.style.setProperty('display', 'none');
@@ -3722,7 +3729,10 @@ const useInputHook = ({ limit, placeholder, onSendMentions, onContentFormat, onC
     React.useEffect(() => {
         if (replyMentionedUser)
             return;
-        if (!value || value.length <= 0 && document.activeElement !== divInputRef.current) {
+        // check if the cursor is inside the divInputRef
+        const isFocused = divInputRef.current === document.activeElement;
+        // if the cursor is not inside the divInputRef show the placeholder
+        if ((!value || value.length <= 0) && document.activeElement?.id !== 'input-comment-component' && !isFocused) {
             divPlaceholder.current?.style.setProperty('display', 'block');
             divInputRef.current.style.setProperty('display', 'none');
             divInputRef.current.innerHTML = '<p><br /></p>';
@@ -3733,7 +3743,6 @@ const useInputHook = ({ limit, placeholder, onSendMentions, onContentFormat, onC
     return {
         handleInput,
         handlePlaceholderInputText,
-        focus,
         showMention,
         setShowMention,
         inputSearch,
@@ -3925,7 +3934,7 @@ const Mentions = (mention) => {
 
 function InputComment$1({ placeholder, onChange, limit, users, showCharacterCounter, styles, onSendMentions, onContentFormat, onContentUnformat, disabled, className, value, replyMentionedUser, group_uuid, limitMessageExceeded }) {
     const { divPlaceholder, handleInput, isPlaceholder, divInputRef, handleMentionUser, mentionTopPosition, setShowMention, showMention, textLength, styleLimitExceeded } = useInputHook({ limit, placeholder, onContentFormat, onContentUnformat, onSendMentions, onChange, value, replyMentionedUser });
-    return (jsxRuntime.jsx(styled.ThemeProvider, { theme: FRSTTheme, children: jsxRuntime.jsxs("div", { style: { minHeight: '48px', ...styles }, tabIndex: 0, children: [jsxRuntime.jsxs(InputWrapper$2, { tabIndex: 1, isPlaceholder: isPlaceholder, isInputLimit: styleLimitExceeded, children: [jsxRuntime.jsx(InputText$4, { tabIndex: 2, contentEditable: true, ref: divInputRef, onKeyUpCapture: (event) => {
+    return (jsxRuntime.jsx(styled.ThemeProvider, { theme: FRSTTheme, children: jsxRuntime.jsxs("div", { style: { minHeight: '48px', ...styles }, tabIndex: 0, children: [jsxRuntime.jsxs(InputWrapper$2, { tabIndex: 1, isPlaceholder: isPlaceholder, isInputLimit: styleLimitExceeded, children: [jsxRuntime.jsx(InputText$4, { id: "input-comment-component", tabIndex: 2, contentEditable: true, ref: divInputRef, onKeyUpCapture: (event) => {
                                 handleInput(event);
                             }, "data-text": "enter", suppressContentEditableWarning: true, children: jsxRuntime.jsx("p", { children: jsxRuntime.jsx("br", {}) }) }), jsxRuntime.jsx(InputPlaceholder, { style: { display: 'none' }, contentEditable: true, ref: divPlaceholder, children: placeholder }), showMention && 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,eAwD9P"}
+{"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,eAyD9P"}

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

@@ -13,7 +13,6 @@ interface IInputHook {
 export declare const useInputHook: ({ limit, placeholder, onSendMentions, onContentFormat, onContentUnformat, onChange, value, replyMentionedUser }: IInputHook) => {
     handleInput: (event: React.KeyboardEvent) => void;
     handlePlaceholderInputText: (isPlaceHolderFocus?: boolean) => void;
-    focus: 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;yBA4HxH,mBAAmB;sDA+EQ,OAAO;;;;;;;;8BA9J7B,IAAI;;;;;CA4UxC,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;sDAkFQ,OAAO;;;;;;;8BAjK7B,IAAI;;;;;CAqVxC,CAAA"}

package/package.json

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