frst-components 0.37.0 → 0.38.0

package/dist/esm/src/components/DS/dropdown-Multiselect/index.js

@@ -0,0 +1,186 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { FRSTTheme } from '../../../theme/index.js';
+import { ThemeProvider } from 'styled-components';
+import { MultiSelect } from 'primereact/multiselect';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { containerSelect, headerSelect, customSelect, selectItem, TextContainer, SelectTag, overShowInfo, searchAndButton, modalContainer, modalHeader, modalContent, modalCards, cardTitle, cardDescription, closeModal } from './styles/multiselectStyles.js';
+import { Trash, DropdownIcon, CloseIcon } from '../../../shared/icons.js';
+import SearchField from '../../search-field/index.js';
+import Avatar from '../../avatar/index.js';
+import { IconButton, Modal, Skeleton } from '@mui/material';
+import './styles/primereact.css.js';
+import './styles/stylesMulti.css.js';
+import Tooltip, { TooltipV2 } from '../tooltip/index.js';
+import Button from '../../buttons/index.js';
+
+function DropdownMultiselect(props) {
+    const { canShowAvatar = true, useTextFilter = false, searchTerm, hiddenAddAll, variantModeDescritpion, width, listItems, selectedDefault, getSelectedItems, onSearch, tagColor, darkMode } = props;
+    const [selectedValues, setSelectedValues] = useState(selectedDefault || []);
+    const [textFilter, setTextFilter] = useState(searchTerm || '');
+    const [listItemsFilter, setListItemsFilter] = useState(listItems);
+    const [showModal, setShowModal] = useState(false);
+    const [listFilterSearch, setListFilterSearch] = useState();
+    const [lazyLoading, setLazyLoading] = useState(false);
+    const [lazyItems, setLazyItems] = useState([]);
+    const loadLazyTimeout = useRef(null);
+    const getSelectedItemsRef = useRef(getSelectedItems);
+    const isFirstRender = useRef(true);
+    // Atualiza a lista de itens quando props.listItems muda
+    useEffect(() => {
+        if (listItems) {
+            setListItemsFilter(listItems);
+            setListFilterSearch(listItems);
+        }
+    }, [listItems]);
+    // Atualiza o termo de busca quando searchTerm muda
+    useEffect(() => {
+        if (searchTerm !== undefined) {
+            setTextFilter(searchTerm || '');
+        }
+    }, [searchTerm]);
+    // Filtra os itens quando useTextFilter está ativado
+    useEffect(() => {
+        if (!useTextFilter || !listItemsFilter)
+            return;
+        const temp = listItemsFilter.filter((resp) => resp.name.toLowerCase().includes(textFilter.toLowerCase()));
+        setListFilterSearch(temp);
+    }, [textFilter, listItemsFilter, useTextFilter]);
+    // Atualiza a ref com a versão mais recente de getSelectedItems
+    useEffect(() => {
+        getSelectedItemsRef.current = getSelectedItems;
+    }, [getSelectedItems]);
+    // Sincroniza selectedValues quando selectedDefault muda após o mount
+    useEffect(() => {
+        // Pula a primeira renderização pois o estado já foi inicializado corretamente
+        if (isFirstRender.current) {
+            isFirstRender.current = false;
+            return;
+        }
+        if (selectedDefault) {
+            setSelectedValues(selectedDefault);
+        }
+    }, [selectedDefault]);
+    // Notifica o componente pai sobre alterações nos valores selecionados
+    // Envolvendo em um useCallback para evitar loops infinitos
+    const notifySelectedItemsChange = useCallback(() => {
+        if (getSelectedItemsRef.current) {
+            getSelectedItemsRef.current(selectedValues);
+        }
+    }, [selectedValues]);
+    useEffect(() => {
+        notifySelectedItemsChange();
+    }, [notifySelectedItemsChange]);
+    const removeSelectedValue = (id) => {
+        setSelectedValues((prev) => {
+            const newValues = [...prev];
+            const index = newValues.map((value) => value.id).indexOf(id);
+            if (index !== -1) {
+                newValues.splice(index, 1);
+            }
+            return newValues;
+        });
+    };
+    const handleSearchChange = (value) => {
+        setTextFilter(value);
+        if (onSearch) {
+            onSearch(value);
+        }
+    };
+    const itemTemplate = (item) => {
+        const fullText = variantModeDescritpion
+            ? `${item?.name} ${item?.description ? `- ${item.description}` : ''} ${item?.subDescription ? `- ${item.subDescription}` : ''} ${!!item?.isVariant ? ' (Externo)' : ''}`
+            : `${item?.name} ${item?.description ? `(${item?.description})` : ''}`;
+        return (jsx(TooltipV2, { style: { maxWidth: '275px' }, content: fullText, children: props?.itemLayout ?
+                props.itemLayout(item)
+                :
+                    jsxs(selectItem, { id: "select-items", width: width, darkMode: darkMode, children: [canShowAvatar &&
+                                (item?.isVariant ? jsx(ExternalAvatar, {}) : jsx(Avatar, { src: item?.avatar, size: "24px" })), jsxs(TextContainer, { children: [item?.name, variantModeDescritpion ? (jsxs(Fragment, { children: [!!item?.description && ` - ${item.description}`, !!item?.subDescription && ` - ${item.subDescription}`, !!item?.isVariant && jsx("span", { style: { color: '#757575' }, children: ` (Externo)` })] })) : (item?.description && jsxs("span", { style: { color: '#757575' }, children: [" (", item.description, ") "] }))] })] }) }));
+    };
+    const selectTemplate = (option) => {
+        if (!option || option.length === 0)
+            return jsx(Fragment, {});
+        const pessoasAMais = selectedValues?.length - props.maxSelectedShow;
+        return (jsx(Fragment, { children: option.map((item, index) => {
+                if (index < props.maxSelectedShow) {
+                    return props.optionLayout ? (props.optionLayout(item)) : (jsxs(SelectTag, { id: "tag-container", isVariant: !!item?.isVariant, tagColor: tagColor, children: [canShowAvatar &&
+                                (item?.isVariant ? (externaAvatarBackgroundWhite) : (jsx(Avatar, { src: item?.avatar, size: "24px" }))), jsxs("p", { children: [" ", item?.name, " "] }), jsx(IconButton, { id: "close-icon", onClick: () => removeSelectedValue(item.id), children: jsx(CloseIcon, { width: "8", height: "8", fill: "#FFFFFF" }) })] }, index));
+                }
+                else if (index === props?.maxSelectedShow) {
+                    return (jsx(overShowInfo, { onClick: () => setShowModal(true), id: "number-people", darkMode: darkMode, children: jsx("p", { children: `+ ${pessoasAMais} ${pessoasAMais > 1 ? props?.people : props?.person}` }) }, index));
+                }
+                return null;
+            }) }));
+    };
+    const handleSelectAll = () => {
+        if (!listFilterSearch)
+            return;
+        setSelectedValues((prev) => {
+            const currentIds = new Set(prev.map(item => item.id));
+            const newItems = listFilterSearch.filter(value => !currentIds.has(value.id));
+            return [...prev, ...newItems];
+        });
+    };
+    const handleTemplateHeader = () => {
+        return (jsxs(searchAndButton, { children: [jsx("div", { style: { marginBottom: hiddenAddAll ? '0rem' : '1rem' }, children: jsx(SearchField, { placeholder: props.searchSelectPlaceholder ? props.searchSelectPlaceholder : 'Buscar', className: null, handleClickButton: null, isButton: true, hasSearchIcon: true, value: textFilter, onChange: (e) => handleSearchChange(e.target.value), darkMode: darkMode }) }), listFilterSearch?.length > 0 && !hiddenAddAll ? (jsx(Button, { id: "select-all", variant: 'link', label: props.btnSelectAllText ? props.btnSelectAllText : 'Selecionar todos', disabled: false, handleClick: handleSelectAll, style: { color: darkMode && '#F26818' } })) : (jsx(Fragment, {}))] }));
+    };
+    const selectValuesModal = () => {
+        if (!selectedValues || !showModal)
+            return null;
+        return (jsx(Modal, { open: showModal, onClose: () => setShowModal(false), children: jsxs(modalContainer, { id: "container-modal", children: [jsx(modalHeader, { id: "header-people", children: jsxs("p", { children: [props.modalTitle ? props.modalTitle : 'Este grupo é administrado por', ' ', selectedValues.length, " ", selectedValues.length > 1 ? props.people : props.person, ' '] }) }), jsx(modalContent, { children: selectedValues.map((item, index) => {
+                            return (jsxs(modalCards, { style: { background: index % 2 === 0 ? '#F2F2F2' : '#FFF' }, children: [jsxs("div", { style: { display: 'flex', gap: '12px' }, children: [canShowAvatar &&
+                                                (item?.isVariant ? (jsx(ExternalAvatar, { size: "50px" })) : (jsx(Avatar, { src: item?.avatar, size: "50px" }))), jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '4px' }, children: [jsxs(cardTitle, { children: [" ", item?.name, " "] }), jsxs(cardDescription, { children: [" ", item?.description, " "] }), jsxs(cardDescription, { children: [" ", item?.subDescription, " "] })] })] }), jsxs("div", { id: "remove-people-admin", style: { display: 'flex', cursor: 'pointer' }, onClick: () => removeSelectedValue(item?.id), children: [jsx(Trash, { fill: "#A50000", width: "24", height: "24" }), jsxs(cardTitle, { style: { color: '#A50000' }, children: [props?.removeModalText ? props.removeModalText : 'Remover', ' '] })] })] }, index));
+                        }) }), jsx(closeModal, { children: jsx(IconButton, { id: "close-modal", onClick: () => setShowModal(false), children: jsx(CloseIcon, {}) }) })] }) }));
+    };
+    const onLazyLoad = (event) => {
+        setLazyLoading(true);
+        if (loadLazyTimeout.current) {
+            clearTimeout(loadLazyTimeout.current);
+        }
+        //imitate delay of a backend call
+        loadLazyTimeout.current = setTimeout(() => {
+            const { first, last } = event;
+            const _lazyItems = [...lazyItems];
+            for (let i = first; i < last; i++) {
+                _lazyItems[i] = { label: `Item #${i}`, value: i };
+            }
+            setLazyItems(_lazyItems);
+            setLazyLoading(false);
+        }, Math.random() * 500 + 250);
+    };
+    const renderVirtualScrollerOptions = () => {
+        if (!props.activeLazyLoad)
+            return null;
+        return {
+            lazy: true,
+            onLazyLoad: onLazyLoad,
+            itemSize: 50,
+            showLoader: true,
+            loading: lazyLoading,
+            delay: 100,
+            loadingTemplate: (option) => (jsx("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    padding: 2,
+                    height: '50px'
+                }, children: jsx(Skeleton, { width: option.even ? '70%' : '60%', height: '2rem' }) }))
+        };
+    };
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(containerSelect, { style: { ...props.style }, id: "container-select", children: [selectedValues?.length > 0 && (jsxs(headerSelect, { darkMode: darkMode, children: [selectTemplate(selectedValues), selectedValues?.length > 1 && (jsx("div", { style: { zIndex: '1', position: 'absolute', right: 40 }, id: "remove-all-selected", children: jsx(Tooltip, { content: props.removeItemsToolTip ? props.removeItemsToolTip : 'Excluir todos', direction: "bottom", trigger: "hover", style: { height: 'auto' }, children: jsx(IconButton, { onClick: () => setSelectedValues([]), children: jsx(Trash, { fill: darkMode ? "#757575" : "#9C9C9C" }) }) }) }))] })), jsx(customSelect, { onClick: () => textFilter !== '' && setTextFilter(''), darkMode: darkMode, children: jsx(MultiSelect, { id: "list-selected", panelStyle: {
+                            display: props.isModalOpen !== undefined ? (props.isModalOpen ? 'block' : 'none') : 'block',
+                            background: darkMode ? '#323232' : '#fff'
+                        }, value: selectedValues, options: listFilterSearch, onChange: (e) => setSelectedValues(e.value), placeholder: props.selectPlaceholder ? props.selectPlaceholder : 'Selecione aqui', className: "custom-multiselect", panelClassName: darkMode ? 'custom-darkMode-dropdown' : 'custom-dropdown', dropdownIcon: jsx(DropdownIcon, { fill: darkMode ? FRSTTheme['colors'].neutralsGrey3 : FRSTTheme['colors'].shadeBlack }), panelHeaderTemplate: handleTemplateHeader(), itemTemplate: itemTemplate, disabled: props.isDisabled, maxSelectedLabels: 0, selectedItemsLabel: " ", style: {
+                            border: selectedValues?.length > 0 ? 'none' : `1px solid ${FRSTTheme['colors'].borderPrimary}`
+                        }, virtualScrollerOptions: renderVirtualScrollerOptions(), pt: {
+                            item: {
+                                style: {
+                                    borderColor: darkMode && '#444444'
+                                }
+                            }
+                        } }) }), selectValuesModal()] }) }));
+}
+const ExternalAvatar = ({ size = '24' }) => {
+    return (jsxs("svg", { width: size, height: size, viewBox: "0 0 25 24", fill: "white", children: [jsx("g", { children: jsx("path", { d: "M12.5231 0.333496C6.08311 0.333496 0.856445 5.56016 0.856445 12.0002C0.856445 18.4402 6.08311 23.6668 12.5231 23.6668C18.9631 23.6668 24.1898 18.4402 24.1898 12.0002C24.1898 5.56016 18.9631 0.333496 12.5231 0.333496ZM12.5231 3.8335C14.4598 3.8335 16.0231 5.39683 16.0231 7.3335C16.0231 9.27016 14.4598 10.8335 12.5231 10.8335C10.5864 10.8335 9.02311 9.27016 9.02311 7.3335C9.02311 5.39683 10.5864 3.8335 12.5231 3.8335ZM12.5231 20.4002C9.60645 20.4002 7.02811 18.9068 5.52311 16.6435C5.55811 14.3218 10.1898 13.0502 12.5231 13.0502C14.8448 13.0502 19.4881 14.3218 19.5231 16.6435C18.0181 18.9068 15.4398 20.4002 12.5231 20.4002Z", fill: "#6A3F86" }) }), jsx("defs", { children: jsx("clipPath", { children: jsx("rect", { width: size, height: size, fill: "white" }) }) })] }));
+};
+const externaAvatarBackgroundWhite = (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M11.9997 0.333496C5.55967 0.333496 0.333008 5.56016 0.333008 12.0002C0.333008 18.4402 5.55967 23.6668 11.9997 23.6668C18.4397 23.6668 23.6663 18.4402 23.6663 12.0002C23.6663 5.56016 18.4397 0.333496 11.9997 0.333496ZM11.9997 3.8335C13.9363 3.8335 15.4997 5.39683 15.4997 7.3335C15.4997 9.27016 13.9363 10.8335 11.9997 10.8335C10.063 10.8335 8.49967 9.27016 8.49967 7.3335C8.49967 5.39683 10.063 3.8335 11.9997 3.8335ZM11.9997 20.4002C9.08301 20.4002 6.50467 18.9068 4.99967 16.6435C5.03467 14.3218 9.66634 13.0502 11.9997 13.0502C14.3213 13.0502 18.9647 14.3218 18.9997 16.6435C17.4947 18.9068 14.9163 20.4002 11.9997 20.4002Z", fill: "white" }) }));
+
+export { DropdownMultiselect as default };

package/dist/esm/src/components/DS/dropdown-Multiselect/styles/multiselectStyles.js

@@ -0,0 +1,214 @@
+import styled from 'styled-components';
+
+const containerSelect = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex-direction: row-reverse;
+    gap: 12px;
+    width: ${({ width }) => (width ? width : '600px')};
+    min-height: 48px;
+    position: relative;
+
+    & > p {
+        font-family: 'PT Sans';
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 20.7px;
+        color: ${(props) => props.theme.colors.neutralsGrey1};
+    }
+`;
+const headerSelect = styled.div `
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-start;
+    overflow: hidden;
+    /* position: absolute; */
+    /* z-index: 999; */
+    background: ${(props) => props.darkMode ? '#272727' : props.theme.colors.shadeWhite};
+    border: 1px solid ${(props) => props.darkMode ? props.theme.colors.neutralsGrey2 : props.theme.colors.borderPrimary};
+    border-radius: 8px;
+    min-height: 48px;
+    display: flex;
+    width: 100%;
+    padding: 8px 52px 8px 10px;
+`;
+const customSelect = styled.div `
+    & .custom-multiselect {
+        background: transparent;
+        /* background: ${(props) => props.theme.colors.shadeWhite}; */
+        /* border: 1px solid ${(props) => props.theme.colors.borderPrimary}; */
+        border-radius: 8px;
+        height: 100%;
+        display: flex;
+        width: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+
+        :hover {
+            border: 1px solid #f18624;
+        }
+
+        .p-placeholder {
+            color: ${(props) => props.theme.colors.neutralsGrey4};
+            font-weight: 400;
+            font-size: 14px;
+            font-family: 'PT Sans';
+            line-height: 18.12px;
+        }
+
+        .p-multiselect-label-container {
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+    }
+    .p-multiselect:not(.p-disabled).p-focus {
+        box-shadow: none;
+        border: 2px #f26818 solid;
+    }
+`;
+const searchAndButton = styled.div `
+    display: flex;
+    padding: 1rem;
+    flex-direction: column;
+`;
+const selectItem = styled.div `
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-family: 'PT Sans';
+    font-size: 16px;
+    font-weight: 400;
+    width: ${({ width }) => (width ? width : '600px')};
+    color: ${(props) => props.darkMode ? props.theme.colors.shadeWhite : props.theme.colors.neutralsGrey1};
+`;
+const TextContainer = styled.div `
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+`;
+const SelectTag = styled.div `
+    display: inline-flex;
+    align-items: center;
+    min-height: 32px;
+    background: ${({ isVariant, tagColor }) => (tagColor ? tagColor : isVariant ? '#6A3F86' : '#00828c')};
+    border-radius: 4px;
+    gap: 8px;
+    padding: 4px 8px;
+    margin: 5px 10px 5px 0;
+    z-index: 1;
+
+    :hover {
+        background: ${({ isVariant, tagColor }) => (tagColor ? tagColor : isVariant ? '#6A3F86' : '#1f6e74')};
+    }
+
+    & > p {
+        font-family: 'PT Sans';
+        font-size: 14px;
+        font-weight: 700;
+        line-height: 18.12px;
+        text-align: left;
+        color: ${(props) => props.theme.colors.shadeWhite};
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+    }
+`;
+const overShowInfo = styled.div `
+    height: 32px;
+    padding: 4px 8px;
+    margin: 5px 10px 5px 0;
+    z-index: 1;
+    cursor: pointer;
+
+    & :hover {
+        color: ${(props) => props.darkMode ? props.theme.colors.shadeWhite : props.theme.colors.neutralsGrey1};
+    }
+
+    & > p {
+        font-family: 'PT Sans';
+        font-size: 14px;
+        font-weight: 700;
+        line-height: 18.12px;
+        text-align: center;
+        color: ${(props) => props.darkMode ? props.theme.colors.neutralsGrey6 : props.theme.colors.neutralsGrey2};
+    }
+`;
+const modalContainer = styled.div `
+    width: 520px;
+    max-height: 500px;
+
+    display: flex;
+    flex-direction: column;
+    background: ${(props) => props.theme.colors.shadeWhite};
+    border: 2px solid ${(props) => props.theme.colors.borderPrimary};
+    border-radius: 16px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    overflow: hidden;
+`;
+const modalHeader = styled.div `
+    padding: 36px 24px;
+    & > p {
+        font-family: 'Work Sans';
+        font-weight: 700;
+        font-size: 18px;
+        line-height: 21.11px;
+        color: ${(props) => props.theme.colors.neutralsGrey1};
+    }
+`;
+const modalContent = styled.div `
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+
+    ::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    ::-webkit-scrollbar-track {
+        display: none;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        width: 4px;
+        border-radius: 12px;
+        background: #bdbdbd;
+    }
+`;
+const modalCards = styled.div `
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+    padding: 24px;
+`;
+const cardTitle = styled.div `
+    font-family: 'PT Sans';
+    font-size: 16px;
+    line-height: 17.6px;
+    font-weight: 700;
+    color: ${(props) => props.theme.colors.neutralsGrey1};
+`;
+const cardDescription = styled.div `
+    font-family: 'PT Sans';
+    font-size: 16px;
+    line-height: 17.6px;
+    font-weight: 400;
+    color: ${(props) => props.theme.colors.neutralsGrey1};
+`;
+const closeModal = styled.div `
+    position: absolute;
+    top: 12px;
+    right: 20px;
+`;
+
+export { SelectTag, TextContainer, cardDescription, cardTitle, closeModal, containerSelect, customSelect, headerSelect, modalCards, modalContainer, modalContent, modalHeader, overShowInfo, searchAndButton, selectItem };