hplx-react-elements-dev 1.0.35 → 1.0.36

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

@@ -9,6 +9,7 @@ export interface DatePickerProps {
     isborderRequired?: boolean;
     minDate?: Date;
     maxDate?: Date;
+    fieldColor?: string;
 }
-declare const DatePicker: ({ disabledDates, selectDate, dateVar, minDate, maxDate, isborderRequired, }: DatePickerProps) => JSX.Element;
+declare const DatePicker: ({ disabledDates, selectDate, dateVar, minDate, maxDate, fieldColor, isborderRequired, }: DatePickerProps) => JSX.Element;
 export default DatePicker;

package/dist/esm/index.js

@@ -2126,30 +2126,30 @@ var InputField = function InputField(_a) {
       _g = _a.isSuffixEditable,
       isSuffixEditable = _g === void 0 ? false : _g,
       suffixPlaceholder = _a.suffixPlaceholder,
+      fieldColor = _a.fieldColor,
       _h = _a.handleSuffixClick,
       handleSuffixClick = _h === void 0 ? function (_) {} : _h;
-      _a.handleSuffixValChange;
 
-  var _k = inputProps || {},
-      disabled = _k.disabled,
-      onFocus = _k.onFocus,
-      onBlur = _k.onBlur;
+  var _j = inputProps || {},
+      disabled = _j.disabled,
+      onFocus = _j.onFocus,
+      onBlur = _j.onBlur;
 
-  var _l = useState(false),
-      active = _l[0],
-      setActive = _l[1];
+  var _k = useState(false),
+      active = _k[0],
+      setActive = _k[1];
 
-  var _m = useState(false),
-      showSuffixDropdown = _m[0],
-      setShowSuffixDropdown = _m[1];
+  var _l = useState(false),
+      showSuffixDropdown = _l[0],
+      setShowSuffixDropdown = _l[1];
 
-  var _o = useState(""),
-      suffixValue = _o[0],
-      setSuffixValue = _o[1];
+  var _m = useState(""),
+      suffixValue = _m[0],
+      setSuffixValue = _m[1];
 
-  var _p = useState([]),
-      suffixFilterList = _p[0],
-      setSuffixFilterList = _p[1];
+  var _o = useState([]),
+      suffixFilterList = _o[0],
+      setSuffixFilterList = _o[1];
 
   var wrapperRef = useRef(null);
   useEffect(function () {
@@ -2198,7 +2198,7 @@ var InputField = function InputField(_a) {
   }); // console.log("Input Field",suffixDropdown)
 
   return jsxRuntime.exports.jsxs("div", __assign({
-    className: "inputfield "
+    className: "inputfield  "
   }, {
     children: [jsxRuntime.exports.jsxs("div", __assign({
       className: "flex justify-between"
@@ -2228,11 +2228,11 @@ var InputField = function InputField(_a) {
     }, {
       children: jsxRuntime.exports.jsxs("div", __assign({
         "data-setid": "error-msg",
-        className: "flex ".concat(isborderRequired ? "border-1 shadow-xs rounded-lg" : "", " overflow-hidden placeholder:text-Gray-500 ").concat(errorMsg ? "border-Error-300" : "border-Gray-300", "   ").concat(height ? height : "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") : " ")))
+        className: "flex ".concat(isborderRequired ? "border-1 shadow-xs rounded-lg" : "", " overflow-hidden placeholder:text-Gray-500 ").concat(errorMsg ? "border-Error-300" : "border-Gray-300", "   ").concat(height ? height : "h-10", " ").concat(disabled ? "bg-Gray-50" : "".concat(fieldColor ? fieldColor : "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",
-          className: "bg-Gray-50 border-r-1 border-r-Gray-300 text-Gray-500 flex items-center px-3"
+          className: "".concat(fieldColor ? fieldColor : "bg-Gray-50", " border-r-1 border-r-Gray-300 text-Gray-500 flex items-center px-3")
         }, {
           children: jsxRuntime.exports.jsx(Typography, __assign({
             type: "Text md",
@@ -2248,7 +2248,10 @@ 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 border-0 focus:border-0",
+          style: {
+            background: "".concat(fieldColor === null || fieldColor === void 0 ? void 0 : fieldColor.split("-")[1])
+          },
+          className: "flex-1 pl-[14px] ".concat(fieldColor, "  pr-[12px] py-1 focus-visible:outline-0 border-0 focus:border-0"),
           "data-testid": "text-input"
         }, inputProps, {
           onFocus: handleFocus,
@@ -2261,7 +2264,7 @@ var InputField = function InputField(_a) {
           })
         })), 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]",
+          className: "".concat(fieldColor ? fieldColor : "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);
           }
@@ -2275,7 +2278,7 @@ var InputField = function InputField(_a) {
         })), 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]",
+            className: "".concat(fieldColor ? fieldColor : "bg-Gray-50", "  bg-none border-l-1 border-l-Gray-300 text-Gray-500 flex items-center pr-3 pl-[14px]"),
             onClick: function onClick() {
               return setShowSuffixDropdown(true);
             }
@@ -2293,20 +2296,19 @@ var InputField = function InputField(_a) {
             }))
           })), 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 "
+            className: "absolute mt-1 min-w-max rounded-lg ".concat(fieldColor ? fieldColor : "bg-White", "  overflow-y-auto shadow-md z-10 max-h-80 ")
           }, {
             children: suffixFilterList && suffixFilterList.length > 0 && jsxRuntime.exports.jsx("div", {
               children: (suffixFilterList === null || suffixFilterList === void 0 ? void 0 : suffixFilterList.constructor) === Array && suffixFilterList.length ? suffixFilterList.map(function (option) {
-                var restOptions = __rest(option || {}, []);
-
+                // const { ...restOptions } = option || {}
                 return jsxRuntime.exports.jsx(DropdownItems, __assign({
-                  label: option["label"],
                   className: "text-Primary-700"
-                }, restOptions, {
+                }, option, {
+                  label: option["label"],
                   onSelect: function onSelect() {
-                    setSuffixValue(restOptions.label);
+                    setSuffixValue(option.label);
                     setShowSuffixDropdown(false);
-                    handleSuffixClick(restOptions);
+                    handleSuffixClick(option);
                   }
                 }));
               }) : null
@@ -16883,6 +16885,7 @@ var DatePicker = function DatePicker(_a) {
       dateVar = _a.dateVar,
       minDate = _a.minDate,
       maxDate = _a.maxDate,
+      fieldColor = _a.fieldColor,
       _c = _a.isborderRequired,
       isborderRequired = _c === void 0 ? true : _c;
 
@@ -16919,22 +16922,23 @@ var DatePicker = function DatePicker(_a) {
     };
   }, [clicked]);
   return jsxRuntime.exports.jsxs("div", __assign({
-    className: " px-[14px] py-[10px]"
+    className: ""
   }, {
     children: [jsxRuntime.exports.jsx("div", __assign({
       className: "relative w-[189px]"
     }, {
       children: jsxRuntime.exports.jsx(InputField, {
         isborderRequired: isborderRequired,
-        start_icon: "hx_calendar",
+        start_icon: "hx_calendar text-4",
         inputProps: {
           placeholder: "Select date",
           onClick: inputClick,
           value: date ? dayjs(date).format("MMM DD, YYYY") : selectDate === null || selectDate === void 0 ? void 0 : selectDate.toString()
-        }
+        },
+        fieldColor: fieldColor
       })
     })), jsxRuntime.exports.jsx("div", __assign({
-      className: "absolute mt-1 z-10 "
+      className: "absolute mt-1 z-10"
     }, {
       children: clicked ? jsxRuntime.exports.jsx(dist.Calendar, {
         date: dayjs(date).isValid() ? date : new Date(),

package/dist/esm/inputField/InputField.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { InputFieldProps } from "../types";
-declare const InputField: ({ label, labelColor, labelSize, height, start_icon, end_icon, hint_text_icon, prefix, suffixButton, suffix, hint_text, char_count, errorMsg, inputProps, suffixInputProps, isborderRequired, suffixDropdown, isSuffixEditable, suffixPlaceholder, handleSuffixClick, handleSuffixValChange, }: InputFieldProps) => JSX.Element;
+declare const InputField: ({ label, labelColor, labelSize, height, start_icon, end_icon, hint_text_icon, prefix, suffixButton, suffix, hint_text, char_count, errorMsg, inputProps, suffixInputProps, isborderRequired, suffixDropdown, isSuffixEditable, suffixPlaceholder, fieldColor, handleSuffixClick, }: InputFieldProps) => JSX.Element;
 export default InputField;

package/dist/esm/types.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
 export interface InputFieldProps {
     label?: string;
+    fieldColor?: string;
     labelSize?: typographyTextType;
     labelColor?: string;
     height?: string;

package/package.json

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