hplx-react-elements-dev 1.0.23 → 1.0.25

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { AddSuggestionProps } from "../types";
-declare const AddSuggestion: ({ isInputField, label, start_icon, end_icon, prefix, suffixButton, suffix, char_count, onSuggestionClick, height, hint_text_icon, hint_text, errorMsg, inputProps, inputFieldInputProps, options }: AddSuggestionProps) => JSX.Element;
+declare const AddSuggestion: ({ isInputField, label, start_icon, end_icon, prefix, suffixButton, suffix, char_count, onSuggestionClick, height, hint_text_icon, hint_text, errorMsg, inputProps, inputFieldInputProps, options, suggestionValue, handleSuggestionValChange }: AddSuggestionProps) => JSX.Element;
 export default AddSuggestion;

package/dist/esm/index.js

@@ -203,8 +203,29 @@ var InputField = function InputField(_a) {
       inputProps = _a.inputProps,
       _f = _a.isborderRequired,
       isborderRequired = _f === void 0 ? true : _f;
-  var disabled = (inputProps || {}).disabled;
-  return jsxRuntime.exports.jsxs("div", {
+
+  var _g = inputProps || {},
+      disabled = _g.disabled,
+      onFocus = _g.onFocus,
+      onBlur = _g.onBlur;
+
+  var _h = useState(false),
+      active = _h[0],
+      setActive = _h[1];
+
+  var handleFocus = function handleFocus(event) {
+    setActive(true);
+    onFocus && onFocus(event);
+  };
+
+  var handleBlur = function handleBlur(event) {
+    setActive(false);
+    onBlur && onBlur(event);
+  };
+
+  return jsxRuntime.exports.jsxs("div", __assign({
+    className: "inputfield"
+  }, {
     children: [jsxRuntime.exports.jsxs("div", __assign({
       className: "flex justify-between"
     }, {
@@ -233,7 +254,7 @@ var InputField = function InputField(_a) {
     }, {
       children: jsxRuntime.exports.jsxs("div", __assign({
         "data-setid": "error-msg",
-        className: "flex ".concat(isborderRequired ? "border-1" : "", " overflow-hidden placeholder:text-Gray-500 ").concat(errorMsg ? "border-Error-300" : "border-Gray-300", " shadow-xs rounded-lg  h-10 ").concat(disabled ? "bg-Gray-50" : "bg-White ".concat(errorMsg ? "hover:shadow-xs-error" : " ".concat(isborderRequired ? "hover:border-Primary-300 hover:shadow-xs-primary" : " ")))
+        className: "flex ".concat(isborderRequired ? "border-1" : "", " overflow-hidden placeholder:text-Gray-500 ").concat(errorMsg ? "border-Error-300" : "border-Gray-300", " shadow-xs rounded-lg  h-10 ").concat(disabled ? "bg-Gray-50" : "bg-White ".concat(errorMsg ? "hover:shadow-xs-error ".concat(active && "shadow-xs-error") : " ".concat(isborderRequired ? "hover:border-Primary-300 hover:shadow-xs-primary ".concat(active && "border-Primary-300 shadow-xs-primary") : " ")))
       }, {
         children: [Boolean(prefix) && jsxRuntime.exports.jsx("div", __assign({
           "data-testid": "input-prefix",
@@ -253,9 +274,12 @@ var InputField = function InputField(_a) {
           })
         })), jsxRuntime.exports.jsx("input", __assign({
           type: "text",
-          className: "flex-1 pl-[14px] pr-[12px] py-1 focus-visible:outline-0",
+          className: "flex-1 pl-[14px] pr-[12px] py-1 focus-visible:outline-0 border-0 focus:border-0",
           "data-testid": "text-input"
-        }, inputProps)), Boolean(end_icon) && jsxRuntime.exports.jsx("div", __assign({
+        }, inputProps, {
+          onFocus: handleFocus,
+          onBlur: handleBlur
+        })), Boolean(end_icon) && jsxRuntime.exports.jsx("div", __assign({
           className: "text-Gray-500 flex items-center pr-2"
         }, {
           children: jsxRuntime.exports.jsx("span", {
@@ -297,17 +321,19 @@ var InputField = function InputField(_a) {
         })
       }))
     }))]
-  });
+  }));
 };
 
 var InputFieldSplit = function InputFieldSplit(_a) {
+  var _b;
+
   var label = _a.label,
-      _b = _a.start_icon,
-      start_icon = _b === void 0 ? "" : _b,
-      _c = _a.end_icon,
-      end_icon = _c === void 0 ? "" : _c,
-      _d = _a.hint_text_icon,
-      hint_text_icon = _d === void 0 ? "" : _d,
+      _c = _a.start_icon,
+      start_icon = _c === void 0 ? "" : _c,
+      _d = _a.end_icon,
+      end_icon = _d === void 0 ? "" : _d,
+      _e = _a.hint_text_icon,
+      hint_text_icon = _e === void 0 ? "" : _e,
       prefix = _a.prefix,
       suffix = _a.suffix,
       hint_text = _a.hint_text,
@@ -317,7 +343,15 @@ var InputFieldSplit = function InputFieldSplit(_a) {
       onChange = _a.onChange,
       value = _a.value,
       inputProps = _a.inputProps;
-  var disabled = (inputProps || {}).disabled;
+
+  var _f = inputProps || {},
+      disabled = _f.disabled,
+      onFocus = _f.onFocus,
+      onBlur = _f.onBlur;
+
+  var _g = useState((_b = {}, _b[fieldNames[0]] = false, _b[fieldNames[1]] = false, _b)),
+      active = _g[0],
+      setActive = _g[1];
 
   var handleChange = function handleChange(fieldName) {
     return function (event) {
@@ -329,7 +363,31 @@ var InputFieldSplit = function InputFieldSplit(_a) {
     };
   };
 
-  return jsxRuntime.exports.jsxs("div", {
+  var handleFocus = function handleFocus(fieldName) {
+    return function (event) {
+      setActive(function (prevValue) {
+        var _a;
+
+        return __assign(__assign({}, prevValue), (_a = {}, _a[fieldName] = true, _a));
+      });
+      onFocus && onFocus(event);
+    };
+  };
+
+  var handleBlur = function handleBlur(fieldName) {
+    return function (event) {
+      setActive(function (prevValue) {
+        var _a;
+
+        return __assign(__assign({}, prevValue), (_a = {}, _a[fieldName] = false, _a));
+      });
+      onBlur && onBlur(event);
+    };
+  };
+
+  return jsxRuntime.exports.jsxs("div", __assign({
+    className: "inputfieldsplit"
+  }, {
     children: [jsxRuntime.exports.jsxs("div", __assign({
       className: "flex justify-between"
     }, {
@@ -357,7 +415,7 @@ var InputFieldSplit = function InputFieldSplit(_a) {
       type: "Text md"
     }, {
       children: jsxRuntime.exports.jsxs("div", __assign({
-        className: "flex border-1 overflow-hidden placeholder:text-Gray-500 ".concat(errorMsg ? "border-Error-300" : "border-Gray-300", " shadow-xs rounded-lg  h-10 ").concat(disabled ? "bg-Gray-50" : "bg-White ".concat(errorMsg ? "hover:shadow-xs-error" : "hover:border-Primary-300 hover:shadow-xs-primary"))
+        className: "flex border-1 overflow-hidden placeholder:text-Gray-500 ".concat(errorMsg ? "border-Error-300" : "border-Gray-300", " shadow-xs rounded-lg  h-10 ").concat(disabled ? "bg-Gray-50" : "bg-White ".concat(errorMsg ? "hover:shadow-xs-error ".concat((active[fieldNames[0]] || active[fieldNames[1]]) && "shadow-xs-error") : "hover:border-Primary-300 hover:shadow-xs-primary ".concat((active[fieldNames[0]] || active[fieldNames[1]]) && "border-Primary-300 shadow-xs-primary")))
       }, {
         children: [Boolean(prefix) && jsxRuntime.exports.jsx("div", __assign({
           "data-testid": "input-prefix",
@@ -376,14 +434,16 @@ var InputFieldSplit = function InputFieldSplit(_a) {
             className: start_icon
           })
         })), jsxRuntime.exports.jsxs("div", __assign({
-          className: "flex-1 relative flex min-w-100"
+          className: "flex-1 relative flex min-w-105"
         }, {
           children: [jsxRuntime.exports.jsx("input", __assign({
             type: "text",
-            className: "pl-[14px] py-1 focus-visible:outline-0 absolute top-0 bottom-0 left-0 right-1/2 mr-2 "
+            className: "pl-[14px] py-1 focus-visible:outline-0 absolute top-0 bottom-0 left-0 right-1/2 mr-2 border-0 focus:border-0"
           }, inputProps, {
             value: value && value[fieldNames[0]],
             onChange: handleChange(fieldNames[0]),
+            onFocus: handleFocus(fieldNames[0]),
+            onBlur: handleBlur(fieldNames[0]),
             "data-testid": "text1-input"
           })), jsxRuntime.exports.jsx("div", __assign({
             className: "flex-1 flex justify-center items-center"
@@ -397,10 +457,12 @@ var InputFieldSplit = function InputFieldSplit(_a) {
             }))
           })), jsxRuntime.exports.jsx("input", __assign({
             type: "text",
-            className: "pr-2 py-1 focus-visible:outline-0 absolute top-0 bottom-0 left-1/2 right-0 ml-2"
+            className: "pr-2 py-1 focus-visible:outline-0 absolute top-0 bottom-0 left-1/2 right-0 ml-2 border-0 focus:border-0"
           }, inputProps, {
             value: value && value[fieldNames[1]],
             onChange: handleChange(fieldNames[1]),
+            onFocus: handleFocus(fieldNames[1]),
+            onBlur: handleBlur(fieldNames[1]),
             "data-testid": "text2-input"
           }))]
         })), Boolean(end_icon) && jsxRuntime.exports.jsx("div", __assign({
@@ -435,7 +497,7 @@ var InputFieldSplit = function InputFieldSplit(_a) {
         })
       }))
     }))]
-  });
+  }));
 };
 
 var TextAreaField = function TextAreaField(_a) {
@@ -447,9 +509,30 @@ var TextAreaField = function TextAreaField(_a) {
       errorMsg = _c === void 0 ? "" : _c,
       inputProps = _a.inputProps,
       _d = _a.height,
-      height = _d === void 0 ? 'h-32' : _d;
-  var disabled = (inputProps || {}).disabled;
-  return jsxRuntime.exports.jsxs("div", {
+      height = _d === void 0 ? "h-32" : _d;
+
+  var _e = inputProps || {},
+      disabled = _e.disabled,
+      onFocus = _e.onFocus,
+      onBlur = _e.onBlur;
+
+  var _f = useState(false),
+      active = _f[0],
+      setActive = _f[1];
+
+  var handleFocus = function handleFocus(event) {
+    setActive(true);
+    onFocus && onFocus(event);
+  };
+
+  var handleBlur = function handleBlur(event) {
+    setActive(false);
+    onBlur && onBlur(event);
+  };
+
+  return jsxRuntime.exports.jsxs("div", __assign({
+    className: "textfield"
+  }, {
     children: [Boolean(label) && jsxRuntime.exports.jsx("div", __assign({
       className: "text-Gray-700 mb-1"
     }, {
@@ -464,11 +547,14 @@ var TextAreaField = function TextAreaField(_a) {
       type: "Text md"
     }, {
       children: jsxRuntime.exports.jsx("div", __assign({
-        className: "flex border-1 overflow-hidden placeholder:text-Gray-500 ".concat(errorMsg ? "border-Error-300" : "border-Gray-300", " shadow-xs rounded-lg ").concat(height, " ").concat(disabled ? "bg-Gray-50" : "bg-White ".concat(errorMsg ? "hover:shadow-xs-error" : "hover:border-Primary-300 hover:shadow-xs-primary"))
+        className: "flex border-1 overflow-hidden placeholder:text-Gray-500 ".concat(errorMsg ? "border-Error-300" : "border-Gray-300", " shadow-xs rounded-lg ").concat(height, " ").concat(disabled ? "bg-Gray-50" : "bg-White ".concat(errorMsg ? "hover:shadow-xs-error ".concat(active && "shadow-xs-error") : "hover:border-Primary-300 hover:shadow-xs-primary ".concat(active && "border-Primary-300 shadow-xs-primary")))
       }, {
         children: jsxRuntime.exports.jsx("textarea", __assign({
-          className: "flex-1 px-2 py-2 focus-visible:outline-0"
-        }, inputProps))
+          className: "flex-1 px-2 py-2 focus-visible:outline-0 border-0 focus:border-0"
+        }, inputProps, {
+          onFocus: handleFocus,
+          onBlur: handleBlur
+        }))
       }))
     })), (Boolean(hint_text) || Boolean(errorMsg)) && jsxRuntime.exports.jsx("div", __assign({
       className: "".concat(errorMsg ? "text-Error-500" : "text-Gray-500 mt-1")
@@ -484,7 +570,7 @@ var TextAreaField = function TextAreaField(_a) {
         })
       }))
     }))]
-  });
+  }));
 };
 
 var getSizeClassName$6 = function getSizeClassName(size) {
@@ -523,8 +609,30 @@ var OtpField = function OtpField(_a) {
       _e = _a.errorMsg,
       errorMsg = _e === void 0 ? "" : _e,
       inputProps = _a.inputProps;
-  var value = (inputProps || {}).value;
-  return jsxRuntime.exports.jsxs("div", {
+
+  var _f = inputProps || {},
+      disabled = _f.disabled,
+      value = _f.value,
+      onFocus = _f.onFocus,
+      onBlur = _f.onBlur;
+
+  var _g = useState(false),
+      active = _g[0],
+      setActive = _g[1];
+
+  var handleFocus = function handleFocus(event) {
+    setActive(true);
+    onFocus && onFocus(event);
+  };
+
+  var handleBlur = function handleBlur(event) {
+    setActive(false);
+    onBlur && onBlur(event);
+  };
+
+  return jsxRuntime.exports.jsxs("div", __assign({
+    className: "otpfield"
+  }, {
     children: [Boolean(label) && jsxRuntime.exports.jsx("div", __assign({
       className: "text-Gray-700 mb-1"
     }, {
@@ -539,9 +647,12 @@ var OtpField = function OtpField(_a) {
     }, {
       children: [jsxRuntime.exports.jsx("input", __assign({
         type: "text",
-        className: "absolute top-0 bottom-0 left-0 right-0 opacity-0",
+        className: "absolute top-0 bottom-0 left-0 right-0 opacity-0 border-0 focus:border-0",
         maxLength: digits
-      }, inputProps)), jsxRuntime.exports.jsx("div", __assign({
+      }, inputProps, {
+        onFocus: handleFocus,
+        onBlur: handleBlur
+      })), jsxRuntime.exports.jsx("div", __assign({
         className: "flex pointer-events-none"
       }, {
         children: Array(digits).fill("").map(function (_, index) {
@@ -558,7 +669,7 @@ var OtpField = function OtpField(_a) {
                 children: "-"
               }))
             })), jsxRuntime.exports.jsx("div", __assign({
-              className: "flex items-center justify-center border-1 border-Gray-300 rounded-lg mx-1 ".concat(getSizeClassName$6(size))
+              className: "flex items-center justify-center border-1 ".concat(errorMsg ? "border-Error-300" : "border-Gray-300", " ").concat(disabled ? "bg-Gray-50" : typeof value === "string" && value.length === index && "bg-White ".concat(errorMsg ? "hover:shadow-xs-error ".concat(active && "shadow-xs-error") : "hover:border-Primary-300 hover:shadow-xs-primary ".concat(active && "border-Primary-300 shadow-xs-primary")), " rounded-lg mx-1 ").concat(getSizeClassName$6(size))
             }, {
               children: typeof value === "string" && !!value[index] ? jsxRuntime.exports.jsx(Typography, __assign({
                 type: size === "lg" ? "Display xl" : "Display lg",
@@ -593,7 +704,7 @@ var OtpField = function OtpField(_a) {
         })
       }))
     }))]
-  });
+  }));
 };
 
 var ButtonGroups = function ButtonGroups(_a) {
@@ -4135,12 +4246,14 @@ var RadioBtn = function RadioBtn(_a) {
       id = _a.id,
       text = _a.text,
       secondaryText = _a.secondaryText;
-  return jsxRuntime.exports.jsx("div", {
+  return jsxRuntime.exports.jsx("div", __assign({
+    className: "radiobutton"
+  }, {
     children: jsxRuntime.exports.jsxs("div", __assign({
       className: "p-4 flex flex-row flex-1 "
     }, {
       children: [jsxRuntime.exports.jsx("input", {
-        className: "sr-only peer ",
+        className: "sr-only peer border-0 focus:border-0",
         type: "radio",
         value: "first",
         name: "radioBtn",
@@ -4169,7 +4282,7 @@ var RadioBtn = function RadioBtn(_a) {
         }))]
       }))]
     }))
-  });
+  }));
 };
 
 var getSizeClassName$1 = function getSizeClassName(size) {
@@ -4656,7 +4769,9 @@ var Slider = function Slider(_a) {
       progressRef.current.style.right = 100 - maxValue + "%";
     }
   }, [minValue, maxValue, max, step]);
-  return jsxRuntime.exports.jsx("div", {
+  return jsxRuntime.exports.jsx("div", __assign({
+    className: "slider"
+  }, {
     children: jsxRuntime.exports.jsxs("div", __assign({
       className: "flex flex-col w-96 px-8 py-4"
     }, {
@@ -4703,7 +4818,7 @@ var Slider = function Slider(_a) {
             step: 25,
             max: max,
             value: minValue,
-            className: "range-min absolute w-full -top-2  h-2  bg-transparent  appearance-none bg-Black/0 accent-White"
+            className: "range-min absolute w-full -top-2  h-2  bg-transparent  appearance-none bg-Black/0 accent-White border-0 focus:border-0"
           }), jsxRuntime.exports.jsx("input", {
             onChange: function onChange(e) {
               setMaxValue(e.target.value);
@@ -4713,12 +4828,12 @@ var Slider = function Slider(_a) {
             step: 25,
             max: max,
             value: maxValue,
-            className: "range-max absolute w-full -top-2 h-2  bg-transparent appearance-none bg-Black/0 accent-White "
+            className: "range-max absolute w-full -top-2 h-2  bg-transparent appearance-none bg-Black/0 accent-White border-0 focus:border-0"
           })]
         }))]
       }))]
     }))
-  });
+  }));
 };
 
 // md-Medium,
@@ -4965,11 +5080,10 @@ var AddSuggestion = function AddSuggestion(_a) {
       errorMsg = _h === void 0 ? "" : _h,
       inputProps = _a.inputProps,
       inputFieldInputProps = _a.inputFieldInputProps,
-      options = _a.options;
-
-  var _j = useState(inputProps && typeof inputProps.value === "string" ? inputProps.value : ""),
-      value = _j[0],
-      setValue = _j[1];
+      options = _a.options,
+      _j = _a.suggestionValue,
+      suggestionValue = _j === void 0 ? "" : _j,
+      handleSuggestionValChange = _a.handleSuggestionValChange;
 
   var _k = useState(false),
       showDropdown = _k[0],
@@ -4987,7 +5101,7 @@ var AddSuggestion = function AddSuggestion(_a) {
         return options.label.toLowerCase().includes(e.target.value.split(", ").pop().toLowerCase());
       } // last keyboad input after ,
       );
-      setValue(e.target.value);
+      handleSuggestionValChange && handleSuggestionValChange(e.target.value);
       setSuggestionArr(sug);
     }
   };
@@ -4999,7 +5113,7 @@ var AddSuggestion = function AddSuggestion(_a) {
   };
 
   var handleSuggestionClick = function handleSuggestionClick(selectedValue) {
-    var debris = value.split(", "); //explode string into array of strings indexed by  /, |. |\s /
+    var debris = suggestionValue.split(", "); //explode string into array of strings indexed by  /, |. |\s /
 
     debris.pop(); //pop last element off the array (which we didn't want)
 
@@ -5012,7 +5126,7 @@ var AddSuggestion = function AddSuggestion(_a) {
       res = selectedValue.label;
     }
 
-    setValue(res);
+    handleSuggestionValChange && handleSuggestionValChange(res);
     onSuggestionClick(selectedValue);
   }; // Attaching the previous event with UseEffect hook
 
@@ -5041,7 +5155,7 @@ var AddSuggestion = function AddSuggestion(_a) {
       errorMsg: errorMsg,
       inputProps: __assign(__assign({}, inputFieldInputProps), {
         onChange: changeHandler,
-        value: value,
+        value: suggestionValue,
         onFocus: function onFocus() {
           return setShowDropdown(true);
         }
@@ -5054,7 +5168,7 @@ var AddSuggestion = function AddSuggestion(_a) {
       height: height,
       inputProps: __assign(__assign({}, inputProps), {
         onChange: changeHandler,
-        value: value,
+        value: suggestionValue,
         onFocus: function onFocus() {
           return setShowDropdown(true);
         }

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, height, }: TextAreaFieldProps) => JSX.Element;
 export default TextAreaField;

package/dist/esm/types.d.ts

@@ -301,5 +301,7 @@ export interface AddSuggestionProps {
     inputFieldInputProps?: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
     onSuggestionClick?: (selectedValue: any) => void;
     options?: Array<DropdownItemsProps>;
+    suggestionValue?: string;
+    handleSuggestionValChange?: (value: any) => void;
 }
 export {};

package/package.json

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