frst-components 0.37.0 → 0.38.0

package/dist/esm/src/components/challenge-cards/index.js

@@ -0,0 +1,174 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../theme/index.js';
+import '../../shared/global.css.js';
+import { CheckInCicle, Plus, MoreDotsVertical, FowardArrow, EditIcon, TrashIcon } from '../../shared/icons.js';
+import { WrapperCard, TagStep, TagText, WrapperBanner, BannerCard, StepName, ContentCard, WrapperHeader, TitleProject, Dots, DescriptionProject, DescriptionSRG, ButtonActionWrapper, ButtonAction } from './challengeCardStyles.js';
+import { MenuCustom, MenuItemCustom, TextOption } from './dropdownMenuStyle.js';
+import Button from '@mui/material/Button';
+
+function ChallengeCard({ variant, description, language, onClickView, onClickNewProject, onClickContinue, onClickDelete, onClickEdit, style }) {
+    const [label, setLabel] = useState(labels['ptBR']);
+    const [activeClick, setActiveClick] = useState(false);
+    useEffect(() => {
+        let valuesTranslate = language?.replace(/\-/g, "");
+        setLabel(utilAssign(labels[valuesTranslate], labels['ptBR']));
+    }, [language]);
+    const handleClick = () => {
+        if (variant == 'srg')
+            onClickNewProject();
+        else
+            onClickView();
+        setActiveClick(true);
+        setTimeout(() => {
+            setActiveClick(false);
+        }, 700);
+    };
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(WrapperCard, { style: { ...style }, "$active": activeClick, children: [jsxs(TagStep, { onClick: () => handleClick(), "$variant": variant, children: [jsx(TagText, { children: label.tagStep[variant] }), variant == 'completed' &&
+                            jsx("span", { style: { marginLeft: '10px', height: '100%' }, children: jsx(CheckInCicle, { customColor_1: "transparent", height: '16', width: '16' }) })] }), jsxs(WrapperBanner, { onClick: () => handleClick(), children: [jsx(BannerCard, { src: BannersSRC[variant] }), jsx(StepName, { "$variant": variant, children: label.nameStep[variant] })] }), jsxs(ContentCard, { children: [jsxs(WrapperHeader, { children: [jsx(TitleProject, { onClick: () => handleClick(), children: variant == 'srg' ? 'Space Race Game' : label.project }), variant != 'srg' && onClickContinue && onClickDelete &&
+                                    jsx(Dots, { children: jsx(MoreVerticalMenu, { textContinue: label.continue, textDelete: label.delete, textEdit: label.edit, handleContinue: () => onClickContinue(), handleDelete: () => onClickDelete(), handleEdit: () => onClickEdit(), variant: variant }) })] }), variant != 'srg' ?
+                            jsx(DescriptionProject, { onClick: () => handleClick(), children: resumeString(description, 73) })
+                            :
+                                jsx(DescriptionSRG, { onClick: () => handleClick(), children: label.srgDecription }), jsxs(ButtonActionWrapper, { children: [jsx(ButtonAction, { onClick: () => handleClick(), "$variant": variant, children: variant == 'srg' ?
+                                        jsxs(Fragment, { children: [jsx(Plus, {}), jsx("span", { style: { marginLeft: '12px' }, children: label.newProject })] })
+                                        :
+                                            label.view }), variant !== 'srg' && variant !== 'completed' && onClickContinue &&
+                                    jsx(ButtonAction, { onClick: () => onClickContinue(), "$variant": variant, children: jsx("span", { style: { marginLeft: '12px' }, children: label.continue }) })] })] })] }) }));
+}
+const resumeString = (str, limit) => {
+    if (!str)
+        return str;
+    if (str?.length < limit)
+        return str;
+    return `${str.substr(0, limit)}...`;
+};
+const utilAssign = (value, optional) => {
+    return value ? value : optional;
+};
+const BannersSRC = {
+    srg: 'https://api-deimos.s3.amazonaws.com/srg.png',
+    incompleteMars: 'https://api-deimos.s3.amazonaws.com/step1Mars.png',
+    mars: 'https://api-deimos.s3.amazonaws.com/step1Mars.png',
+    jupiter: 'https://api-deimos.s3.amazonaws.com/step2Jupiter.png',
+    saturn: 'https://api-deimos.s3.amazonaws.com/step3Saturn.png',
+    uranus: 'https://api-deimos.s3.amazonaws.com/step4Uranus.png',
+    neptune: 'https://api-deimos.s3.amazonaws.com/step4Neptune.png',
+    completed: 'https://api-deimos.s3.amazonaws.com/completed.png'
+};
+const labels = {
+    ptBR: {
+        srgDecription: 'Nossa ferramenta ágil para atingir resultados e garantir aprendizados reais com ciclos de colaboração e experimentação.',
+        project: 'Desafio',
+        delete: 'Excluir',
+        edit: 'Editar',
+        continue: 'Continuar',
+        view: 'Visualizar',
+        newProject: 'Criar desafio',
+        tagStep: {
+            incompleteMars: 'Problema criado',
+            mars: 'Definição do desafio',
+            jupiter: 'Hipóteses e plano de ação',
+            saturn: 'Testes e experimentos',
+            uranus: 'Resultados e aprendizados',
+            neptune: 'Próximos passos',
+            completed: 'Finalizado'
+        },
+        nameStep: {
+            incompleteMars: 'Marte',
+            mars: 'Marte',
+            jupiter: 'Júpiter',
+            saturn: 'Saturno',
+            uranus: 'Urano',
+            neptune: 'Netuno'
+        }
+    },
+    enUS: {
+        srgDecription: 'Our agile tool to achieve results and ensure real learning with cycles of collaboration and experimentation.',
+        project: 'Challenge',
+        delete: 'Delete',
+        edit: 'Edit',
+        continue: 'Continue',
+        view: 'View',
+        newProject: 'Create challenge',
+        tagStep: {
+            incompleteMars: 'Created problem',
+            mars: 'Challenge definition',
+            jupiter: 'Hypotheses and action plan',
+            saturn: 'Tests and experiment',
+            uranus: 'Results and learnings',
+            neptune: 'Next steps',
+            completed: 'Completed'
+        },
+        nameStep: {
+            incompleteMars: 'Mars',
+            mars: 'Mars',
+            jupiter: 'Jupiter',
+            saturn: 'Saturn',
+            uranus: 'Uranus',
+            neptune: 'Neptune'
+        }
+    },
+    es: {
+        srgDecription: 'Nuestra herramienta ágil para lograr resultados y asegurar un aprendizaje real con ciclos de colaboración y experimentación.',
+        project: 'Desafio',
+        delete: 'Elimina',
+        edit: 'Edita',
+        continue: 'Continúa',
+        view: 'Para ver',
+        newProject: 'Crear desafio',
+        tagStep: {
+            incompleteMars: 'Problema creado',
+            mars: 'Definición del desafío',
+            jupiter: 'Hipótesis y plan de acción',
+            saturn: 'Pruebas y Experimentos',
+            uranus: 'Resultados y aprendizajes',
+            neptune: 'Próximos pasos',
+            completed: 'Terminado'
+        },
+        nameStep: {
+            incompleteMars: 'Marte',
+            mars: 'Marte',
+            jupiter: 'Júpiter',
+            saturn: 'Saturno',
+            uranus: 'Urano',
+            neptune: 'Neptuno'
+        }
+    },
+};
+function MoreVerticalMenu({ textContinue, textDelete, textEdit, handleContinue, handleDelete, handleEdit, variant }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [activeClick, setActiveClick] = useState([false, false]);
+    const open = Boolean(anchorEl);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const handleSelect = (value) => {
+        setActiveClick(value);
+        setTimeout(() => {
+            if (value[0])
+                handleContinue();
+            if (value[1])
+                handleEdit();
+            if (value[2])
+                handleDelete();
+            setActiveClick([false, false]);
+            setAnchorEl(null);
+        }, 600);
+    };
+    return (jsxs("div", { children: [jsx(Button, { id: "basic-button", "aria-controls": "basic-menu", "aria-haspopup": "true", "aria-expanded": open ? 'true' : undefined, onClick: handleClick, style: {
+                    width: '51px',
+                    minWidth: '30px',
+                    height: '47px',
+                    margin: 0,
+                    padding: 0,
+                    display: 'flex',
+                    justifyContent: 'center'
+                }, children: jsx(MoreDotsVertical, {}) }), jsxs(MenuCustom, { id: "basic-menu", anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, anchorEl: anchorEl, open: open, onClose: handleClose, "$step": variant, children: [variant !== 'completed' &&
+                        jsxs(MenuItemCustom, { onClick: () => handleSelect([true, false, false]), style: { color: activeClick[0] ? '#663366' : '#0645AD', borderBottom: '1px solid #EBEBEB' }, children: [jsx(FowardArrow, { width: '16', height: '16', fill: activeClick[0] ? '#663366' : '#0645AD' }), jsx(TextOption, { children: textContinue })] }), jsxs(MenuItemCustom, { onClick: () => handleSelect([false, true, false]), style: { color: activeClick[0] ? '#663366' : '#0645AD', borderBottom: '1px solid #EBEBEB' }, children: [jsx(EditIcon, { width: '16', height: '16', fill: activeClick[0] ? '#663366' : '#0645AD' }), jsx(TextOption, { children: textEdit })] }), jsxs(MenuItemCustom, { onClick: () => handleSelect([false, false, true]), style: { color: activeClick[1] ? '#C00F00' : '#FF0000' }, children: [jsx(TrashIcon, { fill: activeClick[1] ? '#C00F00' : '#FF0000', width: '13', height: '16' }), jsx(TextOption, { children: textDelete })] })] })] }));
+}
+
+export { MoreVerticalMenu, ChallengeCard as default };

package/dist/esm/src/components/checkmark/checkmarkStyles.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+
+const ButtonCheckmark = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+    width: fit-content;
+`;
+const Subtitle = styled.span `
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 16px;
+    display: flex;
+    align-items: center;
+
+    margin-top: 8px;
+
+    color: ${(props) => props.disabled ? '#BDBDBD' : '#222222'};
+`;
+
+export { ButtonCheckmark, Subtitle };

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

@@ -0,0 +1,32 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import '../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../theme/index.js';
+import { ButtonCheckmark, Subtitle } from './checkmarkStyles.js';
+import { CheckInCicle, CloseInCicle } from '../../shared/icons.js';
+
+function Checkmark({ type, subtitle, active, handleClick, className, disabled, styles }) {
+    const [colorsIcon, setColorsIcon] = useState({ fill: '#fff', stroke: '#2CA92A', customColor_1: '#2CA92A' });
+    useEffect(() => {
+        (type == 'checked') ?
+            (active ?
+                setColorsIcon({ fill: '#fff', stroke: '#2CA92A', customColor_1: '#2CA92A' }) :
+                setColorsIcon({ fill: '#2CA92A', stroke: '#2CA92A', customColor_1: '' }))
+            :
+                (active ?
+                    setColorsIcon({ fill: '#FFF', stroke: '#FF0000', customColor_1: '#FF0000' }) :
+                    setColorsIcon({ fill: '#FF0000', stroke: '#FF0000', customColor_1: '' }));
+        {
+            disabled &&
+                setColorsIcon({ fill: '#BDBDBD', stroke: '#BDBDBD', customColor_1: '' });
+        }
+    }, [active, type, disabled]);
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsx("div", { style: { ...styles }, className: className, children: type == 'checked' ?
+                jsx(Fragment, { children: jsxs(ButtonCheckmark, { onClick: handleClick, children: [jsx(CheckInCicle, { ...colorsIcon }), jsx(Subtitle, { disabled: disabled, children: subtitle })] }) })
+                :
+                    jsx(Fragment, { children: type == 'unchecked' &&
+                            jsxs(ButtonCheckmark, { onClick: handleClick, children: [jsx(CloseInCicle, { ...colorsIcon }), jsx(Subtitle, { disabled: disabled, children: subtitle })] }) }) }) }));
+}
+
+export { Checkmark as default };

package/dist/esm/src/components/comment-post/commentPostStyles.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div `
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 6px;
+`;
+const WrapperValue = styled.div `
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 140%;
+
+    display: flex;
+    align-items: center;
+
+    color:  ${({ theme }) => theme.colors.neutralsGrey1};
+    margin: 8px;
+`;
+
+export { Wrapper, WrapperValue };

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

@@ -0,0 +1,16 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../theme/index.js';
+import { Wrapper, WrapperValue } from './commentPostStyles.js';
+import HeaderImprovementIdea from '../header-improvement-idea/index.js';
+import InputCommentPostIt from '../FI/inputCommentPost-it/index.js';
+
+function CommentPost({ user, like, menuMore, valueComment, onChangeValueComment, isActiveEdit, inputEdit, styles }) {
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsx(Wrapper, { style: { ...styles }, children: isActiveEdit ?
+                jsx(Fragment, { children: jsx(InputCommentPostIt, { value: valueComment, avatar: user?.avatar, onChange: (e) => onChangeValueComment(e), placeholder: inputEdit?.placeholder, limit: inputEdit?.limit, hasEmoji: inputEdit?.hasEmoji, onClickPublish: (e) => inputEdit?.onClickPublish(e), onClickCancel: () => inputEdit?.onClickCancel(), labels: inputEdit?.labels }) })
+                :
+                    jsxs(Fragment, { children: [jsx(HeaderImprovementIdea, { user: user, like: like, menuMore: menuMore }), jsx(WrapperValue, { children: valueComment })] }) }) }));
+}
+
+export { CommentPost as default };

package/dist/esm/src/components/commentary-box/commentaryBox.utils.js

@@ -0,0 +1,24 @@
+function buildStringWithLinkHTML({ value }) {
+    let text = value;
+    var urlRegex = /(\b(https?|ftp|file):\/\/([-A-Z0-9+&@#%?=~_|!:,.;]*)([-A-Z0-9+&@#%?\/=~_|!:,.;]*)[-A-Z0-9+&@#\/%=~_|])/ig;
+    return text = text?.replace(urlRegex, function (url) {
+        return `<a href="${url}" target="_blank" style="color: #00f; text-decoration: underline">${url}</a>`;
+    });
+}
+function randID() {
+    return Math.random()
+        .toString(36)
+        .substr(2, 9);
+}
+function buildShortName(name) {
+    const nome = name.replace(/\s+/gi, ' ').trim();
+    var array_nome = nome.split(' ');
+    if (array_nome.length > 2) {
+        return `${array_nome[0]} ${array_nome[array_nome.length - 1]}`;
+    }
+    else {
+        return name;
+    }
+}
+
+export { buildShortName, buildStringWithLinkHTML, randID };

package/dist/esm/src/components/commentary-box/commentaryBoxStyles.js

@@ -0,0 +1,240 @@
+import styled from 'styled-components';
+
+const HeaderWrapper = styled.div `
+    display: flex;
+    margin-top: 14px;
+    margin-left: 14px;
+    margin-right: 14px;
+
+    min-height: 40px;
+    flex-direction: row;
+    max-width: 100%;
+`;
+const IdentificationWrapper = styled.div `
+    flex: 4;
+`;
+const NameWrapper = styled.div `
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items:center
+`;
+const Name = styled.div `
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 20px;
+    color: ${({ theme }) => theme.colors.primary1};
+`;
+const DividerDot = styled.div `
+    display: flex; 
+    margin-left: 8px;
+    margin-right: 8px;
+`;
+const EyeOffIcon = styled.div `
+display: flex; 
+min-width: 14.67px;
+`;
+const IsMe = styled.div `
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 20px;
+    color: ${({ theme }) => theme.colors.neutralsGrey2};
+
+    display: flex;
+    align-items: center;
+    letter-spacing: -0.02em;
+`;
+const CommentPrivate = styled.div `
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 20px;
+    color: ${({ theme }) => theme.colors.neutralsGrey2};
+
+    display: flex;
+    align-items: center;
+    letter-spacing: -0.02em;
+    margin-left: 8px;
+`;
+const Position = styled.div `
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 14px;
+    color: ${({ theme }) => theme.colors.neutralsGrey2};
+`;
+const Date = styled.div `
+    display: flex;
+    justify-content: flex-end;
+    font-family: Work Sans;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    margin-right: 11px;
+    color: ${({ theme }) => theme.colors.neutralsGrey2};
+`;
+const ButtonMore = styled.div `
+    display: flex;
+    cursor: pointer;
+    height: 14px;
+    align-items: center;
+    z-index: 10;
+`;
+const Dropdown = styled.div `
+    width: auto;
+    height: auto;
+`;
+const DropdownWrapper = styled.div `
+    display: flex;
+    flex-direction: column;
+    visibility: ${(props) => props.$isVisible ? 'visible' : 'hidden'};
+    opacity:${(props) => props.$isVisible ? '1' : '0'};
+    position: absolute;
+    width: 210px;
+    background-color: gray;   
+    margin-top: 5px;
+    margin-left: -185px;
+    transition:visibility 0.3s ease-in-out,opacity 0.3s ease-in-out;
+
+    background: ${({ theme }) => theme.colors.shadeWhite};
+
+    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
+
+    box-shadow: 0px 18px 40px -15px #D3D3D3;
+    border-radius: 8px 0px 8px 8px;
+    overflow: hidden;
+    z-index: 9;
+`;
+const ItemDrop = styled.div `
+    display: flex;
+    padding: 11px;
+    padding-left: 16px;
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 19px;
+    border-bottom: ${(props) => props.$isLastItem ? 'transparent' : '1px solid #EBEBEB'};
+    
+    &:hover { 
+        background-color: ${({ theme }) => theme.colors.neutralsGrey5};
+    }
+    &:active { 
+        background-color: ${({ theme }) => theme.colors.primary1 + '19'};
+    }
+    cursor: pointer;
+`;
+const CommentaryContent = styled.div `
+    font-family: 'Work Sans';
+    margin-top: 12px;
+    margin-left: 14px;
+    margin-right: 14px;
+    margin-top: 12px;
+
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 20px;
+    
+    letter-spacing: -0.02em;
+    
+    white-space: pre-wrap
+`;
+const CommentaryEditingContent = styled.div `
+    font-family: 'Work Sans';
+    margin-top: 12px;
+    margin-left: 14px;
+    margin-right: 14px;
+    margin-top: 12px;
+
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 20px;
+
+    letter-spacing: -0.02em;
+
+    white-space: pre-wrap
+`;
+const IterationsWrapper = styled.div `
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    padding-top: 14px;
+    padding-bottom: 14px;
+    padding-left: 14px;
+`;
+const IterationsButtonsWrapper = styled.div `
+    display: flex;
+    flex-direction: row;
+    width: fit-content;
+`;
+const LikesStatistics = styled.div `
+    display:flex;
+    flex-direction: row;
+`;
+const TextTotalLikes = styled.span `
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+
+    margin-left: 6px;
+`;
+const FooterEditingWrapper = styled.div `
+    display: flex;
+    align-self: flex-end;
+    margin: 14px;
+    width: fit-content;
+    justify-content: space-between;
+`;
+const LinkButton = styled.a `
+    border: none;
+    text-decoration: none;
+    ${({ theme }) => theme.fonts.textMessageComponentsBodBold};
+    font-size: 12px;
+    color: ${({ theme }) => theme.colors.linkOnfocus};
+    cursor: pointer;
+    outline: none;
+    box-sizing: border-box;
+    transition: all 0.2s ease-in-out;
+    display: flex;
+    align-items: center;
+    margin-left: 12px;
+    margin-right: 12px;
+
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 14px;
+    letter-spacing: -0.02em;
+
+    &:hover { 
+        color: ${({ theme }) => theme.colors.linkHover};
+    }
+
+    &:active { 
+        color: ${({ theme }) => theme.colors.black};
+    }
+
+    &:focus { 
+        color: ${({ theme }) => theme.colors.linkOnfocus};
+    }
+`;
+const OptionsWrapper = styled.div `
+    display: flex;
+    flex-direction: row;
+`;
+/*border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};*/
+
+export { ButtonMore, CommentPrivate, CommentaryContent, CommentaryEditingContent, Date, DividerDot, Dropdown, DropdownWrapper, EyeOffIcon, FooterEditingWrapper, HeaderWrapper, IdentificationWrapper, IsMe, ItemDrop, IterationsButtonsWrapper, IterationsWrapper, LikesStatistics, LinkButton, Name, NameWrapper, OptionsWrapper, Position, TextTotalLikes };

package/dist/esm/src/components/commentary-box/index.js

@@ -0,0 +1,104 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useLayoutEffect, useEffect } from 'react';
+import '../../shared/global.css.js';
+import { HeaderWrapper, IdentificationWrapper, NameWrapper, Name, DividerDot, IsMe, EyeOffIcon, CommentPrivate, Position, OptionsWrapper, Date, Dropdown, ButtonMore, DropdownWrapper, ItemDrop, CommentaryEditingContent, FooterEditingWrapper, CommentaryContent, IterationsWrapper, LikesStatistics, TextTotalLikes, IterationsButtonsWrapper, LinkButton } from './commentaryBoxStyles.js';
+import { Dot, EyeOff, MoreDotsHorizontal, ThumbsUpCovered } from '../../shared/icons.js';
+import SpeechBubble from '../speech-bubble/index.js';
+import Button from '../buttons/index.js';
+import { randID, buildStringWithLinkHTML, buildShortName } from './commentaryBox.utils.js';
+
+const WIDTH_MOBILE = 550;
+function CommentaryBox({ name, className, styles, position, value, date, actionLike, actionAnswer, isMe, isAuthor, actionDeleteComment, actionEditComment, actionMakePrivate, actionUpdateValue, detectLinks, idTextComment, wasEdited, hasAnswer, hasDropdown, isLiked, totalLikes, textSaveButton, textSaveButtonMobile, textCancelButton, textYou, textPrivateComment, textEdited, textLiked, textUnliked, textAnswer, textMakePrivate, textMakePublic, textEditComment, textDeleteComment, isPrivateMe, isPrivateAuthor, onClickUserInfo, showStatusLike }) {
+    // Identify Screen Resizing
+    const [size, setSize] = useState([0, 0]);
+    useLayoutEffect(() => {
+        function updateSize() {
+            setSize([window.innerWidth, window.innerHeight]);
+        }
+        window.addEventListener('resize', updateSize);
+        updateSize();
+        return () => window.removeEventListener('resize', updateSize);
+    }, []);
+    const [isOpenDrop, setIsOpenDrop] = useState(false);
+    const [onEditing, setOnEditing] = useState(false);
+    const [enableSaveEdit, setEnableSaveEdit] = useState(false);
+    const [actionArea, setActionArea] = useState(false);
+    const [iDCommentPosted, setIDCommentPosted] = useState(idTextComment ? idTextComment : `IDCommentPosted-${randID()}`);
+    const [iDCommentInEditing, setIDCommentInEditing] = useState(idTextComment ? `idBoxCommentEditing-${idTextComment}` : `idBoxCommentEditing-${randID()}`);
+    useState(idTextComment ? `iDButtonMore-${idTextComment}` : `iDButtonMore-${randID()}`);
+    useEffect(() => {
+        (!onEditing) &&
+            (document.getElementById(iDCommentPosted)) &&
+            (detectLinks ?
+                document.getElementById(iDCommentPosted).innerHTML = buildStringWithLinkHTML({ value }) :
+                document.getElementById(iDCommentPosted).innerHTML = value);
+    }, [detectLinks, onEditing]);
+    useEffect(() => {
+        (onEditing) &&
+            (document.getElementById(iDCommentInEditing)) &&
+            (document.getElementById(iDCommentInEditing).addEventListener("keyup", changedInputComment, false));
+        (!onEditing) &&
+            (document.getElementById(iDCommentInEditing)) &&
+            (document.getElementById(iDCommentInEditing).removeEventListener("keyup", changedInputComment, false));
+        function changedInputComment() {
+            let textInEditing = document.getElementById(iDCommentInEditing).innerText;
+            setEnableSaveEdit(textInEditing != value);
+        }
+    }, [onEditing]);
+    useEffect(() => {
+        if (isOpenDrop) {
+            (document.body.addEventListener("click", checksAnyClickOnScreen, false));
+        }
+    }, [isOpenDrop]);
+    function editingComment() {
+        setOnEditing(true);
+        actionEditComment();
+    }
+    function cancelEditComment() {
+        setOnEditing(false);
+        setEnableSaveEdit(false);
+    }
+    function saveEditComment() {
+        let finalText = '';
+        (document.getElementById(iDCommentInEditing)) &&
+            (finalText = document.getElementById(iDCommentInEditing).innerText);
+        setOnEditing(false);
+        setEnableSaveEdit(false);
+        actionUpdateValue(finalText);
+    }
+    const checksAnyClickOnScreen = () => {
+        if (isOpenDrop) {
+            document.body.removeEventListener("click", checksAnyClickOnScreen, false);
+            setIsOpenDrop(false);
+        }
+    };
+    const getColorIconMore = () => {
+        let finalColor = '#757575'; // Default
+        (actionArea) && (finalColor = "#222222"); // Hover
+        (isOpenDrop) && (finalColor = '#ff4d0d'); // Selected
+        return finalColor;
+    };
+    return (jsx("div", { style: { width: 'auto', ...styles }, children: jsxs(SpeechBubble, { className: className, highlight: onEditing, children: [jsxs(HeaderWrapper, { children: [jsxs(IdentificationWrapper, { onClick: () => onClickUserInfo ? onClickUserInfo() : {}, style: { cursor: onClickUserInfo ? 'pointer' : 'auto' }, children: [jsxs(NameWrapper, { children: [jsxs(Name, { children: [" ", size[0] > WIDTH_MOBILE ? name : buildShortName(name), " "] }), isMe &&
+                                            jsxs(Fragment, { children: [jsx(DividerDot, { children: jsx(Dot, { fill: '#757575' }) }), jsxs(IsMe, { children: [" ", textYou, " "] })] }), size[0] > WIDTH_MOBILE ?
+                                            ((isPrivateAuthor || isPrivateMe) &&
+                                                jsxs(Fragment, { children: [jsx(DividerDot, { children: jsx(Dot, { fill: '#757575' }) }), jsx(EyeOffIcon, { children: jsx(EyeOff, { fill: '#757575' }) }), jsx(CommentPrivate, { children: textPrivateComment })] })) : null] }), jsxs(Position, { children: [" ", position, " "] })] }), jsxs(OptionsWrapper, { children: [size[0] > WIDTH_MOBILE &&
+                                    jsxs(Date, { children: [" ", date, " ", wasEdited && `(${textEdited})`, " "] }), hasDropdown && (isAuthor || isMe) &&
+                                    jsxs(Dropdown, { children: [jsx(ButtonMore, { onClick: () => setIsOpenDrop(!isOpenDrop), onMouseOver: () => setActionArea(true), onMouseOut: () => setActionArea(false), children: jsx(MoreDotsHorizontal, { fill: getColorIconMore() }) }), jsxs(DropdownWrapper, { "$isVisible": isOpenDrop, isMe: isMe, children: [isMe && isAuthor &&
+                                                        jsxs(Fragment, { children: [jsxs(ItemDrop, { onClick: actionMakePrivate, children: [" ", (!isPrivateAuthor && !isPrivateMe) ? textMakePrivate : textMakePublic, "  "] }), jsxs(ItemDrop, { onClick: () => editingComment(), children: [" ", textEditComment, " "] }), jsxs(ItemDrop, { "$isLastItem": true, onClick: actionDeleteComment, children: [" ", textDeleteComment, " "] })] }), isMe && !isAuthor &&
+                                                        jsxs(Fragment, { children: [(!isPrivateAuthor) &&
+                                                                    jsxs(ItemDrop, { onClick: actionMakePrivate, children: [" ", !isPrivateMe ? textMakePrivate : textMakePublic, "  "] }), jsxs(ItemDrop, { onClick: () => editingComment(), children: [" ", textEditComment, " "] }), jsxs(ItemDrop, { "$isLastItem": true, onClick: actionDeleteComment, children: [" ", textDeleteComment, " "] })] }), isAuthor && !isMe &&
+                                                        jsxs(Fragment, { children: [jsxs(ItemDrop, { onClick: actionMakePrivate, children: [" ", (!isPrivateAuthor && !isPrivateMe) ? textMakePrivate : textMakePublic, " "] }), jsxs(ItemDrop, { "$isLastItem": true, onClick: actionDeleteComment, children: [" ", textDeleteComment, " "] })] })] })] })] })] }), size[0] <= WIDTH_MOBILE &&
+                    jsxs("div", { style: { display: 'flex', marginLeft: '14px', marginTop: '5px', alignItems: 'center' }, children: [(isPrivateAuthor || isPrivateMe) &&
+                                jsx("div", { style: { marginRight: '10px' }, children: jsx(EyeOffIcon, { children: jsx(EyeOff, { fill: '#757575' }) }) }), jsxs(Date, { children: [" ", date, " ", wasEdited && `(${textEdited})`, " "] })] }), onEditing ?
+                    jsxs(Fragment, { children: [jsx(CommentaryEditingContent, { id: iDCommentInEditing, "data-gramm": "false", contentEditable: "true", role: "textbox", "aria-multiline": "true", suppressContentEditableWarning: true, children: value }), jsxs(FooterEditingWrapper, { "$width": size[0], children: [jsx(Button, { handleClick: () => { saveEditComment(); }, label: size[0] > WIDTH_MOBILE ? textSaveButton : textSaveButtonMobile, disabled: !enableSaveEdit, variant: "primary", style: { marginRight: '20px' } }), jsx(Button, { handleClick: () => { cancelEditComment(); }, label: textCancelButton, variant: "secondary" })] })] })
+                    :
+                        jsxs(Fragment, { children: [jsx(CommentaryContent, { id: iDCommentPosted, children: value }), jsxs(IterationsWrapper, { children: [showStatusLike ? jsxs(LikesStatistics, { children: [!isLiked ?
+                                                    jsx(ThumbsUpCovered, { width: '16px', height: '16px' })
+                                                    :
+                                                        jsxs(Fragment, { children: [" ", totalLikes > 0 &&
+                                                                    jsx(ThumbsUpCovered, { width: '16px', height: '16px', customColor_1: "#CCCCCC" })] }), jsxs(Fragment, { children: [" ", totalLikes > 0 && jsx(TextTotalLikes, { children: totalLikes })] })] }) :
+                                            jsx(LikesStatistics, {}), jsxs(IterationsButtonsWrapper, { children: [actionLike && (jsx(LinkButton, { onClick: actionLike, children: isLiked ? textLiked : textUnliked })), hasAnswer &&
+                                                    jsxs(LinkButton, { onClick: actionAnswer, children: ["  ", textAnswer, "  "] })] })] })] })] }) }));
+}
+
+export { CommentaryBox as default };