frst-components 0.36.9 → 0.38.0

package/dist/esm/src/components/exclusive-class/exclusiveClassStyles.js

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+
+const WrapperCard = styled.div `
+    width: 343px;
+    min-height: 136px;
+    background-color: ${({ theme }) => theme.colors.neutralsGrey4};
+    border: 1px solid ${({ theme }) => theme.colors.borderPrimary};
+    border-radius: 8px;
+
+    &:hover { 
+        background-color: ${({ theme }) => theme.colors.shadeWhite};
+    }
+`;
+const WrapperTitle = styled.div `
+    margin-top: 26px;
+    margin-left: 26px;
+    display: flex;
+    align-items: center;
+`;
+const TitleCard = styled.p `
+    ${({ theme }) => theme.fonts.textMessageComponentsBodyBold};
+`;
+const WrapperButton = styled.div `
+    margin-top: 26px;
+    margin-left: 26px;
+    display: flex;
+    align-items: center;
+    ${({ theme }) => theme.fonts.textMessageComponentsBodyBold};
+    color: ${({ theme }) => theme.colors.linkOnfocus} !important;
+`;
+
+export { TitleCard, WrapperButton, WrapperCard, WrapperTitle };

package/dist/esm/src/components/exclusive-class/index.js

@@ -0,0 +1,13 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../theme/index.js';
+import { WrapperCard, WrapperTitle, TitleCard, WrapperButton } from './exclusiveClassStyles.js';
+import { PeopleIcon, EditIcon } from '../../shared/icons.js';
+import Button from '../buttons/index.js';
+
+function ExclusiveClassCard({ titleClass, labelButton, className, handleClick }) {
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(WrapperCard, { children: [jsxs(WrapperTitle, { children: [jsx(PeopleIcon, {}), jsx(TitleCard, { style: { marginLeft: '14.67px' }, children: titleClass })] }), jsx(WrapperButton, { style: { display: 'flex', justifyContent: 'end', marginRight: '26px' }, children: jsx(Button, { label: labelButton, startIcon: jsx(EditIcon, {}), variant: "link", handleClick: handleClick }) })] }) }));
+}
+
+export { ExclusiveClassCard as default };

package/dist/esm/src/components/expand-button/expandButtonStyle.js

@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+
+const Button = styled.div `
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    width: fit-content;
+    color: ${({ theme, disabled }) => disabled ? theme.colors.borderPrimary : theme.colors.neutralsGrey2};
+    cursor: pointer;
+    user-select:none;
+    gap: 9px;
+    white-space: nowrap;
+    svg {
+        path {
+            stroke: ${({ theme, disabled }) => disabled ? theme.colors.borderPrimary : theme.colors.neutralsGrey2};
+        }
+    }       
+
+    &:hover {
+        color: ${({ theme, disabled }) => disabled ? theme.colors.borderPrimary : theme.colors.messageError1};
+        svg {
+            path {
+                stroke: ${({ theme, disabled }) => disabled ? theme.colors.borderPrimary : theme.colors.messageError1};
+            }
+        }
+    }
+    &:active {
+        color: ${({ theme, disabled }) => disabled ? theme.colors.borderPrimary : theme.colors.secondary5};
+        text-decoration: underline;
+        svg {
+            path {
+                stroke: ${({ theme, disabled }) => disabled ? theme.colors.borderPrimary : theme.colors.secondary5};
+            }
+        }
+    }
+    display: flex;
+    align-items: center;
+`;
+const Label = styled.div `
+    width: ${({ active }) => active ? '100%' : '0px'};
+    overflow: hidden;
+    white-space: nowrap;
+    transition: width 0.5s ease-in-out;
+`;
+
+export { Button, Label };

package/dist/esm/src/components/expand-button/index.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+import '../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../theme/index.js';
+import { Button, Label } from './expandButtonStyle.js';
+
+function ExpandButton({ label, disabled, onClick, styles, startIcon }) {
+    const [actionArea, setActionArea] = useState(false);
+    const [timeoutId, setTimeoutId] = useState(null);
+    return (jsx(ThemeProvider, { theme: { ...FRSTTheme }, children: jsxs(Button, { onClick: (e) => !disabled && onClick(e), disabled: disabled, style: { ...styles }, onMouseOut: () => {
+                clearTimeout(timeoutId); // Cancela o timeout anterior
+                const newTimeoutId = setTimeout(() => {
+                    setActionArea(false);
+                }, 5000);
+                setTimeoutId(newTimeoutId); // Armazena o ID do novo timeout
+            }, onMouseOver: () => {
+                clearTimeout(timeoutId); // Cancela o timeout anterior
+                setActionArea(true);
+            }, children: [jsx("div", { style: { width: '20px' }, children: startIcon }), jsx(Label, { active: actionArea, children: label })] }) }));
+}
+
+export { ExpandButton as default };

package/dist/esm/src/components/field-search-dropdown/fieldSearchStyle.js

@@ -0,0 +1,139 @@
+import styled from 'styled-components';
+
+const Container = styled.div `
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+`;
+styled.label `
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 21px;
+
+    margin-bottom: 16px;
+
+    color: ${({ theme }) => theme.colors.shadeBlack};
+
+    color: ${({ theme, isHover }) => isHover && theme.colors.linkOnfocus};
+    
+    color: ${({ isOnFocus }) => isOnFocus && '#663366'}    
+`;
+const ContainerIcon = styled.div `
+    z-index: 10;
+    cursor: pointer;
+    min-height: 20px;
+    min-width: 40px;
+    padding-left: 15px;
+    padding-right: 10px;
+    padding-top: 3px;
+`;
+const InputSearchWrapper = styled.div `
+    height: 48px;
+    background-color: ${({ isOnFocus }) => isOnFocus ? '#757575' : '#444'};
+
+    border-radius: 8px;
+    
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    width: ${({ isMobile }) => isMobile ? '0px !important' : 'auto'};
+    border: ${({ isMobile }) => !isMobile ? '1px' : '0px'} solid ${({ isHover, theme }) => isHover ? theme.colors.shadeBlack : '#000'};  
+    transition: width 1s ease-in-out;
+`;
+const InputText = styled.input `
+    margin-left:10px;
+    display: flex;
+    align-items: center;
+    height: 48px;
+    width: 100%;
+    border: none;
+    background: transparent;
+
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 18px;
+    color: ${({ theme }) => theme.colors.shadeWhite};
+
+    &::placeholder {
+        font-family: 'PT Sans';
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 18px;
+        color: ${({ theme }) => theme.colors.shadeWhite};
+    }
+
+    &[disabled] {
+        cursor: not-allowed;
+    }
+`;
+const WrapperResults = styled.div `
+    position: absolute;
+    top: 48px;
+    display: ${({ isVisibleResults }) => isVisibleResults ? 'flex' : 'none'};
+    height: auto;
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 8px;
+    background: ${({ theme }) => theme.colors.shadeWhite};
+    border: 1px solid #BDBDBD;
+    box-shadow: 0px 25px 18px -20px rgba(34, 34, 34, 0.2);
+    z-index: 10000;
+    overflow: hidden;
+`;
+const ItemResult = styled.div `
+        width: 100%;
+        cursor: pointer;
+        &:hover {
+            background: ${({ theme }) => theme.colors.neutralsGrey9};
+        }
+    `;
+const TextItem = styled.span `
+        font-family: 'PT Sans';
+        font-style: normal;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 21px;
+
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        color: #000000;
+
+        height: 42px;
+
+        padding-left: 16px;
+        margin-left: 5px;
+        margin-right: 5px;
+        border-bottom: 1px solid ${({ isLastItem, theme }) => isLastItem ? 'transparent' : theme.colors.neutralsGrey7};
+
+    `;
+const ItemSeeAll = styled.div `
+        width: 100%;
+        display: flex;
+        justify-content: center;   
+        align-items: center;
+        text-align: center;
+
+        cursor: pointer;
+
+        font-family: 'PT Sans';
+        font-style: normal;
+        font-weight: 700;
+        font-size: 16px;
+        line-height: 21px;
+
+        padding: 16px;
+        color: ${({ theme }) => theme.colors.linkOnfocus};
+        &:hover {
+            background: ${({ theme }) => theme.colors.neutralsGrey9};
+        }
+    `;
+
+export { Container, ContainerIcon, InputSearchWrapper, InputText, ItemResult, ItemSeeAll, TextItem, WrapperResults };

package/dist/esm/src/components/field-search-dropdown/index.js

@@ -0,0 +1,105 @@
+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 { Container, InputSearchWrapper, ContainerIcon, InputText, WrapperResults, ItemResult, TextItem, ItemSeeAll } from './fieldSearchStyle.js';
+import { SearchIcon, Clock } from '../../shared/icons.js';
+
+function FieldSearch({ variant, placeholder, onChange, listResults, hasOptionSeeAll, value, seeAll, style, loading, textLoading, enableAnimationField, isMobileVersion, setFieldSearchIsOpen, fieldSearchIsOpen, onFilter, historicResults, labeledResultList, isLabeledResult }) {
+    const [actionAreaInput, setActionAreaInput] = useState(false);
+    const [inputOnFocus, setInputOnFocus] = useState(false);
+    const [isMobile, setIsMobile] = useState(isMobileVersion);
+    const [openSearchFieldMobile, setOpenSearchFieldMobile] = useState(fieldSearchIsOpen);
+    const [isOpenDrop, setIsOpenDrop] = useState(false);
+    const [ValueSearch, setValueSearch] = useState('');
+    const [Loading, setLoading] = useState(loading);
+    const [resultList, setResultList] = useState([]);
+    useEffect(() => {
+        if (listResults && listResults.length > 0) {
+            setResultList(listResults);
+            setIsOpenDrop(true);
+        }
+        if (labeledResultList && labeledResultList.length > 0) {
+            setResultList(labeledResultList);
+            setIsOpenDrop(true);
+        }
+    }, [listResults, labeledResultList]);
+    useEffect(() => {
+        setLoading(loading);
+    }, [loading]);
+    useEffect(() => {
+        setFieldSearchIsOpen(openSearchFieldMobile);
+    }, []);
+    useEffect(() => {
+        if (fieldSearchIsOpen !== openSearchFieldMobile)
+            setOpenSearchFieldMobile(fieldSearchIsOpen);
+    }, [fieldSearchIsOpen]);
+    useEffect(() => {
+        setIsOpenDrop(false);
+        setFieldSearchIsOpen(openSearchFieldMobile);
+    }, [openSearchFieldMobile]);
+    // Handle Open list results
+    const handleFocusUp = () => {
+        setInputOnFocus(true);
+        setIsOpenDrop(true);
+        if (historicResults) {
+            setIsOpenDrop(historicResults.length > 0);
+        }
+        else {
+            setIsOpenDrop(ValueSearch && ValueSearch.length > 0 && resultList && resultList.length > 0);
+        }
+    };
+    const handleFocusDown = () => {
+        setIsOpenDrop(actionAreaInput);
+    };
+    useEffect(() => {
+        const delayDebounceFn = setTimeout(() => {
+            onFilter(ValueSearch);
+            setIsOpenDrop(ValueSearch && ValueSearch.length > 0 && resultList && resultList.length > 0);
+        }, 500);
+        return () => clearTimeout(delayDebounceFn);
+    }, [ValueSearch]);
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsx("div", { style: { position: 'relative' }, id: 'bar-search-global-menu', children: variant == 'LXP' ?
+                jsxs(Container, { onMouseOver: () => setActionAreaInput(true), onMouseOut: () => setActionAreaInput(false), onFocus: () => handleFocusUp(), onBlur: () => handleFocusDown(), children: [jsxs(InputSearchWrapper, { isHover: actionAreaInput, isOnFocus: inputOnFocus, isMobile: !openSearchFieldMobile, style: { ...style }, children: [jsx(ContainerIcon, { onClick: () => isMobile && setOpenSearchFieldMobile(!openSearchFieldMobile), children: jsx(SearchIcon, { fill: '#fff' }) }), jsx(InputText, { placeholder: placeholder, onChange: (e) => {
+                                        setIsOpenDrop(false);
+                                        setValueSearch(e.target.value);
+                                    }, value: ValueSearch })] }), Loading &&
+                            jsx(WrapperResults, { style: { ...style, marginTop: 8 }, isVisibleResults: true, children: jsx(ItemResult, { style: { cursor: 'default' }, children: jsx(TextItem, { isLastItem: true, style: { color: '#999' }, children: textLoading ? textLoading : 'Carregando...' }) }) }), labeledResultList && labeledResultList.length > 0 && inputOnFocus && isLabeledResult &&
+                            jsxs(WrapperResults, { style: { ...style, marginTop: 8 }, isVisibleResults: isOpenDrop, onMouseOver: () => setActionAreaInput(true), onMouseOut: () => setActionAreaInput(false), children: [ValueSearch.length === 0 && inputOnFocus && historicResults && historicResults.length > 0 &&
+                                        historicResults.map(item => {
+                                            return jsx(ItemResult, { onClick: () => {
+                                                    setIsOpenDrop(false);
+                                                    return item.onClick(item.id);
+                                                }, children: jsxs(TextItem, { isLastItem: false , children: [jsx(Clock, {}), " ", item.label] }) }, item.id);
+                                        }), ValueSearch.length > 0 &&
+                                        resultList.map((item, index) => (jsxs("div", { style: { width: '100%', marginTop: 16 }, children: [jsx("span", { style: { fontFamily: 'PT Sans', fontSize: 14, fontWeight: 400, color: '#757575', paddingLeft: 16, marginLeft: 5, marginRight: 5 }, children: item.label }), item.listResult.map(item => (jsx(ItemResult, { onClick: () => {
+                                                        setIsOpenDrop(false);
+                                                        return item.onClick(item.id);
+                                                    }, children: jsx(TextItem, { isLastItem: false , children: item.label }) }, item.id)))] }, index))), hasOptionSeeAll && labeledResultList.length > 0 && ValueSearch.length > 0 &&
+                                        jsx(ItemSeeAll, { onClick: (e) => {
+                                                setIsOpenDrop(false);
+                                                return seeAll.onClick(e);
+                                            }, children: seeAll.label })] }), listResults && listResults.length > 0 && inputOnFocus && !isLabeledResult &&
+                            jsxs(WrapperResults, { style: { ...style, marginTop: 8 }, isVisibleResults: isOpenDrop, onMouseOver: () => setActionAreaInput(true), onMouseOut: () => setActionAreaInput(false), children: [ValueSearch.length === 0 && inputOnFocus && historicResults && historicResults.length > 0 &&
+                                        historicResults.map(item => {
+                                            return jsx(ItemResult, { onClick: () => {
+                                                    setIsOpenDrop(false);
+                                                    return item.onClick(item.id);
+                                                }, children: jsxs(TextItem, { isLastItem: false , children: [jsx(Clock, {}), " ", item.label] }) }, item.id);
+                                        }), ValueSearch.length > 0 &&
+                                        resultList.map(item => {
+                                            return jsx(ItemResult, { onClick: () => {
+                                                    setIsOpenDrop(false);
+                                                    return item.onClick(item.id);
+                                                }, children: jsxs(TextItem, { isLastItem: false , children: [" ", item.label] }) }, item.id);
+                                        }), hasOptionSeeAll && listResults.length > 0 && ValueSearch.length > 0 &&
+                                        jsx(ItemSeeAll, { onClick: (e) => {
+                                                setIsOpenDrop(false);
+                                                return seeAll.onClick(e);
+                                            }, children: seeAll.label })] })] })
+                :
+                    jsx(Container, { onMouseOver: () => setActionAreaInput(true), onMouseOut: () => setActionAreaInput(false), onFocus: () => setInputOnFocus(true), onBlur: () => setInputOnFocus(false), children: jsxs(InputSearchWrapper, { isHover: actionAreaInput, isOnFocus: inputOnFocus, style: { ...style }, children: [jsxs(ContainerIcon, { children: [" ", jsx(SearchIcon, { fill: '#fff' }), " "] }), jsx(InputText, { placeholder: placeholder, onChange: onChange, value: value })] }) }) }) }));
+}
+
+export { FieldSearch as default };

package/dist/esm/src/components/filter-accordion-checkbox/filterAccordionCheckbox.utils.js

@@ -0,0 +1,7 @@
+function randID() {
+    return Math.random()
+        .toString(36)
+        .substr(2, 9);
+}
+
+export { randID };

package/dist/esm/src/components/filter-accordion-checkbox/index.js

@@ -0,0 +1,135 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useLayoutEffect } from 'react';
+import '../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../theme/index.js';
+import { randID } from './filterAccordionCheckbox.utils.js';
+import AccordionTabs from '../accordion-tabs/index.js';
+import Checkbox from '../form-elements/checkbox/index.js';
+
+function FilterAccordionCheckbox({ generalTitle, object, onSelected }) {
+    const [activeTab, setActiveTab] = useState('-1');
+    const [contentTabActiveShow, setContentTabActiveShow] = useState(jsx("div", {}));
+    const [tabs, setTabs] = useState([]);
+    useState([]);
+    useEffect(() => {
+        let tabsForAccordion = object.map((element) => {
+            return {
+                id: randID(),
+                description: element.description,
+                title: element.category,
+                totalCounter: 0,
+                group: includeStatusCheck(element.group ? element.group : [])
+            };
+        });
+        setTabs(tabsForAccordion);
+    }, []);
+    useLayoutEffect(() => {
+        renderNewContent(tabs);
+    }, [activeTab, tabs]);
+    const handleActiveTab = (newActive) => {
+        if (newActive == activeTab)
+            setActiveTab("-1");
+        else
+            setActiveTab(newActive);
+    };
+    function handleCheck(idCheck) {
+        let copyObjectTab = tabs;
+        for (let indexTab in tabs) {
+            for (let indexChecks in (tabs[indexTab].group)) {
+                if (tabs[indexTab].group[indexChecks].id == idCheck) {
+                    copyObjectTab[indexTab].group[indexChecks].isChecked = !(copyObjectTab[indexTab].group[indexChecks].isChecked);
+                    // Handle counter in tab title
+                    if (copyObjectTab[indexTab].group[indexChecks].isChecked)
+                        copyObjectTab[indexTab].totalCounter += 1;
+                    else
+                        copyObjectTab[indexTab].totalCounter -= 1;
+                }
+            }
+        }
+        setTabs(copyObjectTab);
+        renderNewContent(copyObjectTab);
+        onSelected(buildReturnSelecteds(copyObjectTab));
+    }
+    const handleClean = () => {
+        let copyObjectTab = tabs;
+        for (let indexTab in tabs) {
+            for (let indexChecks in (tabs[indexTab].group)) {
+                copyObjectTab[indexTab].group[indexChecks].isChecked = false;
+                copyObjectTab[indexTab].totalCounter = 0;
+            }
+        }
+        setTabs(copyObjectTab);
+        renderNewContent(copyObjectTab);
+        onSelected(buildReturnSelecteds(copyObjectTab));
+    };
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsx(AccordionTabs, { hasCounterTab: true, titleAccordion: generalTitle, titleTabs: tabs, activeTabID: activeTab, handleActiveTab: (e) => handleActiveTab(e), hasCleanButton: true, textCleanButton: "Excluir filtros", handleActionClean: () => handleClean(), typeAccordion: "horizontal", typeButtonTab: "transparent", children: contentTabActiveShow }) }));
+    function includeStatusCheck(group) {
+        let newGroupWithStatusCheck = [];
+        for (let element of group) {
+            element.isChecked = false;
+            newGroupWithStatusCheck.push(element);
+        }
+        return newGroupWithStatusCheck;
+    }
+    function buildReturnSelecteds(copyObjectTab) {
+        let resultSelected = [];
+        let counter = 0;
+        copyObjectTab.forEach(tab => {
+            resultSelected[counter] = {
+                description: tab.title,
+                selected: []
+            };
+            if (tab.totalCounter > 0) {
+                tab.group.map((item) => {
+                    if (item.isChecked)
+                        resultSelected[counter].selected.push(item.id);
+                });
+            }
+            counter++;
+        });
+        console.log(resultSelected);
+        return resultSelected;
+    }
+    function renderNewContent(copyObjectTab) {
+        let activeTabContent = copyObjectTab.filter((item) => item.id == activeTab);
+        {
+            activeTabContent &&
+                activeTabContent[0] &&
+                activeTabContent[0].group &&
+                setContentTabActiveShow(buildCheckbox(activeTabContent[0].group));
+        }
+    }
+    function buildCheckbox(groupActive) {
+        let setGroupQuantity = 3;
+        if (groupActive.length > 12)
+            setGroupQuantity = 5;
+        let splitGroup = splitGroupInLots(groupActive, setGroupQuantity);
+        return (jsx("div", { style: { display: 'flex', flexDirection: 'row' }, children: splitGroup.map((container) => {
+                return jsx("div", { style: { display: 'flex', flexDirection: 'column', marginRight: '24px' }, children: container.map((item) => {
+                        let myID = item.id;
+                        let isCheck = item.isChecked;
+                        return jsx(Checkbox, { label: item.description, isChecked: isCheck, handleCheck: () => handleCheck(myID) }, myID);
+                    }) }, randID());
+            }) }));
+    }
+    function splitGroupInLots(group, qtdPerGroup) {
+        let newGroup = [];
+        let totalItems = group.length;
+        let totalColumns = Math.ceil(totalItems / qtdPerGroup);
+        let counterLinear = 0;
+        for (let i = 0; i < totalColumns; i++) {
+            if (!newGroup[i])
+                newGroup[i] = [];
+            for (let j = 0; j < qtdPerGroup; j++) {
+                if (group[counterLinear]) {
+                    newGroup[i][j] = group[counterLinear];
+                    counterLinear++;
+                }
+            }
+        }
+        return newGroup;
+    }
+}
+
+export { FilterAccordionCheckbox as default };

package/dist/esm/src/components/filtro-galeria-desafio/index.js

@@ -0,0 +1,59 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect, useMemo } from 'react';
+import { MultiSelect } from 'primereact/multiselect';
+import { containerFiltro, countSelect, textCountSelectNumber, FiltroPrimeReact, searchAndButton } from './styles/MultiSelectDemo.js';
+import './styles/theme.css.js';
+import './styles/primereact.css.js';
+import './styles/primeflex.css.js';
+import Button from '../buttons/index.js';
+import SearchField from '../search-field/index.js';
+
+function FiltroGaleriaDesafios({ placeholderSelect, handleValueSelect, optionLabel, listItems, isDisabled, maxListItems, textButtonClear, textBusca, valueSelect = [] }) {
+    /// TODO: Não está implementado Lazyloading nesse componente. 
+    // const [lazyItems, setLazyItems] = useState([])
+    // const [lazyLoading, setLazyLoading] = useState(false)
+    // useEffect(() => {
+    //   setLazyItems(Array.from({ length: 100000 }))
+    //   setLazyLoading(false)
+    // }, [])
+    ///
+    const [selectedListItems, setSelectedListItems] = useState([]);
+    const [textFilter, setTextFilter] = useState('');
+    const [listItemsFilter, setListItemsFilter] = useState(listItems);
+    useEffect(() => {
+        if (valueSelect.length > 0) {
+            setSelectedListItems(valueSelect);
+        }
+    }, [valueSelect]);
+    useMemo(() => {
+        handleValueSelect(selectedListItems);
+    }, [selectedListItems]);
+    const listFilterSearch = useMemo(() => {
+        return listItemsFilter.filter((resp) => resp.name.toLowerCase().includes(textFilter));
+    }, [textFilter]);
+    const handleTemplateHeader = () => {
+        const selectedItems = selectedListItems;
+        const lengthList = selectedItems ? selectedItems.length : 0;
+        return listItems.length >= maxListItems ? (jsxs(searchAndButton, { children: [jsx("div", { children: jsx(SearchField, { placeholder: textBusca, className: null, handleClickButton: null, isButton: true, hasSearchIcon: true, onChange: (e) => {
+                            setTextFilter(e.target.value);
+                        } }) }), lengthList >= 2 ? (jsx(Button, { style: { marginTop: "1rem" }, variant: 'link', label: textButtonClear, disabled: false, handleClick: () => {
+                        setSelectedListItems([]);
+                    } })) : (jsx("div", {}))] })) : lengthList >= 1 ? (jsx(searchAndButton, { children: jsx(Button, { variant: 'link', label: textButtonClear, disabled: false, handleClick: () => {
+                    setSelectedListItems([]);
+                } }) })) : (jsx("div", {}));
+    };
+    const handleDropdownIcon = () => {
+        return jsx("i", { className: "pi pi-chevron-down", style: { color: '#f26818' } });
+    };
+    const handleRemoveIcon = () => {
+        return jsx("i", { className: "pi pi-spin pi-spinner", style: { color: 'red' } });
+    };
+    const selectedItems = selectedListItems;
+    const length = selectedItems ? selectedItems.length : 0;
+    return (jsx(Fragment, { children: jsxs(containerFiltro, { children: [length >= 1 && (jsx(countSelect, { children: jsx(textCountSelectNumber, { children: length }) })), jsx(FiltroPrimeReact, { children: jsx(MultiSelect, { appendTo: document ? document?.body : null, value: selectedListItems, options: listFilterSearch, onChange: (e) => setSelectedListItems(e.value), optionLabel: optionLabel, placeholder: placeholderSelect ? placeholderSelect : 'Por favor escolha', className: "multiselect-custom", 
+                        // panelStyle={selectItemsCss}
+                        // selectedItemTemplate={selectedCountriesTemplate()}
+                        selectedItemsLabel: placeholderSelect, disabled: isDisabled, maxSelectedLabels: 0, filter: false, showSelectAll: false, panelHeaderTemplate: handleTemplateHeader(), removeIcon: handleRemoveIcon, dropdownIcon: handleDropdownIcon }) })] }) }));
+}
+
+export { FiltroGaleriaDesafios as default };