frst-components 0.22.20 → 0.22.21

package/dist/index.js

@@ -3321,7 +3321,7 @@ const InputText$4 = styled__default["default"].div `
     width: 100%;
     height: ${({ height }) => height || '20px'};
     outline: 0;
-    color: ${({ theme, isPlaceholder }) => !isPlaceholder ? theme.colors.neutralsGrey1 : theme.colors.neutralsGrey4};
+    color: ${({ theme }) => theme.colors.neutralsGrey1};
     font-family: 'Work Sans';
     font-style: normal;
     font-weight: normal;
@@ -3333,7 +3333,26 @@ const InputText$4 = styled__default["default"].div `
     
         
     padding: 0;
-    margin: ${({ isPlaceholder }) => isPlaceholder ? '10px 4px 10px 15px' : '10px 4px 40px 15px'};
+    margin: 10px 4px 40px 15px;
+    border: none;    
+`;
+const InputPlaceholder = styled__default["default"].div `
+    width: 100%;
+    height: ${({ height }) => height || '20px'};
+    outline: 0;
+    color: ${({ theme }) => theme.colors.neutralsGrey4};
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: normal;
+    font-size: 16px;
+    letter-spacing: -0.02em;
+    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey3};
+    overflow: hidden;
+    background-color: inherit;
+    
+        
+    padding: 0;
+    margin: 10px 4px 10px 15px;
     border: none;    
 `;
 styled__default["default"].div `
@@ -3407,7 +3426,7 @@ const useInputHook = ({ limit, placeholder, onSendMentions, onContentFormat, onC
     const [showMention, setShowMention] = React.useState(false);
     const [inputSearch, setInputSearch] = React.useState('');
     const divInputRef = React.useRef(null);
-    const mainContainerRef = React.useRef(null);
+    const divPlaceholder = React.useRef(null);
     const mentionTopPosition = `${(divInputRef.current?.clientHeight ?? 15) + 20}px`;
     const [textLength, setTextLength] = React.useState(0);
     const [isPlaceholder, setPlaceholder] = React.useState(false);
@@ -3566,45 +3585,43 @@ const useInputHook = ({ limit, placeholder, onSendMentions, onContentFormat, onC
         setTextLength(count);
         return count;
     };
-    const clearDivContent = () => {
-        if (!divInputRef.current)
-            return;
-        console.log(`active element = ${document.activeElement}`);
-        if ((divInputRef.current.childNodes.length === 0 && !focus)) {
-            // create a textnode with the placeholder
-            divInputRef.current.innerText = placeholder;
-            setPlaceholder(true);
-        }
-        else if (!focus && divInputRef.current.childNodes.length >= 1) {
-            // loop over all child element and check if they are empty
-            let isEmpty = true;
+    const areChildrenEmpty = () => {
+        // return if divInputRef has child empty
+        let isEmpty = false;
+        //if divInputRef is not focused 
+        const isFocused = divInputRef.current === document.activeElement;
+        if (divInputRef.current && !isFocused) {
             divInputRef.current.childNodes.forEach((child) => {
-                if (child.textContent !== '' && child.textContent != placeholder) {
-                    isEmpty = false;
-                    setPlaceholder(false);
-                }
-                else if (child.textContent === placeholder) {
-                    divInputRef.current.blur();
+                console.log(divInputRef.current.childNodes);
+                console.log(divInputRef.current.innerText);
+                console.log(child.textContent);
+                if (child.textContent.length <= 0) {
+                    isEmpty = true;
                 }
             });
-            // if they are empty show the placeholder
-            if (isEmpty) {
-                // create a textnode with the placeholder
-                divInputRef.current.innerText = placeholder;
-                setPlaceholder(true);
-            }
         }
-        else if (divInputRef.current.innerText === placeholder) {
-            // create a paragraph node
-            divInputRef.current.innerHTML = '';
-            // clear complete the div
-            divInputRef.current.innerText = '';
-            const p = document.createElement('p');
-            const br = document.createElement('br');
-            p.appendChild(br);
-            divInputRef.current.appendChild(p);
+        return isEmpty;
+    };
+    const handlePlaceholderInputText = (isPlaceHolderFocus = false) => {
+        // if divInputRef has any element hide the placeholder
+        if (isPlaceHolderFocus) {
+            divPlaceholder.current?.style.setProperty('display', 'none');
+            divInputRef.current.style.setProperty('display', 'block');
+            divInputRef.current.focus();
             setPlaceholder(false);
         }
+        else {
+            if (!areChildrenEmpty()) {
+                divPlaceholder.current?.style.setProperty('display', 'none');
+                divInputRef.current.style.setProperty('display', 'block');
+                setPlaceholder(false);
+            }
+            else {
+                divPlaceholder.current?.style.setProperty('display', 'block');
+                divInputRef.current.style.setProperty('display', 'none');
+                setPlaceholder(true);
+            }
+        }
     };
     React.useEffect(() => {
         divInputRef.current?.addEventListener('input', resizeDiv);
@@ -3613,8 +3630,10 @@ const useInputHook = ({ limit, placeholder, onSendMentions, onContentFormat, onC
         };
     }, []);
     React.useEffect(() => {
-        if (!replyMentionedUser || !divInputRef?.current)
+        if (!replyMentionedUser || !divInputRef?.current) {
+            handlePlaceholderInputText();
             return;
+        }
         divInputRef.current?.focus();
         const selection = window.getSelection();
         if (selection && selection.rangeCount > 0) {
@@ -3625,44 +3644,41 @@ const useInputHook = ({ limit, placeholder, onSendMentions, onContentFormat, onC
             const spaceNode = document.createTextNode('\u00A0'); // Unicode for non-breaking space
             addMentionToRangeAndSpaceNode(range, spaceNode, mentionedUser);
             createNewRangeAndMoveCursorToTheEnd(selection, spaceNode);
+            handlePlaceholderInputText();
         }
     }, [replyMentionedUser]);
-    React.useEffect(() => {
-        setPlaceholder(false);
-        if ((!value || value.length <= 0) && !focus && !replyMentionedUser) {
-            divInputRef.current.innerText = placeholder;
-            setPlaceholder(true);
-            resizeDiv();
-        }
-    }, [value]);
-    React.useEffect(() => {
-        if (!divInputRef.current)
-            return;
-        clearDivContent();
-    }, [focus]);
     React.useEffect(() => {
         setStyleLimitExceeded(textLength > limit);
     }, [textLength]);
     React.useEffect(() => {
-        if (!divInputRef.current || !mainContainerRef.current)
+        if (!divInputRef.current || !divPlaceholder.current)
             return;
-        divInputRef.current.addEventListener('mousedown', () => {
-            setFocus(true);
+        document.addEventListener('mousedown', () => {
+            handlePlaceholderInputText();
         });
-        divInputRef.current.addEventListener('focus', () => {
-            setFocus(true);
+        document.addEventListener('focus', () => {
+            handlePlaceholderInputText();
         });
-        divInputRef.current.addEventListener('blur', () => {
-            setFocus(false);
+        document.addEventListener('blur', () => {
+            handlePlaceholderInputText();
+        });
+        divPlaceholder.current.addEventListener('mousedown', () => {
+            handlePlaceholderInputText(true);
+        });
+        divPlaceholder.current.addEventListener('focus', () => {
+            handlePlaceholderInputText(true);
+        });
+        divPlaceholder.current.addEventListener('blur', () => {
+            handlePlaceholderInputText(true);
         });
-        mainContainerRef.current.addEventListener('mousedown', () => {
-            setFocus(true);
+        divInputRef.current.addEventListener('mousedown', () => {
+            handlePlaceholderInputText();
         });
-        mainContainerRef.current.addEventListener('focus', () => {
-            setFocus(true);
+        divInputRef.current.addEventListener('focus', () => {
+            handlePlaceholderInputText();
         });
-        mainContainerRef.current.addEventListener('blur', () => {
-            setFocus(false);
+        divInputRef.current.addEventListener('blur', () => {
+            handlePlaceholderInputText();
         });
         //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) => {
@@ -3671,23 +3687,32 @@ const useInputHook = ({ limit, placeholder, onSendMentions, onContentFormat, onC
             }
         });
         return () => {
-            divInputRef.current?.removeEventListener('mousedown', () => {
-                setFocus(true);
+            document.removeEventListener('mousedown', () => {
+                handlePlaceholderInputText();
+            });
+            document.removeEventListener('focus', () => {
+                handlePlaceholderInputText();
+            });
+            document.removeEventListener('blur', () => {
+                handlePlaceholderInputText();
+            });
+            divPlaceholder.current.removeEventListener('mousedown', () => {
+                handlePlaceholderInputText(true);
             });
-            divInputRef.current?.removeEventListener('focus', () => {
-                setFocus(true);
+            divPlaceholder.current.removeEventListener('focus', () => {
+                handlePlaceholderInputText(true);
             });
-            divInputRef.current?.removeEventListener('blur', () => {
-                setFocus(false);
+            divPlaceholder.current.removeEventListener('blur', () => {
+                handlePlaceholderInputText(true);
             });
-            mainContainerRef.current?.removeEventListener('mousedown', () => {
-                setFocus(true);
+            divInputRef.current.removeEventListener('mousedown', () => {
+                handlePlaceholderInputText();
             });
-            mainContainerRef.current?.removeEventListener('focus', () => {
-                setFocus(true);
+            divInputRef.current.removeEventListener('focus', () => {
+                handlePlaceholderInputText();
             });
-            mainContainerRef.current?.removeEventListener('blur', () => {
-                setFocus(false);
+            divInputRef.current.removeEventListener('blur', () => {
+                handlePlaceholderInputText();
             });
             //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) => {
@@ -3699,7 +3724,7 @@ const useInputHook = ({ limit, placeholder, onSendMentions, onContentFormat, onC
     }, []);
     return {
         handleInput,
-        clearDivContent,
+        handlePlaceholderInputText,
         focus,
         showMention,
         setShowMention,
@@ -3711,7 +3736,7 @@ const useInputHook = ({ limit, placeholder, onSendMentions, onContentFormat, onC
         textLength,
         isPlaceholder,
         styleLimitExceeded,
-        mainContainerRef
+        divPlaceholder
     };
 };
 
@@ -3891,10 +3916,10 @@ const Mentions = (mention) => {
 };
 
 function InputComment$1({ placeholder, onChange, limit, users, showCharacterCounter, styles, onSendMentions, onContentFormat, onContentUnformat, disabled, className, value, replyMentionedUser, group_uuid, limitMessageExceeded }) {
-    const { mainContainerRef, handleInput, isPlaceholder, focus, 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", { ref: mainContainerRef, 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) => {
+    const { divPlaceholder, handleInput, isPlaceholder, focus, 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, { 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", {}) }) }), showMention && users && users.length > 0 && jsxRuntime.jsx(Mentions, { users: users, top: mentionTopPosition, onSelect: (user) => {
+                            }, "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);
                                 handleMentionUser(user);
                             } })] }), jsxRuntime.jsx(HelperContainer, { children: !isPlaceholder ?

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

@@ -10,10 +10,10 @@ interface IEmojiWindow {
 }
 interface TextArea {
     height?: string;
-    isPlaceholder?: boolean;
 }
 export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, Wrapper, never>;
 export declare const InputText: import("styled-components").StyledComponent<"div", any, TextArea, never>;
+export declare const InputPlaceholder: import("styled-components").StyledComponent<"div", any, TextArea, never>;
 export declare const SmileIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const HelperContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const HelperText: import("styled-components").StyledComponent<"span", any, {

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

@@ -1 +1 @@
-{"version":3,"file":"inputCommentStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/input-comment/inputCommentStyles.ts"],"names":[],"mappings":"AAQA,UAAU,OAAO;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,YAAY,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,UAAU,YAAY;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mBAAmB,CAAC,EAAE,GAAG,CAAA;CAC5B;AACD,UAAU,QAAQ;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;CAE3B;AAED,eAAO,MAAM,YAAY,yEAoBxB,CAAA;AAED,eAAO,MAAM,SAAS,0EAkBrB,CAAA;AAED,eAAO,MAAM,SAAS,oEAiBrB,CAAA;AACD,eAAO,MAAM,eAAe,oEAG3B,CAAA;AACD,eAAO,MAAM,UAAU;mBAA8B,OAAO;SAkB3D,CAAA;AAED,eAAO,MAAM,WAAW,8EAWvB,CAAC;AACF,eAAO,MAAM,mBAAmB,oEAK/B,CAAA;AAGD,eAAO,MAAM,yBAAyB,qEAIrC,CAAA"}
+{"version":3,"file":"inputCommentStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/input-comment/inputCommentStyles.ts"],"names":[],"mappings":"AAQA,UAAU,OAAO;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,YAAY,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,UAAU,YAAY;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mBAAmB,CAAC,EAAE,GAAG,CAAA;CAC5B;AACD,UAAU,QAAQ;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;CAElB;AAED,eAAO,MAAM,YAAY,yEAoBxB,CAAA;AAED,eAAO,MAAM,SAAS,0EAkBrB,CAAA;AACD,eAAO,MAAM,gBAAgB,0EAkB5B,CAAA;AACD,eAAO,MAAM,SAAS,oEAiBrB,CAAA;AACD,eAAO,MAAM,eAAe,oEAG3B,CAAA;AACD,eAAO,MAAM,UAAU;mBAA8B,OAAO;SAkB3D,CAAA;AAED,eAAO,MAAM,WAAW,8EAWvB,CAAC;AACF,eAAO,MAAM,mBAAmB,oEAK/B,CAAA;AAGD,eAAO,MAAM,yBAAyB,qEAIrC,CAAA"}

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

@@ -12,7 +12,7 @@ interface IInputHook {
 }
 export declare const useInputHook: ({ limit, placeholder, onSendMentions, onContentFormat, onContentUnformat, onChange, value, replyMentionedUser }: IInputHook) => {
     handleInput: (event: React.KeyboardEvent) => void;
-    clearDivContent: () => void;
+    handlePlaceholderInputText: (isPlaceHolderFocus?: boolean) => void;
     focus: boolean;
     showMention: boolean;
     setShowMention: React.Dispatch<React.SetStateAction<boolean>>;
@@ -24,7 +24,7 @@ export declare const useInputHook: ({ limit, placeholder, onSendMentions, onCont
     textLength: number;
     isPlaceholder: boolean;
     styleLimitExceeded: boolean;
-    mainContainerRef: React.MutableRefObject<HTMLDivElement>;
+    divPlaceholder: React.MutableRefObject<HTMLDivElement>;
 };
 export {};
 //# sourceMappingURL=useInputHook.d.ts.map

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;;;;;;;;;8BA/Ed,IAAI;;;;;CAoTxC,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;yBA4HxH,mBAAmB;sDAmFQ,OAAO;;;;;;;;8BAlK7B,IAAI;;;;;CAiUxC,CAAA"}

package/package.json

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