groovinads-ui 1.2.50 → 1.2.51

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.50",
+	"version": "1.2.51",
 	"keywords": [
 		"css",
 		"sass",

package/src/components/Dropdowns/DropdownSimpleDatePicker.jsx

@@ -1,8 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { useEffect, useState } from 'react'
-
-// HOOKS
-import { useTextFormatter } from '../../hooks';
+import React, { useEffect, useRef, useState } from 'react'
 
 // COMPONENTS
 import { Dropdown } from 'react-bootstrap'
@@ -22,12 +19,22 @@ export default function DropdownSimpleDatePicker({
     setDate,
 	handleClear,
 }) {
-
+    
     const [internalShow, setInternalShow] = useState(!!show);
-
+    const dropdownRef = useRef(null);
+    
+    const handleGlobalToggle = (event) => {
+        if (event.detail !== inputLabel) {
+            closeDropdown();
+        }
+    };
 
     const internalToggle = () => {
-        setInternalShow((prevShow) => !prevShow);
+        const newShowState = !internalShow;
+        setInternalShow(newShowState);
+
+        if (newShowState)  window.dispatchEvent(new CustomEvent('dropdownToggle', { detail: inputLabel }));
+        
         try {
             onToggle();
         } catch (error) { }
@@ -41,22 +48,36 @@ export default function DropdownSimpleDatePicker({
     };
 
     const updateDateFilters = (newDate) => {
+        setDate(newDate?.toString());
         setTimeout(() => {
-            setDate(newDate?.toString());
             closeDropdown();
-        }, 100);
+        }, 200);
     };
 
    
 	const clearDate = () => {
+        closeDropdown();
+
         if (handleClear) {
             handleClear()
             return
         }
         setDate(null);
-        closeDropdown();
     }
 
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                closeDropdown();
+            }
+        };
+
+        document.addEventListener('click', handleClickOutside);
+        return () => {
+            document.removeEventListener('click', handleClickOutside);
+        };
+    }, []);
+
     useEffect(() => {
         setInternalShow(!!show);
     }, [show]);
@@ -65,6 +86,7 @@ export default function DropdownSimpleDatePicker({
         <Dropdown
             show={internalShow}
             className={className}
+            ref={dropdownRef}
         >
             <Dropdown.Toggle
                 variant='toggle-filter'
@@ -76,7 +98,7 @@ export default function DropdownSimpleDatePicker({
                     {(date || '').toString().split('00')[0]}
                 </span>
 
-                <Icon iconName='angle-down' />
+                <Icon iconName='angle-down' className={'caret'} />
 
             </Dropdown.Toggle>
 

package/src/stories/DropdownComponent.stories.jsx

@@ -55,7 +55,7 @@ const Template = (args) => {
 						className='dropdown-toggle'
 						// onClick={() => handleToggle()}
 					>
-						<span>Add filter</span>
+						<span>Add filters</span>
 						<Icon iconName='chevron-down' className='ms-2' />
 					</Button>
 

package/src/stories/DropdownSimpleDatePicker.stories.jsx

@@ -9,22 +9,45 @@ export default {
 const Template = (args) => {
 	const [show, setShow] = useState(false);
 
-	const [date, setDate] = useState('');
-
-	const clearData = () => {
-		console.log('afuera');
-	}
+	const [startDate, setStartDate] = useState('');
+	const [endDate, setEndDate] = useState('');
 
 	return (
+		// <>
+		// 	<button onClick={() => setShow(!show)}>Toggle</button>
+		// 	<div className='col-2'>
+		// 		<DropdownSimpleDatePicker
+		// 			{...args}
+		// 			dateFrom={dateFrom}
+		// 			setDateFrom={setDateFrom}
+		// 			date={dateTo}
+		// 			setDate={setDateTo}
+		// 		/>
+		// 	</div>
+		// </>
+
 		<>
-			<button onClick={() => setShow(!show)}>Toggle</button>
-			<div className='col-2 mt-3'>
-				<DropdownSimpleDatePicker
-					{...args}
-					date={date}
-					setDate={setDate}
-					handleClear={clearData}
-				/>
+			<div className='d-flex justify-content-between mt-3'>
+				{/* DROPDOWN TO TEST THE handleGlobalToggle */}
+
+				<div className='col-3'>
+					<DropdownSimpleDatePicker
+						{...args}
+						inputLabel="Start Date"
+						date={startDate}
+						setDate={setStartDate}
+					/>
+				</div>
+				
+				<div className='col-3'>
+					<DropdownSimpleDatePicker
+						{...args}
+						inputLabel="End Date"
+						date={endDate}
+						setDate={setEndDate}
+						handleClear={() => {console.log('Aqui');}}
+					/>
+				</div>
 			</div>
 		</>
 	);