frst-components 0.36.9 → 0.38.0

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

@@ -0,0 +1,98 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { FRSTTheme } from '../../theme/index.js';
+import { ThemeProvider } from 'styled-components';
+import { ContainerComentario, imagemAndIput, imagemComentario, IpuntComentario, containerCountAndEmojis, valueCount, valueEmoji, containerError } from './icrementarIdeiaStyles.js';
+import Avatar from '../avatar/index.js';
+import { useState, useRef, useEffect } from 'react';
+import { ErrorAlert } from '../../shared/icons.js';
+import useAutosizeTextArea from './useAutosizeTextArea.js';
+import EmojiPicker from '../emoji-picker/index.js';
+
+function IcrementarIdeia(props) {
+    const [activeComentario, setActiveComentario] = useState(false);
+    const [textCount, setTextCount] = useState(0);
+    const [isError, setIsError] = useState(false);
+    const textAreaRef = useRef(null);
+    const [isOpenPicker, setIsOpenPicker] = useState();
+    const [stringValueTextArea, setStringValueTextArea] = useState('');
+    useAutosizeTextArea(textAreaRef.current, stringValueTextArea);
+    const [listaTexto, setListaTexto] = useState('');
+    useEffect(() => {
+        const txList = listaTexto.split('');
+        setTextCount(txList.length);
+        if (props.limitTexto) {
+            if (txList.length > props.limitTexto) {
+                setIsError(true);
+            }
+            else {
+                setIsError(false);
+            }
+        }
+        else if (txList.length > 350) {
+            setIsError(true);
+        }
+        else if (txList.length < 350) {
+            setIsError(false);
+        }
+    }, [stringValueTextArea, listaTexto]);
+    useEffect(() => {
+        props.onChange(stringValueTextArea);
+    }, [stringValueTextArea]);
+    const handleChange = (evt) => {
+        const texto = evt.target?.value;
+        setStringValueTextArea(texto);
+        setListaTexto(texto);
+    };
+    function onEmojiClick(emojiObject) {
+        const valueTextarea = document.getElementById('txtTextArea').innerHTML;
+        if (!valueTextarea || valueTextarea?.length < props.limitTexto) {
+            let lastPositionStart = textAreaRef.current.selectionStart;
+            let lastPositionEnd = textAreaRef.current.selectionEnd;
+            let newStringWithEmoji = handleStringToIncluedEmoji([lastPositionStart, lastPositionEnd], emojiObject.native, valueTextarea);
+            setStringValueTextArea(newStringWithEmoji + '');
+            setListaTexto(newStringWithEmoji);
+            repositionCursorAfterNewEmojiInTextArea([lastPositionStart, lastPositionEnd], emojiObject?.native?.length);
+        }
+    }
+    return (jsxs(ThemeProvider, { theme: FRSTTheme, children: [jsxs(ContainerComentario, { onClick: () => setActiveComentario(true), activeComentario: activeComentario, error: isError, style: { ...props?.styles }, children: [jsxs(imagemAndIput, { activeComentario: activeComentario, children: [jsx(imagemComentario, { activeComentario: activeComentario, children: jsx(Avatar, { src: props.imgComentario, size: '34px' }) }), jsx(IpuntComentario, { onClick: () => setActiveComentario(true), activeComentario: activeComentario, cols: 30, rows: 5, error: isError, id: "txtTextArea", ref: textAreaRef, value: stringValueTextArea, onChange: handleChange, placeholder: props.user === 'user' ? props.textPlaceholderAluno : props.textPlaceholderGestor })] }), activeComentario && (jsxs(containerCountAndEmojis, { children: [jsxs(valueCount, { children: [textCount, "/", props.limitTexto ? props.limitTexto : 350] }), jsx(valueEmoji, { children: props.hasEmoji && (jsx(EmojiPicker, { isOpenPicker: isOpenPicker, setIsOpenPicker: setIsOpenPicker, onEmojiSelect: (emoji) => onEmojiClick(emoji), configPicker: {
+                                        title: 'FRST FALCONI',
+                                        perLine: 10,
+                                        sheetSize: 8,
+                                        language: 'pt'
+                                    }, styles: {} })) })] }))] }), isError && (jsxs(containerError, { children: [jsx(ErrorAlert, {}), jsx("p", { children: props.txtError })] }))] }));
+    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);
+        }
+        textAreaRef.current.setSelectionRange(newPos, newPos);
+    }
+    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;
+        }
+    }
+}
+
+export { IcrementarIdeia as default };

package/dist/esm/src/components/IncrementarIdeia/useAutosizeTextArea.js

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+
+const useAutosizeTextArea = (textAreaRef, value) => {
+    useEffect(() => {
+        if (textAreaRef) {
+            textAreaRef.style.height = '100px';
+            const scrollHeight = textAreaRef.scrollHeight;
+            textAreaRef.style.height = scrollHeight + 'px';
+        }
+    }, [textAreaRef, value]);
+};
+
+export { useAutosizeTextArea as default };

package/dist/esm/src/components/LXP/AccordionList/AccordionList.styles.js

@@ -0,0 +1,101 @@
+import styled from 'styled-components';
+
+const StylesAccordionList = styled.div `
+  width: 100%;
+  max-width: 371px;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  border: ${({ isOldAccordionList, darkMode }) => !isOldAccordionList && darkMode ? '1px solid #222222' : `1px solid #CFD9E6`};
+  border-radius: ${({ isOldAccordionList }) => !isOldAccordionList && `8px 8px 0px 0px`};  
+  &.open {
+    border-radius: 8px 8px 0px 0px;
+    border: ${({ theme, selectedItem, isOldAccordionList }) => selectedItem && isOldAccordionList && `1px solid ${theme.colors.primary1}`};
+  }
+
+  .title {
+    font-family: 'Work Sans';
+    font-weight: ${({ selectedItem, isOldAccordionList }) => (selectedItem && !isOldAccordionList ? '600' : 'normal')};
+    color: ${({ darkMode }) => darkMode ? '#EBEBEB' : '#343434'};
+    ::selection {
+      color: inherit;
+      background: transparent;
+    }
+  }
+
+  .header {
+    width: 100%;
+    display: flex;
+    align-items: flex-start; /* Modificado para alinhar verticalmente */
+    justify-content: space-between;
+    padding: 19px 24px;
+    background-color: ${({ theme, darkMode }) => darkMode ? '#323232' : theme.colors.shadeWhite};
+    cursor: pointer;
+    position: relative; /* Permite a seta ficar fixada à direita */
+    
+    &.open {
+      border-radius: 8px 8px 0px 0px;
+    }
+
+    &.closed {
+      border-radius: ${({ isOldAccordionList }) => !isOldAccordionList ? '8px 8px 0px 0px;' : '8px'};
+    }
+
+    &:hover {
+      background: ${({ isOldAccordionList, darkMode }) => !isOldAccordionList && darkMode ? '#464646' : `#EDF3F9`};
+    }
+
+    /* Coloca o título e progress bar em uma coluna */
+    .title-container {
+      display: flex;
+      flex-direction: column; /* Empilha o título e progress bar */
+      align-items: flex-start;
+    }
+
+    > span {
+      position: absolute; /* Posiciona a seta à direita */
+      top: 50%; /* Alinha verticalmente */
+      right: 24px; /* Ajusta a distância à direita */
+      transform: translateY(-50%); /* Ajuste fino no alinhamento vertical */
+      
+      &.open {
+        animation: 0.2s open both;
+      }
+
+      &.closed {
+        animation: 0.2s closed both;
+      }
+    }
+  }
+
+  @keyframes open {
+    to {
+      transform: rotate(90deg);
+    }
+  }
+
+  @keyframes closed {
+    to {
+      transform: rotate(-90deg);
+    }
+  }
+
+  .listContent {
+    width: 100%;
+    height: auto;
+  }
+`;
+const ContainerComplete = styled.div `
+  display: flex;
+  align-items: center;
+  margin-top: 12px;
+  gap: 8px;
+`;
+const CompleteText = styled.p `
+  font-family: 'PT Sans';
+  font-size: 12px;
+  font-weight: 700;
+  color: ${({ darkMode }) => darkMode ? '#E0E0E0' : '#444444'};
+`;
+
+export { CompleteText, ContainerComplete, StylesAccordionList };

package/dist/esm/src/components/LXP/AccordionList/index.js

@@ -0,0 +1,26 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Check_circle, ArrowScrollLeft } from '../../../shared/icons.js';
+import { useState, useEffect } from 'react';
+import { FRSTTheme } from '../../../theme/index.js';
+import { StylesAccordionList, ContainerComplete, CompleteText } from './AccordionList.styles.js';
+import { Box } from '@mui/material';
+import ProgressBar from '../progressBar/index.js';
+
+function AccordionList({ title = 'Módulo', children, isOpen = false, setIsOpen, isOldAccordionList = true, selectedItem, style = {}, value, darkMode = false }) {
+    const [open, setOpen] = useState(isOpen);
+    const [selected, setSelected] = useState(selectedItem);
+    const handleSetOpen = () => {
+        setOpen((prev) => !prev);
+        setIsOpen();
+    };
+    useEffect(() => {
+        if (selectedItem) {
+            setOpen(true);
+        }
+        setSelected(selectedItem);
+    }, [selectedItem]);
+    return (jsxs(StylesAccordionList, { darkMode: darkMode, theme: FRSTTheme, selectedItem: selected, style: { ...style }, isOldAccordionList: isOldAccordionList, className: selected ? 'open' : 'closed', children: [jsxs("div", { onClick: handleSetOpen, className: selected ? 'header open' : 'header closed', children: [jsxs("div", { className: "title-container", children: [jsx("p", { className: "title", children: title }), !isOldAccordionList && value === 100 ? (jsxs(ContainerComplete, { children: [jsx(Check_circle, {}), " ", jsx(CompleteText, { darkMode: darkMode, children: "Completo" })] })) : (!isOldAccordionList &&
+                                jsx(Box, { width: '135px', marginTop: '22px', children: jsx(ProgressBar, { bgColor: '#F26818', value: value, trackColor: '#E0E0E0', colorText: darkMode ? '#EBEBEB' : '#444444' }) }))] }), jsx("span", { className: open ? 'open' : 'closed', children: jsx(ArrowScrollLeft, { height: "16", width: "16", fill: darkMode ? 'white' : 'black' }) })] }), open && jsx("div", { className: "listContent", children: children })] }));
+}
+
+export { AccordionList as default };

package/dist/esm/src/components/LXP/accordionTrack/accordionTrack.js

@@ -0,0 +1,179 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '../../../shared/global.css.js';
+import { TypographyMyContents, LoadingContent, ContainerTrailsEmpty, ContainerCard, ContainerTrailsNormal, TypographyMyTrails } from './accordionTrackStyle.js';
+import { useState, useEffect } from 'react';
+import ThumbnailsDraggable from '../thumbnails/thumbnailsDraggable.js';
+import Thumbnails from '../thumbnails/thumbnails.js';
+import ScrollContainer from '../../scroll-container/index.js';
+import { Droppable } from '@hello-pangea/dnd';
+import ContentCoursesTrails from './contentCoursesTrails.js';
+import ContentCourses from './contentCourses.js';
+import ModalLXP from '../../modal/modalLXP/Modal.js';
+
+function AccordionTrack(props) {
+    const [trails, setTrail] = useState(props.trailsData);
+    const [courseData, setCourseData] = useState(props.courseData);
+    const [courseIndividualData, setCourseIndividualData] = useState(props.courseIndividualData);
+    const [ShowTrail, setShowTrail] = useState([]);
+    const [ShowIndividual, setShowIndividual] = useState(true);
+    const [IsLoading, setIsLoading] = useState(props.isLoading);
+    const [ModalDeleteConteudo, setModalDeleteConteudo] = useState(false);
+    const [ModalDeleteTrilha, setModalDeleteTrilha] = useState(false);
+    const [ModalDeleteTrilhaConteudo, setModalDeleteTrilhaConteudo] = useState(false);
+    const [IdDelete, setIdDelete] = useState('0');
+    const [RefreshResize, setRefreshResize] = useState(0);
+    const MEUS_CONTEUDOS_CONTENT = '0';
+    const CONTEUDO_INDIVIDUAL_CONTENT = '1';
+    useEffect(() => {
+        if (Array.isArray(props.trailsData)) {
+            setTrail(props.trailsData);
+            let showHideTrail = [];
+            props.trailsData.map((item) => {
+                showHideTrail.push(true);
+            });
+            setShowTrail(showHideTrail);
+        }
+    }, [props.trailsData]);
+    useEffect(() => {
+        setIsLoading(props.isLoading);
+    }, [props.isLoading]);
+    useEffect(() => {
+        setCourseData(props.courseData);
+        setRefreshResize(RefreshResize + 1);
+    }, [props.courseData]);
+    useEffect(() => {
+        setCourseIndividualData(props.courseIndividualData);
+    }, [props.courseIndividualData]);
+    return (jsxs(Fragment, { children: [jsxs(ContentCourses, { TrailName: '', children: [jsxs("div", { children: [jsx(TypographyMyContents, { children: props.textMeusConteudos ? props.textMeusConteudos : 'Meus Conteúdos' }), jsx("h2", { style: { fontFamily: 'PT Sans', fontWeight: 700, fontSize: 16, color: '#000000' }, children: IsLoading ? (jsx(Fragment, { children: jsx(LoadingContent, { style: { width: 200, height: 20 } }) })) : (jsxs(Fragment, { children: [props.textTotalDe ? props.textTotalDe : 'Total de', " ", courseData.length, ' ', props.textRegistros ? props.textRegistros : 'registros'] })) })] }), jsx(Droppable, { droppableId: MEUS_CONTEUDOS_CONTENT, direction: "horizontal", children: (provided) => {
+                            return (jsxs(ContainerTrailsEmpty, { children: [jsx(ScrollContainer, { colorBackground: "#ebebeb", stepMove: 380, isVisibleControlsButtons: true, sizeArrowButton: 48, marginsArrowButton: 5, horizontalMarginInternScroll: '-10px', styles: { justifyContent: 'flex-start', width: '100%' }, refreshResize: RefreshResize, children: jsx(ContainerCard, { ref: provided.innerRef, ...provided.droppableProps, children: IsLoading ? (jsx(Fragment, { children: new Array(4).fill('').map((item, k) => {
+                                                    return jsx(Thumbnails, { variant: "default", isDisabled: false, isLoading: true }, k);
+                                                }) })) : (jsxs(Fragment, { children: [jsx("div", { onClick: () => {
+                                                            props.onNewTrail && props.onNewTrail();
+                                                        }, style: { wordWrap: 'break-word' }, children: jsx(Thumbnails, { variant: "add", isDisabled: false, txtCriarNovoCurso: props.txtCriarNovoCurso }) }), courseData &&
+                                                        courseData.map((el, contentIndex) => {
+                                                            return (jsx(Fragment, { children: jsx(ThumbnailsDraggable, { handlePublicarCourse: () => {
+                                                                        props.handlePublicarCourse(el.id);
+                                                                    }, handlePublicarContentCheck: () => props.handlePublicarContentCheck(el.id), publishContentStatus: el.publishContentStatus, isDisabled: el.active, id: `content${contentIndex}`, index: contentIndex, title: el.title, variant: 'default', handleSwitchAtivar: (checked) => {
+                                                                        props.handleSwitchAtivarConteudo(el.id, checked);
+                                                                    }, isActive: el.active_individual, showSwitch: true, isTrail: false, src: el.settings.cover_thumb_url, txtButtonLabel: props.txtButtonLabel, txtAtivarCurso: props.txtAtivarCurso, txtCriarNovoCurso: props.txtCriarNovoCurso, handleClickCourse: () => {
+                                                                        props.handleEditCourse(el.id);
+                                                                    }, handleClickPopOverEdit: () => {
+                                                                        props.handlePopOverEdit(el.id);
+                                                                    }, handleClickPopOverMove: () => {
+                                                                        props.handlePopOverMove(el.id);
+                                                                    }, handleClickPopOverEditActivity: () => {
+                                                                        props.handleClickPopOverEditActivity(el.id);
+                                                                    }, handleClickPopOverDelete: () => {
+                                                                        setIdDelete(el.id);
+                                                                        setModalDeleteConteudo(true);
+                                                                    }, txtPopOverEditContentActivity: props.txtPopOverEditContentActivity, txtPopOverEditContent: props.txtPopOverEditContent, txtPopOverMoveToTrails: props.txtPopOverMoveToTrails, txtPopOverDeleteContent: props.txtPopOverDeleteContent, handleClickPopOverMoveToTrail: () => {
+                                                                        props.handleClickPopOverMoveToTrail(el.id);
+                                                                    } }, `content${contentIndex}`) }));
+                                                        })] })) }) }), provided.placeholder] }));
+                        } }, MEUS_CONTEUDOS_CONTENT)] }), IsLoading ? (jsx(Fragment, { children: jsx(ContentCoursesTrails, { TrailName: props.txtLoadingTrilhas ? props.txtLoadingTrilhas : 'Carregando Trilhas...', ativo: true, txtAtivarTrilha: props.txtAtivarTrilha, handlePopOverTrailEdit: (id) => {
+                        props.handlePopOverTrailEdit(id);
+                    }, children: jsx(Droppable, { droppableId: CONTEUDO_INDIVIDUAL_CONTENT, direction: "horizontal", children: (provided) => {
+                            return (jsxs(ContainerTrailsNormal, { style: {}, children: [jsx(ScrollContainer, { stepMove: 380, colorBackground: "#ebebeb", isVisibleControlsButtons: true, sizeArrowButton: 40, marginsArrowButton: 10, horizontalMarginInternScroll: '5px', refreshResize: RefreshResize, styles: { backgroundColor: '#ebebeb', justifyContent: 'flex-start', width: '100%' }, children: jsx(ContainerCard, { ref: provided.innerRef, ...provided.droppableProps, children: jsx(Fragment, { children: new Array(4).fill('').map((item, k) => {
+                                                    return jsx(Thumbnails, { variant: "default", isDisabled: false, isLoading: true }, k);
+                                                }) }) }) }), provided.placeholder] }));
+                        } }, CONTEUDO_INDIVIDUAL_CONTENT) }) })) : (jsx(Fragment, { children: jsx(ContentCoursesTrails, { TrailName: props.txtCursoIndividual ? props.txtCursoIndividual : 'Módulos', ativo: true, show: ShowIndividual, handleChangeCheck: (bActive) => {
+                        // if (props.handleSwitchActiveTrail) {
+                        //   props.handleSwitchActiveTrail(trailIndex, bActive)
+                        // }
+                    }, handleChangeTrailName: (name) => {
+                        // if (props.onSetNameTrail) {
+                        //   props.onSetNameTrail(name, trailIndex)
+                        // }
+                    }, handleChangeShow: (bShow) => {
+                        console.log(bShow);
+                        setShowIndividual(bShow);
+                    }, txtAtivarTrilha: props.txtAtivarTrilha, handlePopOverTrailEdit: (id) => {
+                        props.handlePopOverTrailEdit(id);
+                    }, children: jsx(Droppable, { droppableId: CONTEUDO_INDIVIDUAL_CONTENT, direction: "horizontal", children: (provided) => {
+                            return (jsxs(ContainerTrailsNormal, { style: {}, children: [jsx(ScrollContainer, { stepMove: 380, isVisibleControlsButtons: true, sizeArrowButton: 40, colorBackground: "#ebebeb", marginsArrowButton: 10, horizontalMarginInternScroll: '5px', refreshResize: RefreshResize, styles: { backgroundColor: '#ebebeb', justifyContent: 'flex-start', width: '100%' }, children: jsxs(ContainerCard, { ref: provided.innerRef, ...provided.droppableProps, children: [courseIndividualData &&
+                                                    courseIndividualData.map((individual, individualIndex) => {
+                                                        return (jsx(Fragment, { children: jsx(ThumbnailsDraggable, { handlePublicarCourse: () => {
+                                                                    props.handlePublicarCourse(individual.id);
+                                                                }, handlePublicarContentCheck: () => props.handlePublicarContentCheck(individual.id), publishContentStatus: individual.publish_status, id: `contentTrails${1}_individual${individualIndex}`, index: `${individualIndex}`, isDisabled: individual.active === false ? false : individual.active, title: individual.title, variant: 'default', showSwitch: true, handleClickCourse: () => {
+                                                                    props.handleEditCourse(individual.id);
+                                                                }, handleSwitchAtivar: (checked) => {
+                                                                    props.handleSwitchAtivarConteudo(individual.id, checked);
+                                                                }, isTrail: false, src: individual.settings.cover_thumb_url, txtButtonLabel: props.txtButtonLabel, txtAtivarCurso: props.txtAtivarCurso, txtCriarNovoCurso: props.txtCriarNovoCurso, handleClickPopOverEdit: () => {
+                                                                    props.handlePopOverEdit(individual.id);
+                                                                }, handleClickPopOverMove: () => {
+                                                                    props.handlePopOverMove(individual.id);
+                                                                }, handleClickPopOverEditActivity: () => {
+                                                                    props.handleClickPopOverEditActivity(individual.id);
+                                                                }, handleClickPopOverDelete: () => {
+                                                                    setIdDelete(individual.id);
+                                                                    setModalDeleteConteudo(true);
+                                                                }, txtPopOverEditContentActivity: props.txtPopOverEditContentActivity, txtPopOverEditContent: props.txtPopOverEditContent, txtPopOverMoveToTrails: props.txtPopOverMoveToTrails, txtPopOverDeleteContent: props.txtPopOverDeleteContent, handleClickPopOverMoveToTrail: () => {
+                                                                    props.handleClickPopOverMoveToTrail(individual.id);
+                                                                } }, `contentTrails${1}_individual${individualIndex}`) }));
+                                                    }), jsx("div", { style: { width: 24 } })] }) }), provided.placeholder] }));
+                        } }, CONTEUDO_INDIVIDUAL_CONTENT) }) })), !IsLoading && (jsxs(Fragment, { children: [jsx(TypographyMyTrails, { style: { marginTop: 20 }, children: props.textMinhasTrihas ? props.textMinhasTrihas : 'Minhas Trilhas' }), trails &&
+                        trails.map((trail, trailIndex) => {
+                            return (jsx(Fragment, { children: jsx(ContentCoursesTrails, { showButtonActive: true, trailId: trail.id, id: `${3000}${trailIndex}`, TrailName: trail.name, private: trail.private, handleChangePrivate: (bPrivate) => {
+                                        if (props.handleSwitchPrivateTrail) {
+                                            props.handleSwitchPrivateTrail(trailIndex, bPrivate);
+                                        }
+                                    }, ativo: trail.active, publishStatus: trail.publish_status, handleChangeCheck: (bActive) => {
+                                        if (props.handleSwitchActiveTrail) {
+                                            props.handleSwitchActiveTrail(trailIndex, bActive);
+                                        }
+                                    }, handleChangeTrailName: (name) => {
+                                        if (props.onSetNameTrail) {
+                                            props.onSetNameTrail(name, trailIndex);
+                                        }
+                                    }, handleChangeShow: (bShow) => {
+                                        setShowTrail((prev) => {
+                                            prev = { ...prev };
+                                            prev[trailIndex] = bShow;
+                                            return prev;
+                                        });
+                                    }, showButtonPublish: true, handlePublicarTrilha: () => {
+                                        props.handlePublicarTrilha(trail.id);
+                                    }, handlePublicarCheck: props.handlePublicarCheck, txtAtivarTrilha: props.txtAtivarTrilha, handlePopOverTrailEdit: () => {
+                                        props.handlePopOverTrailEdit(trail.id);
+                                    }, handlePopOverTrailDelete: (id) => {
+                                        setIdDelete(trail.id);
+                                        setModalDeleteTrilha(true);
+                                    }, children: ShowTrail.length === 0 ||
+                                        (ShowTrail[trailIndex] && (jsx(Droppable, { droppableId: (trailIndex + 2).toString(), direction: "horizontal", children: (provided) => {
+                                                return (jsxs(ContainerTrailsNormal, { style: { height: 350 }, children: [jsx(ScrollContainer, { stepMove: 380, isVisibleControlsButtons: true, sizeArrowButton: 40, colorBackground: "#ebebeb", marginsArrowButton: 10, horizontalMarginInternScroll: '5px', refreshResize: props.updateScrollSize, styles: { backgroundColor: '#ebebeb', justifyContent: 'flex-start', width: '100%' }, children: jsx(ContainerCard, { ref: provided.innerRef, ...provided.droppableProps, children: trail.trail_course &&
+                                                                    trail.trail_course.map((el, courseTrailIndex) => {
+                                                                        return (jsx(Fragment, { children: jsx(ThumbnailsDraggable, { handlePublicarContentCheck: () => props.handlePublicarContentCheck(el.course.id), handlePublicarCourse: () => {
+                                                                                    props.handlePublicarCourse(el.course.id);
+                                                                                }, publishContentStatus: el.course.publish_status, id: `trail_${trailIndex}_course_${courseTrailIndex}`, index: `${courseTrailIndex}`, isDisabled: trail.active === false ? false : el.course.active, title: el.course.title, variant: 'default', handleClickCourse: () => {
+                                                                                    props.handleEditCourse(el.course.id);
+                                                                                }, isTrail: true, showSwitch: false, src: el.course.settings.cover_thumb_url, txtButtonLabel: props.txtButtonLabel, txtAtivarCurso: props.txtAtivarCurso, txtCriarNovoCurso: props.txtCriarNovoCurso, handleClickPopOverEdit: () => {
+                                                                                    props.handlePopOverEdit(el.course.id);
+                                                                                }, handleClickPopOverEditActivity: () => {
+                                                                                    props.handleClickPopOverEditActivity(el.course.id);
+                                                                                }, handleClickPopOverMove: () => {
+                                                                                    props.handlePopOverMove(el.course.id);
+                                                                                }, handleClickPopOverDelete: () => {
+                                                                                    setIdDelete(el.id);
+                                                                                    setModalDeleteTrilhaConteudo(true);
+                                                                                }, txtPopOverEditContent: props.txtPopOverEditContent, txtPopOverMoveToTrails: props.txtPopOverMoveToTrails, txtPopOverDeleteContent: props.txtPopOverDeleteContent, txtPopOverEditContentActivity: props.txtPopOverEditContentActivity, handleClickPopOverMoveToTrail: () => {
+                                                                                    props.handleClickPopOverMoveToTrail(el.id);
+                                                                                } }) }));
+                                                                    }) }) }), provided.placeholder] }, `contentTrailsDrop${trailIndex}`));
+                                            } }, trailIndex + 2))) }, `contentTrails${trailIndex}`) }));
+                        })] })), jsx(ModalLXP, { open: ModalDeleteConteudo, handleClose: () => {
+                    setModalDeleteConteudo(false);
+                }, handleConfirmation: () => {
+                    props.handleDeleteCourse(IdDelete);
+                }, title: 'Você tem certeza?', style: { width: 600 }, confirmationButton: 'Sim, excluir', cancelButton: 'Cancelar', children: jsx("div", { children: "Voc\u00EA realmente quer deletar este m\u00F3dulo? Voc\u00EA ir\u00E1 perder todos os conte\u00FAdos criados." }) }), jsx(ModalLXP, { open: ModalDeleteTrilha, handleClose: () => {
+                    setModalDeleteTrilha(false);
+                }, handleConfirmation: () => {
+                    console.log('Passou aqui');
+                    props.handlePopOverTrailDelete(IdDelete);
+                }, title: 'Você tem certeza?', style: { width: 600 }, confirmationButton: 'Sim, excluir', cancelButton: 'Cancelar', children: jsx("div", { children: "Voc\u00EA realmente quer deletar esta trilha?" }) }), jsx(ModalLXP, { open: ModalDeleteTrilhaConteudo, handleClose: () => {
+                    setModalDeleteTrilhaConteudo(false);
+                }, handleConfirmation: () => {
+                    props.handleDeleteCourseTrail(IdDelete);
+                }, title: 'Você tem certeza?', style: { width: 600 }, confirmationButton: 'Sim, excluir', cancelButton: 'Cancelar', children: jsx("div", { children: "Voc\u00EA realmente quer remover o m\u00F3dulo desta trilha?" }) })] }));
+}
+
+export { AccordionTrack as default };

package/dist/esm/src/components/LXP/accordionTrack/accordionTrackList.js

@@ -0,0 +1,187 @@
+import { jsx } from 'react/jsx-runtime';
+import '../../../shared/global.css.js';
+import { useState, useEffect } from 'react';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { DragDropContext } from '@hello-pangea/dnd';
+import AccordionTrack from './accordionTrack.js';
+
+function AccordionTrackList({ trailsData, courseData, handleChange, onNewTrail, handleEditCourse, 
+// handlePopOverDelete,
+handlePopOverMove, handlePopOverEdit, handlePopOverTrailEdit, handlePopOverTrailDelete, handleSwitchActiveTrail, onSetNameTrail, handleSwitchAtivar, handleDeleteCourse, handleDeleteCourseTrail, handleMessageError, handleUpdateTrail, txtPopOverEditContentActivity, txtPopOverDeleteContent, txtPopOverEditContent, txtPopOverMoveToTrails, textMeusConteudos, textTotalDe, textRegistros, textMinhasTrihas, txtAtivarCurso, txtButtonLabel, txtCriarNovoCurso, txtAtivarTrilha, isLoading, handlePublicarContentCheck, handlePublicarCourse, handlePublicarTrilha, changeCourses, handlePublicarCheck, handleClickPopOverEditActivity, handleSwitchPrivateTrail, handleClickPopOverMoveToTrail }) {
+    const [trails, setTrails] = useState([]);
+    const [courses, setCourses] = useState([]);
+    const [ConteudoIndividual, setConteudoIndividual] = useState([]);
+    const [MeusConteudosData, setMeusConteudosData] = useState([]);
+    const [updateScrollSize, setUpdateScrollSize] = useState(0);
+    const MEUS_CONTEUDOS_CONTENT = '0';
+    const CONTEUDO_INDIVIDUAL_CONTENT = '1';
+    const create_UUID = () => {
+        var dt = new Date().getTime();
+        var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+            var r = (dt + Math.random() * 16) % 16 | 0;
+            dt = Math.floor(dt / 16);
+            return (c == 'x' ? r : (r & 0x3) | 0x8).toString(16);
+        });
+        return uuid;
+    };
+    useEffect(() => {
+        console.log('Atualizou em accordionTrackList', courses);
+        setMeusConteudosData(courses ? courses.filter((item) => !item.active_individual) : []);
+        setConteudoIndividual(courses ? courses.filter((item) => item.active_individual) : []);
+    }, [courses]);
+    useEffect(() => {
+        console.log('Atualizou props em accordionTrackList', courseData);
+        if (JSON.stringify(courseData) !== JSON.stringify(courses)) {
+            console.log('Acessando os registros de Cursos');
+            setCourses(courseData);
+        }
+    }, [courseData]);
+    useEffect(() => {
+        if (JSON.stringify(trailsData) !== JSON.stringify(trails)) {
+            console.log('Acessando os registros de trilhas');
+            setTrails(trailsData);
+        }
+    }, [trailsData]);
+    const handleDragEnd = ({ destination, source }) => {
+        if (!destination) {
+            return;
+        }
+        if (destination.index === source.index && destination.droppableId === source.droppableId) {
+            return;
+        }
+        if (destination.droppableId === MEUS_CONTEUDOS_CONTENT && source.droppableId !== CONTEUDO_INDIVIDUAL_CONTENT) {
+            if (handleMessageError) {
+                handleMessageError('ERROR_COPY_TO_CONTENTS');
+            }
+            return;
+        }
+        if (destination.droppableId !== source.droppableId &&
+            destination.droppableId !== MEUS_CONTEUDOS_CONTENT &&
+            destination.droppableId !== CONTEUDO_INDIVIDUAL_CONTENT) {
+            let idVerification = 0;
+            if (source.droppableId === MEUS_CONTEUDOS_CONTENT || source.droppableId === CONTEUDO_INDIVIDUAL_CONTENT) {
+                let uuidConteudo = source.droppableId === MEUS_CONTEUDOS_CONTENT
+                    ? MeusConteudosData[source.index].uuid
+                    : ConteudoIndividual[source.index].uuid;
+                let indexTrail = courses.findIndex((item) => item.uuid === uuidConteudo);
+                idVerification = courseData[indexTrail].id;
+            }
+            else {
+                idVerification = trails[source.droppableId - 2].trail_course[source.index].course.id;
+            }
+            let filterCourses = trails[destination.droppableId - 2].trail_course.find((element) => element.course.id === idVerification);
+            if (filterCourses !== undefined) {
+                if (handleMessageError) {
+                    handleMessageError('ERROR_DUPLICATE_CONTENTS');
+                }
+                return;
+            }
+        }
+        /// Copiando do Meus conteúdos para Individual ou Individual para conteúdos
+        if ((source.droppableId === MEUS_CONTEUDOS_CONTENT && destination.droppableId === CONTEUDO_INDIVIDUAL_CONTENT) ||
+            (source.droppableId === CONTEUDO_INDIVIDUAL_CONTENT && destination.droppableId === MEUS_CONTEUDOS_CONTENT)) {
+            /// Selecionando o UUID do conteúdo (se é individual ou não)
+            let uuidConteudo = source.droppableId === MEUS_CONTEUDOS_CONTENT
+                ? MeusConteudosData[source.index].uuid
+                : ConteudoIndividual[source.index].uuid;
+            let indexTrail = courses.findIndex((item) => item.uuid === uuidConteudo);
+            if (indexTrail >= 0) {
+                let changedCourse = courses[indexTrail];
+                changedCourse.active_individual = destination.droppableId === CONTEUDO_INDIVIDUAL_CONTENT;
+                changeCourses(changedCourse);
+                setCourses((prev) => {
+                    prev = [...prev];
+                    prev[indexTrail].active_individual = destination.droppableId === CONTEUDO_INDIVIDUAL_CONTENT;
+                    return prev;
+                });
+            }
+        }
+        else {
+            var itemCopy;
+            if (source.droppableId === MEUS_CONTEUDOS_CONTENT) {
+                itemCopy = { ...MeusConteudosData[source.index] };
+            }
+            else if (source.droppableId === CONTEUDO_INDIVIDUAL_CONTENT) {
+                itemCopy = { ...ConteudoIndividual[source.index] };
+            }
+            else {
+                itemCopy = { ...trails[source.droppableId - 2].trail_course[source.index].course };
+            }
+            let trailId = trails[destination.droppableId - 2].id;
+            itemCopy = {
+                id: create_UUID(),
+                trail_id: trailId,
+                course: itemCopy,
+                course_id: itemCopy.id,
+                order: 0
+            };
+            setTrails((prev) => {
+                prev = [...prev];
+                /// Armazendo o dado da trilha que será deletada
+                let deletedItem = null;
+                if (source.droppableId !== MEUS_CONTEUDOS_CONTENT &&
+                    source.droppableId !== CONTEUDO_INDIVIDUAL_CONTENT &&
+                    source.droppableId !== destination.droppableId) {
+                    deletedItem = prev[source.droppableId - 2].trail_course[source.index];
+                }
+                /// Verificando se a movimentação vai ser do conteúdo ou das trilhas
+                if (source.droppableId !== MEUS_CONTEUDOS_CONTENT && source.droppableId !== CONTEUDO_INDIVIDUAL_CONTENT) {
+                    prev[source.droppableId - 2].trail_course.splice(source.index, 1);
+                }
+                prev[destination.droppableId - 2].trail_course.splice(destination.index, 0, itemCopy);
+                /// Atualizando a saida
+                handleUpdateTrail(deletedItem, itemCopy, prev[destination.droppableId - 2]);
+                return prev;
+            });
+        }
+        setUpdateScrollSize(updateScrollSize + 1);
+    };
+    const setActiveTrail = (index, active) => {
+        setTrails((prev) => {
+            prev = [...prev];
+            prev[index].active = active;
+            handleSwitchActiveTrail(prev[index].id, active);
+            return prev;
+        });
+    };
+    const setPrivateTrail = (index, bPrivate) => {
+        setTrails((prev) => {
+            prev = [...prev];
+            prev[index].private = bPrivate;
+            handleSwitchPrivateTrail(prev[index].id, bPrivate);
+            return prev;
+        });
+    };
+    const setActiveContent = (id, active) => {
+        let indexTrail = courses.findIndex((item) => item.id === id);
+        setCourses((prev) => {
+            prev = [...prev];
+            prev[indexTrail].active = active;
+            handleSwitchAtivar(id, active);
+            return prev;
+        });
+    };
+    const setNameTrail = (name, id) => {
+        ({ ...trails[id] });
+        setTrails((prev) => {
+            prev = [...prev];
+            prev[id].name = name;
+            return prev;
+        });
+        onSetNameTrail(name, trails[id].id);
+    };
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsx(DragDropContext, { onDragEnd: handleDragEnd, children: jsx(AccordionTrack, { trailsData: trails, courseData: MeusConteudosData, courseIndividualData: ConteudoIndividual, handleSwitchActiveTrail: (index, active) => {
+                    setActiveTrail(index, active);
+                }, handleSwitchPrivateTrail: (index, active) => {
+                    setPrivateTrail(index, active);
+                }, onSetNameTrail: (name, id) => {
+                    setNameTrail(name, id);
+                }, onNewTrail: () => {
+                    if (onNewTrail) {
+                        onNewTrail();
+                    }
+                }, handleSwitchAtivarConteudo: setActiveContent, handleSwitchAtivar: handleSwitchAtivar, handleEditCourse: handleEditCourse, handlePublicarTrilha: handlePublicarTrilha, handlePublicarCourse: handlePublicarCourse, handlePublicarCheck: handlePublicarCheck, textMeusConteudos: textMeusConteudos, textTotalDe: textTotalDe, textRegistros: textRegistros, textMinhasTrihas: textMinhasTrihas, txtAtivarCurso: txtAtivarCurso, txtAtivarTrilha: txtAtivarTrilha, txtButtonLabel: txtButtonLabel, txtCriarNovoCurso: txtCriarNovoCurso, isLoading: isLoading, updateScrollSize: updateScrollSize, handleDeleteCourse: handleDeleteCourse, handleDeleteCourseTrail: handleDeleteCourseTrail, handlePopOverTrailDelete: handlePopOverTrailDelete, handlePopOverEdit: handlePopOverEdit, handlePopOverTrailEdit: handlePopOverTrailEdit, handlePopOverMove: handlePopOverMove, txtPopOverDeleteContent: txtPopOverDeleteContent, txtPopOverMoveToTrails: txtPopOverMoveToTrails, txtPopOverEditContent: txtPopOverEditContent, handleClickPopOverEditActivity: handleClickPopOverEditActivity, handleClickPopOverMoveToTrail: handleClickPopOverMoveToTrail, txtPopOverEditContentActivity: txtPopOverEditContentActivity, handlePublicarContentCheck: handlePublicarContentCheck }) }) }));
+}
+
+export { AccordionTrackList as default };