frst-components 0.37.0 → 0.38.0

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

@@ -0,0 +1,375 @@
+import { useState, useRef, useEffect } from 'react';
+import { DesignTokens } from '../../theme/tokens.js';
+
+const useInputHook = ({ limit, placeholder, onSendMentions, onContentFormat, onContentUnformat, onChange, value, replyMentionedUser, initialText, configColor }) => {
+    const [showMention, setShowMention] = useState(false);
+    const [inputSearch, setInputSearch] = useState('');
+    const divInputRef = useRef(null);
+    const divPlaceholder = useRef(null);
+    const isMounted = useRef(true);
+    const mentionTopPosition = `${(divInputRef.current?.clientHeight ?? 15) + 20}px`;
+    const [textLength, setTextLength] = useState(0);
+    const [isPlaceholder, setPlaceholder] = useState(false);
+    const [styleLimitExceeded, setStyleLimitExceeded] = useState(false);
+    const [mentionedIds, setMentionedIds] = useState([]);
+    const [showPicker, setShowPicker] = useState(false);
+    const createNewRangeAndMoveCursorToTheEnd = (selection, spaceNode) => {
+        // Create a new range for setting the cursor position
+        const newRange = document.createRange();
+        // Move the cursor to the end of the spaceNode
+        newRange.setStartAfter(spaceNode);
+        newRange.collapse(true);
+        // Update the selection
+        selection.removeAllRanges();
+        selection.addRange(newRange);
+    };
+    const addMentionToRangeAndSpaceNode = (range, spaceNode, mentionAnchorElement) => {
+        if (range.startOffset > 0 && range.startContainer.textContent.charAt(range.startOffset - 1) === '@') {
+            range.setStart(range.startContainer, range.startOffset - 1);
+            range.deleteContents();
+        }
+        // append the child to the current cursor position within the paragraph
+        range.collapse(false); // set the cursor to the end of the paragraph
+        range.insertNode(spaceNode);
+        range.insertNode(mentionAnchorElement);
+    };
+    const createMentionedUser = (user) => {
+        // Create a new anchor element
+        const mentionAnchorElement = document.createElement('a');
+        mentionAnchorElement.appendChild(document.createTextNode(`${user.name}`));
+        mentionAnchorElement.style.fontWeight = 'bold';
+        mentionAnchorElement.style.color = configColor || DesignTokens.colors.primary1;
+        mentionAnchorElement.setAttribute('data-mention-id', user.user_uuid);
+        mentionAnchorElement.setAttribute('contenteditable', 'false');
+        mentionAnchorElement.setAttribute('draggable', 'false');
+        mentionAnchorElement.setAttribute('href', `/profile/${user.user_uuid}`);
+        mentionAnchorElement.suppressContentEditableWarning = true;
+        return mentionAnchorElement;
+    };
+    const handleMentionUser = (user) => {
+        if (user?.name && divInputRef.current) {
+            // Set the cursor to the last saved position
+            const selection = window.getSelection();
+            if (selection && selection.rangeCount > 0) {
+                const range = selection.getRangeAt(0);
+                if (range.startContainer.textContent === null)
+                    return;
+                if (range.startOffset === 0) {
+                    setShowMention(false);
+                    return;
+                }
+                let symbolFound = false;
+                while (!symbolFound) {
+                    if (range.startContainer.textContent.charAt(range.startOffset - 1) !== '@') {
+                        range.setStart(range.startContainer, range.startOffset - 1);
+                        range.deleteContents();
+                    }
+                    else {
+                        symbolFound = true;
+                    }
+                }
+                const mentionAnchorElement = createMentionedUser(user);
+                const spaceNode = document.createTextNode('\u00A0'); // Unicode for non-breaking space
+                addMentionToRangeAndSpaceNode(range, spaceNode, mentionAnchorElement);
+                createNewRangeAndMoveCursorToTheEnd(selection, spaceNode);
+            }
+            countChars();
+            createFormatAndTextContentToSaveComment();
+            resizeDiv();
+        }
+    };
+    //create a method that increase the size of the div as the scroll height increases
+    const resizeDiv = () => {
+        if (divInputRef.current) {
+            divInputRef.current.style.height = 'auto';
+            divInputRef.current.style.height = divInputRef.current.scrollHeight + 'px';
+        }
+    };
+    const addOrDeleteMentionedUser = () => {
+        // get all mentioned users
+        const mentionedUsers = getAllMentions();
+        const newMentionsIds = mentionedIds?.length > 0 ? mentionedUsers.filter((value) => !mentionedIds.includes(value)) : mentionedUsers;
+        onSendMentions(newMentionsIds);
+    };
+    const createFormatAndTextContentToSaveComment = () => {
+        // get the content string of each node
+        let plainContent = '';
+        if (divInputRef.current) {
+            divInputRef.current.childNodes.forEach((child) => {
+                if (child.textContent) {
+                    plainContent += child.textContent;
+                }
+            });
+        }
+        // get the full html content of the div
+        const htmlContent = divInputRef.current?.innerHTML || '';
+        onContentFormat(htmlContent);
+        onContentUnformat(plainContent);
+        addOrDeleteMentionedUser();
+    };
+    const [spaceCount, setSpaceCount] = useState(0);
+    const handleInput = (event) => {
+        const selection = window.getSelection();
+        let inputSearch = '';
+        let hasSpaceBeForeKey = false;
+        let hasKeyPresent = false;
+        let textBeforeCursor = '';
+        let textBeforeKey = '';
+        if (event.key === ' ') {
+            setSpaceCount((prevCount) => prevCount + 1);
+            if (spaceCount === 1) {
+                setShowMention(false);
+                setSpaceCount(0);
+                return;
+            }
+        }
+        else {
+            setSpaceCount(0);
+        }
+        if (selection && selection.rangeCount > 0) {
+            const range = selection.getRangeAt(0);
+            if (range.startContainer.textContent === null)
+                return;
+            // Get the text before the cursor
+            const completeText = range.startContainer.textContent;
+            // Find the last index of "@" in the text before the cursor
+            const atIndex = completeText.lastIndexOf('@');
+            textBeforeCursor = range.startContainer.textContent.substring(atIndex, range.startOffset);
+            hasSpaceBeForeKey = completeText.substring(atIndex - 1, atIndex).trim() === '';
+            textBeforeKey = completeText.substring(atIndex - 1, atIndex).trim();
+            if (hasSpaceBeForeKey || (textBeforeCursor === '@' && textBeforeKey.length === 0)) {
+                if (atIndex !== -1) {
+                    // Get the characters after the last "@"
+                    const afterAt = completeText.substring(atIndex);
+                    if (afterAt.length > 1 || event.key === '@' || textBeforeCursor === '@') {
+                        hasKeyPresent = true;
+                    }
+                    inputSearch = afterAt.replace('@', '');
+                }
+                else {
+                    inputSearch = '';
+                    setShowMention(false);
+                }
+            }
+        }
+        if ((hasSpaceBeForeKey && hasKeyPresent) || (textBeforeCursor === '@' && textBeforeKey.length === 0)) {
+            setInputSearch(inputSearch);
+            !!onChange && onChange(inputSearch);
+            if (event.key === '@' || (textBeforeCursor === '@' && textBeforeKey.length === 0)) {
+                setShowMention(true);
+            }
+        }
+        countChars();
+        createFormatAndTextContentToSaveComment();
+    };
+    const countChars = () => {
+        // create a function that loop through my divref and count each chars inside of it and it´s children
+        let count = 0;
+        if (divInputRef.current) {
+            divInputRef.current.childNodes.forEach((child) => {
+                if (child.textContent) {
+                    count += child.textContent.length;
+                }
+            });
+        }
+        setTextLength(count);
+        return count;
+    };
+    const areChildrenEmpty = () => {
+        // return if divInputRef has child empty
+        //if divInputRef is not focused
+        let isEmpty = false;
+        const isFocused = divInputRef.current === document.activeElement;
+        if (divInputRef.current && !isFocused) {
+            if (divInputRef.current.childNodes?.length <= 0)
+                isEmpty = true;
+            let isAnyChildWithTextValue = false;
+            divInputRef.current.childNodes.forEach((child) => {
+                if (isAnyChildWithTextValue) {
+                    isEmpty = false;
+                    return;
+                }
+                if (child.textContent.trim().length <= 0) {
+                    isEmpty = true;
+                }
+                else {
+                    // in case we have one item not empty we wont show the placeholder
+                    isAnyChildWithTextValue = true;
+                }
+            });
+        }
+        return isEmpty;
+    };
+    const handlePlaceholderInputText = (isPlaceHolderFocus = false) => {
+        setTimeout(() => {
+            if (!isMounted.current)
+                return;
+            // Check if the click was on the emoji button or picker
+            const target = document.activeElement;
+            const isEmojiButton = target?.closest('.MuiIconButton-root');
+            const isEmojiPicker = target?.closest('.EmojiPickerReact');
+            const isEmojiWrapper = target?.closest('.emoji-wrapper');
+            if (isEmojiButton || isEmojiPicker || isEmojiWrapper) {
+                return;
+            }
+            if (document.activeElement?.id === 'input-comment-component')
+                return;
+            // if divInputRef has any element hide the placeholder
+            if (isPlaceHolderFocus) {
+                divPlaceholder.current?.style.setProperty('display', 'none');
+                divInputRef.current?.style.setProperty('display', 'block');
+                divInputRef.current?.style.setProperty('height', '19px');
+                divInputRef.current?.focus();
+                setPlaceholder(false);
+            }
+            else {
+                if (areChildrenEmpty()) {
+                    resizeDiv();
+                    divPlaceholder.current?.style.setProperty('display', 'block');
+                    divInputRef.current?.style.setProperty('display', 'none');
+                    setPlaceholder(true);
+                }
+                else {
+                    divPlaceholder.current?.style.setProperty('display', 'none');
+                    divInputRef.current?.style.setProperty('display', 'block');
+                    setPlaceholder(false);
+                }
+            }
+        }, 0);
+    };
+    const getAllMentions = () => {
+        const mentionedUsers = divInputRef.current?.querySelectorAll('a[data-mention-id]') || [];
+        const mentionedUsersIdList = [];
+        mentionedUsers.forEach((user) => {
+            const mentionId = user.getAttribute('data-mention-id');
+            if (mentionId) {
+                mentionedUsersIdList.push(mentionId);
+            }
+        });
+        return mentionedUsersIdList;
+    };
+    const handleEmojiSelected = (emojiData, event) => {
+        if (divInputRef.current) {
+            divInputRef.current.appendChild(document.createTextNode(emojiData.emoji));
+            // Update input state
+            countChars();
+            createFormatAndTextContentToSaveComment();
+            resizeDiv();
+            setShowPicker(false);
+        }
+    };
+    useEffect(() => {
+        if (divInputRef.current && initialText) {
+            divInputRef.current.innerHTML = initialText;
+            countChars();
+            handlePlaceholderInputText();
+            resizeDiv();
+            const regex = /data-mention-id="([^"]+)"/g;
+            const matches = [...initialText.matchAll(regex)];
+            const ids = matches?.map((match) => match[1]);
+            setMentionedIds(ids);
+        }
+        divInputRef.current?.addEventListener('input', resizeDiv);
+        return () => {
+            divInputRef.current?.removeEventListener('input', resizeDiv);
+        };
+    }, []);
+    useEffect(() => {
+        if (!replyMentionedUser || !divInputRef?.current) {
+            handlePlaceholderInputText();
+            return;
+        }
+        divInputRef.current?.focus();
+        const selection = window.getSelection();
+        if (selection && selection.rangeCount > 0) {
+            const range = selection.getRangeAt(0);
+            if (range.startContainer.textContent === null)
+                return;
+            const mentionedUser = createMentionedUser(replyMentionedUser);
+            const spaceNode = document.createTextNode('\u00A0'); // Unicode for non-breaking space
+            addMentionToRangeAndSpaceNode(range, spaceNode, mentionedUser);
+            createNewRangeAndMoveCursorToTheEnd(selection, spaceNode);
+            handlePlaceholderInputText();
+        }
+    }, [replyMentionedUser]);
+    useEffect(() => {
+        setStyleLimitExceeded(textLength > limit);
+    }, [textLength]);
+    useEffect(() => {
+        isMounted.current = true;
+        return () => { isMounted.current = false; };
+    }, []);
+    useEffect(() => {
+        if (!divInputRef.current || !divPlaceholder.current)
+            return;
+        const onDocEvent = () => handlePlaceholderInputText();
+        const onPlaceholderEvent = () => handlePlaceholderInputText(true);
+        const onArrowKey = (event) => {
+            if (event.key === 'ArrowUp' ||
+                event.key === 'ArrowDown' ||
+                event.key === 'ArrowLeft' ||
+                event.key === 'ArrowRight' ||
+                event.key === 'Enter') {
+                setShowMention(false);
+            }
+        };
+        document.addEventListener('mousedown', onDocEvent);
+        document.addEventListener('focus', onDocEvent);
+        document.addEventListener('blur', onDocEvent);
+        const placeholderEl = divPlaceholder.current;
+        placeholderEl.addEventListener('mousedown', onPlaceholderEvent);
+        placeholderEl.addEventListener('focus', onPlaceholderEvent);
+        placeholderEl.addEventListener('blur', onPlaceholderEvent);
+        const inputEl = divInputRef.current;
+        inputEl.addEventListener('mousedown', onDocEvent);
+        inputEl.addEventListener('focus', onDocEvent);
+        inputEl.addEventListener('blur', onDocEvent);
+        inputEl.addEventListener('keyup', onArrowKey);
+        return () => {
+            document.removeEventListener('mousedown', onDocEvent);
+            document.removeEventListener('focus', onDocEvent);
+            document.removeEventListener('blur', onDocEvent);
+            placeholderEl.removeEventListener('mousedown', onPlaceholderEvent);
+            placeholderEl.removeEventListener('focus', onPlaceholderEvent);
+            placeholderEl.removeEventListener('blur', onPlaceholderEvent);
+            inputEl.removeEventListener('mousedown', onDocEvent);
+            inputEl.removeEventListener('focus', onDocEvent);
+            inputEl.removeEventListener('blur', onDocEvent);
+            inputEl.removeEventListener('keyup', onArrowKey);
+        };
+    }, []);
+    useEffect(() => {
+        if (replyMentionedUser)
+            return;
+        // check if the cursor is inside the divInputRef
+        const isFocused = divInputRef.current === document.activeElement;
+        // if the cursor is not inside the divInputRef show the placeholder
+        if (value?.length <= 0 && document.activeElement?.id !== 'input-comment-component' && !isFocused) {
+            divPlaceholder.current?.style.setProperty('display', 'block');
+            divInputRef.current.style.setProperty('display', 'none');
+            divInputRef.current.innerHTML = '<p><br /></p>';
+            setPlaceholder(true);
+            countChars();
+        }
+    }, [value]);
+    return {
+        handleInput,
+        handlePlaceholderInputText,
+        showMention,
+        setShowMention,
+        inputSearch,
+        setInputSearch,
+        divInputRef,
+        mentionTopPosition,
+        handleMentionUser,
+        textLength,
+        isPlaceholder,
+        styleLimitExceeded,
+        divPlaceholder,
+        handleEmojiSelected,
+        showPicker,
+        setShowPicker
+    };
+};
+
+export { useInputHook };

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

@@ -0,0 +1,39 @@
+import { useRef, useState, useEffect } from 'react';
+
+const useMentions = (mention) => {
+    const mentionListRef = useRef(null);
+    const { onSelect } = mention;
+    const [selectedUser, setSelectedUser] = useState();
+    useEffect(() => {
+        if (!mentionListRef.current)
+            return;
+        //keydown should change item focus
+        mentionListRef.current.addEventListener('keydown', (e) => {
+            const activeElement = document.activeElement;
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                if (activeElement.nextSibling) {
+                    activeElement.nextSibling.focus();
+                }
+            }
+            else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                if (activeElement.previousSibling) {
+                    activeElement.previousSibling.focus();
+                }
+            }
+        });
+    }, []);
+    useEffect(() => {
+        if (!selectedUser)
+            return;
+        onSelect(selectedUser);
+    }, [selectedUser]);
+    return {
+        selectedUser,
+        setSelectedUser,
+        mentionListRef
+    };
+};
+
+export { useMentions };

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

@@ -0,0 +1,81 @@
+import { jsx, jsxs } 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, HelperText } from './inputCommentStyles.js';
+import EmojiPicker from '../emoji-picker/index.js';
+
+function InputComment({ placeholder, value, onChange, remain, limit, hasEmoji, showCharacterCounter, IDInput, styles, disabled, emojiWindowlanguage }) {
+    const [focus, setFocus] = useState(false);
+    // Emoji Window States
+    const refInput = useRef(null);
+    const [isOpenPicker, setIsOpenPicker] = useState();
+    // TextArea states
+    const [stringValueTextArea, setStringValueTextArea] = useState(value);
+    useEffect(() => {
+        resizeTextArea(refInput);
+        onChange(stringValueTextArea);
+    }, [stringValueTextArea]);
+    const onEmojiClick = (emojiObject) => {
+        if (!stringValueTextArea || stringValueTextArea?.length < limit) {
+            let lastPositionStart = refInput.current.selectionStart;
+            let lastPositionEnd = refInput.current.selectionEnd;
+            let newStringWithEmoji = handleStringToIncluedEmoji([lastPositionStart, lastPositionEnd], emojiObject.native, refInput.current.innerHTML);
+            setStringValueTextArea(newStringWithEmoji + '');
+            repositionCursorAfterNewEmojiInTextArea([lastPositionStart, lastPositionEnd], emojiObject?.native?.length);
+        }
+    };
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs("div", { style: { ...styles }, children: [jsxs(InputWrapper, { focus: focus, children: [jsx(InputText, { ref: refInput, onFocus: () => setFocus(true), onBlur: () => {
+                                setFocus(false);
+                            }, onChange: (e) => setStringValueTextArea(e.target.value), value: stringValueTextArea, placeholder: placeholder, maxLength: limit, disabled: disabled }), hasEmoji &&
+                            jsx(EmojiPicker, { isOpenPicker: isOpenPicker, setIsOpenPicker: setIsOpenPicker, onEmojiSelect: (emoji) => onEmojiClick(emoji), configPicker: {
+                                    title: 'FRST FALCONI',
+                                    perLine: 10,
+                                    sheetSize: 8,
+                                    language: 'pt'
+                                }, styles: {} })] }), showCharacterCounter &&
+                    jsxs(HelperText, { children: [limit - remain, "/", limit] })] }) }));
+    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;
+        console.log('lenghtEmoji ', lenghtEmoji);
+        console.log('pos ', pos);
+        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 { InputComment as default };

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

@@ -0,0 +1,101 @@
+import styled from 'styled-components';
+
+const InputWrapper = styled.div `
+    display: flex;
+    align-items:flex-end;
+    width: 100%;
+    min-height: 48px;
+    background-color: ${({ theme }) => theme.colors.shadeWhite};
+
+    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
+    border-radius: 24px;
+
+    transition: all 0.2s ease-in-out;
+
+    &:hover {
+        border: 1px solid ${({ theme }) => theme.colors.shadeBlack};
+    }
+
+    ${({ focus, theme }) => focus &&
+    `border: 1px solid` + theme.colors.primary1 + " !important;"}
+`;
+const InputText = styled.textarea `
+    display: flex;
+    align-items: center;
+
+    width: 100%;
+    height: ${({ height }) => height || '20px'};
+    outline: 0;
+    
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: normal;
+    font-size: 16px;
+    line-height: 20px;
+    letter-spacing: -0.02em;
+    
+    overflow: hidden;
+    resize: none;
+
+    padding: 0;
+    margin: 14px;
+    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 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 }) => theme.colors.neutralsGrey2};
+
+    margin-top: 8px;
+    margin-left: 13px;
+`;
+styled.div `
+    width: 375px;
+    height: 332px;
+    overflow: hidden;
+    display:${({ visible }) => visible ? 'flex' : 'none'};
+    justify-content: center;
+    top: -330px;
+    right: 0px;
+    background-color:  ${({ theme }) => theme.colors.shadeWhite};
+    border: 1px solid  ${({ theme }) => theme.colors.neutralsGrey4};
+    position: absolute;
+
+    
+    & > div:nth-child(1) > em-emoji-picker:nth-child(1) {
+        padding: 10px;
+        padding-top: 5px;
+        height: 332px;
+    }
+`;
+// transform: scale(0.845);
+
+export { HelperText, InputText, InputWrapper };

package/dist/esm/src/components/item-lateral-menu/index.js

@@ -0,0 +1,34 @@
+import { jsx, 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 { WrapperCompound, WrapperItem, WrapperComponent, WrapperMainLabel, WrapperButton, WrapperIconDrop, WrapperSubItems, SubItem } from './itemLateralMenuStyles.js';
+import Button from '../buttons/index.js';
+import { DropdownIconLine } from '../../shared/icons.js';
+
+function LateralMenu({ label, onClick, button, beginComponent, activeBeginIcon, selected, subItems, hiddenIconDropArrow, style }) {
+    const [isActive, setIsActive] = useState(selected);
+    useEffect(() => {
+        setIsActive(selected);
+    }, [selected]);
+    const getSizeCompound = () => {
+        if (!subItems.length)
+            return '40px';
+        let size = (subItems.length + 1) * 42;
+        return size + 'px';
+    };
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: subItems && subItems.length > 0 ?
+            jsxs(WrapperCompound, { isOpen: isActive, style: { ...style, maxHeight: isActive ? getSizeCompound() : '40px' }, children: [jsxs(WrapperItem, { active: isActive, onClick: (e) => setIsActive(!isActive), style: { ...style, margin: 0, padding: 0, justifyContent: 'space-between' }, children: [jsxs(WrapperItem, { style: { background: 'transparent', width: '100%' }, children: [beginComponent &&
+                                        jsx(WrapperComponent, { active: isActive, children: isActive ? activeBeginIcon ? activeBeginIcon : beginComponent : beginComponent }), jsx(WrapperMainLabel, { active: isActive, style: { marginLeft: beginComponent ? '8px' : '0px' }, children: label })] }), button && button?.label &&
+                                jsx(WrapperButton, { children: jsx(Button, { label: button.label, handleClick: (e) => button.onClick(e), variant: button?.variant ? button.variant : 'primary' }) }), !hiddenIconDropArrow &&
+                                jsx(WrapperIconDrop, { isOpen: isActive, children: jsx(DropdownIconLine, { fill: '#000' }) })] }), jsx(WrapperSubItems, { isOpen: isActive, children: subItems.map((item, index) => {
+                            return jsx(SubItem, { onClick: () => item.onClick(item.id), children: item.label }, index);
+                        }) })] })
+            :
+                jsxs(WrapperItem, { active: isActive, style: { ...style, margin: 0, padding: 0, justifyContent: 'space-between' }, children: [jsxs(WrapperItem, { style: { background: 'transparent', width: '100%' }, onClick: (e) => onClick(e), children: [beginComponent &&
+                                    jsx(WrapperComponent, { active: isActive, children: isActive ? activeBeginIcon ? activeBeginIcon : beginComponent : beginComponent }), jsx(WrapperMainLabel, { active: isActive, style: { marginLeft: beginComponent ? '8px' : '0px' }, children: label })] }), button && button?.label &&
+                            jsx(WrapperButton, { children: jsx(Button, { label: button.label, handleClick: (e) => button.onClick(e), variant: button?.variant ? button.variant : 'primary' }) })] }) }));
+}
+
+export { LateralMenu as default };