groovinads-ui 1.2.41 → 1.2.43

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.41",
+	"version": "1.2.43",
 	"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,13 +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'>
@@ -37,46 +42,69 @@ const DropdownFilter = ({
 					<p>It looks like this value does not exist.</p>
 				</div>
 			</div>
-		)
-	}
+		);
+	};
 
 	const handleCheckbox = (value, i) => {
-        if (value) setValuesSelected([...valuesSelected, values[i]]);
-        else setValuesSelected(valuesSelected.filter((item) => item !== values[i]));
-    };
+		if (value) setValuesSelected([...valuesSelected, values[i]]);
+		else setValuesSelected(valuesSelected.filter((item) => item !== values[i]));
+	};
 
 	const selectAll = () => {
 		setValuesSelected([...values]);
-	}
+	};
 
 	const clearSelection = () => {
 		setValuesSelected([]);
-	}
+	};
 
 	const handlePill = (index) =>
-        setValuesSelected(valuesSelected.filter((item, i) => i !== 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'
+				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>
 						{locked && (
-                            <Icon
-                                style={'solid'}
-                                iconName={'lock-keyhole'}
-                                scale={0.7}
-                            />
-                        )}
+							<Icon style={'solid'} iconName={'lock-keyhole'} scale={0.7} />
+						)}
 					</div>
 					<Icon
 						style={'solid'}
@@ -86,7 +114,11 @@ const DropdownFilter = ({
 					/>
 				</div>
 				<div className='filter-values'>
-					{ valuesSelected.length === values.length ? 'All selected' : valuesSelected.length ? valuesSelected.join('; ') : 'None'}
+					{valuesSelected.length === values.length
+						? 'All selected'
+						: valuesSelected.length
+							? valuesSelected.join('; ')
+							: 'None'}
 				</div>
 			</Dropdown.Toggle>
 			{!locked && (
@@ -100,9 +132,17 @@ const DropdownFilter = ({
 			)}
 
 			{menuType === 'simple' && (
-                <Dropdown.Menu
+				<Dropdown.Menu
 					className='dropdown-menu-simple'
-					popperConfig={overflow ? { strategy: 'fixed', onFirstUpdate: () => window.dispatchEvent(new CustomEvent('scroll')) } : undefined}
+					popperConfig={
+						overflow
+							? {
+									strategy: 'fixed',
+									onFirstUpdate: () =>
+										window.dispatchEvent(new CustomEvent('scroll')),
+								}
+							: undefined
+					}
 				>
 					<div className='dropdown-menu-wrapper'>
 						<Input
@@ -111,35 +151,50 @@ const DropdownFilter = ({
 							icon='magnifying-glass'
 							className='w-100'
 							value={query}
-							onChange={({target}) => setQuery(target.value)}
+							onChange={({ target }) => setQuery(target.value)}
 							customRef={show}
 						/>
-						{values.filter( (item) => item.toLowerCase().includes(query.toLowerCase() ) ).length > 0 ? (
+						{values.filter((item) =>
+							item.toString().toLowerCase().includes(query.toLowerCase()),
+						).length > 0 ? (
 							<ul className='dropdown-filter-list'>
 								{/* List values */}
-								{values.filter( (item) => item.toLowerCase().includes(query.toLowerCase() ) ).map((value, index) => {
-									return (
-										<Checkbox
-											setStatus={ (status) => {handleCheckbox(status, index)} }
-											status={valuesSelected.includes(value)}
-											key={'Dropdown.Simple.Checkbox' + index}
-										>
-											{value}
-										</Checkbox>
+								{values
+									.filter((item) =>
+										item.toString().toLowerCase().includes(query.toLowerCase()),
 									)
-								})}
+									.map((value, index) => {
+										return (
+											<Checkbox
+												setStatus={(status) => {
+													handleCheckbox(status, index);
+												}}
+												status={valuesSelected.includes(value)}
+												key={'Dropdown.Simple.Checkbox' + index}
+											>
+												{value}
+											</Checkbox>
+										);
+									})}
 							</ul>
 						) : (
 							<EmptySpace />
 						)}
 					</div>
-
-                </Dropdown.Menu>
-            )}
-            {menuType === 'selection' && (
-                 <Dropdown.Menu
-				 	className='dropdown-menu-selection'
-					popperConfig={overflow ? { strategy: 'fixed', onFirstUpdate: () => window.dispatchEvent(new CustomEvent('scroll')) } : undefined}
+				</Dropdown.Menu>
+			)}
+			{menuType === 'selection' && (
+				<Dropdown.Menu
+					className='dropdown-menu-selection'
+					popperConfig={
+						overflow
+							? {
+									strategy: 'fixed',
+									onFirstUpdate: () =>
+										window.dispatchEvent(new CustomEvent('scroll')),
+								}
+							: undefined
+					}
 				>
 					<div className='dropdown-menu-wrapper'>
 						<div className='dropdown-filter-list-wrapper'>
@@ -149,25 +204,36 @@ const DropdownFilter = ({
 								icon='magnifying-glass'
 								className='w-100'
 								value={query}
-								onChange={({target}) => setQuery(target.value)}
+								onChange={({ target }) => setQuery(target.value)}
 								customRef={show}
 							/>
 							<h4>All values ({values.length})</h4>
-							{values.filter( (item) => item.toLowerCase().includes(query.toLowerCase() ) ).length > 0 ? (
+							{values.filter((item) =>
+								item.toString().toLowerCase().includes(query.toLowerCase()),
+							).length > 0 ? (
 								<>
 									<ul className='dropdown-filter-list'>
 										{/* List values */}
-										{values.filter( (item) => item.toLowerCase().includes(query.toLowerCase() ) ).map((value, index) => {
-											return (
-												<Checkbox
-													setStatus={ (status) => {handleCheckbox(status, index)} }
-													status={valuesSelected.includes(value)}
-													key={'Dropdown.Selection.Checkbox' + index}
-												>
-													{value}
-												</Checkbox>
+										{values
+											.filter((item) =>
+												item
+													.toString()
+													.toLowerCase()
+													.includes(query.toLowerCase()),
 											)
-										})}
+											.map((value, index) => {
+												return (
+													<Checkbox
+														setStatus={(status) => {
+															handleCheckbox(status, index);
+														}}
+														status={valuesSelected.includes(value)}
+														key={'Dropdown.Selection.Checkbox' + index}
+													>
+														{value}
+													</Checkbox>
+												);
+											})}
 									</ul>
 								</>
 							) : (
@@ -201,19 +267,20 @@ const DropdownFilter = ({
 										<PillComponent
 											color='light'
 											closeButton={true}
-											onClick={ () => { handlePill(index) } }
+											onClick={() => {
+												handlePill(index);
+											}}
 											key={'Dropdown.PillComponent' + index}
 										>
 											{value}
 										</PillComponent>
-									)
+									);
 								})}
 							</div>
 						</div>
 					</div>
-
-                </Dropdown.Menu>
-            )}
+				</Dropdown.Menu>
+			)}
 		</Dropdown>
 	);
 };
@@ -227,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;
+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);
 	};
@@ -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,
 };