l-min-components 1.0.531 → 1.0.536

package/package.json

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

package/src/components/AdminAppMainLayout/index.styled.js

@@ -22,6 +22,7 @@ export const LeftLayout = styled.div`
   display: flex;
   flex-direction: column;
   height: 100vh;
+  z-index: 10;
 `;
 
 export const CenterLayout = styled.div`
@@ -29,6 +30,7 @@ export const CenterLayout = styled.div`
   /* margin-left: 280px; */
   overflow-x: hidden;
   position: relative;
+  height: 100vh;
 `;
 
 export const InnerCenterLayout = styled.div`
@@ -41,6 +43,7 @@ export const InnerCenterLayout = styled.div`
   /* "auto" or "thin" depending on browser support */
   scrollbar-color: transparent transparent;
   /* color values for thumb and track */
+  height: 100vh;
 
   &::-webkit-scrollbar {
     width: 6px;

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

@@ -17,6 +17,7 @@ import {
  * onSelect: Function,
  * inputPlaceHolder: string,
  * default: {name:  string | number, [key: string]: string | number}
+ * valueSelect: {name:  string | number, [key: string]: string | number}
  * toggleOnHover: boolean
  * loadMoreData: Function
  * isLoading: boolean,
@@ -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,10 +60,9 @@ const DropDownComponent = (props) => {
   }, [selected]);
 
   const handleDropdownToggle = () => {
-    setDropdown(prevDropdown => !prevDropdown);
+    setDropdown((prevDropdown) => !prevDropdown);
   };
 
-
   const handleScroll = (e) => {
     const { scrollTop, scrollHeight, clientHeight } = e.target;
     const isBottom = scrollTop + clientHeight >= scrollHeight - 10; // Adjusted threshold to 10px
@@ -71,19 +71,18 @@ const DropDownComponent = (props) => {
       props.loadMoreData();
     }
   };
-  
+
   useEffect(() => {
     const listElement = dropdownListRef.current;
     if (listElement) {
-      listElement.addEventListener('scroll', handleScroll);
-      return () => listElement.removeEventListener('scroll', handleScroll);
+      listElement.addEventListener("scroll", handleScroll);
+      return () => listElement.removeEventListener("scroll", handleScroll);
     }
   }, [props.dropdownData]);
-  
 
   return (
-    <DropDownContainer 
-      className={props?.className} 
+    <DropDownContainer
+      className={props?.className}
       ref={dropdownRef}
       onMouseEnter={() => props.toggleOnHover && setDropdown(true)}
       onMouseLeave={() => props.toggleOnHover && setDropdown(false)}
@@ -94,7 +93,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);
             }}
@@ -103,8 +102,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)} /> */}
@@ -126,7 +127,9 @@ const DropDownComponent = (props) => {
                     }}
                   >
                     <span>{dropdownItem?.name}</span>
-                    {selected === dropdownItem && <Tick />}
+                    {(props?.valueSelect || selected) === dropdownItem && (
+                      <Tick />
+                    )}
                   </DropDownItem>
                 );
             })}
@@ -144,14 +147,17 @@ const DropDownComponent = (props) => {
                   }}
                 >
                   <span>{dropdownItem?.name}</span>
-                  {selected === dropdownItem && <Tick />}
+                  {(props?.valueSelect || selected) === dropdownItem && (
+                    <Tick />
+                  )}
                 </DropDownItem>
               );
             })}
             <div className={showLoader ? "loader" : ""}>
-                {isLoading && showLoader && props?.dropdownData?.length > 0 && <LoaderCustom />}
+              {isLoading && showLoader && props?.dropdownData?.length > 0 && (
+                <LoaderCustom />
+              )}
             </div>
-             
           </DropDownContent>
         )}
       </DropDownControls>
@@ -175,7 +181,7 @@ export const DownIcon = ({ width, height, fill, onClick }) => {
         stroke={fill || "#7C8080"}
         strokeWidth="2"
         strokeLinecap="round"
-        strokeLinejoin="round"     
+        strokeLinejoin="round"
       />
     </svg>
   );