dhre-component-lib 0.8.2 → 0.8.4

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

@@ -19,9 +19,11 @@ interface CustomSearchFieldProps {
     suggestions: Suggestion[] | null | undefined;
     placeholder: string;
     className?: string;
+    suggestionClassName?: string;
     onSearchIconClick?: () => void;
     onHandleClear?: () => void;
     isWhiteBackgound?: boolean;
+    shouldShowAll?: boolean;
 }
 declare const Search: React.FC<CustomSearchFieldProps>;
 export default Search;

package/dist/components/TextArea/TextArea.d.ts

@@ -11,5 +11,6 @@ declare function TextArea(props: {
     placeholder: string;
     charText: string;
     property?: any;
+    isShortTextBox?: boolean;
 }): React.JSX.Element;
 export default TextArea;

package/dist/index.d.ts

@@ -244,9 +244,11 @@ interface CustomSearchFieldProps {
     suggestions: Suggestion[] | null | undefined;
     placeholder: string;
     className?: string;
+    suggestionClassName?: string;
     onSearchIconClick?: () => void;
     onHandleClear?: () => void;
     isWhiteBackgound?: boolean;
+    shouldShowAll?: boolean;
 }
 declare const Search: React.FC<CustomSearchFieldProps>;
 
@@ -313,6 +315,7 @@ declare function TextArea(props: {
     placeholder: string;
     charText: string;
     property?: any;
+    isShortTextBox?: boolean;
 }): React.JSX.Element;
 
 interface DrawerProps {

package/dist/index.esm.js

@@ -21678,7 +21678,7 @@ const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDel
 var css$d = ".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.typing-dark-border {\n  border: 1px solid #a7a7a7;\n}\n.search-field-container.stopped-border {\n  border: 1px solid #000000;\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  height: 2rem;\n}\n\n.cross-icon {\n  cursor: pointer;\n  margin: 4px 0 0 8px;\n}\n\n.suggestions-dropdown {\n  border: 1px solid #ccc;\n  background-color: white;\n  position: absolute;\n  width: 600px;\n  z-index: 10;\n  top: 13.5rem;\n  border-radius: 10px;\n}\n@media (max-width: 767px) {\n  .suggestions-dropdown {\n    width: 94%;\n    top: 10rem;\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\n.no-suggestions {\n  padding: 20px;\n}\n\n.search-input::placeholder {\n  color: #686868;\n  font-size: 16px;\n  font-family: \"Meraas Aktiv\", sans-serif;\n  font-weight: 400;\n  line-height: 22.4px;\n}";
 n(css$d,{});
 
-const Search = ({ searchIcon, crossIcon, disabled = false, onSearch, onSelectSuggestion, suggestions, placeholder, className = {}, onSearchIconClick, onHandleClear, isWhiteBackgound = false }) => {
+const Search = ({ searchIcon, crossIcon, disabled = false, onSearch, onSelectSuggestion, suggestions, placeholder, className = "", suggestionClassName = "", onSearchIconClick, onHandleClear, isWhiteBackgound = false, shouldShowAll = false, }) => {
     const [query, setQuery] = useState("");
     const [borderClass, setBorderClass] = useState("default-border");
     const [timeoutId, setTimeoutId] = useState(null);
@@ -21719,7 +21719,7 @@ const Search = ({ searchIcon, crossIcon, disabled = false, onSearch, onSelectSug
         }, 500);
         setTimeoutId(newTimeoutId);
         if (suggestions && value) {
-            const filtered = suggestions.filter((suggestion) => suggestion.title.toLowerCase().includes(value.toLowerCase()));
+            const filtered = shouldShowAll ? suggestions : suggestions.filter((suggestion) => suggestion.title.toLowerCase().includes(value.toLowerCase()));
             setFilteredSuggestions(filtered);
             setShowSuggestions(true);
         }
@@ -21757,7 +21757,7 @@ const Search = ({ searchIcon, crossIcon, disabled = false, onSearch, onSelectSug
             React__default.createElement("span", { className: "search-icon", onClick: onSearchIconClick }, searchIcon),
             React__default.createElement("input", { type: "text", value: query, onChange: handleChange, disabled: disabled, className: "search-input", placeholder: placeholder }),
             query && !disabled && (React__default.createElement("span", { onClick: handleClear, className: "cross-icon" }, crossIcon))),
-        showSuggestions && (React__default.createElement("div", { className: "suggestions-dropdown" }, filteredSuggestions.length > 0 ? (filteredSuggestions.map((suggestion) => (React__default.createElement(React__default.Fragment, { key: suggestion.id },
+        showSuggestions && (React__default.createElement("div", { className: `suggestions-dropdown ${suggestionClassName}`.trim() }, filteredSuggestions.length > 0 ? (filteredSuggestions.map((suggestion) => (React__default.createElement(React__default.Fragment, { key: suggestion.id },
             React__default.createElement("button", { onClick: () => handleSelectSuggestion(suggestion), className: "row" },
                 React__default.createElement("div", null, searchIcon),
                 React__default.createElement(Typography, { variant: "B4", weight: "SEMI_BOLD", className: "suggestion-item" }, suggestion.title)),
@@ -21884,11 +21884,11 @@ function Dropdown(props) {
                 React__default.createElement(Typography, { variant: "B3", weight: "SEMI_BOLD" }, val.name)))))))));
 }
 
-var css$8 = ".textArea {\n  min-width: 70%;\n  width: 100%;\n  height: 8.875rem;\n  border-radius: 0.5rem;\n  padding: 1rem;\n  font-size: 1rem;\n  font-family: Meraas Aktiv;\n  font-weight: 400;\n  line-height: 1.4rem;\n  text-align: left;\n  outline: none;\n  resize: none;\n  overflow: auto;\n  max-width: 100%;\n  max-height: 100%;\n}\n.inputTextAreaLabel {\n  position: absolute;\n  z-index: 1;\n  top: -10px;\n  left: 11px;\n  background: #ffffff;\n  padding: 0 6px;\n  transition: all 0.3s ease-out;\n}\n\n.astreik {\n  color: #eb0542;\n}\n\n.characters {\n  color: #686868;\n}\n\n.textArea100 {\n  height: 100%;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n}\n\n.positionRel {\n  position: relative;\n  z-index: 0;\n}\n\n.label {\n  position: absolute;\n  z-index: 1;\n  top: -10px;\n  left: 11px;\n  background: #ffffff;\n  padding: 0 6px;\n  transition: all 0.3s ease-out;\n}\n\n.astreik {\n  color: #eb0542;\n}\n\n.textArea::placeholder {\n  font-family: Meraas Aktiv, sans-serif;\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 22.4px;\n  text-align: left;\n  color: #686868;\n}\n\n.maxLimit {\n  color: #eb0542 !important;\n}\n\n.maxLimitArea {\n  border: 1px solid #eb0542 !important;\n}";
+var css$8 = ".textArea {\n  min-width: 70%;\n  width: 100%;\n  height: 8.875rem;\n  border-radius: 0.5rem;\n  padding: 1rem;\n  font-size: 1rem;\n  font-family: Meraas Aktiv;\n  font-weight: 400;\n  line-height: 1.4rem;\n  text-align: left;\n  outline: none;\n  resize: none;\n  overflow: auto;\n  max-width: 100%;\n  max-height: 100%;\n}\n.shortTextBox {\n  min-width: 70%;\n  width: 100%;\n  border-radius: 0.5rem;\n  padding: 1rem;\n  font-size: 1rem;\n  font-family: Meraas Aktiv;\n  font-weight: 400;\n  line-height: 1.4rem;\n  text-align: left;\n  outline: none;\n  resize: none;\n  overflow: auto;\n  max-width: 100%;\n  max-height: 100%;\n}\n.inputTextAreaLabel {\n  position: absolute;\n  z-index: 1;\n  top: -10px;\n  left: 11px;\n  background: #ffffff;\n  padding: 0 6px;\n  transition: all 0.3s ease-out;\n}\n\n.astreik {\n  color: #eb0542;\n}\n\n.characters {\n  color: #686868;\n}\n\n.textArea100 {\n  height: 100%;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n}\n\n.positionRel {\n  position: relative;\n  z-index: 0;\n}\n\n.label {\n  position: absolute;\n  z-index: 1;\n  top: -10px;\n  left: 11px;\n  background: #ffffff;\n  padding: 0 6px;\n  transition: all 0.3s ease-out;\n}\n\n.astreik {\n  color: #eb0542;\n}\n\n.textArea::placeholder {\n  font-family: Meraas Aktiv, sans-serif;\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 22.4px;\n  text-align: left;\n  color: #686868;\n}\n\n.maxLimit {\n  color: #eb0542 !important;\n}\n\n.maxLimitArea {\n  border: 1px solid #eb0542 !important;\n}";
 n(css$8,{});
 
 function TextArea(props) {
-    const { value, onChange, requiredLimit, placeholder, charText, property } = props;
+    const { value, onChange, requiredLimit, placeholder, charText, property, isShortTextBox } = props;
     const [showLabelOnBorder, setShowLabelOnBorder] = useState(false);
     const checkSpecialChar = (e) => {
         if (!/[0-9a-zA-Z ]/.test(e.key)) {
@@ -21909,7 +21909,7 @@ function TextArea(props) {
             ((placeholder && showLabelOnBorder) || (placeholder && value)) && React__default.createElement("label", { className: 'inputTextAreaLabel' },
                 placeholder.replace("*", ""),
                 placeholder.includes("*") && React__default.createElement("label", { className: 'astreik' }, "*")),
-            React__default.createElement("textarea", { value: value, onChange: (event) => onChange(event, property), onKeyDown: checkSpecialChar, maxLength: Number(requiredLimit), className: `textArea ${value && value?.length > Number(requiredLimit) ? "maxLimitArea" : ""}`, placeholder: showLabelOnBorder ? "" : placeholder, onFocus: () => setShowLabelOnBorder(true), onBlur: checkFieldValue })),
+            React__default.createElement("textarea", { value: value, onChange: (event) => onChange(event, property), onKeyDown: checkSpecialChar, maxLength: Number(requiredLimit), className: `${isShortTextBox ? "shortTextBox" : "textArea"} ${value && value.length > Number(requiredLimit) ? "maxLimitArea" : ""}`, placeholder: showLabelOnBorder ? "" : placeholder, onFocus: () => setShowLabelOnBorder(true), onBlur: checkFieldValue })),
         React__default.createElement(Typography, { className: `characters ${value &&
                 value?.length > Number(requiredLimit) ? "maxLimit" : ""}`, variant: "L1", weight: "SEMI_BOLD" },
             value?.length ?? 0,