frst-components 0.36.9 → 0.38.0

package/dist/esm/src/components/hypothesisComponent/index.js

@@ -0,0 +1,145 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useEffect, useMemo } from 'react';
+import { MainContainer, Container, SplitContainerDescription, Title, Separator, Description, SplitContainer, VoteButtonContainer, VoteCount, VoteContent, ImageContent, VoteButton, VoteListContainer, VoteListItem } from './hypothesisComponent.style.js';
+import { HypothesisEnum } from './types.js';
+import { VoteIcon } from '../../../public/customIcons/VoteIcon.js';
+import { ExcludeVoteIcon } from '../../../public/customIcons/ExcludeVoteIcon.js';
+import { VoteCurrentIcon } from '../../../public/customIcons/VoteCurrentIcon.js';
+import Avatar from '../avatar/index.js';
+import Loading from '../DS/loading/index.js';
+import MenuMore from '../menu-more/index.js';
+import { ModalConfirme } from '../ModalConfirme/index.js';
+
+const HypothesisComponent = ({ description, type, id, title, votes = [], onVote, canVote = false, canViewVote = false, userLoggedId, deleteVote, canViewListVotes, votesSingularText, votesPluralText, voteText, deleteVoteText, handleViewProfile, avatar, hasEditHipotesis, onDeleteHipotesis, showAvatar, authorId, hasVoteGoal, loading, onChangeVote, authorGoalId, changeVoteText, onSaveEditHipotesis }) => {
+    const [isHover, seIsHover] = useState(false);
+    const [hasVoteHypothesis, setHasVoteHypothesis] = useState(false);
+    const [showVotesList, setShowVotesList] = useState(false);
+    const [isEditing, setIsEditing] = useState(false);
+    const [editDescription, setEditDescription] = useState(description);
+    const [isConfirmeDeleteHypothesis, setIsConfirmeDeleteHypothesis] = useState(false);
+    const ContainerRef = useRef(null);
+    const [heightContainer, seHeightContainer] = useState(0);
+    const toggleVotes = () => {
+        setShowVotesList(!showVotesList);
+    };
+    const viewVotesRef = useRef(null);
+    const handleClickOutsideVote = (event) => {
+        if (viewVotesRef?.current &&
+            !viewVotesRef?.current?.contains(event?.target) &&
+            !event.target.closest('.VoteListItem')) {
+            setShowVotesList(false);
+        }
+    };
+    useEffect(() => {
+        setHasVoteHypothesis(votes?.some((vote) => vote?.user_uuid === userLoggedId));
+    }, [votes]);
+    useEffect(() => {
+        if (loading)
+            seIsHover(false);
+    }, [loading]);
+    useEffect(() => {
+        document.addEventListener('mousedown', handleClickOutsideVote);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutsideVote);
+        };
+    }, [setShowVotesList]);
+    useEffect(() => {
+        const Container = ContainerRef?.current;
+        if (ContainerRef) {
+            const height = Container.clientHeight;
+            seHeightContainer(height);
+        }
+    }, [ContainerRef]);
+    const handleVote = async (hyphoteseId) => {
+        await onVote(hyphoteseId);
+    };
+    const handleDeleteVote = async (voteId) => {
+        await deleteVote(voteId);
+    };
+    const handleChangeVote = async (hyphoteseId) => {
+        await onChangeVote(hyphoteseId);
+    };
+    const handleSaveDescription = () => {
+        onSaveEditHipotesis(editDescription);
+        setIsEditing(false);
+    };
+    const validHasEditHipotesis = useMemo(() => {
+        if (!hasEditHipotesis)
+            return false;
+        if (authorGoalId === userLoggedId)
+            return true;
+        if (type !== HypothesisEnum.PRIORITIZE) {
+            return authorId === userLoggedId;
+        }
+        return false;
+    }, [type, hasEditHipotesis, authorGoalId, authorId, userLoggedId]);
+    const handleDoubleClick = (e) => {
+        if (validHasEditHipotesis) {
+            setIsEditing(true);
+        }
+    };
+    return (jsx(MainContainer, { children: jsxs(Container, { type: type, id: id, ref: ContainerRef, children: [jsxs(SplitContainerDescription, { children: [showAvatar && (jsx(Avatar, { src: avatar, size: "24px", style: { marginRight: '8px', cursor: authorId ? 'pointer' : 'default' }, onClick: () => handleViewProfile(authorId) })), jsx(Title, { children: title }), jsx(Separator, { children: "|" }), jsx(Description, { children: isEditing ? (jsx("span", { style: { display: 'flex', width: '100%' }, children: jsx("div", { contentEditable: true, style: { width: '100%', background: 'white' }, onInput: (e) => setEditDescription(e.currentTarget.textContent), onBlur: handleSaveDescription, children: description }) })) : (jsx("div", { style: { width: '100%' }, onDoubleClick: handleDoubleClick, children: jsx("span", { children: editDescription }) })) }), validHasEditHipotesis && (jsx(MenuMore, { options: type === HypothesisEnum.PRIORITIZE
+                                ? [
+                                    {
+                                        description: 'Editar',
+                                        onClick: (e) => setIsEditing(true)
+                                    },
+                                ]
+                                : [
+                                    {
+                                        description: 'Editar',
+                                        onClick: (e) => setIsEditing(true)
+                                    },
+                                    {
+                                        description: 'Excluir',
+                                        onClick: () => setIsConfirmeDeleteHypothesis(true),
+                                        color: '#C00F00'
+                                    }
+                                ] }))] }), loading && (jsx(SplitContainer, { children: jsx(VoteButtonContainer, { type: type, modeDelete: isHover, height: heightContainer, style: { cursor: 'default' }, children: jsx(Loading, {}) }) })), !loading && (jsxs(Fragment, { children: [!canVote && canViewVote && votes?.length > 0 && (jsxs("div", { style: { position: 'relative', height: '100%' }, children: [jsx(SplitContainer, { children: jsx(VoteButtonContainer, { ref: viewVotesRef, height: heightContainer, style: { cursor: canViewListVotes ? 'pointer' : 'default' }, type: type, onClick: canViewListVotes ? toggleVotes : null, children: jsxs(VoteCount, { children: [jsxs(VoteContent, { children: [votes?.slice(0, 2)?.map((vote, index) => {
+                                                            return (jsx(ImageContent, { style: { zIndex: 14 - index }, children: jsx("img", { src: vote?.user?.avatar || 'https://lxp-cdn.frstfalconi.cloud/STORYBOOK/path582.svg' }) }, vote?.id));
+                                                        }), votes?.length > 2 && (jsx(ImageContent, { style: { background: '#444444' }, children: jsxs("p", { style: {
+                                                                    fontSize: votes?.length > 9 ? 10 : votes?.length > 99 ? 8 : 14
+                                                                }, children: ["+", votes?.length - 2] }) }))] }), votes?.length, " ", votes?.length > 1 ? votesPluralText : votesSingularText] }) }) }), jsx(VoteList, { hypothesisVotes: votes, showVotes: showVotesList, viewProfile: handleViewProfile })] })), canVote && hasVoteGoal && votes?.length > 0 ? (jsx(SplitContainer, { onClick: () => hasVoteHypothesis && isHover
+                                ? handleDeleteVote(votes?.find((vote) => vote?.user_uuid === userLoggedId)?.id)
+                                : handleChangeVote(id), children: jsx(VoteButtonContainer, { type: type, modeDelete: isHover, height: heightContainer, onMouseEnter: () => seIsHover(true), onMouseLeave: () => seIsHover(false), style: { cursor: 'pointer' }, children: isHover ? (jsx("div", { style: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: '4px',
+                                        justifyContent: 'center'
+                                    }, children: !hasVoteHypothesis ? (jsxs(Fragment, { children: [jsx(VoteCurrentIcon, { width: "24", height: "24", style: { marginLeft: '4px', marginRight: '4px' } }), jsx(VoteButton, { children: changeVoteText })] })) : (jsxs(Fragment, { children: [jsx(ExcludeVoteIcon, { width: "24", height: "24" }), jsx(VoteButton, { children: deleteVoteText })] })) })) : (jsxs(VoteCount, { children: [jsxs(VoteContent, { children: [votes?.slice(0, 2)?.map((vote, index) => {
+                                                    return (jsx(ImageContent, { style: { zIndex: 14 - index }, children: jsx("img", { src: vote?.user?.avatar || 'https://lxp-cdn.frstfalconi.cloud/STORYBOOK/path582.svg' }) }, vote?.id));
+                                                }), votes.length > 2 && (jsx(ImageContent, { style: { background: '#444444' }, children: jsxs("p", { children: ["+", votes?.length - 2] }) }))] }), jsxs("p", { children: [votes?.length, " ", votes?.length > 1 ? votesPluralText : votesSingularText] })] })) }) })) : (canVote &&
+                            !hasVoteHypothesis &&
+                            hasVoteGoal && (jsx(SplitContainer, { onClick: () => handleChangeVote(id), children: jsx(VoteButtonContainer, { type: type, modeDelete: isHover, height: heightContainer, onMouseEnter: () => seIsHover(true), onMouseLeave: () => seIsHover(false), children: jsxs("div", { style: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        paddingLeft: '4px',
+                                        height: '100%'
+                                    }, children: [jsx(VoteCurrentIcon, { width: "24", height: "24", style: { marginLeft: '4px', marginRight: '4px' } }), jsx(VoteButton, { children: changeVoteText })] }) }) }))), canVote && !hasVoteGoal ? (jsx(SplitContainer, { onClick: () => handleVote(id), children: jsx(VoteButtonContainer, { type: type, modeDelete: isHover, height: heightContainer, onMouseEnter: () => seIsHover(true), onMouseLeave: () => seIsHover(false), children: jsxs("div", { style: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        paddingLeft: '4px',
+                                        height: '100%'
+                                    }, children: [jsx(VoteIcon, { width: "24", height: "24", style: { marginLeft: '4px', marginRight: '4px' } }), jsx(VoteButton, { children: voteText })] }) }) })) : (canVote &&
+                            !hasVoteHypothesis &&
+                            !canViewVote && (jsx(SplitContainer, { onClick: () => handleChangeVote(id), children: jsx(VoteButtonContainer, { type: type, modeDelete: isHover, height: heightContainer, onMouseEnter: () => seIsHover(true), onMouseLeave: () => seIsHover(false), children: jsxs("div", { style: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        paddingLeft: '4px',
+                                        height: '100%'
+                                    }, children: [jsx(VoteCurrentIcon, { width: "24", height: "24", style: { marginLeft: '4px', marginRight: '4px' } }), jsx(VoteButton, { children: changeVoteText })] }) }) }))), jsx(ModalConfirme, { title: "Excluir hip\u00F3tese", open: isConfirmeDeleteHypothesis, onClose: () => {
+                                setIsConfirmeDeleteHypothesis(false);
+                            }, onConfirm: () => {
+                                onDeleteHipotesis();
+                                setIsConfirmeDeleteHypothesis(false);
+                            }, children: jsx("p", { style: { marginTop: '16px', fontFamily: 'PT Sans', fontWeight: 400 }, children: "Tem certeza que deseja excluir essa hip\u00F3tese cadastrada?" }) })] }))] }) }));
+};
+const VoteList = ({ hypothesisVotes, showVotes, viewProfile }) => {
+    const sortedVotes = [...hypothesisVotes].sort((a, b) => a.user.name.localeCompare(b.user.name));
+    return (jsx(VoteListContainer, { showVotes: showVotes, children: sortedVotes?.map((vote, index) => (jsxs(VoteListItem, { className: "VoteListItem", lastVote: hypothesisVotes?.length === index + 1, onClick: () => viewProfile(vote?.user?.uuid), children: [jsx(Avatar, { src: vote?.user?.avatar, size: '24px', alt: vote?.user?.name, style: { marginLeft: '6px', cursor: 'pointer' } }), jsx("p", { children: vote?.user?.name })] }, vote?.id))) }));
+};
+
+export { HypothesisComponent };

package/dist/esm/src/components/hypothesisComponent/types.js

@@ -0,0 +1,8 @@
+var HypothesisEnum;
+(function (HypothesisEnum) {
+    HypothesisEnum["PRIORITIZE"] = "prioritize";
+    HypothesisEnum["RAISED"] = "raised";
+    HypothesisEnum["SUGGESTED"] = "suggested";
+})(HypothesisEnum || (HypothesisEnum = {}));
+
+export { HypothesisEnum };

package/dist/esm/src/components/input-comment/index.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ThemeProvider } from 'styled-components';
+import '../../shared/global.css.js';
+import { FRSTTheme } from '../../theme/index.js';
+import { InputWrapper, InputText, InputPlaceholder, HelperContainer, HelperText, EmojiWrapper, LimitCharsContainer, LimitCharsExceededMessage } from './inputCommentStyles.js';
+import { useInputHook } from './useInputHook.js';
+import { TagAlert } from '../../../public/customIcons/TagAlert.js';
+import { Mentions } from './mentions.js';
+import EmojiPicker, { Theme } from 'emoji-picker-react';
+import { IconButton } from '@mui/material';
+
+function EmojiIcon() {
+    return (jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("mask", { id: "path-1-inside-1_2339_11367", fill: "white", children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM16.8474 14.9845C16.2991 16.7176 14.3368 18 12 18C9.66322 18 7.70085 16.7176 7.15257 14.9845C6.98599 14.4579 7.44772 14 8 14H16C16.5523 14 17.014 14.4579 16.8474 14.9845ZM15.75 9.8125C15.75 11.0206 15.75 12 14.8125 12C13.875 12 13.875 11.0206 13.875 9.8125C13.875 8.60438 13.875 7.625 14.8125 7.625C15.75 7.625 15.75 8.60438 15.75 9.8125ZM9.1875 12C10.125 12 10.125 11.0206 10.125 9.8125C10.125 8.60438 10.125 7.625 9.1875 7.625C8.25 7.625 8.25 8.60438 8.25 9.8125C8.25 11.0206 8.25 12 9.1875 12Z" }) }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM16.8474 14.9845C16.2991 16.7176 14.3368 18 12 18C9.66322 18 7.70085 16.7176 7.15257 14.9845C6.98599 14.4579 7.44772 14 8 14H16C16.5523 14 17.014 14.4579 16.8474 14.9845ZM15.75 9.8125C15.75 11.0206 15.75 12 14.8125 12C13.875 12 13.875 11.0206 13.875 9.8125C13.875 8.60438 13.875 7.625 14.8125 7.625C15.75 7.625 15.75 8.60438 15.75 9.8125ZM9.1875 12C10.125 12 10.125 11.0206 10.125 9.8125C10.125 8.60438 10.125 7.625 9.1875 7.625C8.25 7.625 8.25 8.60438 8.25 9.8125C8.25 11.0206 8.25 12 9.1875 12Z", fill: "#BDBDBD" }), jsx("path", { d: "M16.8474 14.9845L17.9915 15.3464L16.8474 14.9845ZM7.15257 14.9845L8.29668 14.6225L7.15257 14.9845ZM22 12H20.8C20.8 16.8601 16.8601 20.8 12 20.8V22V23.2C18.1856 23.2 23.2 18.1856 23.2 12H22ZM12 2V3.2C16.8601 3.2 20.8 7.13989 20.8 12H22H23.2C23.2 5.81441 18.1856 0.8 12 0.8V2ZM2 12H3.2C3.2 7.13989 7.13989 3.2 12 3.2V2V0.8C5.81441 0.8 0.8 5.81441 0.8 12H2ZM12 22V20.8C7.13989 20.8 3.2 16.8601 3.2 12H2H0.8C0.8 18.1856 5.81441 23.2 12 23.2V22ZM12 18V19.2C14.7165 19.2 17.246 17.703 17.9915 15.3464L16.8474 14.9845L15.7033 14.6225C15.3523 15.7321 13.9571 16.8 12 16.8V18ZM7.15257 14.9845L6.00846 15.3464C6.75399 17.703 9.28353 19.2 12 19.2V18V16.8C10.0429 16.8 8.64771 15.7321 8.29668 14.6225L7.15257 14.9845ZM8 14V12.8C7.40113 12.8 6.81957 13.046 6.41813 13.4883C5.99732 13.9519 5.78348 14.6353 6.00846 15.3464L7.15257 14.9845L8.29668 14.6225C8.32033 14.6973 8.32712 14.7933 8.30296 14.8925C8.27988 14.9873 8.23568 15.0568 8.19529 15.1013C8.12114 15.183 8.04658 15.2 8 15.2V14ZM16 14V12.8H8V14V15.2H16V14ZM16.8474 14.9845L17.9915 15.3464C18.2165 14.6353 18.0027 13.9519 17.5819 13.4883C17.1804 13.046 16.5989 12.8 16 12.8V14V15.2C15.9534 15.2 15.8789 15.183 15.8047 15.1013C15.7643 15.0568 15.7201 14.9873 15.697 14.8925C15.6729 14.7933 15.6797 14.6973 15.7033 14.6225L16.8474 14.9845ZM14.8125 12V13.2C15.2663 13.2 15.7345 13.076 16.1261 12.7471C16.4999 12.4332 16.6853 12.0316 16.7835 11.6999C16.9615 11.0986 16.95 10.3466 16.95 9.8125H15.75H14.55C14.55 10.1229 14.5496 10.3752 14.5372 10.5969C14.5246 10.8228 14.5021 10.9515 14.4822 11.0187C14.4632 11.0828 14.4727 11.0016 14.5829 10.9091C14.7109 10.8016 14.8274 10.8 14.8125 10.8V12ZM13.875 9.8125H12.675C12.675 10.3466 12.6635 11.0986 12.8415 11.6999C12.9397 12.0316 13.1251 12.4332 13.4989 12.7471C13.8905 13.076 14.3587 13.2 14.8125 13.2V12V10.8C14.7976 10.8 14.9141 10.8016 15.0421 10.9091C15.1523 11.0016 15.1618 11.0828 15.1428 11.0187C15.1229 10.9515 15.1004 10.8228 15.0878 10.5969C15.0754 10.3752 15.075 10.1229 15.075 9.8125H13.875ZM14.8125 7.625V6.425C14.3587 6.425 13.8905 6.54904 13.4989 6.87789C13.1251 7.19177 12.9397 7.59337 12.8415 7.92508C12.6635 8.52636 12.675 9.27835 12.675 9.8125H13.875H15.075C15.075 9.50214 15.0754 9.24985 15.0878 9.02809C15.1004 8.80222 15.1229 8.6735 15.1428 8.60633C15.1618 8.54218 15.1523 8.62343 15.0421 8.71592C14.9141 8.82338 14.7976 8.825 14.8125 8.825V7.625ZM15.75 9.8125H16.95C16.95 9.27835 16.9615 8.52636 16.7835 7.92508C16.6853 7.59337 16.4999 7.19177 16.1261 6.87789C15.7345 6.54904 15.2663 6.425 14.8125 6.425V7.625V8.825C14.8274 8.825 14.7109 8.82338 14.5829 8.71592C14.4727 8.62343 14.4632 8.54218 14.4822 8.60633C14.5021 8.6735 14.5246 8.80222 14.5372 9.02809C14.5496 9.24985 14.55 9.50214 14.55 9.8125H15.75ZM10.125 9.8125H8.925C8.925 10.1229 8.92464 10.3752 8.91223 10.5969C8.89958 10.8228 8.87706 10.9515 8.85717 11.0187C8.83818 11.0828 8.84771 11.0016 8.95786 10.9091C9.08585 10.8016 9.20243 10.8 9.1875 10.8V12V13.2C9.64132 13.2 10.1095 13.076 10.5011 12.7471C10.8749 12.4332 11.0603 12.0316 11.1585 11.6999C11.3365 11.0986 11.325 10.3466 11.325 9.8125H10.125ZM9.1875 7.625V8.825C9.20243 8.825 9.08585 8.82338 8.95786 8.71592C8.84771 8.62343 8.83818 8.54218 8.85717 8.60633C8.87706 8.6735 8.89958 8.80222 8.91223 9.02809C8.92464 9.24985 8.925 9.50214 8.925 9.8125H10.125H11.325C11.325 9.27835 11.3365 8.52636 11.1585 7.92508C11.0603 7.59337 10.8749 7.19177 10.5011 6.87789C10.1095 6.54904 9.64132 6.425 9.1875 6.425V7.625ZM8.25 9.8125H9.45C9.45 9.50214 9.45036 9.24985 9.46277 9.02809C9.47542 8.80222 9.49794 8.6735 9.51783 8.60633C9.53682 8.54218 9.52729 8.62343 9.41714 8.71592C9.28915 8.82338 9.17257 8.825 9.1875 8.825V7.625V6.425C8.73368 6.425 8.26554 6.54904 7.87388 6.87789C7.50005 7.19177 7.31474 7.59337 7.21655 7.92508C7.03855 8.52636 7.05 9.27835 7.05 9.8125H8.25ZM9.1875 12V10.8C9.17257 10.8 9.28915 10.8016 9.41714 10.9091C9.52729 11.0016 9.53682 11.0828 9.51783 11.0187C9.49794 10.9515 9.47542 10.8228 9.46277 10.5969C9.45036 10.3752 9.45 10.1229 9.45 9.8125H8.25H7.05C7.05 10.3466 7.03855 11.0986 7.21655 11.6999C7.31474 12.0316 7.50005 12.4332 7.87388 12.7471C8.26554 13.076 8.73368 13.2 9.1875 13.2V12Z", fill: "#BDBDBD", mask: "url(#path-1-inside-1_2339_11367)" })] }));
+}
+function InputComment({ placeholder, onChange, limit, users, showCharacterCounter, styles, onSendMentions, onContentFormat, onContentUnformat, disabled, className, value, replyMentionedUser, group_uuid, limitMessageExceeded, initialText, darkMode, showEmojiPicker, configColor }) {
+    const { divPlaceholder, handleInput, isPlaceholder, divInputRef, handleMentionUser, mentionTopPosition, setShowMention, showMention, textLength, styleLimitExceeded, handleEmojiSelected, showPicker, setShowPicker } = useInputHook({
+        limit,
+        placeholder,
+        onContentFormat,
+        onContentUnformat,
+        onSendMentions,
+        onChange,
+        value,
+        replyMentionedUser,
+        initialText,
+        configColor
+    });
+    const handlePaste = (e) => {
+        const clipboardData = e.clipboardData || window.Clipboard;
+        if (!clipboardData)
+            return;
+        const text = clipboardData.getData('text/plain');
+        if (!text)
+            return;
+        const formattedText = removeFormatting(text);
+        const selection = window.getSelection();
+        if (!selection.rangeCount)
+            return;
+        const range = selection.getRangeAt(0);
+        range.deleteContents();
+        range.insertNode(document.createTextNode(formattedText));
+        range.collapse(false);
+        e.preventDefault();
+    };
+    const removeFormatting = (text) => {
+        return text?.replace(/<[^>]*>/g, '');
+    };
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs("div", { style: { minHeight: '48px', ...styles }, tabIndex: 0, onMouseDown: () => divPlaceholder.current.focus(), children: [jsxs(InputWrapper, { tabIndex: 1, isPlaceholder: isPlaceholder, isInputLimit: styleLimitExceeded, onMouseDown: () => divPlaceholder.current.focus(), darkMode: darkMode, children: [jsx(InputText, { id: "input-comment-component", tabIndex: 2, contentEditable: true, ref: divInputRef, onKeyUpCapture: (event) => {
+                                handleInput(event);
+                            }, "data-text": "enter", suppressContentEditableWarning: true, onPaste: handlePaste, darkMode: darkMode, "$primaryColor": configColor }), jsx(InputPlaceholder, { style: { display: 'none' }, contentEditable: true, ref: divPlaceholder, suppressContentEditableWarning: true, children: placeholder }), showMention && users && users.length > 0 && (jsx(Mentions, { users: users, top: mentionTopPosition, onSelect: (user) => {
+                                setShowMention(false);
+                                handleMentionUser(user);
+                            }, darkMode: darkMode, configColor: configColor }))] }), jsxs(HelperContainer, { children: [!isPlaceholder && showCharacterCounter && (jsxs(HelperText, { isInputLimit: styleLimitExceeded, darkMode: darkMode, children: [textLength, "/", limit] })), !isPlaceholder && showEmojiPicker &&
+                            jsx(EmojiWrapper, { children: jsx(IconButton, { onClick: (e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        setShowPicker(!showPicker);
+                                    }, children: jsx(EmojiIcon, {}) }) }), !isPlaceholder && showEmojiPicker &&
+                            jsx("div", { onClick: (e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                }, children: jsx(EmojiPicker, { theme: darkMode ? Theme.DARK : Theme.LIGHT, autoFocusSearch: true, onEmojiClick: (emojiData, event) => {
+                                        event.preventDefault();
+                                        event.stopPropagation();
+                                        handleEmojiSelected(emojiData, event);
+                                    }, open: showPicker, skinTonesDisabled: true, style: { position: 'absolute', right: 0 } }) })] }), styleLimitExceeded && (jsxs(LimitCharsContainer, { children: [jsx(TagAlert, {}), jsx(LimitCharsExceededMessage, { children: limitMessageExceeded })] }))] }) }));
+}
+
+export { InputComment as default };

package/dist/esm/src/components/input-comment/inputCommentStyles.js

@@ -0,0 +1,142 @@
+import styled from 'styled-components';
+
+const InputWrapper = styled.div `
+    display: flex;
+    align-items:center;
+    width: 100%;
+    min-height: 48px;
+    position: 'relative';
+    background-color: ${({ theme, isInputLimit, darkMode }) => !isInputLimit ? (darkMode ? '#272727' : theme.colors.neutralsGrey9) : (darkMode ? '#272727' : theme.colors.inputError)};
+    
+    border-radius: 24px;
+
+    transition: all 0.2s ease-in-out;
+
+  
+
+    border: ${({ theme, isPlaceholder, isInputLimit, darkMode }) => isInputLimit ? `2px solid ${theme.colors.messageError3} !important` : !isPlaceholder ? (darkMode ? `2px solid ${theme.colors.neutralsGrey4}` : `1px solid ${theme.colors.neutralsGrey5} !important`) : `1px solid ${darkMode ? '#272727' : theme.colors.neutralsGrey5} !important`};
+    
+    &:hover {
+        border: 2px solid ${({ theme, isInputLimit, darkMode, isPlaceholder }) => isInputLimit ? theme.colors.messageError3 : !isPlaceholder ? (theme.colors.neutralsGrey4) : (darkMode ? '#444444' : theme.colors.neutralsGrey5)} !important;
+    }
+    
+`;
+const InputText = styled.div `
+    width: 100%;
+    height: ${({ height }) => height || '20px'};
+    outline: 0;
+    color: ${({ theme, darkMode }) => darkMode ? theme.colors.shadeWhite : theme.colors.neutralsGrey1};
+    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;
+    word-break: break-word;
+    caret-color: ${({ theme, darkMode }) => darkMode && theme.colors.shadeWhite};
+        
+    padding: 0;
+    margin: 10px 4px 40px 15px;
+    border: none;
+
+    a[data-mention-id] {
+        font-weight: bold !important;
+        color: ${({ $primaryColor, theme }) => $primaryColor || theme.colors.primary1} !important;
+        text-decoration: none;
+    }
+`;
+const InputPlaceholder = styled.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.div `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 40px;
+    height: 40px;
+    
+    min-width: 40px;
+    border-radius: 50%;
+    background-color: transparent;
+    margin: 4px;
+    &:hover {
+        background-color: ${({ theme }) => theme.colors.neutralsGrey6};
+    }
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+`;
+const HelperContainer = styled.div `
+    position: relative;
+    padding: 5px;
+`;
+const HelperText = styled.span `
+    display: flex;
+    position: absolute;
+    align-items: center;
+
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 14px;
+    
+    letter-spacing: -0.02em;
+
+    color: ${({ theme, isInputLimit, darkMode }) => isInputLimit ? theme.colors.messageError3 : darkMode ? theme.colors.neutralsGrey3 : theme.colors.neutralsGrey2};
+
+    
+    top:-30px;
+    margin-left: 13px;
+`;
+const EmojiWrapper = styled.div `
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: -45px;
+    right: 13px;
+`;
+styled.div `
+    width: 310px;
+    height: 432px;
+    overflow: hidden;
+    display:${({ visible }) => visible ? 'flex' : 'none'};
+    justify-content: center;
+    top: ${({ positionEmojiWindow }) => positionEmojiWindow};
+    right: 25px;
+    background-color:  ${({ theme }) => theme.colors.shadeWhite};
+    border: 1px solid  ${({ theme }) => theme.colors.neutralsGrey4};
+    position: absolute;
+`;
+const LimitCharsContainer = styled.div `
+ display:flex;
+ justify-content: flex-start;
+ align-items: center;
+ margin-left: 10px;
+`;
+const LimitCharsExceededMessage = styled.span `
+    color: ${({ theme }) => theme.colors.linkError};
+    font-size: 12px;
+    margin-left: 5px;
+`;
+// transform: scale(0.845);
+
+export { EmojiWrapper, HelperContainer, HelperText, InputPlaceholder, InputText, InputWrapper, LimitCharsContainer, LimitCharsExceededMessage };

package/dist/esm/src/components/input-comment/mentions.js

@@ -0,0 +1,18 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { DefaultProfile } from '../../../public/customIcons/DefaultProfile.js';
+import { Container, MentionList, MentionItem, MentionAvatar, DefaultAvatar, MentionUserContainer, MentionUserName, MentionSubTitleContainer, MentionSubTitleText, Circle, CompanyName } from './mentionsStyle.js';
+import { useMentions } from './useMentions.js';
+
+const Mentions = (mention) => {
+    const { selectedUser, setSelectedUser, mentionListRef } = useMentions(mention);
+    const { top, users, darkMode, configColor } = mention;
+    return (jsx(Fragment, { children: jsx(Container, { top: top, tabIndex: 0, hide: !users || users.length <= 0, darkMode: darkMode, children: jsx(MentionList, { tabIndex: 1, ref: mentionListRef, children: users?.map((user, index) => {
+                    return (jsxs(MentionItem, { tabIndex: index += 2, active: user.user_uuid === selectedUser?.user_uuid, onMouseDown: () => setSelectedUser(user), onKeyUpCapture: (e) => {
+                            if (e.key.toLowerCase() === 'enter') {
+                                setSelectedUser(user);
+                            }
+                        }, darkMode: darkMode, children: [!!user.profile.avatar && !!user.profile.avatar.length ? jsx(MentionAvatar, { src: user.profile.avatar }) : jsx(DefaultAvatar, { children: jsx(DefaultProfile, {}) }), jsxs(MentionUserContainer, { children: [jsx(MentionUserName, { darkMode: darkMode, children: user.name }), jsx(MentionSubTitleContainer, { darkMode: darkMode, children: jsxs(MentionSubTitleText, { children: [user.profile.role_name, " ", jsx(Circle, { darkMode: darkMode }), jsx(CompanyName, { children: user.profile.company_name })] }) })] })] }, user.user_uuid));
+                }) }) }) }));
+};
+
+export { Mentions };

package/dist/esm/src/components/input-comment/mentionsStyle.js

@@ -0,0 +1,126 @@
+import styled from 'styled-components';
+
+const Container = styled.div `
+  background-color: ${({ darkMode }) => darkMode ? '#323232' : '#ffff'} ;
+  display: ${({ hide }) => hide ? 'none' : 'flex'};
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  position: absolute;
+  top: ${({ top }) => top};
+  width: ${({ width }) => (width ? `${width}px` : '100%')};
+  height: ${({ height }) => (height ? height : 195)}px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  z-index: 100;
+  border-radius: 8px;
+  box-shadow: ${({ darkMode }) => darkMode ? '4px 8px 10px 0px #0000004D' : '4px 8px 10px 0 #BDBDBD'};
+ 
+  ::-webkit-scrollbar {
+    width: 17px; 
+  }
+
+  ::-webkit-scrollbar-thumb {
+    width: 15px;
+    border: 6px solid rgba(0, 0, 0, 0);
+    background-clip: padding-box;
+    border-radius: 9999px;
+    background-color:  #757575;
+    
+  
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: inherit; /* Set the color of the scrollbar track */
+    border-radius: 8px; /* Set the border radius of the scrollbar track */
+  }
+`;
+styled.input ``;
+const MentionList = styled.div `
+  display: flex;
+  flex-direction: column;
+  height: 195px;
+  width: 100%;
+`;
+const MentionItem = styled.div `
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 8px;
+  border-bottom:${({ theme, darkMode }) => `0.5px solid ${darkMode ? theme.colors.neutralsGrey3 : theme.colors.neutralsGrey5}`};
+  &:last-child {
+    border-bottom: none; /* Remove the border for the last child */
+  }
+  &:hover {
+    background-color:${({ active, darkMode }) => active ? (darkMode ? '#3D3D3D' : '#FCF3EB') : (darkMode ? '#3D3D3D' : '#F1F5F9')};
+  }
+  &:focus{
+    background-color:${({ active, darkMode }) => active ? (darkMode ? '#4B4B4B' : '#FCF3EB') : (darkMode ? '#4B4B4B' : '#F1F5F9')};
+  }
+  
+  
+`;
+const MentionAvatar = styled.img `
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+`;
+const DefaultAvatar = styled.div `
+ width: 40px;
+  height: 40px;
+  border-radius: 50%;
+`;
+const MentionUserContainer = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: baseline;
+  flex-direction: column;
+  padding: 0 8px 0 16px;
+  width: 96%;
+  
+`;
+const MentionUserName = styled.span `
+  font-weight: 400;
+  font-size: 16px;
+  color: ${({ theme, darkMode }) => darkMode ? theme.colors.shadeWhite : '#343434'};
+`;
+const MentionSubTitleContainer = styled.div `
+  margin-top: 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: ${({ theme, darkMode }) => darkMode ? theme.colors.neutralsGrey5 : theme.colors.neutralsGrey3};
+  font-weight: 400;
+`;
+const MentionSubTitleText = styled.span `
+  font-size: 12px;
+  display:flex;
+  align-items: center;
+  justify-content: flex-start;
+ 
+`;
+const Circle = styled.div `
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  font-weight: 400;
+  background-color: ${({ theme, darkMode }) => darkMode ? theme.colors.neutralsGrey5 : theme.colors.neutralsGrey3};
+  color: ${({ theme, darkMode }) => darkMode ? theme.colors.neutralsGrey5 : theme.colors.neutralsGrey3};
+  margin: 0 8px;
+`;
+const CompanyName = styled.span `
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 50%;
+  min-width: 0; 
+
+  @media (min-width: 1900px) {
+    /* Styles for screens with a minimum width of 768px */
+    max-width: 90%;
+  }
+  
+`;
+
+export { Circle, CompanyName, Container, DefaultAvatar, MentionAvatar, MentionItem, MentionList, MentionSubTitleContainer, MentionSubTitleText, MentionUserContainer, MentionUserName };