dhre-component-lib 0.2.6 → 0.2.7

package/dist/components/Search/Search.d.ts

@@ -1,10 +1,22 @@
 import React from "react";
 import "./Search.module.scss";
+interface Suggestion {
+    id: string;
+    title: string;
+    faqAnswer: string;
+    faqQuestion: string;
+    fieldFaqCategory: string;
+    isBookmarked: boolean;
+    images: string[];
+    videos: string[];
+}
 interface CustomSearchFieldProps {
     searchIcon: React.ReactNode;
     crossIcon: React.ReactNode;
     disabled?: boolean;
     onSearch: (query: string) => void;
+    onSelectSuggestion: (selectedSuggestion: Suggestion | null) => void;
+    suggestions: Suggestion[] | null | undefined;
     placeholder: string;
     className?: string;
 }

package/dist/index.d.ts

@@ -171,11 +171,23 @@ interface TypographyProps {
 }
 declare const Typography: React.FC<TypographyProps>;
 
+interface Suggestion {
+    id: string;
+    title: string;
+    faqAnswer: string;
+    faqQuestion: string;
+    fieldFaqCategory: string;
+    isBookmarked: boolean;
+    images: string[];
+    videos: string[];
+}
 interface CustomSearchFieldProps {
     searchIcon: React.ReactNode;
     crossIcon: React.ReactNode;
     disabled?: boolean;
     onSearch: (query: string) => void;
+    onSelectSuggestion: (selectedSuggestion: Suggestion | null) => void;
+    suggestions: Suggestion[] | null | undefined;
     placeholder: string;
     className?: string;
 }

package/dist/index.esm.js

@@ -9338,22 +9338,24 @@ const Typography = ({ variant = 'B1', weight = 'MEDIUM', children, className })
     return React.createElement("div", { className: classNames }, children);
 };
 
-var css$2 = ".search-field-container {\n  display: flex;\n  align-items: center;\n  padding: 8px;\n  border-radius: 10px;\n  background-color: #FFFFFF;\n  transition: border-color 0.3s ease;\n}\n.search-field-container.default-border {\n  border: 1px solid #A7A7A7;\n}\n.search-field-container.typing-border {\n  border: 1px solid #FFFFFF;\n}\n.search-field-container.stopped-border {\n  border: 1px solid #00B578;\n}\n.search-field-container.disabled-border {\n  border: 1px solid #4F4F4F;\n  background-color: #E1E1E1;\n}\n\n.search-icon {\n  margin-right: 8px;\n}\n\n.search-input {\n  flex: 1;\n  border: none;\n  background-color: transparent;\n  outline: none;\n}\n\n.cross-icon {\n  margin-left: 8px;\n  cursor: pointer;\n}";
+var css$2 = ".search-field-container {\n  display: flex;\n  align-items: center;\n  padding: 8px;\n  border-radius: 10px;\n  background-color: #FFFFFF;\n  transition: border-color 0.3s ease;\n}\n.search-field-container.default-border {\n  border: 1px solid #A7A7A7;\n}\n.search-field-container.typing-border {\n  border: 1px solid #FFFFFF;\n}\n.search-field-container.stopped-border {\n  border: 1px solid #00B578;\n}\n.search-field-container.disabled-border {\n  border: 1px solid #4F4F4F;\n  background-color: #E1E1E1;\n}\n\n.search-icon {\n  margin-right: 8px;\n}\n\n.search-input {\n  flex: 1;\n  border: none;\n  background-color: transparent;\n  outline: none;\n}\n\n.cross-icon {\n  margin-left: 8px;\n  cursor: pointer;\n}\n\n.suggestions-dropdown {\n  list-style: none;\n  margin: 0;\n  border: 1px solid #ccc;\n  overflow-y: auto;\n  background-color: white;\n  position: absolute;\n  width: 585px;\n  z-index: 10;\n  top: 55px;\n  border-radius: 10px;\n}\n@media (max-width: 767px) {\n  .suggestions-dropdown {\n    width: 95%;\n  }\n}\n\n.suggestion-item {\n  padding: 16px 8px 16px 8px;\n  cursor: pointer;\n  text-align: left;\n}\n\n.underline {\n  height: 1px;\n  background-color: #CECECE;\n  margin-left: 24px;\n  margin-right: 24px;\n}\n\n.suggestion-item:hover {\n  background-color: none;\n}\n\n.row {\n  flex-direction: row;\n  display: flex;\n  background: none;\n  border: none;\n  align-items: center;\n  padding-left: 10px;\n}";
 n(css$2,{});
 
-const Search = ({ searchIcon, crossIcon, disabled = false, onSearch, placeholder, className = {}, }) => {
+const Search = ({ searchIcon, crossIcon, disabled = false, onSearch, onSelectSuggestion, suggestions, placeholder, className = {}, }) => {
     const [query, setQuery] = useState("");
     const [borderClass, setBorderClass] = useState("default-border");
     const [timeoutId, setTimeoutId] = useState(null);
-    const queryRef = useRef(query); // Store the latest query
-    // Update the ref whenever query changes
+    const [filteredSuggestions, setFilteredSuggestions] = useState([]);
+    const [showSuggestions, setShowSuggestions] = useState(false);
+    const queryRef = useRef(query);
     useEffect(() => {
         queryRef.current = query;
     }, [query]);
     const handleChange = (e) => {
         if (disabled)
             return;
-        setQuery(e.target.value);
+        const value = e.target.value;
+        setQuery(value);
         setBorderClass("typing-border");
         if (timeoutId)
             clearTimeout(timeoutId);
@@ -9362,24 +9364,51 @@ const Search = ({ searchIcon, crossIcon, disabled = false, onSearch, placeholder
             onSearch(queryRef.current);
         }, 2000);
         setTimeoutId(newTimeoutId);
+        if (suggestions && value) {
+            const filtered = suggestions
+                .filter((suggestion) => suggestion.title.toLowerCase().includes(value.toLowerCase()))
+                .slice(0, 5);
+            setFilteredSuggestions(filtered);
+            setShowSuggestions(true);
+        }
+        else {
+            setShowSuggestions(false);
+        }
     };
     const handleClear = () => {
         if (disabled)
             return;
         setQuery("");
         setBorderClass("default-border");
+        setShowSuggestions(false);
+        onSelectSuggestion(null);
+    };
+    const handleSelectSuggestion = (suggestion) => {
+        setQuery(suggestion.title);
+        setShowSuggestions(false);
+        onSelectSuggestion(suggestion);
     };
     useEffect(() => {
         if (disabled) {
             setQuery("");
             setBorderClass("disabled-border");
+            setShowSuggestions(false);
         }
     }, [disabled]);
-    const classNames = `${className ?? ''}`;
+    const classNames = `${className ?? ""}`;
     return (React.createElement("div", { className: `search-field-container ${borderClass} ${classNames}` },
         React.createElement("span", { className: "search-icon" }, searchIcon),
         React.createElement("input", { type: "text", value: query, onChange: handleChange, disabled: disabled, className: "search-input", placeholder: placeholder }),
-        query && !disabled && (React.createElement("span", { onClick: handleClear, className: "cross-icon" }, crossIcon))));
+        query && !disabled && (React.createElement("span", { onClick: handleClear, className: "cross-icon" }, crossIcon)),
+        showSuggestions &&
+            filteredSuggestions &&
+            filteredSuggestions?.length > 0 && (React.createElement("div", { className: "suggestions-dropdown" }, filteredSuggestions?.map((suggestion) => {
+            return (React.createElement(React.Fragment, null,
+                React.createElement("button", { key: suggestion.id, onClick: () => handleSelectSuggestion(suggestion), className: "row" },
+                    searchIcon,
+                    React.createElement(Typography, { variant: "B4", weight: "SEMI_BOLD", className: "suggestion-item" }, suggestion.title)),
+                React.createElement("div", { className: "underline" })));
+        })))));
 };
 
 var css$1 = ".modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(0, 0, 0, 0.6);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000;\n}\n\n.modal-container {\n  background-color: white;\n  padding: 40px;\n  border-radius: 20px;\n  width: 560px;\n  max-width: 560px;\n  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);\n  position: relative;\n  transition: transform 0.3s ease, opacity 0.3s ease;\n}\n@media (min-width: 768px) {\n  .modal-container {\n    width: 80%;\n  }\n}\n@media (min-width: 1024px) {\n  .modal-container {\n    width: 60%;\n  }\n}\n\n.modal-header {\n  font-size: 1.5rem;\n  font-weight: bold;\n  margin-bottom: 15px;\n}\n\n.modal-content {\n  margin-bottom: 20px;\n}\n\n.modal-close {\n  position: absolute;\n  top: 40px;\n  right: 40px;\n  background: none;\n  border: none;\n  font-size: 1.5rem;\n  cursor: pointer;\n}\n\n@media (max-width: 767px) {\n  .modal-container {\n    width: 95%;\n  }\n}";