hplx-react-elements-dev 1.0.56 → 1.0.58

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

@@ -3,5 +3,5 @@ import "react-date-range/dist/styles.css";
 import "react-date-range/dist/theme/default.css";
 import "../datePicker/DatePickerCSS.css";
 import { DatePickerProps } from "../types";
-declare const DatePicker: ({ disabledDates, selectDate, dateVar, minDate, maxDate, label, width, labelColor, labelSize, placeholder, 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;
+declare const DatePicker: ({ disabledDates, selectDate, dateVar, minDate, maxDate, label, width, labelColor, labelSize, placeholder, height, start_icon, end_icon, hint_text_icon, prefix, suffixButton, suffix, hint_text, showPlaceHolderOnly, char_count, errorMsg, suffixInputProps, suffixDropdown, isSuffixEditable, suffixPlaceholder, fieldColor, isborderRequired, }: DatePickerProps) => JSX.Element;
 export default DatePicker;

package/dist/esm/index.js

@@ -5478,7 +5478,7 @@ var AddSuggestion = function AddSuggestion(_a) {
 
     if (options && options.length > 0) {
       sug = options === null || options === void 0 ? void 0 : 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().trim().toLowerCase());
       } // last keyboad input after ,
       );
       setSuggestionArr(sug);
@@ -5519,15 +5519,16 @@ var AddSuggestion = function AddSuggestion(_a) {
   };
 
   var handleSuggestionClick = function handleSuggestionClick(selectedItem) {
-    var val = selectedItem.label;
+    var val = selectedItem.label + ", ";
     var result = "";
 
     if (suggestionValue === null || suggestionValue === void 0 ? void 0 : suggestionValue.length) {
+      suggestionValue = suggestionValue.slice(0, suggestionValue.lastIndexOf(","));
       var debris = suggestionValue.trim().split(", "); //explode string into array of strings indexed by  /, |. |\s /
       // debris.pop(); //pop last element off the array (which we didn't want)
 
       result = debris.join(", ");
-      val = result + checkComma(result) + selectedItem.label;
+      val = result + checkComma(result) + selectedItem.label + ", ";
     }
 
     handleSuggestionValChange && handleSuggestionValChange(val);
@@ -17175,26 +17176,28 @@ var DatePicker = function DatePicker(_a) {
       suffixButton = _a.suffixButton,
       suffix = _a.suffix,
       hint_text = _a.hint_text,
+      _g = _a.showPlaceHolderOnly,
+      showPlaceHolderOnly = _g === void 0 ? false : _g,
       char_count = _a.char_count,
-      _g = _a.errorMsg,
-      errorMsg = _g === void 0 ? "" : _g,
+      _h = _a.errorMsg,
+      errorMsg = _h === void 0 ? "" : _h,
       // inputProps,
   suffixInputProps = _a.suffixInputProps,
       suffixDropdown = _a.suffixDropdown,
-      _h = _a.isSuffixEditable,
-      isSuffixEditable = _h === void 0 ? false : _h,
+      _j = _a.isSuffixEditable,
+      isSuffixEditable = _j === void 0 ? false : _j,
       suffixPlaceholder = _a.suffixPlaceholder,
       fieldColor = _a.fieldColor,
-      _j = _a.isborderRequired,
-      isborderRequired = _j === void 0 ? true : _j;
+      _k = _a.isborderRequired,
+      isborderRequired = _k === void 0 ? true : _k;
 
-  var _k = useState(),
-      date = _k[0],
-      setDate = _k[1];
+  var _l = useState(),
+      date = _l[0],
+      setDate = _l[1];
 
-  var _l = useState(false),
-      clicked = _l[0],
-      setClicked = _l[1];
+  var _m = useState(false),
+      clicked = _m[0],
+      setClicked = _m[1];
 
   var handleSelect = function handleSelect(date) {
     setDate(date);
@@ -17233,10 +17236,10 @@ var DatePicker = function DatePicker(_a) {
   return jsxRuntime.exports.jsxs("div", __assign({
     className: ""
   }, {
-    children: [jsxRuntime.exports.jsx("div", __assign({
+    children: [jsxRuntime.exports.jsxs("div", __assign({
       className: "hplxt-relative "
     }, {
-      children: jsxRuntime.exports.jsx(InputField, {
+      children: [!showPlaceHolderOnly && jsxRuntime.exports.jsx(InputField, {
         width: width ? width : "8em",
         label: label,
         labelColor: labelColor,
@@ -17263,7 +17266,15 @@ var DatePicker = function DatePicker(_a) {
           value: date ? dayjs(date).format("MMM DD, YYYY") : selectDate === null || selectDate === void 0 ? void 0 : selectDate.toString()
         },
         fieldColor: fieldColor
-      })
+      }), showPlaceHolderOnly && jsxRuntime.exports.jsx(Button, {
+        hierarchy: "Secondary-Grey",
+        size: "sm",
+        textField: "Date",
+        icon: "Left",
+        iconFile: "hx_calendar-add hplxt-text-3 ",
+        onClick: inputClick,
+        className: "hplxt-text-Gray-700"
+      })]
     })), jsxRuntime.exports.jsx("div", __assign({
       className: "hplxt-absolute hplxt-mt-1 hplxt-z-10"
     }, {

package/dist/esm/types.d.ts

@@ -36,6 +36,7 @@ export interface DatePickerProps {
     minDate?: Date;
     width?: string | number;
     maxDate?: Date;
+    showPlaceHolderOnly?: boolean;
     label?: string;
     border?: string;
     fieldColor?: string;

package/package.json

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