l-min-components 1.0.159 → 1.0.164

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.159",
+  "version": "1.0.164",
   "type": "module",
   "files": [
     "src/assets",
@@ -12,6 +12,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.4.0",
+    "axios-hooks": "^4.0.0",
     "chart.js": "^4.2.1",
     "classnames": "^2.3.2",
     "moment": "^2.29.4",

package/src/components/button/index.jsx

@@ -19,8 +19,8 @@ import styled from "styled-components";
  *
  */
 const ButtonComponent = (props) => {
-  const handleClick = useCallback(() => {
-    props.onClick && props.onClick();
+  const handleClick = useCallback((e) => {
+    props.onClick && props.onClick(e);
   }, []);
   // console.log(props);
   switch (props.type) {

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

@@ -48,25 +48,34 @@ const DropDownComponent = (props) => {
           <ControlInput
             placeholder={props?.inputPlaceHolder || "Select Dropdown"}
             type="text"
+            value={selected?.name}
             onChange={(e) => {
               setSearchParam(e.target.value);
             }}
+            onClick={() => setDropdown(true)}
           />
         ) : (
-          <p onClick={() => setDropdown(!dropdown)}>{selected?.name}</p>
+          <p onClick={() => setDropdown(!dropdown)}>
+            {selected?.name || "Select Dropdown"}
+          </p>
         )}
         <DownIcon onClick={() => setDropdown(!dropdown)} />
         {searchParam && dropdown && (
           <DropDownContent>
             {props?.dropdownData?.map((dropdownItem, idx) => {
-              if (props?.dropdownData[idx]?.name?.includes(searchParam))
+              if (
+                props?.dropdownData[idx]?.name
+                  ?.toLowerCase()
+                  .includes(searchParam?.toLowerCase())
+              )
                 return (
                   <DropDownItem
                     key={idx}
                     onClick={() => {
                       setSelected(dropdownItem);
                       setDropdown();
-                    }}>
+                    }}
+                  >
                     <span>{dropdownItem?.name}</span>
                     {selected === dropdownItem && <Tick />}
                   </DropDownItem>
@@ -83,7 +92,8 @@ const DropDownComponent = (props) => {
                   onClick={() => {
                     setSelected(dropdownItem);
                     setDropdown();
-                  }}>
+                  }}
+                >
                   <span>{dropdownItem?.name}</span>
                   {selected === dropdownItem && <Tick />}
                 </DropDownItem>
@@ -105,7 +115,8 @@ export const DownIcon = ({ width, height, fill, onClick }) => {
       viewBox="0 0 14 8"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      onClick={onClick}>
+      onClick={onClick}
+    >
       <path
         d="M1 1L7 7L13 1"
         stroke={fill || "#18191B"}
@@ -123,7 +134,8 @@ export const Tick = ({ size, stroke }) => {
       height={size || "16"}
       viewBox="0 0 16 16"
       fill="none"
-      xmlns="http://www.w3.org/2000/svg">
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <path
         d="M12.3828 4.23828L5.82031 11.7383L3.00781 8.92578"
         stroke={stroke || "white"}

package/src/components/dropdown component/styles.js

@@ -42,21 +42,24 @@ export const ControlInput = styled.input`
   outline: none;
   border: none;
   cursor: caret;
+  background: none;
 `;
 
 export const DropDownContent = styled.ul`
   position: absolute;
-  top: 25px;
+  top: 35px;
   left: 0;
   list-style-type: none;
   padding-left: 20px;
   width: 100%;
-  padding: 4px;
+  max-height: 200px;
+  overflow-y: scroll;
+  // padding: 4px 10px;
 `;
 
 export const DropDownItem = styled.li`
   font-family: "Nunito", sans-serif;
-  padding: 4px;
+  padding: 4px 10px;
   font-size: 14px;
   display: flex;
   align-items: center;