l-min-components 1.0.528 → 1.0.531

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.528",
+  "version": "1.0.531",
   "type": "module",
   "files": [
     "src/assets",

package/src/components/dropdown component/index.jsx

@@ -17,6 +17,7 @@ import {
  * inputPlaceHolder: string,
  * default: {name:  string | number, [key: string]: string | number}
  * toggleOnHover: boolean
+ * valueSelect: {name:  string | number, [key: string]: string | number}
  * }} props - properties of the dropdown component
  */
 // dropdownData - Array of objects with property values of name and value
@@ -42,14 +43,14 @@ const DropDownComponent = (props) => {
   // click outside closes the dropdown menu
   const handleClickOutside = (event) => {
     if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-      setDropdown(false)
+      setDropdown(false);
     }
   };
 
   useEffect(() => {
-    document.addEventListener('click', handleClickOutside);
+    document.addEventListener("click", handleClickOutside);
     return () => {
-      document.removeEventListener('click', handleClickOutside);
+      document.removeEventListener("click", handleClickOutside);
     };
   }, []);
 
@@ -59,12 +60,12 @@ const DropDownComponent = (props) => {
   }, [selected]);
 
   const handleDropdownToggle = () => {
-    setDropdown(prevDropdown => !prevDropdown);
+    setDropdown((prevDropdown) => !prevDropdown);
   };
 
   return (
-    <DropDownContainer 
-      className={props?.className} 
+    <DropDownContainer
+      className={props?.className}
       ref={dropdownRef}
       onMouseEnter={() => props.toggleOnHover && setDropdown(true)}
       onMouseLeave={() => props.toggleOnHover && setDropdown(false)}
@@ -75,7 +76,7 @@ const DropDownComponent = (props) => {
           <ControlInput
             placeholder={props?.inputPlaceHolder || "Select Dropdown"}
             type="text"
-            value={selected?.name}
+            value={props?.valueSelect?.name || selected?.name}
             onChange={(e) => {
               setSearchParam(e.target.value);
             }}
@@ -84,8 +85,10 @@ const DropDownComponent = (props) => {
           />
         ) : (
           // <p onClick={() => setDropdown(!dropdown)}>
-            <p onClick={handleDropdownToggle}>
-            {selected?.name || props?.inputPlaceHolder}
+          <p onClick={handleDropdownToggle}>
+            {props?.valueSelect?.name ||
+              selected?.name ||
+              props?.inputPlaceHolder}
           </p>
         )}
         {/* <DownIcon onClick={() => setDropdown(!dropdown)} /> */}
@@ -107,7 +110,9 @@ const DropDownComponent = (props) => {
                     }}
                   >
                     <span>{dropdownItem?.name}</span>
-                    {selected === dropdownItem && <Tick />}
+                    {(props?.valueSelect || selected) === dropdownItem && (
+                      <Tick />
+                    )}
                   </DropDownItem>
                 );
             })}
@@ -125,7 +130,9 @@ const DropDownComponent = (props) => {
                   }}
                 >
                   <span>{dropdownItem?.name}</span>
-                  {selected === dropdownItem && <Tick />}
+                  {(props?.valueSelect || selected) === dropdownItem && (
+                    <Tick />
+                  )}
                 </DropDownItem>
               );
             })}
@@ -152,7 +159,7 @@ export const DownIcon = ({ width, height, fill, onClick }) => {
         stroke={fill || "#7C8080"}
         strokeWidth="2"
         strokeLinecap="round"
-        strokeLinejoin="round"     
+        strokeLinejoin="round"
       />
     </svg>
   );