l-min-components 1.0.379 → 1.0.382

package/package.json

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

package/src/components/searchBar/index.jsx

@@ -20,22 +20,24 @@ const SearchBar = ({
   asyncResult,
   inFilter,
   outFilter,
+  children,
+  onChange,
+  hasCustomDropdown = false,
   ...restProps
 }) => {
   const [searchValue, setSearchValue] = useState("");
   const [showSuggestions, setShowSuggestions] = useState(false);
   const [suggestions, setSuggestions] = useState([]);
 
-   const handleInputChange = async (event) => {
-     const value = event.target.value;
-     setSearchValue(value);
-
-     if (asyncResult) {
-       const suggestions = await asyncResult(value);
-       setSuggestions(suggestions);
-       setShowSuggestions(true);
-     }
-   };
+  const handleInputChange = async (event) => {
+    const value = event.target.value;
+    setSearchValue(value);
+    if (asyncResult) {
+      const suggestions = await asyncResult(value);
+      setSuggestions(suggestions);
+      setShowSuggestions(true);
+    }
+  };
 
   const handleEnterPress = (event) => {
     if (event.key === "Enter") {
@@ -53,26 +55,29 @@ const SearchBar = ({
 
   return (
     <Container>
-      <SearchBarContainer 
+      <SearchBarContainer
         heightSize={restProps.heightSize}
         widthSize={restProps.widthSize}
         borderRadius={restProps.borderRadius}
         border={restProps.border}
         outlineColor={restProps.outlineColor}
       >
-        <SearchIcon  
+        <SearchIcon
           onClick={(e) => {
-              e.preventDefault();
-              onSubmit(searchValue);
-          }}>
-          <SearchSvg/>
+            e.preventDefault();
+            onSubmit(searchValue);
+          }}
+        >
+          <SearchSvg />
         </SearchIcon>
-       
+
         <SearchInput
           type="search"
-          placeholder={restProps.placeholder || "Search by Name / Email / Username"}
+          placeholder={
+            restProps.placeholder || "Search by Name / Email / Username"
+          }
           value={searchValue}
-          onChange={handleInputChange}
+          onChange={onChange || handleInputChange}
           onKeyPress={handleEnterPress}
           borderRadius={restProps.borderRadius || "12px"}
           border={restProps.border || "1px solid #DFE6E6"}
@@ -81,9 +86,9 @@ const SearchBar = ({
         />
         {showSuggestions && (
           <SuggestionList>
-            {suggestions.map((suggestion) => (
+            {suggestions.map((suggestion, index) => (
               <SuggestionItem
-                key={suggestion}
+                key={index}
                 onClick={() => handleSuggestionClick(suggestion)}
               >
                 {suggestion}
@@ -92,13 +97,10 @@ const SearchBar = ({
           </SuggestionList>
         )}
         {warning && <WarningText>{warning}</WarningText>}
-        {inFilter && 
-         <SearchFilterIcon />
-        }
+        {inFilter && <SearchFilterIcon />}
+        {hasCustomDropdown && <> {children} </>}
       </SearchBarContainer>
-       {outFilter && 
-         <SearchFilterIcon />
-        }
+      {outFilter && <SearchFilterIcon />}
     </Container>
   );
 };
@@ -107,12 +109,12 @@ SearchBar.propTypes = {
   onSubmit: PropTypes.func,
   warning: PropTypes.string,
   asyncResult: PropTypes.func,
-  heightSize:PropTypes.string,
+  heightSize: PropTypes.string,
   widthSize: PropTypes.string,
   borderRadius: PropTypes.string,
   border: PropTypes.string,
   outlineColor: PropTypes.string,
-  inFilter: PropTypes.bool
+  inFilter: PropTypes.bool,
 };
 
 // SearchBar.defaultProps = {

package/src/components/searchBar/styles/index.jsx

@@ -9,8 +9,7 @@ export const Container = styled.div`
   // justify-content: center;
   align-items: center;
   gap: 10px;
-  position: relative
-
+  position: relative;
 `;
 
 export const SearchBarContainer = styled.div`
@@ -19,26 +18,25 @@ export const SearchBarContainer = styled.div`
   position: relative;
   height: ${({ heightSize }) => heightSize || "50px"};
   width: ${({ widthSize }) => widthSize || "100%"};
-  border: ${({ border}) => border || "1px solid #DFE6E6"};
+  border: ${({ border }) => border || "1px solid #DFE6E6"};
   border-radius: ${({ borderRadius }) => borderRadius || "12px"};
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   transition: box-shadow 0.2s ease;
   transition: all 0.3s;
   &:focus-within {
     box-shadow: 0 0 0 1px ${({ outlineColor }) => outlineColor || "#FEBF10"};
-    transform: scale(1.01);
   }
 
-  svg{
+  svg {
     margin-right: 20px;
-    // display: ${({display}) => display || "none"}
+    // display: ${({ display }) => display || "none"}
   }
 `;
 
 export const SearchIcon = styled.div`
   position: absolute;
   margin-left: 12px;
-  color: #ADB3B3;
+  color: #adb3b3;
   font-size: 20px;
   margin-top: 6px;
 `;
@@ -51,14 +49,20 @@ export const SearchInput = styled.input`
   border: none;
   border-radius: ${({ borderRadius }) => borderRadius || "12px"};
   font-size: 16px;
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   color: #333333;
   outline: none;
   &::placeholder {
     font-weight: 600;
     font-size: 16px;
     line-height: 22px;
-    color: #ADB3B3;
+    color: #adb3b3;
+  }
+
+  &:focus {
+    border: none;
+    box-shadow: none;
+    outline: none;
   }
 `;
 
@@ -83,7 +87,7 @@ export const SuggestionList = styled.ul`
   padding: 0;
   margin: 0;
   list-style: none;
-  border: 1px solid  #DFE6E6;
+  border: 1px solid #dfe6e6;
   background-color: #f1f1f1;
   z-index: 10;
 `;
@@ -100,7 +104,6 @@ export const OptionIcon = styled(SearchFilterIcon)`
   color: ${({ outlineColor }) => outlineColor || "#ADB3B3"};
   font-size: 18px;
   display: none;
-
 `;
 
 export const OptionIconSearch = styled(SearchFilterIcon)`