frst-components 0.37.0 → 0.38.0

package/dist/esm/src/components/FI/feedInteraction/feedInteractionStyles.js

@@ -0,0 +1,137 @@
+import styled from 'styled-components';
+
+const Container = styled.div `
+    padding: 1px 24px 0px 24px;
+    display: flex;
+    flex-direction: column;
+    background-color: ${({ theme }) => theme.colors.shadeWhite};
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+    border: 1px solid ${({ theme }) => theme.colors.borderPrimary};
+    border-top: 0px !important;
+`;
+const infoContent = styled.div `
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+    border-bottom: 1px solid ${({ theme }) => theme.colors.borderPrimary};
+    font-family: 'Work Sans';
+    font-size: 16px;
+    font-weight: 400;
+    padding: 12px;
+    padding-top: 24px;
+`;
+const infoContentWithView = styled.div `
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid ${({ theme }) => theme.colors.borderPrimary};
+    font-family: 'Work Sans';
+    font-size: 16px;
+    font-weight: 400;
+    padding-top: 12px;
+    position: static !important;
+`;
+const info = styled.div `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    position: absolute;
+    margin-bottom: 12px;
+    ${({ theme }) => theme.fonts.textMessageComponentsBodyRegular};
+`;
+const infoWithView = styled.div `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    margin-bottom: 12px;
+    font-family: PT Sans;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 110%;
+    letter-spacing: 0%;
+    position: static !important;
+`;
+const buttonsContent = styled.div `
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    padding: 16px;
+`;
+const buttons = styled.button `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    border: none;
+    background-color: inherit;
+    ${({ theme }) => theme.fonts.textMessageComponentsBodyBold};
+    color: ${({ theme }) => theme.colors.neutralsGrey2};
+
+    cursor: pointer;
+    gap: 8px;
+
+    &:hover {
+        color: ${({ theme }) => theme.colors.linkHover};
+    }
+`;
+const reviewContainer = styled.div `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin-top: 28px;
+    ${({ theme }) => theme.fonts.textMessageComponentsBodyBold};
+`;
+const reviewContent = styled.div `
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-direction: row;
+    margin-top: 16px;
+    margin-bottom: 32px;
+`;
+styled.div `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding-bottom: 32px;
+`;
+styled.div `
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-direction: row;
+    width: 100%;
+    margin-top: 28px;
+`;
+styled.div `
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: row;
+    width: 100%;
+    margin-top: 12px;
+`;
+styled.div `
+    border: none;
+    background: none;
+    margin-left: 8px;
+`;
+styled.div `
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-direction: column;
+    width: 100%;
+    margin-top: 16px;
+`;
+
+export { Container, buttons, buttonsContent, info, infoContent, infoContentWithView, infoWithView, reviewContainer, reviewContent };

package/dist/esm/src/components/FI/feedInteraction/index.js

@@ -0,0 +1,88 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Rating from '../../EBR/rating/index.js';
+import { ThumbsUpCovered2, ThumbsUpIcon2, TalkIcon, StarOutlined2 } from '../../../shared/icons.js';
+import { useState, useEffect } from 'react';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { Container, infoContent, info, infoContentWithView, infoWithView, buttonsContent, buttons, reviewContainer, reviewContent } from './feedInteractionStyles.js';
+
+function FeedInteraction(props) {
+    const [openReview, setOpenReview] = useState(false);
+    const [openComments, setOpenComments] = useState(false);
+    const [isVisibleComments, setIsVisibleComments] = useState(!props?.hideComments);
+    const [stateTotalComments, setStateTotalComments] = useState(props.qtdComments);
+    const [ratingImpacto, setRatingImpacto] = useState(props.ratingImpacto || 0);
+    const [ratingRelevancia, setRatingRelevancia] = useState(props.ratingRelevancia || 0);
+    const [ratingPostReview, setRatingPostReview] = useState(props.ratingPostReview || 0);
+    useEffect(() => {
+        setIsVisibleComments(!props?.hideComments);
+    }, [props?.hideComments]);
+    useEffect(() => {
+        setStateTotalComments(props.qtdComments);
+    }, [props.qtdComments]);
+    useEffect(() => {
+        setRatingImpacto(props.ratingImpacto || 0);
+    }, [props.ratingImpacto]);
+    useEffect(() => {
+        setRatingRelevancia(props.ratingRelevancia || 0);
+    }, [props.ratingRelevancia]);
+    useEffect(() => {
+        setRatingPostReview(props.ratingPostReview || 0);
+    }, [props.ratingPostReview]);
+    const OnReviewClick = () => {
+        setOpenReview(!openReview);
+        setOpenComments(false);
+    };
+    const OnCommentsClick = () => {
+        setOpenComments(!openComments);
+        setOpenReview(false);
+    };
+    const handleImpactoChangeClick = (value) => {
+        setRatingImpacto(value);
+        props?.handleImpactoChange(value);
+    };
+    const handleRelevanciaChangeClick = (value) => {
+        setRatingRelevancia(value);
+        props?.handleRelevanciaChange(value);
+    };
+    const handlePostReviewChangeClick = (value) => {
+        setRatingPostReview(value);
+        props?.handlePostReviewChange(value);
+    };
+    const { isVisibleAvaliations = true } = props;
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(Container, { style: { ...props.style }, id: props.id, children: [!props.textTotalView && (props.qtdLikes || stateTotalComments) ? (jsxs(infoContent, { children: [props?.qtdLikes ? (jsxs(info, { style: { left: 0 }, children: [jsx(ThumbsUpCovered2, {}), " \u00A0", jsx("span", { onClick: () => props?.handleShowLikes?.(), style: {
+                                        cursor: 'pointer',
+                                        color: '#222222',
+                                        fontFamily: 'PT Sans',
+                                        fontSize: '16px',
+                                        lineHeight: '16x',
+                                        fontWeight: 400,
+                                        textDecoration: 'underline'
+                                    }, children: props.qtdLikes })] })) : null, stateTotalComments ? (jsx(info, { style: { right: 0 }, children: stateTotalComments })) : null] })) : (jsx(Fragment, { children: (props.textTotalView || props.qtdLikes || stateTotalComments) && (jsxs(infoContentWithView, { children: [jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: '5px' }, children: [props.qtdLikes && (jsxs(infoWithView, { onClick: () => props?.handleShowLikes?.(), children: [jsx(ThumbsUpCovered2, {}), " \u00A0", jsx("span", { onClick: () => props?.handleShowLikes?.(), style: {
+                                                    cursor: 'pointer',
+                                                    color: '#222222',
+                                                    fontFamily: 'PT Sans',
+                                                    fontSize: '16px',
+                                                    lineHeight: '16x',
+                                                    fontWeight: 400,
+                                                    textDecoration: 'underline'
+                                                }, children: props.qtdLikes })] })), props?.qtdLikes && stateTotalComments && jsx("div", { children: "\u2022" }), stateTotalComments && (jsxs(infoWithView, { children: [" ", stateTotalComments, " "] }))] }), props.textTotalView && (jsx(infoWithView, { style: { color: '#222', cursor: 'pointer' }, onClick: () => props.handleClickTextTotalViews?.(), children: props.textTotalView }))] })) })), jsxs(buttonsContent, { children: [props.isLiked ? (jsxs(buttons, { onClick: () => props.handleLikeClick(), style: { color: '#444' }, children: [jsx(ThumbsUpIcon2, {}), props.textDeslike] })) : (jsxs(buttons, { onClick: () => props.handleLikeClick(), style: { color: '#444' }, children: [jsx(ThumbsUpIcon2, {}), props.textLikes] })), isVisibleComments && (jsxs(buttons, { onClick: OnCommentsClick, style: { color: '#444' }, children: [jsx(TalkIcon, { fill: 'currentColor' }), " ", props.textComments] })), isVisibleAvaliations && (jsxs(buttons, { onClick: OnReviewClick, style: { color: '#444' }, children: [jsx(StarOutlined2, { fill: 'currentColor' }), " ", props.textAvaluation] }))] }), openReview && (jsxs(reviewContainer, { children: [props.textAvaluationTitle, jsxs(reviewContent, { children: [props.isChallengeReview && (jsxs("div", { style: {
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        alignItems: 'center',
+                                        flexDirection: 'column'
+                                    }, children: [jsx(Rating, { isVisibleNumberRating: false, orientation: "horizontal", qtdStars: 5, sizeStars: 20, marginStars: '3.5px', disabled: props.isDisabledAvaluation, rating: ratingImpacto, handleRating: handleImpactoChangeClick, removeEvaluation: props?.removeEvaluation, evaluationType: "impact", isUserLoggedChallenge: props?.isUserLoggedChallenge, valueRatingOwner: props?.valueRatingImpacto }), jsx("span", { children: props.textImpacto })] })), props.isChallengeReview && (jsxs("div", { style: {
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        alignItems: 'center',
+                                        flexDirection: 'column',
+                                        marginLeft: 24
+                                    }, children: [jsx(Rating, { isVisibleNumberRating: false, orientation: "horizontal", qtdStars: 5, sizeStars: 20, marginStars: '3.5px', disabled: props.isDisabledAvaluation, rating: ratingRelevancia, handleRating: handleRelevanciaChangeClick, removeEvaluation: props?.removeEvaluation, evaluationType: "relevance", isUserLoggedChallenge: props?.isUserLoggedChallenge, valueRatingOwner: props?.valueRatingRelevancia }), jsx("span", { children: props.textRelevancia })] })), props.isPostReview && (jsx("div", { style: {
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        alignItems: 'center',
+                                        flexDirection: 'column'
+                                    }, children: jsx(Rating, { isVisibleNumberRating: false, orientation: "horizontal", qtdStars: 5, sizeStars: 20, marginStars: '3.5px', disabled: props.isDisabledAvaluation, rating: ratingPostReview, handleRating: handlePostReviewChangeClick, removeEvaluation: props?.removeEvaluation }) }))] })] })), openComments && props?.isCommentV2 && jsx("div", { children: props?.childrenCommentV2 })] }) }));
+}
+
+export { FeedInteraction as default };

package/dist/esm/src/components/FI/feedInteractionV2/feedInteractionStyles.js

@@ -0,0 +1,52 @@
+import styled from 'styled-components';
+
+const Container = styled.div `
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+`;
+const TopBar = styled.div `
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 0;
+`;
+const LeftAction = styled.button `
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    font-size: 16px;
+    color: #444;
+`;
+const RightInfo = styled.div `
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    font-size: 14px;
+    color: #444;
+`;
+const Divider = styled.div `
+    width: 100%;
+    height: 1px;
+    background: #e0e0e0;
+`;
+const BottomInfo = styled.div `
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 14px;
+    color: #f58634;
+    cursor: pointer;
+
+    span {
+        color: #222;
+        font-size: 14px;
+    }
+`;
+
+export { BottomInfo, Container, Divider, LeftAction, RightInfo, TopBar };

package/dist/esm/src/components/FI/feedInteractionV2/index.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ThumbsUpIcon2, ThumbsUpCovered2 } from '../../../shared/icons.js';
+import { useState, useEffect } from 'react';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { Container, TopBar, LeftAction, RightInfo, Divider, BottomInfo } from './feedInteractionStyles.js';
+
+function FeedInteractionV2(props) {
+    const [openComments, setOpenComments] = useState(false);
+    const [isVisibleComments, setIsVisibleComments] = useState(!props?.hideComments);
+    const [stateTotalComments, setStateTotalComments] = useState(props.qtdComments);
+    useEffect(() => {
+        setIsVisibleComments(!props?.hideComments);
+    }, [props?.hideComments]);
+    useEffect(() => {
+        setStateTotalComments(props.qtdComments);
+    }, [props.qtdComments]);
+    const qtdLikesText = props?.qtdLikes !== "1" ? `${props.qtdLikes} pessoas curtiram esse desafio` : '1 pessoa curtiu esse desafio';
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(Container, { style: { ...props.style }, id: props.id, children: [jsxs(TopBar, { children: [jsxs(LeftAction, { onClick: () => props.handleLikeClick?.(), children: [jsx(ThumbsUpIcon2, {}), jsxs("span", { style: { marginTop: '2px' }, children: [" ", props.isLiked ? props.textDeslike : props.textLikes] })] }), jsxs(RightInfo, { children: [stateTotalComments && (jsx("span", { children: stateTotalComments })), props.textTotalView && (jsx("span", { style: { cursor: 'pointer' }, onClick: () => props.handleClickTextTotalViews?.(), children: props.textTotalView }))] })] }), jsx(Divider, {}), props.qtdLikes && (jsxs(BottomInfo, { onClick: () => props.handleShowLikes?.(), children: [jsx(ThumbsUpCovered2, {}), jsx("span", { children: qtdLikesText })] })), openComments && props.isCommentV2 && (jsx("div", { children: props.childrenCommentV2 }))] }) }));
+}
+
+export { FeedInteractionV2 as default };

package/dist/esm/src/components/FI/feedInteractionV3/feedInteractionV3Styles.js

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+
+const Container = styled.div `
+  padding: 16px 24px 20px;
+  border-top: 1px solid ${({ theme }) => theme.colors.borderPrimary};
+  background: ${({ theme }) => theme.colors.shadeWhite};
+`;
+const InteractionRow = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 24px;
+`;
+const InteractionButton = styled.button `
+  border: 0;
+  background: transparent;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  padding: 0;
+  color: ${({ theme, $active, $primaryColor }) => ($active ? $primaryColor : theme.colors.neutralsGrey3)};
+  transition: transform 150ms ease-in-out;
+
+  &:hover {
+    transform: scale(1.04);
+  }
+`;
+styled.div `
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: ${({ theme }) => theme.colors.neutralsGrey3};
+`;
+const IconBubble = styled.div `
+  width: 34px;
+  height: 34px;
+  border-radius: 999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: ${({ theme, $active, $primaryColor }) => $active ? `${($primaryColor || theme.colors.primary1)}1a` : theme.colors.neutralsGrey6};
+`;
+const InteractionValue = styled.span `
+  font-family: 'Work Sans';
+  font-weight: 600;
+  font-size: 14px;
+`;
+
+export { Container, IconBubble, InteractionButton, InteractionRow, InteractionValue };

package/dist/esm/src/components/FI/feedInteractionV3/index.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { ThumbsUp, Eye, MessageCircle } from 'lucide-react';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { Container, InteractionRow, InteractionButton, IconBubble, InteractionValue } from './feedInteractionV3Styles.js';
+
+const DEFAULT_PRIMARY_COLOR = '#FF8A15';
+function FeedInteractionV3(props) {
+    const { style, primaryColor = DEFAULT_PRIMARY_COLOR, initialIsLiked = false, likeCount = 0, viewCount = 0, commentCount = 0, onLikeToggle, handleLikeClick, hiddenViewButton = false, hiddenCommentButton = false, hiddenLikeButton = false, handleViewLikesClick = () => { }, handleCommentsClick = () => { }, handleViewsClick = () => { } } = props;
+    const [isLiked, setIsLiked] = useState(Boolean(initialIsLiked));
+    const [likes, setLikes] = useState(Number.isFinite(likeCount) ? likeCount : 0);
+    useEffect(() => {
+        setLikes(Number.isFinite(likeCount) ? likeCount : 0);
+    }, [likeCount]);
+    useEffect(() => {
+        setIsLiked(Boolean(initialIsLiked));
+    }, [initialIsLiked]);
+    const handleLike = () => {
+        const next = !isLiked;
+        setIsLiked(next);
+        setLikes((prev) => (next ? prev + 1 : Math.max(0, prev - 1)));
+        onLikeToggle?.(next);
+        handleLikeClick?.();
+    };
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsx(Container, { style: style, children: jsxs(InteractionRow, { children: [!hiddenLikeButton && (jsxs(InteractionButton, { "$primaryColor": primaryColor, type: "button", onClick: () => { }, "$active": isLiked, children: [jsx(IconBubble, { onClick: handleLike, "$primaryColor": primaryColor, "$active": isLiked, children: jsx(ThumbsUp, { size: 18, fill: isLiked ? primaryColor : 'none' }) }), jsx(InteractionValue, { onClick: handleViewLikesClick, children: likes })] })), !hiddenViewButton && (jsxs(InteractionButton, { "$primaryColor": primaryColor, type: "button", onClick: handleViewsClick, children: [jsx(IconBubble, { children: jsx(Eye, { size: 18 }) }), jsx(InteractionValue, { children: viewCount })] })), !hiddenCommentButton && (jsxs(InteractionButton, { "$primaryColor": primaryColor, type: "button", onClick: handleCommentsClick, children: [jsx(IconBubble, { children: jsx(MessageCircle, { size: 18 }) }), commentCount && jsx(InteractionValue, { children: commentCount })] }))] }) }) }));
+}
+
+export { FeedInteractionV3 as default };

package/dist/esm/src/components/FI/inputCommentPost-it/index.js

@@ -0,0 +1,118 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import '../../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { InputWrapper, InputText, TextLimitTx, AlertManyChars, WrapperBtn, Or } from './inputCommentPost-ItStyles.js';
+import Avatar from '../../avatar/index.js';
+import EmojiPicker from '../../emoji-picker/index.js';
+import { recalcRemain } from './inputCommentPost-It.utils.js';
+import { AlertCicle } from '../../../shared/icons.js';
+import MiniButton from '../../mini-button/index.js';
+
+function InputCommentPostIt({ placeholder, avatar, value, onChange, limit, hasEmoji, labels, styles, disabled, onClickPublish, onClickCancel }) {
+    const [focus, setFocus] = useState(false);
+    const [isActiveEdit, setIsActiveEdit] = useState(false);
+    const [isErrorManyChars, setErrorManyChars] = useState(false);
+    const [isAllowPusblish, setIsAllowPublish] = useState(false);
+    const refInput = useRef(null);
+    const [isOpenPicker, setIsOpenPicker] = useState(false);
+    const [stringValueTextArea, setStringValueTextArea] = useState('');
+    const [isChangedInput, setIsChangedInput] = useState(false);
+    const [remain, setRemain] = useState(limit);
+    useEffect(() => {
+        if (stringValueTextArea) {
+            resizeTextArea(refInput);
+            onChange(stringValueTextArea);
+            if (stringValueTextArea?.length > 0)
+                setIsChangedInput(true);
+            let newRemain = recalcRemain(stringValueTextArea, limit);
+            setRemain(newRemain);
+            setErrorManyChars(newRemain < 0);
+            setIsAllowPublish(stringValueTextArea?.length > 0);
+        }
+    }, [stringValueTextArea]);
+    useEffect(() => {
+        setStringValueTextArea(value);
+        if (value?.length > 0) {
+            setIsActiveEdit(true);
+        }
+    }, [value]);
+    const onEmojiClick = (emojiObject) => {
+        setIsOpenPicker(false);
+        let lastPositionStart = refInput.current.selectionStart;
+        let lastPositionEnd = refInput.current.selectionEnd;
+        let newStringWithEmoji = handleStringToIncluedEmoji([lastPositionStart, lastPositionEnd], emojiObject.native, refInput.current.innerHTML);
+        let remainPosInsertEmoji = (newStringWithEmoji?.length + emojiObject?.native?.length);
+        if (remainPosInsertEmoji <= limit) {
+            setStringValueTextArea(newStringWithEmoji + '');
+            repositionCursorAfterNewEmojiInTextArea([lastPositionStart, lastPositionEnd], emojiObject?.native?.length);
+        }
+    };
+    const onClickCancelIntern = () => {
+        setStringValueTextArea('');
+        onChange('');
+        setErrorManyChars(false);
+        setIsActiveEdit(false);
+        setRemain(limit);
+        onClickCancel();
+    };
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs("div", { style: { ...styles }, children: [jsxs(InputWrapper, { active: isActiveEdit, isOnEditing: isChangedInput, isError: isErrorManyChars, children: [!isActiveEdit &&
+                            jsx("div", { style: { alignSelf: 'center', marginLeft: '4px' }, children: jsx(Avatar, { ...avatar, size: '32px' }) }), jsx(InputText, { ref: refInput, onFocus: () => {
+                                setFocus(true);
+                                setIsActiveEdit(true);
+                            }, onBlur: () => {
+                                setFocus(false);
+                            }, onChange: (e) => setStringValueTextArea(e.target.value), value: stringValueTextArea, placeholder: !isActiveEdit ? placeholder : '', maxLength: limit + 1, disabled: disabled, isError: isErrorManyChars }), isActiveEdit &&
+                            jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', width: '100%' }, children: [jsxs(TextLimitTx, { children: [limit - remain, "/", limit] }), jsx(EmojiPicker, { isOpenPicker: isOpenPicker, setIsOpenPicker: setIsOpenPicker, onEmojiSelect: (emoji) => onEmojiClick(emoji), configPicker: {
+                                            title: 'FRST FALCONI',
+                                            perLine: 8,
+                                            sheetSize: 6,
+                                            language: 'pt',
+                                            emojiSize: 20
+                                        }, styles: { width: '318px' } })] })] }), isErrorManyChars &&
+                    jsxs(AlertManyChars, { children: [jsx(AlertCicle, { fill: '#923534' }), labels?.errorManyChars] }), isActiveEdit && jsx(Fragment, { children: jsxs(WrapperBtn, { children: [jsx(MiniButton, { label: labels?.cancel, variant: 'secondary', onClick: (e) => onClickCancelIntern(), disabled: false }), jsx(Or, { children: labels?.or }), jsx(MiniButton, { label: stringValueTextArea?.length > 0 ? labels?.save : labels?.publish, variant: 'primary', onClick: () => {
+                                    if (stringValueTextArea?.length > 0 && !isErrorManyChars)
+                                        onClickPublish(stringValueTextArea);
+                                }, disabled: !(stringValueTextArea?.length > 0) || isErrorManyChars })] }) })] }) }));
+    function resizeTextArea(refInput) {
+        const txResize = (tx) => {
+            tx.style.height = '20px';
+            tx.style.height = tx.scrollHeight + 'px';
+            // setHeightPositionWindowEmoji(tx.scrollHeight - 350 + 'px')
+        };
+        {
+            refInput.current && refInput.current.style && txResize(refInput.current);
+        }
+    }
+    function handleStringToIncluedEmoji(pos, emojiObject, stringValueTextArea) {
+        let finalString = '';
+        if (stringValueTextArea) {
+            if (pos[0] == pos[1]) {
+                finalString = stringValueTextArea.substr(0, pos[0]) + emojiObject + stringValueTextArea.substr(pos[1]);
+            }
+            else if (pos[0] < pos[1]) {
+                finalString = stringValueTextArea.substr(0, pos[0]) + emojiObject + stringValueTextArea.substr(pos[1], stringValueTextArea.length);
+            }
+            else {
+                finalString = stringValueTextArea + emojiObject;
+            }
+            return finalString;
+        }
+        else {
+            return emojiObject;
+        }
+    }
+    function repositionCursorAfterNewEmojiInTextArea(pos, lenghtEmoji) {
+        let newPos = 0;
+        if (pos[0] != pos[1]) { // Cursor in multiple chars selected
+            newPos = pos[0] + (lenghtEmoji ? lenghtEmoji : 0);
+        }
+        else { // Cursor text in specific point
+            newPos = pos[1] + (lenghtEmoji ? lenghtEmoji : 0);
+        }
+        refInput.current.setSelectionRange(newPos, newPos);
+    }
+}
+
+export { InputCommentPostIt as default };

package/dist/esm/src/components/FI/inputCommentPost-it/inputCommentPost-It.utils.js

@@ -0,0 +1,20 @@
+function recalcRemain(string, limit) {
+    if (string)
+        return limit - string.length;
+    else
+        return limit;
+}
+// function countEmojis(str) {
+//     let match;
+//     let count = 0;
+//     let length = 0;
+//     const regex = emojiRegex();
+//     while (match = regex.exec(str)) {
+//         const emoji = match[0];
+//         count++;
+//         length += Array.from(emoji).length;
+//     }
+//     return {count, length};
+// }
+
+export { recalcRemain };