hplx-react-elements-dev 1.0.41 → 1.0.42

package/dist/esm/addSuggestion/AddSuggestion.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { AddSuggestionProps } from "../types";
-declare const AddSuggestion: ({ isInputField, label, labelColor, labelSize, start_icon, end_icon, prefix, suffixButton, suffix, suffixDropdown, isSuffixEditable, suffixInputProps, suffixPlaceholder, handleSuggestionValChange, handleSuffixValChange, handleSuffixClick, char_count, onSuggestionClick, height, hint_text_icon, hint_text, errorMsg, inputProps, inputFieldInputProps, options, fieldColor, suggestionValue, isborderRequired, }: AddSuggestionProps) => JSX.Element;
+declare const AddSuggestion: ({ isInputField, label, labelColor, labelSize, start_icon, end_icon, prefix, suffixButton, suffix, suffixDropdown, isSuffixEditable, suffixInputProps, suffixPlaceholder, handleSuggestionValChange, handleSuffixValChange, handleSuffixClick, char_count, onSuggestionClick, className, rows, hint_text_icon, hint_text, errorMsg, inputProps, inputFieldInputProps, options, suggestionValue, isborderRequired, isDynamicHeight, fieldColor, }: AddSuggestionProps) => JSX.Element;
 export default AddSuggestion;

package/dist/esm/index.js

@@ -2545,26 +2545,42 @@ var TextAreaField = function TextAreaField(_a) {
       _c = _a.errorMsg,
       errorMsg = _c === void 0 ? "" : _c,
       inputProps = _a.inputProps,
-      _d = _a.height,
-      height = _d === void 0 ? "hplxt-h-32" : _d;
+      className = _a.className,
+      _d = _a.rows,
+      rows = _d === void 0 ? 2 : _d,
+      _e = _a.isDynamicHeight,
+      isDynamicHeight = _e === void 0 ? false : _e;
+
+  var _f = inputProps || {},
+      disabled = _f.disabled,
+      onFocus = _f.onFocus,
+      onBlur = _f.onBlur;
 
-  var _e = inputProps || {},
-      disabled = _e.disabled,
-      onFocus = _e.onFocus,
-      onBlur = _e.onBlur;
+  var _g = useState(false),
+      active = _g[0],
+      setActive = _g[1];
 
-  var _f = useState(false),
-      active = _f[0],
-      setActive = _f[1];
+  var _h = useState(rows),
+      row = _h[0],
+      setRow = _h[1];
+
+  var ref = useRef(null);
+
+  var handleHeight = function handleHeight() {
+    var element = ref.current;
+    isDynamicHeight && setRow(element.scrollHeight / 32);
+  };
 
   var handleFocus = function handleFocus(event) {
     setActive(true);
     onFocus && onFocus(event);
+    isDynamicHeight && handleHeight();
   };
 
   var handleBlur = function handleBlur(event) {
     setActive(false);
     onBlur && onBlur(event);
+    isDynamicHeight && setRow(rows);
   };
 
   return jsxRuntime.exports.jsxs("div", __assign({
@@ -2584,11 +2600,16 @@ var TextAreaField = function TextAreaField(_a) {
       type: "Text md"
     }, {
       children: jsxRuntime.exports.jsx("div", __assign({
-        className: "hplxt-flex hplxt-border-1 hplxt-overflow-hidden placeholder:hplxt-text-Gray-500 ".concat(errorMsg ? "hplxt-border-Error-300" : "hplxt-border-Gray-300", " hplxt-shadow-xs hplxt-rounded-lg ").concat(height, " ").concat(disabled ? "hplxt-bg-Gray-50" : "hplxt-bg-White ".concat(errorMsg ? "hover:hplxt-shadow-xs-error ".concat(active && "hplxt-shadow-xs-error") : "hover:hplxt-border-Primary-300 hover:hplxt-shadow-xs-primary ".concat(active && "hplxt-border-Primary-300 hplxt-shadow-xs-primary")))
+        className: "hplxt-flex hplxt-border-1 hplxt-overflow-hidden placeholder:hplxt-text-Gray-500 ".concat(errorMsg ? "hplxt-border-Error-300" : "hplxt-border-Gray-300", " hplxt-shadow-xs hplxt-rounded-lg ").concat(className, " ").concat(disabled ? "hplxt-bg-Gray-50" : "hplxt-bg-White ".concat(errorMsg ? "hover:hplxt-shadow-xs-error ".concat(active && "hplxt-shadow-xs-error") : "hover:hplxt-border-Primary-300 hover:hplxt-shadow-xs-primary ".concat(active && "hplxt-border-Primary-300 hplxt-shadow-xs-primary")))
       }, {
         children: jsxRuntime.exports.jsx("textarea", __assign({
-          className: "hplxt-flex-1 hplxt-px-2 hplxt-py-2 focus-visible:hplxt-outline-0 hplxt-border-0 focus:hplxt-border-0"
+          ref: ref,
+          className: "hplxt-flex-1 hplxt-px-2 hplxt-py-2 focus-visible:hplxt-outline-0 hplxt-border-0 focus:hplxt-border-0",
+          style: {
+            height: row * 32 + 'px'
+          }
         }, inputProps, {
+          onInput: handleHeight,
           onFocus: handleFocus,
           onBlur: handleBlur
         }))
@@ -3320,22 +3341,22 @@ var getSizeClassName$5 = function getSizeClassName(size) {
 var getPaddingClassName$3 = function getPaddingClassName(size, icon, iconFile) {
   switch (size) {
     case "sm":
-      return icon && iconFile && icon === "Only" ? "hplxt-h-8 hplxt-w-[34px] hplxt-px-[5.8px]" : "hplxt-h-8 hplxt-px-1";
+      return icon && iconFile && icon === "Only" ? "hplxt-h-8 hplxt-w-[34px] hplxt-px-[5.8px]" : "hplxt-h-8 hplxt-px-4";
 
     case "md":
-      return icon && iconFile && icon === "Only" ? "hplxt-h-9 hplxt-w-[42px] hplxt-px-[9.8px]" : "hplxt-h-9 hplxt-px-[6px]";
+      return icon && iconFile && icon === "Only" ? "hplxt-h-9 hplxt-w-[42px] hplxt-px-[9.8px]" : "hplxt-h-9 hplxt-px-4";
 
     case "lg":
-      return icon && iconFile && icon === "Only" ? "hplxt-h-10 hplxt-w-[42px] hplxt-px-[9.8px]" : "hplxt-h-10 hplxt-px-2";
+      return icon && iconFile && icon === "Only" ? "hplxt-h-10 hplxt-w-[42px] hplxt-px-[9.8px]" : "hplxt-h-10 hplxt-px-4";
 
     case "xl":
-      return icon && iconFile && icon === "Only" ? "hplxt-h-11 hplxt-w-[46px] hplxt-px-[11.8px]" : "hplxt-h-11 hplxt-px-[10px]";
+      return icon && iconFile && icon === "Only" ? "hplxt-h-11 hplxt-w-[46px] hplxt-px-[11.8px]" : "hplxt-h-11 hplxt-px-4";
 
     case "2xl":
-      return icon && iconFile && icon === "Only" ? "hplxt-h-12 hplxt-w-[50px] hplxt-px-[13.8px]" : "hplxt-h-12 hplxt-px-3";
+      return icon && iconFile && icon === "Only" ? "hplxt-h-12 hplxt-w-[50px] hplxt-px-[13.8px]" : "hplxt-h-12 hplxt-px-4";
 
     default:
-      return icon && iconFile && icon === "Only" ? "hplxt-h-8 hplxt-w-[34px] hplxt-px-[5.8px]" : "hplxt-h-8 hplxt-px-1";
+      return icon && iconFile && icon === "Only" ? "hplxt-h-8 hplxt-w-[34px] hplxt-px-[5.8px]" : "hplxt-h-8 hplxt-px-4";
   }
 };
 
@@ -4273,7 +4294,7 @@ var CollapsibleCard = function CollapsibleCard(props) {
       footer = _a.footer,
       title = _a.title,
       _d = _a.icon,
-      icon = _d === void 0 ? "Right" : _d,
+      icon = _d === void 0 ? "Only" : _d,
       _e = _a.openIcon,
       openIcon = _e === void 0 ? "hx_add" : _e,
       _f = _a.closeIcon,
@@ -5219,8 +5240,9 @@ var AddSuggestion = function AddSuggestion(_a) {
       char_count = _a.char_count,
       _l = _a.onSuggestionClick,
       onSuggestionClick = _l === void 0 ? function (_selectedValue) {} : _l,
-      _m = _a.height,
-      height = _m === void 0 ? "hplxt-h-32" : _m,
+      className = _a.className,
+      _m = _a.rows,
+      rows = _m === void 0 ? 2 : _m,
       _o = _a.hint_text_icon,
       hint_text_icon = _o === void 0 ? "" : _o,
       hint_text = _a.hint_text,
@@ -5229,21 +5251,23 @@ var AddSuggestion = function AddSuggestion(_a) {
       inputProps = _a.inputProps,
       inputFieldInputProps = _a.inputFieldInputProps,
       options = _a.options,
-      fieldColor = _a.fieldColor,
       _q = _a.suggestionValue,
       suggestionValue = _q === void 0 ? "" : _q,
       _r = _a.isborderRequired,
-      isborderRequired = _r === void 0 ? true : _r;
+      isborderRequired = _r === void 0 ? true : _r,
+      _s = _a.isDynamicHeight,
+      isDynamicHeight = _s === void 0 ? false : _s,
+      fieldColor = _a.fieldColor;
 
-  var _s = useState(false),
-      showDropdown = _s[0],
-      setShowDropdown = _s[1];
+  var _t = useState(false),
+      showDropdown = _t[0],
+      setShowDropdown = _t[1];
 
   var wrapperRef = useRef(null);
 
-  var _t = useState(),
-      suggestionArr = _t[0],
-      setSuggestionArr = _t[1];
+  var _u = useState(),
+      suggestionArr = _u[0],
+      setSuggestionArr = _u[1];
 
   var changeHandler = function changeHandler(e) {
     setShowDropdown(true);
@@ -5334,7 +5358,9 @@ var AddSuggestion = function AddSuggestion(_a) {
       hint_text: hint_text,
       hint_text_icon: hint_text_icon,
       errorMsg: errorMsg,
-      height: height,
+      className: className,
+      rows: rows,
+      isDynamicHeight: isDynamicHeight,
       inputProps: __assign(__assign({}, inputProps), {
         onChange: changeHandler,
         value: suggestionValue,

package/dist/esm/textAreaField/TextAreaField.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { TextAreaFieldProps } from "../types";
-declare const TextAreaField: ({ label, hint_text_icon, hint_text, errorMsg, inputProps, height, }: TextAreaFieldProps) => JSX.Element;
+declare const TextAreaField: ({ label, hint_text_icon, hint_text, errorMsg, inputProps, className, rows, isDynamicHeight, }: TextAreaFieldProps) => JSX.Element;
 export default TextAreaField;

package/dist/esm/types.d.ts

@@ -62,7 +62,9 @@ export interface TextAreaFieldProps {
     hint_text_icon?: string;
     errorMsg?: string;
     inputProps: React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>;
-    height?: string;
+    className?: string;
+    rows?: number;
+    isDynamicHeight?: boolean;
 }
 type badgesizeType = "sm" | "md" | "lg";
 type badgeiconType = "Left" | "Right" | "Only";
@@ -301,7 +303,9 @@ export interface NestedDropdownItemsProps {
 export interface AddSuggestionProps {
     label?: string;
     isInputField?: boolean;
-    height?: string;
+    className?: string;
+    rows?: number;
+    isDynamicHeight?: boolean;
     labelSize?: typographyTextType;
     labelColor?: string;
     prefix?: ReactNode;

package/package.json

@@ -9,7 +9,7 @@
     "frontend",
     "healthplix"
   ],
-  "version": "1.0.41",
+  "version": "1.0.42",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",