pixel-react 1.20.20 → 1.20.22

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

@@ -1 +1,270 @@
-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};
+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

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

@@ -1 +1,49 @@
-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};
+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

package/lib/components/Comments/commentCommonUtils.js

@@ -1 +1,15 @@
-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};
+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

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

@@ -1 +1,54 @@
-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};
+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

package/lib/components/ConditionalDropdown/ConditionalDropdown.js

@@ -1 +1,218 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as r,useState as o,useRef as n,useImperativeHandle as a,useEffect as i}from"react";import{checkEmpty as s}from"../../utils/checkEmpty/checkEmpty.js";import l from"../Editor/VariableDropdown.js";import c from"../Icon/Icon.js";import d from"../Input/Input.js";import"./ConditionalDropdown.scss.js";import p from"./OptionsDropdown.js";import u from"../Tooltip/Tooltip.js";import h from"../Typography/Typography.js";const f=r(({label:r="",hashInputValue:f="",setHashInputValue:m,variableList:w=[],addForloopPrefix:y=!1,placeholder:V="Enter text",onChange:g,onCreateVariableClick:T,value:C="",dropdownWidth:v="inherit",isHash:x=!1,dataFiles:L=[],showAddVariableIcon:b=!0,helperText:S="",error:_,autoComplete:O="off",showHidePasswordIcon:E=!0,required:I=!1,formProps:D={},onlyDropdown:P=!1,type:$,onFocus:A,onBlur:j,readOnly:R=!1,height:F="160px",truncateTextValue:G=34,isTruncateText:k=!1,...H},N)=>{const[B,M]=o(!1),[U,W]=o(!1),[q,z]=o(!1),[K,J]=o(null),[Q,X]=o(0),[Y,Z]=o(!1),[ee,te]=o(!1),[re,oe]=o([]),ne=n(null);a(N,()=>ne.current),i(()=>{null!==K&&ne.current&&(ne.current.setSelectionRange(K,K),ne.current.focus())},[K]),i(()=>{if(x?M(C.startsWith("#")):te(!C?.includes("$")),C.startsWith("#")&&x){const e=C.slice(1).toLowerCase(),t=L.filter(t=>t.name.toLowerCase().includes(e));oe(t),M(!0)}},[C]),i(()=>{if(!Y&&P){const e=L.filter(e=>e.toLowerCase().includes(C.toLowerCase())).map((e,t)=>({id:t+1,name:e}));oe(e),M(e.length>0)}Z(!1)},[C]);const ae=()=>{ne.current&&X(ne.current.selectionStart||0)},ie=ae,se=ae;i(()=>{ne.current&&X(ne.current.selectionStart||0)},[C]);const le=e=>{if(ne.current){const{selectionStart:t,selectionEnd:r}=ne.current,o=`{${"STEPGROUP"===e.parentVariableType?"SGV":"LOCAL"===e.type?"LV":"GLOBAL"===e.type?"GV":"GROUP"===e.type?"SGV":[String(e?._id??""),String(e?.id??"")].some(e=>e.includes("PARAMETER"))?"SGP":"_startforloop"===e.type?"FLV_for:":"DATAPROVIDER"===e.type?"DPV":"PEV"}${"_startforloop"===e?.type?"":"_"}${"DATAPROVIDER"===e?.type?e?.dpName+":"+e?.varname:e.name}}`;let n;if(n=x&&"#"===C[0]||P&&!e?.type?e.name+C.slice(r||1):C.slice(0,function(e,t){const r=e.lastIndexOf("$",t-1),o=e.indexOf("$",t);return-1===r&&-1===o?-1:-1===r?o:-1===o||Math.abs(t-r)<=Math.abs(o-t)?r:o}(C,Q)||0)+"$"+o+C.slice(r||0),g){g({target:{value:n}},e)}ne.current.value=n,m?.(e),J((t||0)+o.length),M(!1),Z(!0),W(!0)}};const ce=function(e,t,r){let o=!1,n="";const a="}"===C[t-1];if(t<0||t>e.length)return{showDropdown:o,searchString:n};const i=e.lastIndexOf("$",t-1),s=e.indexOf("$",t);if(-1!==i&&(t===i+1?(o=!0,n=""):(n=e.slice(i+1,-1===s?void 0:s),t>i+1&&(n=e.slice(i+1,t)),o=!0),U&&a&&(o=!1),(/[{}]/.test(n)||0===t)&&(o=!1,n=""),n)){r.some(e=>("_startforloop"===e.type&&y?`FLV_for:${e.name}`:e.name).toLowerCase().includes(n.toLowerCase()))||(o=!1,n="")}return{showDropdown:o,searchString:n}}(C,Q,w),[de,pe]=o(!1);return e("div",{className:"ff-add-variable-container",children:[e("div",{className:"ff-add-variable-input",children:[t(d,{readOnly:R,...H,name:"add_variable",ref:ne,type:((e,t)=>"password"===e?t?"text":"password":e??"text")($,de),value:C,onChange:g,variant:"primary",label:r,placeholder:V,onClick:ie,onKeyUp:se,onFocus:e=>{setTimeout(()=>{z(!0),A?.(e)},500)},onBlur:e=>{(e=>{e.relatedTarget&&e.relatedTarget.closest(".dropdown-container")||z(!1)})(e),j?.(e)},autoComplete:O,helperText:S,error:_,required:I,...D}),"password"===$&&E&&t(u,{title:de?"Hide":"Show",children:t(h,{as:"span",className:"ff-password-icon",children:t(c,{onClick:()=>{pe(e=>!e)},name:de?"hide_access_icon":"view_access_icon",width:16,height:16,hoverEffect:!0})})}),!s(C)&&!x&&ee&&b&&t(u,{title:"Add Variable",children:t(c,{onClick:T,name:"add_variable",width:24,height:24,hoverEffect:!0})})]}),ce?.showDropdown&&q&&t(l,{position:"absolute",width:v,optionsList:w.filter(e=>("_startforloop"===e.type&&y?`FLV_for:${e.name}`:e.name).toLowerCase().includes(ce?.searchString.toLowerCase())),onSelectVariable:le,height:F}),B&&(x||P)&&t(p,{position:"relative",width:v,filteredOptions:re,zIndex:2e3,onSelectVariable:le,height:F,isTruncateText:k,truncateTextValue:G})]})});export{f as default};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, forwardRef, useImperativeHandle, useRef, } from 'react';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+import VariableDropdown from '../Editor/VariableDropdown';
+import Icon from '../Icon';
+import Input from '../Input';
+import './ConditionalDropdown.scss';
+import OptionsDropdown from './OptionsDropdown';
+import Tooltip from '../Tooltip';
+import Typography from '../Typography';
+const ConditionalDropdown = forwardRef(({ label = '', hashInputValue = '', setHashInputValue, variableList = [], addForloopPrefix = false, placeholder = 'Enter text', onChange, onCreateVariableClick, value = '', dropdownWidth = 'inherit', isHash = false, dataFiles = [], showAddVariableIcon = true, helperText = '', error, autoComplete = 'off', showHidePasswordIcon = true, required = false, formProps = {}, onlyDropdown = false, type, onFocus, onBlur, readOnly = false, height = '160px', truncateTextValue = 34, isTruncateText = false, ...props }, ref) => {
+    const [showDropdown, setShowDropdown] = useState(false);
+    const [isDropdownClicked, setIsDropdownClicked] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const [cursorPosition, setCursorPosition] = useState(null);
+    const [findCursor, setFindCursor] = useState(0);
+    const [skipEffect, setSkipEffect] = useState(false);
+    const [showCreateVariableIcon, setShowCreateVariableIcon] = useState(false);
+    const [filteredOptions, setFilteredOptions] = useState([]);
+    const inputRef = useRef(null);
+    useImperativeHandle(ref, () => inputRef.current);
+    useEffect(() => {
+        if (cursorPosition !== null && inputRef.current) {
+            inputRef.current.setSelectionRange(cursorPosition, cursorPosition);
+            inputRef.current.focus();
+        }
+    }, [cursorPosition]);
+    useEffect(() => {
+        if (isHash) {
+            setShowDropdown(value.startsWith('#'));
+        }
+        else {
+            setShowCreateVariableIcon(!value?.includes('$'));
+        }
+        if (value.startsWith('#') && isHash) {
+            const searchQuery = value.slice(1).toLowerCase();
+            const filtered = dataFiles.filter((file) => file.name.toLowerCase().includes(searchQuery));
+            setFilteredOptions(filtered);
+            setShowDropdown(true);
+        }
+    }, [value]);
+    useEffect(() => {
+        if (!skipEffect && onlyDropdown) {
+            const filteredResults = dataFiles
+                .filter((item) => item.toLowerCase().includes(value.toLowerCase()))
+                .map((item, index) => ({
+                id: index + 1,
+                name: item,
+            }));
+            setFilteredOptions(filteredResults);
+            setShowDropdown(filteredResults.length > 0);
+        }
+        setSkipEffect(false);
+    }, [value]);
+    const updateCursorPosition = () => {
+        if (inputRef.current) {
+            setFindCursor(inputRef.current.selectionStart || 0);
+        }
+    };
+    const handleClick = updateCursorPosition;
+    const handleKeyUp = updateCursorPosition;
+    useEffect(() => {
+        if (inputRef.current) {
+            setFindCursor(inputRef.current.selectionStart || 0);
+        }
+    }, [value]);
+    function findNearestDollar(input, cursorPosition) {
+        const lastDollarBeforeCursor = input.lastIndexOf('$', cursorPosition - 1);
+        const nextDollarAfterCursor = input.indexOf('$', cursorPosition);
+        if (lastDollarBeforeCursor === -1 && nextDollarAfterCursor === -1) {
+            return -1;
+        }
+        else if (lastDollarBeforeCursor === -1) {
+            return nextDollarAfterCursor;
+        }
+        else if (nextDollarAfterCursor === -1) {
+            return lastDollarBeforeCursor;
+        }
+        else {
+            return Math.abs(cursorPosition - lastDollarBeforeCursor) <=
+                Math.abs(nextDollarAfterCursor - cursorPosition)
+                ? lastDollarBeforeCursor
+                : nextDollarAfterCursor;
+        }
+    }
+    const handleDropdownClick = (item) => {
+        if (inputRef.current) {
+            const { selectionStart, selectionEnd } = inputRef.current;
+            const dollarSyntax = `{${item.parentVariableType === 'STEPGROUP'
+                ? 'SGV'
+                : item.type === 'LOCAL'
+                    ? 'LV'
+                    : item.type === 'GLOBAL'
+                        ? 'GV'
+                        : item.type === 'GROUP'
+                            ? 'SGV'
+                            : [String(item?._id ?? ''), String(item?.id ?? '')].some((val) => val.includes('PARAMETER'))
+                                ? 'SGP'
+                                : item.type === '_startforloop'
+                                    ? 'FLV_for:'
+                                    : item.type === 'DATAPROVIDER'
+                                        ? 'DPV'
+                                        : 'PEV'}${item?.type === '_startforloop' ? '' : '_'}${item?.type === 'DATAPROVIDER'
+                ? item?.dpName + ':' + item?.varname
+                : item.name}}`;
+            let newValue;
+            if ((isHash && value[0] === '#') || (onlyDropdown && !item?.type)) {
+                newValue = item.name + value.slice(selectionEnd || 1);
+            }
+            else {
+                newValue =
+                    value.slice(0, findNearestDollar(value, findCursor) || 0) +
+                        '$' +
+                        dollarSyntax +
+                        value.slice(selectionEnd || 0);
+            }
+            if (onChange) {
+                const event = {
+                    target: {
+                        value: newValue,
+                    },
+                };
+                onChange(event, item);
+            }
+            inputRef.current.value = newValue;
+            setHashInputValue?.(item);
+            setCursorPosition((selectionStart || 0) + dollarSyntax.length);
+            setShowDropdown(false);
+            setSkipEffect(true);
+            setIsDropdownClicked(true);
+        }
+    };
+    function getDropdownState(input, cursorPosit, variableList) {
+        let showDropdown = false;
+        let searchString = '';
+        const checkifCursorPositionhasCloseCurly = value[cursorPosit - 1] === '}';
+        if (cursorPosit < 0 || cursorPosit > input.length) {
+            return { showDropdown, searchString };
+        }
+        const lastDollarBeforeCursor = input.lastIndexOf('$', cursorPosit - 1);
+        const nextDollarAfterCursor = input.indexOf('$', cursorPosit);
+        if (lastDollarBeforeCursor !== -1) {
+            if (cursorPosit === lastDollarBeforeCursor + 1) {
+                showDropdown = true;
+                searchString = '';
+            }
+            else {
+                searchString = input.slice(lastDollarBeforeCursor + 1, nextDollarAfterCursor === -1 ? undefined : nextDollarAfterCursor);
+                if (cursorPosit > lastDollarBeforeCursor + 1) {
+                    searchString = input.slice(lastDollarBeforeCursor + 1, cursorPosit);
+                }
+                showDropdown = true;
+            }
+            if (isDropdownClicked && checkifCursorPositionhasCloseCurly) {
+                showDropdown = false;
+            }
+            if (/[{}]/.test(searchString) || cursorPosit === 0) {
+                showDropdown = false;
+                searchString = '';
+            }
+            if (searchString) {
+                const isInVariableList = variableList.some((file) => {
+                    const searchableName = file.type === '_startforloop' && addForloopPrefix
+                        ? `FLV_for:${file.name}`
+                        : file.name;
+                    return searchableName
+                        .toLowerCase()
+                        .includes(searchString.toLowerCase());
+                });
+                if (!isInVariableList) {
+                    showDropdown = false;
+                    searchString = '';
+                }
+            }
+        }
+        return { showDropdown, searchString };
+    }
+    const result = getDropdownState(value, findCursor, variableList);
+    const handleBlur = (e) => {
+        {
+            if (!e.relatedTarget ||
+                !e.relatedTarget.closest('.dropdown-container')) {
+                setIsFocused(false);
+            }
+        }
+    };
+    const [showPassword, setShowPassword] = useState(false);
+    const togglePasswordVisibility = () => {
+        setShowPassword((prev) => !prev);
+    };
+    const getInputType = (type, showPassword) => {
+        if (type === 'password') {
+            return showPassword ? 'text' : 'password';
+        }
+        return type ?? 'text';
+    };
+    return (_jsxs("div", { className: "ff-add-variable-container", children: [_jsxs("div", { className: "ff-add-variable-input", children: [_jsx(Input, { readOnly: readOnly, ...props, name: "add_variable", ref: inputRef, type: getInputType(type, showPassword), value: value, onChange: onChange, variant: "primary", label: label, placeholder: placeholder, onClick: handleClick, onKeyUp: handleKeyUp, onFocus: (e) => {
+                            setTimeout(() => {
+                                setIsFocused(true);
+                                onFocus?.(e);
+                            }, 500);
+                        }, onBlur: (e) => {
+                            handleBlur(e);
+                            onBlur?.(e);
+                        }, autoComplete: autoComplete, helperText: helperText, error: error, required: required, ...formProps }), type === 'password' && showHidePasswordIcon && (_jsx(Tooltip, { title: showPassword ? 'Hide' : 'Show', children: _jsx(Typography, { as: "span", className: "ff-password-icon", children: _jsx(Icon, { onClick: togglePasswordVisibility, name: !showPassword ? 'view_access_icon' : 'hide_access_icon', width: 16, height: 16, hoverEffect: true }) }) })), !checkEmpty(value) &&
+                        !isHash &&
+                        showCreateVariableIcon &&
+                        showAddVariableIcon && (_jsx(Tooltip, { title: "Add Variable", children: _jsx(Icon, { onClick: onCreateVariableClick, name: "add_variable", width: 24, height: 24, hoverEffect: true }) }))] }), result?.showDropdown && isFocused && (_jsx(VariableDropdown, { position: "absolute", width: dropdownWidth, optionsList: variableList.filter((file) => {
+                    const searchableName = file.type === '_startforloop' && addForloopPrefix
+                        ? `FLV_for:${file.name}`
+                        : file.name;
+                    return searchableName
+                        .toLowerCase()
+                        .includes(result?.searchString.toLowerCase());
+                }), onSelectVariable: handleDropdownClick, height: height })), showDropdown && (isHash || onlyDropdown) && (_jsx(OptionsDropdown, { position: "relative", width: dropdownWidth, filteredOptions: filteredOptions, zIndex: 2000, onSelectVariable: handleDropdownClick, height: height, isTruncateText: isTruncateText, truncateTextValue: truncateTextValue }))] }));
+});
+export default ConditionalDropdown;
+//# sourceMappingURL=ConditionalDropdown.js.map