pixel-react 1.20.18 → 1.20.19

package/lib/components/Comments/childComment/ChildComment.js

@@ -1,270 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef, Fragment } from 'react';
-import '../Comments.scss';
-import Icon from '../../Icon';
-import Tooltip from '../../Tooltip';
-import Typography from '../../Typography';
-import MentionUser from '../mentionUser/MentionUser';
-import { DETECT_AT_CHAR_IN_COMMENT, DETECT_AT_CHAR_BETWEEN_STRINGS_IN_COMMENT, DETECT_MENTIONED_USERNAME_BEFORE_CARET, DETECT_AT_CHAR_AT_START, CHECK_AT_FOLLOWED_BY_WORD, DETECT_WORD_START_WITH_AT, } from '../../../../src/validations/regex';
-import { formatUserDetails, findUserByName } from '../commentCommonUtils';
-const ChildComment = ({ handleInsertNode, handleEditNode, handleDeleteNode, comment, depth = 0, isDisable, userDetails, isEditDeleteActionAllowed = true, createdByID, rowBreakCharCount = 83, isVewMode = false, deleteEnable = true, }) => {
-    const [input, setInput] = useState('');
-    const [editMode, setEditMode] = useState(false);
-    const [showInput, setShowInput] = useState(false);
-    const [expand, setExpand] = useState(true);
-    const [usersObj, setUsersObj] = useState([]);
-    const [hasAtSymbol, setHasAtSymbol] = useState(false);
-    const [mentionedUserEmails, setMentionedUserEmails] = useState([]);
-    const [mentionPosition, setMentionPosition] = useState({ top: 0, left: 0 });
-    const [textAfterAt, setTextAfterAt] = useState('');
-    const textAreaRef = useRef(null);
-    const mentionRef = useRef(null);
-    const mentionReplyRef = useRef(null);
-    useEffect(() => {
-        if (editMode && comment?.description) {
-            setInput(comment?.description);
-        }
-    }, [editMode, comment.description]);
-    useEffect(() => {
-        const formattedUsersDetails = formatUserDetails(userDetails);
-        setUsersObj(formattedUsersDetails);
-    }, [userDetails]);
-    useEffect(() => {
-        const mentionedNames = input.match(DETECT_AT_CHAR_IN_COMMENT) || [];
-        const updatedEmails = mentionedNames
-            .map((name) => {
-            return findUserByName(name, usersObj);
-        })
-            .filter(Boolean);
-        setMentionedUserEmails(updatedEmails);
-    }, [input]);
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            const clickedOutsideMentionUser = mentionRef.current &&
-                !mentionRef.current.contains(event.target) &&
-                textAreaRef.current &&
-                !textAreaRef.current.contains(event.target);
-            const clickedOutsideTextarea = mentionReplyRef.current &&
-                !mentionReplyRef.current.contains(event.target) &&
-                textAreaRef.current &&
-                !textAreaRef.current.contains(event.target);
-            if (clickedOutsideMentionUser || clickedOutsideTextarea) {
-                setHasAtSymbol(false);
-                setInput((prev) => prev.replace(/(?:^|\s)(@\w*)$/, ''));
-            }
-        };
-        if (hasAtSymbol) {
-            document.addEventListener('mousedown', handleClickOutside);
-        }
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [hasAtSymbol]);
-    const { modifiedByUname, createdByUname, modifiedOn, createdOn } = comment || {};
-    const randomPastTime = modifiedOn ?? createdOn ?? new Date().toLocaleString();
-    const firstName = modifiedByUname ?? createdByUname ?? 'Anonymous';
-    const isDepthLimitReached = depth > 2;
-    const avatar = firstName ? firstName.charAt(0).toUpperCase() : 'A';
-    useEffect(() => {
-        if (editMode && comment.description) {
-            setInput(comment.description);
-        }
-    }, [editMode, comment.description]);
-    const handleNewComment = () => {
-        setShowInput(true);
-    };
-    const onAddComment = () => {
-        if (input.trim().length === 0)
-            return;
-        if (editMode) {
-            handleEditNode(comment.id, input, mentionedUserEmails);
-            setShowInput(false);
-            setInput('');
-        }
-        else {
-            setExpand(true);
-            handleInsertNode(comment.id, input, mentionedUserEmails);
-            setShowInput(false);
-            setInput('');
-        }
-        if (editMode)
-            setEditMode(false);
-    };
-    const getCaretCoordinates = (element, position) => {
-        const div = document.createElement('div');
-        const copyStyle = getComputedStyle(element);
-        div.style.cssText = `
-        position: absolute;
-        visibility: hidden;
-        white-space: pre-wrap;
-        word-wrap: break-word;
-        overflow: auto;
-        width: ${element.offsetWidth}px;
-        height: ${element.offsetHeight}px;
-        font-family: ${copyStyle.fontFamily};
-        font-size: ${copyStyle.fontSize};
-        padding: ${copyStyle.padding};
-        border: ${copyStyle.border};
-        box-sizing: ${copyStyle.boxSizing};
-        line-height: ${copyStyle.lineHeight};
-      `;
-        div.scrollTop = element.scrollTop;
-        div.scrollLeft = element.scrollLeft;
-        document.body.appendChild(div);
-        const text = element.value.slice(0, position);
-        div.textContent = text || '.';
-        const span = document.createElement('span');
-        span.textContent = '.';
-        div.appendChild(span);
-        const spanRect = span.getBoundingClientRect();
-        document.body.removeChild(div);
-        return {
-            top: spanRect.top - 20,
-            left: spanRect.left,
-        };
-    };
-    useEffect(() => {
-        const updateMentionPosition = () => {
-            if (!textAreaRef.current)
-                return;
-            const textareaEl = textAreaRef?.current;
-            const dropdownEl = editMode
-                ? mentionRef?.current
-                : mentionReplyRef?.current;
-            const caretPosition = textAreaRef.current.selectionStart;
-            const caretCoords = getCaretCoordinates(textareaEl, caretPosition);
-            const dropdownHeight = dropdownEl?.getBoundingClientRect().height ?? 0;
-            const inputRect = textareaEl?.getBoundingClientRect();
-            if (!inputRect)
-                return;
-            const spaceBelow = window.innerHeight - inputRect.bottom;
-            const spaceAbove = inputRect.top;
-            const showAbove = spaceBelow < dropdownHeight && spaceAbove > dropdownHeight;
-            setMentionPosition({
-                top: showAbove
-                    ? caretPosition - dropdownHeight - 16
-                    : caretPosition + 32,
-                left: caretCoords.left + 10,
-            });
-        };
-        updateMentionPosition();
-    }, [input]);
-    const textAreaInputChange = (e) => {
-        const textAreaValue = e.target.value;
-        setInput(textAreaValue);
-        const mentionedUserNames = textAreaValue.match(/@\S+/g) || [];
-        const mentionedUserEmails = mentionedUserNames
-            .map((name) => {
-            return findUserByName(name, usersObj);
-        })
-            .filter((email) => email !== null);
-        setMentionedUserEmails(mentionedUserEmails);
-        const caretPosition = e.target.selectionStart;
-        const textBeforeCaret = textAreaValue.slice(0, caretPosition);
-        const match = textBeforeCaret.match(CHECK_AT_FOLLOWED_BY_WORD);
-        const mentionWords = match?.[1] || '';
-        setTextAfterAt(mentionWords);
-        const hasExplicitAtSymbol = DETECT_AT_CHAR_AT_START.test(textBeforeCaret);
-        setHasAtSymbol(!!hasExplicitAtSymbol);
-    };
-    const handleKeyDown = (e) => {
-        if (e.key === '@') {
-            setHasAtSymbol(true);
-        }
-        else if (e.key === 'Backspace' && textAreaRef.current) {
-            const caretPos = textAreaRef.current.selectionStart;
-            const textBeforeCaret = input.slice(0, caretPos);
-            if (textBeforeCaret.endsWith('@')) {
-                setHasAtSymbol(false);
-            }
-            const mentionMatch = textBeforeCaret.match(DETECT_MENTIONED_USERNAME_BEFORE_CARET);
-            if (mentionMatch) {
-                e.preventDefault();
-                const mentionText = mentionMatch[1];
-                const mentionIndex = textBeforeCaret.lastIndexOf(mentionText || '');
-                const updatedInput = input.slice(0, mentionIndex) + input.slice(caretPos);
-                setInput(updatedInput);
-                setHasAtSymbol(false);
-                setMentionedUserEmails(() => {
-                    const nameMentionsInText = (updatedInput.match(/@\w+/g) || []).map((m) => m.slice(1));
-                    return nameMentionsInText
-                        .map((username) => {
-                        return findUserByName(username, usersObj);
-                    })
-                        .filter(Boolean);
-                });
-                setTimeout(() => {
-                    textAreaRef.current?.setSelectionRange(mentionIndex, mentionIndex);
-                }, 0);
-            }
-        }
-    };
-    const optionClicked = (name) => {
-        if (!textAreaRef.current)
-            return;
-        const caretPosition = textAreaRef.current.selectionStart;
-        const textBeforeCaret = input.slice(0, caretPosition);
-        const mentionNameMatch = textBeforeCaret.match(DETECT_AT_CHAR_BETWEEN_STRINGS_IN_COMMENT);
-        if (mentionNameMatch) {
-            const mentionNameStart = textBeforeCaret.lastIndexOf(mentionNameMatch[1] || '');
-            const remainder = input.slice(caretPosition);
-            const mentionedUserName = `@${name.replace(/\s+/g, '')} `;
-            const newText = input.slice(0, mentionNameStart) + mentionedUserName + remainder;
-            setInput(newText);
-            setHasAtSymbol(false);
-            setTimeout(() => {
-                textAreaRef.current?.focus();
-                textAreaRef.current?.setSelectionRange(mentionNameStart + mentionedUserName.length + 1, mentionNameStart + mentionedUserName.length + 1);
-            }, 0);
-            setMentionedUserEmails(() => {
-                const nameMentionsInText = (newText.match(/@\w+/g) || []).map((word) => word.slice(1));
-                const updatedUserEmails = nameMentionsInText
-                    .map((username) => {
-                    return findUserByName(username, usersObj);
-                })
-                    .filter(Boolean);
-                return updatedUserEmails;
-            });
-        }
-    };
-    return (_jsx("div", { className: "commentsContainer", children: _jsxs("div", { className: 'comment-wrapper', children: [_jsxs("div", { className: 'commentContainer', children: [_jsx("div", { className: "commentContainer__avatar", children: comment?.profileImage ? (_jsx("img", { height: 30, width: 30, src: `data:image/jpeg;base64,${comment?.profileImage}` })) : (avatar) }), _jsxs("div", { className: "ff-message-container", children: [_jsxs("div", { className: "ff-message", children: [_jsx("div", { className: "ff-message-name", children: firstName }), _jsx("div", { className: "ff-message-time", children: randomPastTime })] }), _jsxs("div", { className: "ff-editable-container", children: [!editMode && (_jsx(Typography, { className: "typography-text", children: comment?.description
-                                                ?.split(DETECT_WORD_START_WITH_AT)
-                                                .map((part, index) => part.startsWith('@') ? (_jsx("b", { children: part }, `highlight-${index}`)) : (_jsx(Fragment, { children: part }, `text-${index}`))) })), editMode && (_jsxs("div", { className: "inputContainer", children: [_jsx("textarea", { rows: input.length < rowBreakCharCount ? 1 : 3, className: "inputContainer_input first_input", value: input, autoFocus: true, placeholder: 'Edit comment', ref: textAreaRef, onChange: (e) => textAreaInputChange(e), onKeyDown: handleKeyDown }), hasAtSymbol && (_jsx("div", { id: "mention-user", style: {
-                                                        position: 'absolute',
-                                                        top: `${mentionPosition.top}px`,
-                                                        left: `${mentionPosition.left}px`,
-                                                    }, children: _jsx(MentionUser, { hasAtSymbol: hasAtSymbol, usersObj: usersObj, optionClicked: optionClicked, charsAfterAt: textAfterAt, mentionUserRef: mentionRef }) })), _jsxs("div", { className: "edit-comment", children: [_jsx("div", { className: "reply", children: _jsx(Tooltip, { title: editMode ? 'Update' : 'Add', children: _jsx(Icon, { name: "comment_reply", hoverEffect: true, disabled: (editMode &&
-                                                                        input.trim() ===
-                                                                            (comment?.description?.trim() ?? '')) ||
-                                                                        input.trim().length === 0, onClick: () => {
-                                                                        onAddComment();
-                                                                        setEditMode(false);
-                                                                        setShowInput(false);
-                                                                    } }) }) }), _jsx("div", { className: "reply", onClick: () => {
-                                                                setEditMode(false);
-                                                                setShowInput(false);
-                                                                setInput('');
-                                                            }, children: _jsx(Tooltip, { title: editMode ? 'Cancel' : 'Close', children: _jsx(Icon, { name: "close", color: "var(--ff-delete-button-attachment)", hoverEffect: true }) }) })] })] })), _jsxs("div", { className: "comment-actions", children: [!isDepthLimitReached &&
-                                                    depth < 2 &&
-                                                    comment.comments?.length > 0 && (_jsx("div", { className: "action-icon", onClick: () => setExpand((prevExpand) => !prevExpand), children: _jsx(Tooltip, { title: `${expand ? 'collapse' : 'expand'}`, children: _jsx(Icon, { name: expand ? 'collapse-arrow' : 'expand-arrow', disabled: editMode || showInput, hoverEffect: true }) }) })), !isDepthLimitReached &&
-                                                    depth < 2 &&
-                                                    comment.comments?.length === 0 && (_jsx("div", { className: "action-icon", children: _jsx(Icon, { name: "expand-arrow", disabled: true }) })), !isVewMode && (_jsxs("div", { className: "ff-comment-action-item", children: [depth < 2 && (_jsx("div", { className: "action-icon", children: _jsx(Tooltip, { title: "Reply", children: _jsx(Icon, { name: "comment_icon", disabled: editMode || isDisable, hoverEffect: true, onClick: handleNewComment }) }) })), isEditDeleteActionAllowed && (_jsx("div", { className: "action-icon", children: _jsx(Tooltip, { title: "Edit", children: _jsx(Icon, { name: "edit", disabled: showInput || isDisable, hoverEffect: true, onClick: () => setEditMode(true) }) }) })), isEditDeleteActionAllowed && deleteEnable && (_jsx("div", { className: "action-icon", children: _jsx(Tooltip, { title: "Delete", children: _jsx(Icon, { name: "delete", color: "var(--ff-delete-button-attachment)", onClick: () => {
-                                                                        if (showInput)
-                                                                            return;
-                                                                        handleDeleteNode(comment.id);
-                                                                    }, disabled: editMode || showInput || isDisable, hoverEffect: true }) }) }))] }))] })] })] })] }), _jsx("div", { className: "comment-reply-container", children: showInput && (_jsxs("div", { className: "inputContainer", children: [_jsx("textarea", { rows: input.length < rowBreakCharCount ? 1 : 3, className: "inputContainer_input first_input", value: input, autoFocus: true, placeholder: 'Add reply comments', ref: textAreaRef, onChange: (e) => textAreaInputChange(e), onKeyDown: handleKeyDown }), hasAtSymbol && (_jsx("div", { id: "mention-user", style: {
-                                    position: 'absolute',
-                                    top: `${mentionPosition.top}px`,
-                                    left: `${mentionPosition.left}px`,
-                                }, children: _jsx(MentionUser, { hasAtSymbol: hasAtSymbol, usersObj: usersObj, optionClicked: optionClicked, charsAfterAt: textAfterAt, mentionUserRef: mentionReplyRef }) })), _jsxs("div", { className: "edit-comment", children: [_jsx("div", { className: "reply", onClick: () => {
-                                            onAddComment();
-                                            setEditMode(false);
-                                            setShowInput(false);
-                                        }, children: _jsx(Tooltip, { title: "Reply", children: _jsx(Icon, { name: "comment_reply", hoverEffect: true, disabled: Boolean(!input.length) }) }) }), _jsx("div", { className: "reply", onClick: () => {
-                                            setEditMode(false);
-                                            setShowInput(false);
-                                            setInput('');
-                                        }, children: _jsx(Tooltip, { title: "Cancel", children: _jsx(Icon, { name: "close", color: "var(--ff-delete-button-attachment)", hoverEffect: true }) }) })] })] })) }), expand && comment.comments?.length > 0 && (_jsx("div", { className: `child-comments ${depth === 0 ? 'first-level-child' : ''} ${depth === 1 ? 'second-level-child' : ''}`, children: comment.comments.map((childComment) => (_jsx("div", { className: `child-comments child-comments-${depth + 1}`, children: _jsx(ChildComment, { handleInsertNode: handleInsertNode, handleEditNode: handleEditNode, handleDeleteNode: handleDeleteNode, comment: childComment, depth: depth + 1, isDisable: isDisable, userDetails: userDetails, isEditDeleteActionAllowed: comment.createdBy === createdByID, createdByID: createdByID, isVewMode: isVewMode }) }, childComment.id))) }))] }) }));
-};
-export default ChildComment;
-//# sourceMappingURL=ChildComment.js.map
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as n,useRef as i,useEffect as o,Fragment as c}from"react";import"../Comments.scss.js";import l from"../../Icon/Icon.js";import r from"../../Tooltip/Tooltip.js";import a from"../../Typography/Typography.js";import s from"../mentionUser/MentionUser.js";import{DETECT_AT_CHAR_IN_COMMENT as d,DETECT_WORD_START_WITH_AT as m,DETECT_MENTIONED_USERNAME_BEFORE_CARET as h,CHECK_AT_FOLLOWED_BY_WORD as p,DETECT_AT_CHAR_BETWEEN_STRINGS_IN_COMMENT as f,DETECT_AT_CHAR_AT_START as u}from"../../../validations/regex.js";import{formatUserDetails as g,findUserByName as v}from"../commentCommonUtils.js";const y=({handleInsertNode:C,handleEditNode:N,handleDeleteNode:b,comment:w,depth:x=0,isDisable:$,userDetails:E,isEditDeleteActionAllowed:k=!0,createdByID:A,rowBreakCharCount:D=83,isVewMode:B=!1,deleteEnable:S=!0})=>{const[j,I]=n(""),[R,T]=n(!1),[U,_]=n(!1),[O,L]=n(!0),[z,F]=n([]),[H,M]=n(!1),[W,K]=n([]),[V,q]=n({top:0,left:0}),[G,J]=n(""),P=i(null),Q=i(null),X=i(null);o(()=>{R&&w?.description&&I(w?.description)},[R,w.description]),o(()=>{const e=g(E);F(e)},[E]),o(()=>{const e=(j.match(d)||[]).map(e=>v(e,z)).filter(Boolean);K(e)},[j]),o(()=>{const e=e=>{const t=Q.current&&!Q.current.contains(e.target)&&P.current&&!P.current.contains(e.target),n=X.current&&!X.current.contains(e.target)&&P.current&&!P.current.contains(e.target);(t||n)&&(M(!1),I(e=>e.replace(/(?:^|\s)(@\w*)$/,"")))};return H&&document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[H]);const{modifiedByUname:Y,createdByUname:Z,modifiedOn:ee,createdOn:te}=w||{},ne=ee??te??(new Date).toLocaleString(),ie=Y??Z??"Anonymous",oe=x>2,ce=ie?ie.charAt(0).toUpperCase():"A";o(()=>{R&&w.description&&I(w.description)},[R,w.description]);const le=()=>{0!==j.trim().length&&(R?(N(w.id,j,W),_(!1),I("")):(L(!0),C(w.id,j,W),_(!1),I("")),R&&T(!1))};o(()=>{(()=>{if(!P.current)return;const e=P?.current,t=R?Q?.current:X?.current,n=P.current.selectionStart,i=((e,t)=>{const n=document.createElement("div"),i=getComputedStyle(e);n.style.cssText=`\n        position: absolute;\n        visibility: hidden;\n        white-space: pre-wrap;\n        word-wrap: break-word;\n        overflow: auto;\n        width: ${e.offsetWidth}px;\n        height: ${e.offsetHeight}px;\n        font-family: ${i.fontFamily};\n        font-size: ${i.fontSize};\n        padding: ${i.padding};\n        border: ${i.border};\n        box-sizing: ${i.boxSizing};\n        line-height: ${i.lineHeight};\n      `,n.scrollTop=e.scrollTop,n.scrollLeft=e.scrollLeft,document.body.appendChild(n);const o=e.value.slice(0,t);n.textContent=o||".";const c=document.createElement("span");c.textContent=".",n.appendChild(c);const l=c.getBoundingClientRect();return document.body.removeChild(n),{top:l.top-20,left:l.left}})(e,n),o=t?.getBoundingClientRect().height??0,c=e?.getBoundingClientRect();if(!c)return;const l=window.innerHeight-c.bottom,r=c.top;q({top:l<o&&r>o?n-o-16:n+32,left:i.left+10})})()},[j]);const re=e=>{const t=e.target.value;I(t);const n=(t.match(/@\S+/g)||[]).map(e=>v(e,z)).filter(e=>null!==e);K(n);const i=e.target.selectionStart,o=t.slice(0,i),c=o.match(p);J(c?.[1]||"");const l=u.test(o);M(!!l)},ae=e=>{if("@"===e.key)M(!0);else if("Backspace"===e.key&&P.current){const t=P.current.selectionStart,n=j.slice(0,t);n.endsWith("@")&&M(!1);const i=n.match(h);if(i){e.preventDefault();const o=i[1],c=n.lastIndexOf(o||""),l=j.slice(0,c)+j.slice(t);I(l),M(!1),K(()=>(l.match(/@\w+/g)||[]).map(e=>e.slice(1)).map(e=>v(e,z)).filter(Boolean)),setTimeout(()=>{P.current?.setSelectionRange(c,c)},0)}}},se=e=>{if(!P.current)return;const t=P.current.selectionStart,n=j.slice(0,t),i=n.match(f);if(i){const o=n.lastIndexOf(i[1]||""),c=j.slice(t),l=`@${e.replace(/\s+/g,"")} `,r=j.slice(0,o)+l+c;I(r),M(!1),setTimeout(()=>{P.current?.focus(),P.current?.setSelectionRange(o+l.length+1,o+l.length+1)},0),K(()=>(r.match(/@\w+/g)||[]).map(e=>e.slice(1)).map(e=>v(e,z)).filter(Boolean))}};return e("div",{className:"commentsContainer",children:t("div",{className:"comment-wrapper",children:[t("div",{className:"commentContainer",children:[e("div",{className:"commentContainer__avatar",children:w?.profileImage?e("img",{height:30,width:30,src:`data:image/jpeg;base64,${w?.profileImage}`}):ce}),t("div",{className:"ff-message-container",children:[t("div",{className:"ff-message",children:[e("div",{className:"ff-message-name",children:ie}),e("div",{className:"ff-message-time",children:ne})]}),t("div",{className:"ff-editable-container",children:[!R&&e(a,{className:"typography-text",children:w?.description?.split(m).map((t,n)=>t.startsWith("@")?e("b",{children:t},`highlight-${n}`):e(c,{children:t},`text-${n}`))}),R&&t("div",{className:"inputContainer",children:[e("textarea",{rows:j.length<D?1:3,className:"inputContainer_input first_input",value:j,autoFocus:!0,placeholder:"Edit comment",ref:P,onChange:e=>re(e),onKeyDown:ae}),H&&e("div",{id:"mention-user",style:{position:"absolute",top:`${V.top}px`,left:`${V.left}px`},children:e(s,{hasAtSymbol:H,usersObj:z,optionClicked:se,charsAfterAt:G,mentionUserRef:Q})}),t("div",{className:"edit-comment",children:[e("div",{className:"reply",children:e(r,{title:R?"Update":"Add",children:e(l,{name:"comment_reply",hoverEffect:!0,disabled:R&&j.trim()===(w?.description?.trim()??"")||0===j.trim().length,onClick:()=>{le(),T(!1),_(!1)}})})}),e("div",{className:"reply",onClick:()=>{T(!1),_(!1),I("")},children:e(r,{title:R?"Cancel":"Close",children:e(l,{name:"close",color:"var(--ff-delete-button-attachment)",hoverEffect:!0})})})]})]}),t("div",{className:"comment-actions",children:[!oe&&x<2&&w.comments?.length>0&&e("div",{className:"action-icon",onClick:()=>L(e=>!e),children:e(r,{title:""+(O?"collapse":"expand"),children:e(l,{name:O?"collapse-arrow":"expand-arrow",disabled:R||U,hoverEffect:!0})})}),!oe&&x<2&&0===w.comments?.length&&e("div",{className:"action-icon",children:e(l,{name:"expand-arrow",disabled:!0})}),!B&&t("div",{className:"ff-comment-action-item",children:[x<2&&e("div",{className:"action-icon",children:e(r,{title:"Reply",children:e(l,{name:"comment_icon",disabled:R||$,hoverEffect:!0,onClick:()=>{_(!0)}})})}),k&&e("div",{className:"action-icon",children:e(r,{title:"Edit",children:e(l,{name:"edit",disabled:U||$,hoverEffect:!0,onClick:()=>T(!0)})})}),k&&S&&e("div",{className:"action-icon",children:e(r,{title:"Delete",children:e(l,{name:"delete",color:"var(--ff-delete-button-attachment)",onClick:()=>{U||b(w.id)},disabled:R||U||$,hoverEffect:!0})})})]})]})]})]})]}),e("div",{className:"comment-reply-container",children:U&&t("div",{className:"inputContainer",children:[e("textarea",{rows:j.length<D?1:3,className:"inputContainer_input first_input",value:j,autoFocus:!0,placeholder:"Add reply comments",ref:P,onChange:e=>re(e),onKeyDown:ae}),H&&e("div",{id:"mention-user",style:{position:"absolute",top:`${V.top}px`,left:`${V.left}px`},children:e(s,{hasAtSymbol:H,usersObj:z,optionClicked:se,charsAfterAt:G,mentionUserRef:X})}),t("div",{className:"edit-comment",children:[e("div",{className:"reply",onClick:()=>{le(),T(!1),_(!1)},children:e(r,{title:"Reply",children:e(l,{name:"comment_reply",hoverEffect:!0,disabled:Boolean(!j.length)})})}),e("div",{className:"reply",onClick:()=>{T(!1),_(!1),I("")},children:e(r,{title:"Cancel",children:e(l,{name:"close",color:"var(--ff-delete-button-attachment)",hoverEffect:!0})})})]})]})}),O&&w.comments?.length>0&&e("div",{className:`child-comments ${0===x?"first-level-child":""} ${1===x?"second-level-child":""}`,children:w.comments.map(t=>e("div",{className:`child-comments child-comments-${x+1}`,children:e(y,{handleInsertNode:C,handleEditNode:N,handleDeleteNode:b,comment:t,depth:x+1,isDisable:$,userDetails:E,isEditDeleteActionAllowed:w.createdBy===A,createdByID:A,isVewMode:B})},t.id))})]})})};export{y as default};

package/lib/components/Comments/childComment/useNode.js

@@ -1,49 +1 @@
-import { ffid } from "../../../utils/ffID/ffid";
-const useNode = () => {
-    const insertNode = (tree, commentId, item) => {
-        return tree.map((node) => {
-            if (node.id === commentId) {
-                return {
-                    ...node,
-                    comments: [
-                        ...node.comments,
-                        {
-                            id: ffid(),
-                            description: item.description,
-                            comments: [],
-                            createdBy: node.createdBy,
-                            modifiedBy: node.modifiedBy,
-                            createdByUname: node.createdByUname,
-                            modifiedByUname: node.modifiedByUname,
-                            createdOn: new Date().toLocaleString(),
-                            modifiedOn: new Date().toLocaleString(),
-                            commentParentId: commentId,
-                        },
-                    ],
-                };
-            }
-            return {
-                ...node,
-                comments: insertNode(node.comments, commentId, item),
-            };
-        });
-    };
-    const editNode = (tree, commentId, value) => {
-        return tree.map((node) => ({
-            ...node,
-            description: node.id === commentId ? value : node.description,
-            comments: editNode(node.comments, commentId, value),
-        }));
-    };
-    const deleteNode = (tree, commentId) => {
-        return tree
-            .filter((node) => node.id !== commentId)
-            .map((node) => ({
-            ...node,
-            comments: deleteNode(node.comments, commentId),
-        }));
-    };
-    return { insertNode, editNode, deleteNode };
-};
-export default useNode;
-//# sourceMappingURL=useNode.js.map
+import{ffid as e}from"../../../utils/ffID/ffid.js";const t=()=>{const t=(m,d,o)=>m.map(m=>m.id===d?{...m,comments:[...m.comments,{id:e(),description:o.description,comments:[],createdBy:m.createdBy,modifiedBy:m.modifiedBy,createdByUname:m.createdByUname,modifiedByUname:m.modifiedByUname,createdOn:(new Date).toLocaleString(),modifiedOn:(new Date).toLocaleString(),commentParentId:d}]}:{...m,comments:t(m.comments,d,o)}),m=(e,t,d)=>e.map(e=>({...e,description:e.id===t?d:e.description,comments:m(e.comments,t,d)})),d=(e,t)=>e.filter(e=>e.id!==t).map(e=>({...e,comments:d(e.comments,t)}));return{insertNode:t,editNode:m,deleteNode:d}};export{t as default};

package/lib/components/Comments/commentCommonUtils.js

@@ -1,15 +1 @@
-export const formatUserDetails = (userDetails) => {
-    if (userDetails && Array.isArray(userDetails)) {
-        return userDetails.map(({ user }) => ({
-            id: user.id,
-            name: user.name,
-            emailId: user.emailId,
-        }));
-    }
-    return [];
-};
-export const findUserByName = (name, users) => {
-    const matchedUser = users.find((user) => `@${user.name.replace(/\s+/g, '')}` === name);
-    return matchedUser ? matchedUser.emailId : null;
-};
-//# sourceMappingURL=commentCommonUtils.js.map
+const e=e=>e&&Array.isArray(e)?e.map(({user:e})=>({id:e.id,name:e.name,emailId:e.emailId})):[],a=(e,a)=>{const r=a.find(a=>`@${a.name.replace(/\s+/g,"")}`===e);return r?r.emailId:null};export{a as findUserByName,e as formatUserDetails};

package/lib/components/Comments/mentionUser/MentionUser.js

@@ -1,54 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import './MentionUser.scss';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import Typography from '../../Typography';
-const MentionUser = ({ hasAtSymbol, usersObj, optionClicked, charsAfterAt, mentionUserRef, }) => {
-    const [hoveredIndex, setHoveredIndex] = useState(0);
-    const itemRefs = useRef([]);
-    if (!hasAtSymbol)
-        return null;
-    const filteredUsers = usersObj.filter((option) => charsAfterAt
-        ? option.name.toLowerCase().startsWith(charsAfterAt.toLowerCase())
-        : true);
-    useEffect(() => {
-        setHoveredIndex(0);
-    }, [charsAfterAt]);
-    const handleKeyDown = useCallback((event) => {
-        if (!hasAtSymbol || filteredUsers.length === 0)
-            return;
-        switch (event.key) {
-            case 'ArrowDown':
-                event.preventDefault();
-                setHoveredIndex((prevIndex) => (prevIndex + 1) % filteredUsers.length);
-                break;
-            case 'ArrowUp':
-                event.preventDefault();
-                setHoveredIndex((prevIndex) => prevIndex === 0 ? filteredUsers.length - 1 : prevIndex - 1);
-                break;
-            case 'Enter':
-                event.preventDefault();
-                const selectedUser = filteredUsers[hoveredIndex];
-                if (selectedUser) {
-                    optionClicked(selectedUser.name, selectedUser.emailId);
-                }
-                break;
-            default:
-                break;
-        }
-    }, [filteredUsers, hoveredIndex, hasAtSymbol, optionClicked]);
-    useEffect(() => {
-        if (itemRefs.current[hoveredIndex]) {
-            itemRefs.current[hoveredIndex]?.scrollIntoView({
-                behavior: 'smooth',
-                block: 'nearest',
-            });
-        }
-    }, [hoveredIndex]);
-    useEffect(() => {
-        document.addEventListener('keydown', handleKeyDown);
-        return () => document.removeEventListener('keydown', handleKeyDown);
-    }, [handleKeyDown]);
-    return (_jsx("div", { className: "select-section", onMouseDown: (e) => e.preventDefault(), children: _jsx("div", { className: "select-group", ref: mentionUserRef, children: filteredUsers.length ? (filteredUsers.map((option, index) => (_jsx("div", { ref: (name) => (itemRefs.current[index] = name), className: `mention-option ${index === hoveredIndex ? 'hovered' : ''}`, onClick: () => optionClicked(option.name, option.emailId), onMouseDown: (e) => e.preventDefault(), children: _jsx(Typography, { children: option.name }) }, option.id)))) : (_jsx("div", { className: "user-not-found", children: _jsx(Typography, { children: "No user name found" }) })) }) }));
-};
-export default MentionUser;
-//# sourceMappingURL=MentionUser.js.map
+import{jsx as e}from"react/jsx-runtime";import"./MentionUser.scss.js";import{useState as r,useRef as t,useEffect as n,useCallback as o}from"react";import s from"../../Typography/Typography.js";const a=({hasAtSymbol:a,usersObj:c,optionClicked:i,charsAfterAt:l,mentionUserRef:m})=>{const[d,u]=r(0),h=t([]);if(!a)return null;const p=c.filter(e=>!l||e.name.toLowerCase().startsWith(l.toLowerCase()));n(()=>{u(0)},[l]);const f=o(e=>{if(a&&0!==p.length)switch(e.key){case"ArrowDown":e.preventDefault(),u(e=>(e+1)%p.length);break;case"ArrowUp":e.preventDefault(),u(e=>0===e?p.length-1:e-1);break;case"Enter":e.preventDefault();const r=p[d];r&&i(r.name,r.emailId)}},[p,d,a,i]);return n(()=>{h.current[d]&&h.current[d]?.scrollIntoView({behavior:"smooth",block:"nearest"})},[d]),n(()=>(document.addEventListener("keydown",f),()=>document.removeEventListener("keydown",f)),[f]),e("div",{className:"select-section",onMouseDown:e=>e.preventDefault(),children:e("div",{className:"select-group",ref:m,children:p.length?p.map((r,t)=>e("div",{ref:e=>h.current[t]=e,className:"mention-option "+(t===d?"hovered":""),onClick:()=>i(r.name,r.emailId),onMouseDown:e=>e.preventDefault(),children:e(s,{children:r.name})},r.id)):e("div",{className:"user-not-found",children:e(s,{children:"No user name found"})})})})};export{a as default};

package/lib/components/Comments/mentionUser/MentionUser.scss.js

@@ -0,0 +1 @@
+import o from"../../../node_modules/style-inject/dist/style-inject.es.js";o(".select-section{background:var(--base-bg-color);border:1px solid var(--ff-mini-modal-border);border-radius:8px;box-shadow:0 4px 12px var(--toggle-strip-color);left:var(--left);padding:5px 0;position:absolute;top:var(--top);width:200px;z-index:99999}.select-section .select-group{border:none;max-height:38vh;overflow-y:auto;width:100%}.select-section .select-group :hover{background-color:var(--hover-color)}.select-section .select-group .mention-option{cursor:pointer;display:block;padding:8px 12px;transition:background .2s}.select-section .select-group .user-not-found{cursor:not-allowed;display:block;padding:8px 12px;transition:background .2s}.select-section .select-group .mention-option.hovered{background:var(--hover-color)}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk1lbnRpb25Vc2VyLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsZ0JBQ0UsK0JBQWdDLENBQ2hDLDRDQUE2QyxDQUM3QyxpQkFBa0IsQ0FPbEIsK0NBQWdELENBRGhELGdCQUFpQixDQUxqQixhQUFjLENBR2QsaUJBQWtCLENBQ2xCLGNBQWUsQ0FIZixXQUFZLENBQ1osYUFLRixDQUNBLDhCQUdFLFdBQVksQ0FGWixlQUFnQixDQUdoQixlQUFnQixDQUZoQixVQUdGLENBQ0EscUNBQ0UsbUNBQ0YsQ0FDQSw4Q0FHRSxjQUFlLENBRmYsYUFBYyxDQUNkLGdCQUFpQixDQUVqQix5QkFDRixDQUNBLDhDQUlFLGtCQUFtQixDQUhuQixhQUFjLENBQ2QsZ0JBQWlCLENBQ2pCLHlCQUVGLENBQ0Esc0RBQ0UsNkJBQ0YiLCJmaWxlIjoiTWVudGlvblVzZXIuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi5zZWxlY3Qtc2VjdGlvbiB7XG4gIGJhY2tncm91bmQ6IHZhcigtLWJhc2UtYmctY29sb3IpO1xuICBib3JkZXI6IDFweCBzb2xpZCB2YXIoLS1mZi1taW5pLW1vZGFsLWJvcmRlcik7XG4gIGJvcmRlci1yYWRpdXM6IDhweDtcbiAgcGFkZGluZzogNXB4IDA7XG4gIHdpZHRoOiAyMDBweDtcbiAgei1pbmRleDogOTk5OTk7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiB2YXIoLS10b3ApO1xuICBsZWZ0OiB2YXIoLS1sZWZ0KTtcbiAgYm94LXNoYWRvdzogMCA0cHggMTJweCB2YXIoLS10b2dnbGUtc3RyaXAtY29sb3IpO1xufVxuLnNlbGVjdC1zZWN0aW9uIC5zZWxlY3QtZ3JvdXAge1xuICBtYXgtaGVpZ2h0OiAzOHZoO1xuICB3aWR0aDogMTAwJTtcbiAgYm9yZGVyOiBub25lO1xuICBvdmVyZmxvdy15OiBhdXRvO1xufVxuLnNlbGVjdC1zZWN0aW9uIC5zZWxlY3QtZ3JvdXAgOmhvdmVyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0taG92ZXItY29sb3IpO1xufVxuLnNlbGVjdC1zZWN0aW9uIC5zZWxlY3QtZ3JvdXAgLm1lbnRpb24tb3B0aW9uIHtcbiAgZGlzcGxheTogYmxvY2s7XG4gIHBhZGRpbmc6IDhweCAxMnB4O1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIHRyYW5zaXRpb246IGJhY2tncm91bmQgMC4ycztcbn1cbi5zZWxlY3Qtc2VjdGlvbiAuc2VsZWN0LWdyb3VwIC51c2VyLW5vdC1mb3VuZCB7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBwYWRkaW5nOiA4cHggMTJweDtcbiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZCAwLjJzO1xuICBjdXJzb3I6IG5vdC1hbGxvd2VkO1xufVxuLnNlbGVjdC1zZWN0aW9uIC5zZWxlY3QtZ3JvdXAgLm1lbnRpb24tb3B0aW9uLmhvdmVyZWQge1xuICBiYWNrZ3JvdW5kOiB2YXIoLS1ob3Zlci1jb2xvcik7XG59Il19 */");