groovinads-ui 1.2.42 → 1.2.44

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "groovinads-ui",
 	"description": "Groovinads UI is a React component library designed exclusively for Groovinads applications. It provides ready-to-use UI elements styled according to Groovinads design guidelines to facilitate rapid development.",
-	"version": "1.2.42",
+	"version": "1.2.44",
 	"keywords": [
 		"css",
 		"sass",

package/src/components/Dropdowns/DropdownFilter.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 
 // BOOTSTRAP
@@ -18,12 +18,18 @@ const DropdownFilter = ({
 	locked = false,
 	onRemoveFilter,
 	show,
+	setShow,
 	onToggle,
 	overflow = false,
 	className = '',
+	autoClose,
 }) => {
 	const [query, setQuery] = useState('');
 
+	const [innerShow, setInnerShow] = useState(!!show);
+
+	const dropdownRef = useRef(null);
+
 	const EmptySpace = () => {
 		return (
 			<div className='dropdown-filter-empty-space'>
@@ -55,14 +61,44 @@ const DropdownFilter = ({
 	const handlePill = (index) =>
 		setValuesSelected(valuesSelected.filter((item, i) => i !== index));
 
+	useEffect(() => {
+		setInnerShow(show);
+	}, [show]);
+
+	const handleClickOutside = useCallback((event) => {
+		if (
+			dropdownRef?.current &&
+			!dropdownRef?.current.contains(event?.target) &&
+			(autoClose === true || autoClose === 'outside')
+		) {
+			setInnerShow(false);
+			setShow(false);
+		}
+	}, []);
+
+	useEffect(() => {
+		document.addEventListener('click', handleClickOutside);
+		return () => {
+			document.removeEventListener('click', handleClickOutside);
+		};
+	}, []);
+
 	return (
 		<Dropdown
-			show={show}
 			onToggle={onToggle}
 			className={`dropdown-filter ${locked ? 'locked' : ''} ${className}`}
-			autoClose={false}
+			autoClose={autoClose}
+			show={innerShow}
+			ref={dropdownRef}
 		>
-			<Dropdown.Toggle variant='toggle-filter'>
+			<Dropdown.Toggle
+				variant='toggle-filter'
+				onClick={(e) => {
+					e.stopPropagation(); // Detiene la propagación del clic
+					setInnerShow((prevShow) => !prevShow); // Alterna el estado interno del dropdown
+					setShow((prevShow) => !prevShow); // Alterna el estado del dropdown en el estado externo también
+				}}
+			>
 				<div className='filter-heading'>
 					<div className='filter-title'>
 						<span>{title}</span>
@@ -258,9 +294,11 @@ DropdownFilter.propTypes = {
 	locked: PropTypes.bool,
 	onRemoveFilter: PropTypes.func,
 	show: PropTypes.bool,
+	setShow: PropTypes.func,
 	onToggle: PropTypes.func,
 	overflow: PropTypes.bool,
 	className: PropTypes.string,
+	autoClose: PropTypes.bool,
 };
 
 export default DropdownFilter;

package/src/components/Dropdowns/DropdownMultiSelect.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 
 // BOOTSTRAP
@@ -26,6 +26,7 @@ const DropdownMultiSelect = ({
 	setValuesSelected,
 	values = [],
 	show,
+	setShow,
 	idInPill = false,
 	showStatus = '',
 	focus = false,
@@ -33,6 +34,9 @@ const DropdownMultiSelect = ({
 	nowrap = false,
 }) => {
 	const [query, setQuery] = useState('');
+	const [innerShow, setInnerShow] = useState(!!show);
+
+	const dropdownRef = useRef(null);
 
 	const { highlightText } = useTextFormatter();
 
@@ -69,16 +73,47 @@ const DropdownMultiSelect = ({
 				(showStatus ? parseInt(item.status) === parseInt(showStatus) : true),
 		);
 
+	useEffect(() => {
+		setInnerShow(show);
+	}, [show]);
+
+	const handleClickOutside = useCallback((event) => {
+		if (
+			dropdownRef?.current &&
+			!dropdownRef?.current.contains(event?.target) &&
+			(autoClose === true || autoClose === 'outside')
+		) {
+			setInnerShow(false);
+			setShow(false);
+		}
+	}, []);
+
+	useEffect(() => {
+		document.addEventListener('click', handleClickOutside);
+		return () => {
+			document.removeEventListener('click', handleClickOutside);
+		};
+	}, []);
+
 	return (
 		<Dropdown
 			className={className}
 			autoClose={autoClose}
-			show={show}
+			show={innerShow}
+			ref={dropdownRef}
 			onToggle={onToggle}
 			drop={drop}
 		>
-			<Dropdown.Toggle as={'div'} className={`btn btn-${buttonVariant} w-100 ${nowrap ? 'nowrap' : ''}`}>
-				{( valuesSelected.length > 0 && buttonVariant === 'input' ) && (
+			<Dropdown.Toggle
+				as={'div'}
+				className={`btn btn-${buttonVariant} w-100 ${nowrap ? 'nowrap' : ''}`}
+				onClick={(e) => {
+					e.stopPropagation(); // Detiene la propagación del clic
+					setInnerShow((prevShow) => !prevShow); // Alterna el estado interno del dropdown
+					setShow((prevShow) => !prevShow); // Alterna el estado del dropdown en el estado externo también
+				}}
+			>
+				{valuesSelected.length > 0 && buttonVariant === 'input' && (
 					<div className='wrapper'>
 						{valuesSelected.map((value, index) => {
 							return (
@@ -181,6 +216,7 @@ DropdownMultiSelect.propTypes = {
 	setValuesSelected: PropTypes.func,
 	values: PropTypes.array,
 	show: PropTypes.bool,
+	setShow: PropTypes.func,
 	object: PropTypes.bool,
 	nameKey: PropTypes.string,
 	idKey: PropTypes.string,

package/src/components/Navigation/Tabnav.jsx

@@ -11,8 +11,9 @@ import useTextFormatter from '../../hooks/useTextFormatter';
 function Tabnav({
 	tabs = [],
 	activeTab = 1,
-	navigateTab= false,
+	navigateTab = false,
 	setActiveTab,
+	onNavigate,
 }) {
 	const { toCamelCase } = useTextFormatter();
 
@@ -22,19 +23,16 @@ function Tabnav({
 	const handleSelect = (k) => {
 		if (navigateTab) {
 			const tab = tabs.find((tab) => toCamelCase(tab.tab) === k);
-			console.log(tab.url);
-			window.location.href = tab.url;
-		}else{
-			// console.log('Valor de k:', k);
+			onNavigate(tab.url);
+		} else {
 			const tabIndex = tabs.findIndex((tab) => toCamelCase(tab.tab) === k) + 1;
 			setActiveTab ? setActiveTab(tabIndex) : setActiveTabState(tabIndex);
 		}
 	};
 
 	const formatTabsName = (tab) => {
-		if (tab === 'api_keys') {
-			return 'API Keys';
-		}
+		if (tab === 'api_keys') return 'API Keys';
+
 		const tabReplace = tab.replace('_', ' ');
 		return tabReplace.charAt(0).toUpperCase() + tabReplace.slice(1);
 	};
@@ -46,10 +44,10 @@ function Tabnav({
 	return (
 		<Nav
 			variant='tabs'
-			activeKey={toCamelCase(tabs[activeTabState - 1].tab)}
+			activeKey={toCamelCase(tabs[activeTabState - 1]?.tab)}
 			onSelect={handleSelect}
 		>
-			{tabs.map(({ tab, badgeNumber, warningIcon }, index) => {
+			{(tabs || [])?.map(({ tab, badgeNumber, warningIcon }, index) => {
 				return (
 					<Nav.Item key={`tabs.tab: ${index}`}>
 						<Nav.Link eventKey={toCamelCase(tab)}>
@@ -67,7 +65,7 @@ function Tabnav({
 Tabnav.propTypes = {
 	tabs: PropTypes.array.isRequired,
 	activeTab: PropTypes.number,
-  	customFunction: PropTypes.bool,
+	customFunction: PropTypes.bool,
 	navigateTab: PropTypes.bool,
 	setExternalTab: PropTypes.func,
 };