dhre-component-lib 0.2.6 → 0.2.8

package/dist/components/Accordian/Accordian.d.ts

@@ -8,6 +8,7 @@ type AccordionProps = {
     border?: boolean;
     upArrowIcon: React.ReactNode;
     downArrowIcon: React.ReactNode;
+    openByDefault?: boolean;
 };
 declare const Accordion: React.FC<AccordionProps>;
 export default Accordion;

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;
 }
@@ -198,6 +210,7 @@ type AccordionProps = {
     border?: boolean;
     upArrowIcon: React.ReactNode;
     downArrowIcon: React.ReactNode;
+    openByDefault?: boolean;
 };
 declare const Accordion: React.FC<AccordionProps>;
 

package/dist/index.esm.js

@@ -9338,48 +9338,84 @@ 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);
+        if (value.length < 3) {
+            setBorderClass("default-border");
+            setShowSuggestions(false);
+            if (timeoutId)
+                clearTimeout(timeoutId);
+            return;
+        }
         setBorderClass("typing-border");
         if (timeoutId)
             clearTimeout(timeoutId);
         const newTimeoutId = setTimeout(() => {
             setBorderClass("stopped-border");
             onSearch(queryRef.current);
-        }, 2000);
+        }, 500);
         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}";
@@ -9409,8 +9445,8 @@ const Modal = ({ isOpen, onClose, title, children, crossIcon }) => {
 var css = ".accordion {\n  padding: 10px;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n}\n.accordion.with-border {\n  border: 1px solid #CECECE;\n  padding: 24px 16px 24px 16px;\n  border-radius: 16px;\n}\n.accordion.without-border {\n  border-bottom: 1px solid #686868;\n  padding: 16px 0px 16px 0px;\n  margin-top: 16px;\n}\n.accordion .accordion-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.accordion .accordion-header .accordion-icon {\n  margin-right: 10px;\n}\n.accordion .accordion-header .accordion-text {\n  display: flex;\n  flex-direction: column;\n}\n.accordion .accordion-header .accordian-arrow {\n  display: flex;\n  justify-content: flex-end;\n}\n.accordion .accordion-content {\n  padding: 16px 4px 16px 4px;\n}";
 n(css,{});
 
-const Accordion = ({ icon, title, description, children, border = false, upArrowIcon, downArrowIcon }) => {
-    const [isOpen, setIsOpen] = useState(false);
+const Accordion = ({ icon, title, description, children, border = false, upArrowIcon, downArrowIcon, openByDefault }) => {
+    const [isOpen, setIsOpen] = useState(openByDefault ? true : false);
     const toggleAccordion = () => {
         setIsOpen(!isOpen);
     };