hplx-react-elements-dev 1.0.28 → 1.0.30

package/dist/esm/datePicker/DatePicker.d.ts

@@ -4,7 +4,7 @@ import "react-date-range/dist/theme/default.css";
 import "../datePicker/DatePickerCSS.css";
 export interface DatePickerProps {
     disabledDates: Date[];
-    selectDate?: Date;
+    selectDate?: any;
     dateVar: (val: Date) => void;
     isborderRequired: boolean;
 }

package/dist/esm/index.js

@@ -2256,20 +2256,28 @@ var InputField = function InputField(_a) {
           children: jsxRuntime.exports.jsx("span", {
             className: end_icon
           })
-        })), Boolean(suffix || suffixPlaceholder) && jsxRuntime.exports.jsxs("div", {
-          children: [jsxRuntime.exports.jsxs("div", __assign({
+        })), Boolean(suffix) && !isSuffixEditable && jsxRuntime.exports.jsx("div", __assign({
+          "data-testid": "input-suffix",
+          className: "bg-Gray-50 border-l-1 border-l-Gray-300 text-Gray-500 flex items-center pr-3 pl-[14px]",
+          onClick: function onClick() {
+            return setShowSuffixDropdown(true);
+          }
+        }, {
+          children: !isSuffixEditable && jsxRuntime.exports.jsx(Typography, __assign({
+            type: "Text md",
+            variant: "Regular"
+          }, {
+            children: suffix
+          }))
+        })), Boolean(suffix) && isSuffixEditable && jsxRuntime.exports.jsxs("div", {
+          children: [jsxRuntime.exports.jsx("div", __assign({
             "data-testid": "input-suffix",
             className: "bg-Gray-50 border-l-1 border-l-Gray-300 text-Gray-500 flex items-center pr-3 pl-[14px]",
             onClick: function onClick() {
               return setShowSuffixDropdown(true);
             }
           }, {
-            children: [!isSuffixEditable && jsxRuntime.exports.jsx(Typography, __assign({
-              type: "Text md",
-              variant: "Regular"
-            }, {
-              children: suffix
-            })), isSuffixEditable && jsxRuntime.exports.jsx("input", {
+            children: isSuffixEditable && jsxRuntime.exports.jsx("input", {
               type: "text",
               className: "flex-1 pl-[4px] w-36 pr-[1px] bg-Gray-50 py-2 focus-visible:outline-0 border-0 focus:border-0",
               "data-testid": "text-input",
@@ -2279,7 +2287,7 @@ var InputField = function InputField(_a) {
               onChange: function onChange(e) {
                 return handleSuffixValueChange(e);
               }
-            })]
+            })
           })), showSuffixDropdown && jsxRuntime.exports.jsx("div", __assign({
             ref: wrapperRef,
             className: "absolute mt-1 min-w-max rounded-lg bg-White overflow-y-auto shadow-md z-10 max-h-80 "
@@ -4335,7 +4343,7 @@ var CollapsibleCard = function CollapsibleCard(props) {
         onAnimationEnd: function onAnimationEnd() {
           console.log("onAnimationEnd called");
         },
-        className: "".concat(active ? "max-h-[1000px]" : "max-h-0", " ").concat(active ? "p-5" : "p-0", " transition-all duration-500 ease-in-out overflow-hidden mt-5 ").concat(getWidth(width), " ").concat(getHeight(height), " text-ellipsis")
+        className: "".concat(active ? "max-h-[1000px] overflow-visible" : "max-h-0 overflow-hidden", " ").concat(active ? "p-5" : "p-0", " transition-all duration-500 ease-in-out mt-5 ").concat(getWidth(width), " ").concat(getHeight(height), " text-ellipsis")
       }, {
         children: [header && jsxRuntime.exports.jsx("div", __assign({
           className: "flex flex-1 m-1 p-4"
@@ -5214,7 +5222,7 @@ var AddSuggestion = function AddSuggestion(_a) {
 
     if (options && options.length > 0) {
       var sug = options.filter(function (options) {
-        return options.label.toLowerCase().includes(e.target.value.split(", ").pop().toLowerCase());
+        return options.label.toLowerCase().includes(e.target.value.split(",").pop().toLowerCase());
       } // last keyboad input after ,
       );
       setSuggestionArr(sug);
@@ -5229,16 +5237,24 @@ var AddSuggestion = function AddSuggestion(_a) {
     }
   };
 
-  var handleSuggestionClick = function handleSuggestionClick(selectedValue) {
-    var debris = suggestionValue.split(", "); //explode string into array of strings indexed by  /, |. |\s /
+  var checkComma = function checkComma(val) {
+    var lastEle = val.charAt(suggestionValue.length - 1);
 
-    debris.pop(); //pop last element off the array (which we didn't want)
+    if (lastEle === ",") {
+      return "";
+    } else {
+      return ", ";
+    }
+  };
 
-    var result = debris.join(", ");
+  var handleSuggestionClick = function handleSuggestionClick(selectedValue) {
+    // const 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)
+    // const result = debris.join(", ");
     var res;
 
-    if (result.length > 0) {
-      res = result + ", " + selectedValue.label;
+    if (suggestionValue.length > 0) {
+      res = suggestionValue + checkComma(suggestionValue) + selectedValue.label;
     } else {
       res = selectedValue.label;
     }
@@ -16850,36 +16866,43 @@ DateRangePicker$1.default = _default;
 
 var DatePicker = function DatePicker(_a) {
   var disabledDates = _a.disabledDates,
-      selectDate = _a.selectDate,
+      _b = _a.selectDate,
+      selectDate = _b === void 0 ? undefined : _b,
       dateVar = _a.dateVar,
-      _b = _a.isborderRequired,
-      isborderRequired = _b === void 0 ? true : _b;
+      _c = _a.isborderRequired,
+      isborderRequired = _c === void 0 ? true : _c;
 
-  var _c = useState(new Date(selectDate ? selectDate : new Date())),
-      date = _c[0],
-      setDate = _c[1];
+  var _d = useState(),
+      date = _d[0],
+      setDate = _d[1];
 
-  var _d = useState(false),
-      selected = _d[0],
-      setSelected = _d[1];
-
-  useEffect(function () {
-    if (selectDate) setDate(selectDate);
-  }, [selectDate]);
+  var _e = useState(false),
+      clicked = _e[0],
+      setClicked = _e[1];
 
   var handleSelect = function handleSelect(date) {
     setDate(date);
-    setSelected(!selected);
+    setClicked(!clicked);
     console.log(dayjs().format("MMM DD, YYYY"));
     dateVar(date);
   };
 
   var inputClick = function inputClick() {
-    setSelected(!selected);
+    setClicked(!clicked);
   };
 
+  useEffect(function () {
+    var handleClickOutside = function handleClickOutside() {
+      return setClicked(false);
+    };
+
+    document.addEventListener("mouseup", handleClickOutside);
+    return function () {
+      document.removeEventListener("mouseup", handleClickOutside);
+    };
+  }, [clicked]);
   return jsxRuntime.exports.jsxs("div", __assign({
-    className: "px-[14px] py-[10px]"
+    className: " px-[14px] py-[10px] "
   }, {
     children: [jsxRuntime.exports.jsx("div", __assign({
       className: "relative w-[189px]"
@@ -16888,20 +16911,19 @@ var DatePicker = function DatePicker(_a) {
         isborderRequired: isborderRequired,
         start_icon: "hx_calendar",
         inputProps: {
-          placeholder: date ? dayjs(date).format("MMM DD, YYYY") : "select dates",
-          value: dayjs(date).format("MMM DD, YYYY"),
-          onClick: inputClick
+          placeholder: "Select date",
+          onClick: inputClick,
+          value: date ? dayjs(date).format("MMM DD, YYYY") : selectDate === null || selectDate === void 0 ? void 0 : selectDate.toString()
         }
       })
     })), jsxRuntime.exports.jsx("div", __assign({
-      className: "absolute ".concat(selected ? "block" : "hidden", " mt-1  z-10 ")
+      className: "absolute mt-1  z-10 "
     }, {
-      children: jsxRuntime.exports.jsx(dist.Calendar, {
+      children: clicked ? jsxRuntime.exports.jsx(dist.Calendar, {
         date: dayjs(date).isValid() ? date : new Date(),
         onChange: handleSelect,
-        dateDisplayFormat: "MMM d, yyyy",
         disabledDates: disabledDates
-      })
+      }) : null
     }))]
   }));
 };

package/package.json

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