hplx-react-elements-dev 1.0.41 → 1.0.43

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/datePicker/DatePicker.d.ts

@@ -2,14 +2,6 @@
 import "react-date-range/dist/styles.css";
 import "react-date-range/dist/theme/default.css";
 import "../datePicker/DatePickerCSS.css";
-export interface DatePickerProps {
-    disabledDates?: Date[];
-    selectDate?: any;
-    dateVar: (val: Date) => void;
-    isborderRequired?: boolean;
-    minDate?: Date;
-    maxDate?: Date;
-    fieldColor?: string;
-}
-declare const DatePicker: ({ disabledDates, selectDate, dateVar, minDate, maxDate, fieldColor, isborderRequired, }: DatePickerProps) => JSX.Element;
+import { DatePickerProps } from "../types";
+declare const DatePicker: ({ disabledDates, selectDate, dateVar, minDate, maxDate, label, labelColor, labelSize, height, start_icon, end_icon, hint_text_icon, prefix, suffixButton, suffix, hint_text, char_count, errorMsg, suffixInputProps, suffixDropdown, isSuffixEditable, suffixPlaceholder, fieldColor, isborderRequired, }: DatePickerProps) => JSX.Element;
 export default DatePicker;

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 _e = inputProps || {},
-      disabled = _e.disabled,
-      onFocus = _e.onFocus,
-      onBlur = _e.onBlur;
+  var _f = inputProps || {},
+      disabled = _f.disabled,
+      onFocus = _f.onFocus,
+      onBlur = _f.onBlur;
 
-  var _f = useState(false),
-      active = _f[0],
-      setActive = _f[1];
+  var _g = useState(false),
+      active = _g[0],
+      setActive = _g[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,
@@ -5344,7 +5370,7 @@ var AddSuggestion = function AddSuggestion(_a) {
       })
     }), showDropdown && jsxRuntime.exports.jsx("div", __assign({
       ref: wrapperRef,
-      className: "hplxt-absolute hplxt-mt-1 hplxt-min-w-max hplxt-rounded-lg hplxt-bg-White hplxt-overflow-y-auto hplxt-shadow-md hplxt-z-10 hplxt-max-h-80 "
+      className: "hplxt-absolute hplxt-border hplxt-border-Gray-300  hplxt-mt-1 hplxt-min-w-max hplxt-rounded-lg hplxt-bg-Indigo-25 hplxt-overflow-y-auto hplxt-shadow-md hplxt-z-10 hplxt-max-h-80 "
     }, {
       children: suggestionArr && suggestionArr.length > 0 && jsxRuntime.exports.jsx("div", {
         children: (suggestionArr === null || suggestionArr === void 0 ? void 0 : suggestionArr.constructor) === Array && suggestionArr.length ? suggestionArr.map(function (option) {
@@ -16903,17 +16929,41 @@ var DatePicker = function DatePicker(_a) {
       dateVar = _a.dateVar,
       minDate = _a.minDate,
       maxDate = _a.maxDate,
+      label = _a.label,
+      labelColor = _a.labelColor,
+      labelSize = _a.labelSize,
+      _c = _a.height,
+      height = _c === void 0 ? "" : _c,
+      _d = _a.start_icon,
+      start_icon = _d === void 0 ? "hx_calendar hplxt-text-4" : _d,
+      _e = _a.end_icon,
+      end_icon = _e === void 0 ? "" : _e,
+      _f = _a.hint_text_icon,
+      hint_text_icon = _f === void 0 ? "" : _f,
+      prefix = _a.prefix,
+      suffixButton = _a.suffixButton,
+      suffix = _a.suffix,
+      hint_text = _a.hint_text,
+      char_count = _a.char_count,
+      _g = _a.errorMsg,
+      errorMsg = _g === void 0 ? "" : _g,
+      // inputProps,
+  suffixInputProps = _a.suffixInputProps,
+      suffixDropdown = _a.suffixDropdown,
+      _h = _a.isSuffixEditable,
+      isSuffixEditable = _h === void 0 ? false : _h,
+      suffixPlaceholder = _a.suffixPlaceholder,
       fieldColor = _a.fieldColor,
-      _c = _a.isborderRequired,
-      isborderRequired = _c === void 0 ? true : _c;
+      _j = _a.isborderRequired,
+      isborderRequired = _j === void 0 ? true : _j;
 
-  var _d = useState(),
-      date = _d[0],
-      setDate = _d[1];
+  var _k = useState(),
+      date = _k[0],
+      setDate = _k[1];
 
-  var _e = useState(false),
-      clicked = _e[0],
-      setClicked = _e[1];
+  var _l = useState(false),
+      clicked = _l[0],
+      setClicked = _l[1];
 
   var handleSelect = function handleSelect(date) {
     setDate(date);
@@ -16956,8 +17006,24 @@ var DatePicker = function DatePicker(_a) {
       className: "hplxt-relative hplxt-w-[189px]"
     }, {
       children: jsxRuntime.exports.jsx(InputField, {
+        label: label,
+        labelColor: labelColor,
+        labelSize: labelSize,
+        height: height,
+        end_icon: end_icon,
+        hint_text_icon: hint_text_icon,
+        prefix: prefix,
+        suffixButton: suffixButton,
+        suffix: suffix,
+        hint_text: hint_text,
+        char_count: char_count,
+        errorMsg: errorMsg,
+        suffixInputProps: suffixInputProps,
+        suffixDropdown: suffixDropdown,
+        isSuffixEditable: isSuffixEditable,
+        suffixPlaceholder: suffixPlaceholder,
         isborderRequired: isborderRequired,
-        start_icon: "hx_calendar hplxt-text-4",
+        start_icon: start_icon,
         inputProps: {
           placeholder: "Select date",
           onClick: inputClick,

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

@@ -23,6 +23,34 @@ export interface InputFieldProps {
     isSuffixEditable?: boolean;
     handleSuffixValChange?: (value: any) => void;
 }
+export interface DatePickerProps {
+    disabledDates?: Date[];
+    selectDate?: any;
+    dateVar: (val: Date) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    label?: string;
+    fieldColor?: string;
+    labelSize?: typographyTextType;
+    labelColor?: string;
+    height?: string;
+    prefix?: ReactNode;
+    suffixButton?: ReactNode;
+    suffix?: ReactNode;
+    start_icon?: string;
+    end_icon?: string;
+    hint_text?: string;
+    hint_text_icon?: string;
+    char_count?: string;
+    errorMsg?: string;
+    isborderRequired?: boolean;
+    suffixInputProps?: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+    suffixPlaceholder?: string;
+    suffixDropdown?: any;
+    handleSuffixClick?: (value: any) => void;
+    isSuffixEditable?: boolean;
+    handleSuffixValChange?: (value: any) => void;
+}
 export interface InputFieldSplitProps {
     label?: string;
     labelSize?: typographyTextType;
@@ -62,7 +90,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 +331,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.43",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",