hplx-react-elements-dev 1.0.40 → 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, 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

@@ -2083,7 +2083,7 @@ var DropdownItems = function DropdownItems(_a) {
     onClick: function onClick() {
       !disabled && onSelect && onSelect(value);
     },
-    className: "hplxt-h-10 hplxt-flex hplxt-items-center hplxt-px-2  ".concat(disabled ? "hplxt-cursor-not-allowed" : "hover:hplxt-bg-Gray-50 hplxt-cursor-pointer"),
+    className: "hplxt-h-10 hplxt-flex hplxt-items-center hplxt-px-2  ".concat(disabled ? "hplxt-cursor-not-allowed" : "hover:hplxt-bg-Blue_gray-100 hplxt-cursor-pointer"),
     onMouseEnter: onMouseEnterHandler,
     onMouseLeave: onMouseLeaveHandler
   }, {
@@ -2094,12 +2094,12 @@ var DropdownItems = function DropdownItems(_a) {
         className: start_icon
       })
     })), jsxRuntime.exports.jsx(Typography, __assign({
-      variant: hover && !disabled ? 'Medium' : 'Regular',
+      variant: hover && !disabled ? "Medium" : "Regular",
       type: "Text md",
       className: "hplxt-truncate"
     }, {
       children: jsxRuntime.exports.jsx("div", __assign({
-        className: "hplxt-flex-1 ".concat(disabled ? 'hplxt-text-Gray-200' : 'hplxt-text-Gray-700', " ").concat(className),
+        className: "hplxt-flex-1 ".concat(disabled ? "hplxt-text-Gray-200" : "hplxt-text-Gray-700", " ").concat(className),
         title: checkOverFlow() ? label : undefined,
         ref: ref
       }, {
@@ -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
         }))
@@ -4271,8 +4292,9 @@ var CollapsibleCard = function CollapsibleCard(props) {
       header = _a.header,
       children = _a.children,
       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,
@@ -4331,20 +4353,30 @@ var CollapsibleCard = function CollapsibleCard(props) {
 
   if (direction === "up" || direction === "down") {
     return jsxRuntime.exports.jsxs("div", __assign({
-      className: "hplxt-flex hplxt-m-5 ".concat(direction === "down" ? "hplxt-flex-col" : "hplxt-flex-col-reverse")
+      className: "hplxt-flex hplxt-flex-col  ".concat(direction === "down" ? "hplxt-flex-col" : "hplxt-flex-col-reverse")
     }, {
       children: [jsxRuntime.exports.jsxs("div", __assign({
         className: "hplxt-flex hplxt-flex-1 hplxt-flex-row hplxt-items-center"
       }, {
-        children: [jsxRuntime.exports.jsx(Tooltip, __assign({
+        children: [title && jsxRuntime.exports.jsx("div", __assign({
+          className: "hplxt-flex hplxt-mr-6 hplxt-items-center "
+        }, {
+          children: jsxRuntime.exports.jsx(Typography, __assign({
+            variant: "Medium",
+            type: "Text md",
+            className: "hplxt-text-Gray-800"
+          }, {
+            children: title
+          }))
+        })), jsxRuntime.exports.jsx(Tooltip, __assign({
           variant: "Top",
           text: active ? "Click here to collapse" : "Click here to expand",
           theme: "light"
         }, {
           children: jsxRuntime.exports.jsx(Button, {
             onClick: OnButtonClick,
-            hierarchy: "Secondary-Grey-Dashed",
-            size: "lg",
+            hierarchy: "Secondary-Grey",
+            size: "sm",
             icon: icon,
             iconFile: active ? closeIcon : openIcon,
             textField: label,
@@ -4356,7 +4388,7 @@ var CollapsibleCard = function CollapsibleCard(props) {
         onAnimationEnd: function onAnimationEnd() {
           console.log("onAnimationEnd called");
         },
-        className: "".concat(active ? "hplxt-max-h-[1000px] hplxt-overflow-visible" : "hplxt-max-h-0 hplxt-overflow-hidden", " ").concat(active ? "hplxt-p-5" : "hplxt-p-0", " hplxt-transition-all hplxt-duration-500 hplxt-ease-in-out hplxt-mt-5 ").concat(getWidth(width), " ").concat(getHeight(height), " hplxt-text-ellipsis")
+        className: "".concat(active ? "hplxt-max-h-[1000px] hplxt-overflow-visible" : "hplxt-max-h-0 hplxt-overflow-hidden", " ").concat(active ? "hplxt-p-5" : "hplxt-p-0", " hplxt-transition-all hplxt-duration-500 hplxt-ease-in-out hplxt-mt-5 ").concat(getWidth(width), " ").concat(getHeight(height), " hplxt-text-ellipsis\n          ")
       }, {
         children: [header && jsxRuntime.exports.jsx("div", __assign({
           className: "hplxt-flex hplxt-flex-1 hplxt-m-1 hplxt-p-4"
@@ -5208,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,
@@ -5221,17 +5254,20 @@ var AddSuggestion = function AddSuggestion(_a) {
       _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);
@@ -5308,6 +5344,7 @@ var AddSuggestion = function AddSuggestion(_a) {
       hint_text: hint_text,
       hint_text_icon: hint_text_icon,
       errorMsg: errorMsg,
+      fieldColor: fieldColor,
       suffixPlaceholder: suffixPlaceholder,
       isborderRequired: isborderRequired,
       isSuffixEditable: isSuffixEditable,
@@ -5321,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";
@@ -185,6 +187,7 @@ export interface CardType {
 }
 type CollapseDirection = "up" | "down" | "left" | "right";
 export interface CollapsibleCardProps {
+    title?: ReactNode;
     direction?: CollapseDirection;
     label?: string;
     children?: ReactNode;
@@ -300,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;
@@ -312,6 +317,7 @@ export interface AddSuggestionProps {
     suffix?: ReactNode;
     start_icon?: string;
     end_icon?: string;
+    fieldColor?: string;
     hint_text?: string;
     hint_text_icon?: string;
     char_count?: string;

package/package.json

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