hplx-react-elements-dev 1.0.43 → 1.0.45

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, className, rows, hint_text_icon, hint_text, errorMsg, inputProps, inputFieldInputProps, options, suggestionValue, isborderRequired, isDynamicHeight, fieldColor, }: AddSuggestionProps) => JSX.Element;
+declare const AddSuggestion: ({ isInputField, label, labelColor, labelSize, start_icon, height, width, 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/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, labelColor, labelSize, 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, 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;
 export default DatePicker;

package/dist/esm/index.js

@@ -2122,6 +2122,8 @@ var InputField = function InputField(_a) {
       height = _a.height,
       _b = _a.start_icon,
       start_icon = _b === void 0 ? "" : _b,
+      width = _a.width,
+      border = _a.border,
       _c = _a.end_icon,
       end_icon = _c === void 0 ? "" : _c,
       _d = _a.hint_text_icon,
@@ -2243,7 +2245,7 @@ var InputField = function InputField(_a) {
     }, {
       children: jsxRuntime.exports.jsxs("div", __assign({
         "data-setid": "error-msg",
-        className: "hplxt-flex ".concat(isborderRequired ? "hplxt-border-1 hplxt-shadow-xs hplxt-rounded-lg" : "", " hplxt-overflow-hidden placeholder:hplxt-text-Gray-500 ").concat(errorMsg ? "hplxt-border-Error-300" : "hplxt-border-Gray-300", "   ").concat(height ? height : "hplxt-h-10", " ").concat(disabled ? "hplxt-bg-Gray-50" : "".concat(fieldColor ? fieldColor : "hplxt-bg-White", " ").concat(errorMsg ? "hover:hplxt-shadow-xs-error ".concat(active && "hplxt-shadow-xs-error") : " ".concat(isborderRequired ? "hover:hplxt-border-Primary-300 hover:hplxt-shadow-xs-primary ".concat(active && "hplxt-border-Primary-300 hplxt-shadow-xs-primary") : " ")))
+        className: "hplxt-flex ".concat(isborderRequired ? "hplxt-shadow-xs ".concat(border ? border : "hplxt-border-1", " hplxt-rounded-lg") : "", " hplxt-overflow-hidden placeholder:hplxt-text-Gray-500 ").concat(errorMsg ? "hplxt-border-Error-300" : "hplxt-border-Gray-300", "   ").concat(height ? height : "hplxt-h-10", " ").concat(disabled ? "hplxt-bg-Gray-50" : "".concat(fieldColor ? fieldColor : "hplxt-bg-White", " ").concat(errorMsg ? "hover:hplxt-shadow-xs-error ".concat(active && "hplxt-shadow-xs-error") : " ".concat(isborderRequired ? "hover:hplxt-border-Primary-300 hover:hplxt-shadow-xs-primary ".concat(active && "hplxt-border-Primary-300 hplxt-shadow-xs-primary") : " ")))
       }, {
         children: [Boolean(prefix) && jsxRuntime.exports.jsx("div", __assign({
           "data-testid": "input-prefix",
@@ -2264,9 +2266,10 @@ var InputField = function InputField(_a) {
         })), jsxRuntime.exports.jsx("input", __assign({
           type: "text",
           style: {
-            background: "".concat(fieldColor === null || fieldColor === void 0 ? void 0 : fieldColor.split("-")[1])
+            background: "".concat(fieldColor === null || fieldColor === void 0 ? void 0 : fieldColor.split("-")[1], " "),
+            width: "".concat(width)
           },
-          className: "hplxt-flex-1 hplxt-pl-[14px] ".concat(fieldColor, "  hplxt-pr-[12px] hplxt-py-1 focus-visible:hplxt-outline-0 hplxt-border-0 focus:hplxt-border-0"),
+          className: "hplxt-flex-1 hplxt-pl-[14px] ".concat(fieldColor, " placeholder:hplxt-text-Indigo-500 hplxt-opacity-50   hplxt-pr-[12px] hplxt-py-1 focus-visible:hplxt-outline-0 hplxt-border-0 focus:hplxt-border-0"),
           "data-testid": "text-input"
         }, inputProps, {
           onFocus: handleFocus,
@@ -2300,7 +2303,7 @@ var InputField = function InputField(_a) {
           }, {
             children: isSuffixEditable && jsxRuntime.exports.jsx("input", __assign({
               type: "text",
-              className: "hplxt-flex-1 hplxt-pl-[4px] hplxt-w-36 hplxt-pr-[1px] hplxt-bg-Gray-50 hplxt-py-2 focus-visible:hplxt-outline-0 hplxt-border-0 focus:hplxt-border-0",
+              className: "hplxt-flex-1 placeholder:hplxt-text-Indigo-500 hplxt-pl-[4px] hplxt-w-36 hplxt-pr-[1px] hplxt-bg-Gray-50 hplxt-py-2 focus-visible:hplxt-outline-0 hplxt-border-0 focus:hplxt-border-0",
               "data-testid": "text-input",
               placeholder: suffixPlaceholder
             }, suffixInputProps, {
@@ -2311,7 +2314,7 @@ var InputField = function InputField(_a) {
             }))
           })), showSuffixDropdown && jsxRuntime.exports.jsx("div", __assign({
             ref: wrapperRef,
-            className: "hplxt-absolute hplxt-mt-1 hplxt-min-w-max hplxt-rounded-lg ".concat(fieldColor ? fieldColor : "hplxt-bg-White", "  hplxt-overflow-y-auto hplxt-shadow-md hplxt-z-10 hplxt-max-h-80 ")
+            className: "hplxt-absolute hplxt-mt-1 hplxt-min-w-max hplxt-rounded-lg ".concat(fieldColor ? fieldColor : "hplxt-bg-White", "  hplxt-overflow-y-auto hplxt-bg-Indigo-25 hplxt-shadow-md hplxt-z-10 hplxt-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) {
@@ -2374,6 +2377,7 @@ var InputFieldSplit = function InputFieldSplit(_a) {
       prefix = _a.prefix,
       suffix = _a.suffix,
       hint_text = _a.hint_text,
+      border = _a.border,
       fieldNames = _a.fieldNames,
       char_count = _a.char_count,
       errorMsg = _a.errorMsg,
@@ -2452,7 +2456,7 @@ var InputFieldSplit = function InputFieldSplit(_a) {
       type: "Text md"
     }, {
       children: jsxRuntime.exports.jsxs("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 ? height : "hplxt-h-10", " ").concat(disabled ? "hplxt-bg-Gray-50" : "hplxt-bg-White ".concat(errorMsg ? "hover:hplxt-shadow-xs-error ".concat((active[fieldNames[0]] || active[fieldNames[1]]) && "hplxt-shadow-xs-error") : "hover:hplxt-border-Primary-300 hover:hplxt-shadow-xs-primary ".concat((active[fieldNames[0]] || active[fieldNames[1]]) && "hplxt-border-Primary-300 hplxt-shadow-xs-primary")))
+        className: "hplxt-flex  ".concat(border ? border : "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 ? height : "hplxt-h-10", " ").concat(disabled ? "hplxt-bg-Gray-50" : "hplxt-bg-White ".concat(errorMsg ? "hover:hplxt-shadow-xs-error ".concat((active[fieldNames[0]] || active[fieldNames[1]]) && "hplxt-shadow-xs-error") : "hover:hplxt-border-Primary-300 hover:hplxt-shadow-xs-primary ".concat((active[fieldNames[0]] || active[fieldNames[1]]) && "hplxt-border-Primary-300 hplxt-shadow-xs-primary")))
       }, {
         children: [Boolean(prefix) && jsxRuntime.exports.jsx("div", __assign({
           "data-testid": "input-prefix",
@@ -2813,17 +2817,17 @@ var ButtonGroups = function ButtonGroups(_a) {
         disabled: disabled,
         onMouseEnter: onMouseEnterHandler(index),
         onMouseLeave: onMouseLeaveHandler,
-        className: "hplxt-flex hplxt-items-center hplxt-justify-center hplxt-flex-1 hplxt-h-10\n              ".concat(!disabled && isSelected ? "hplxt-bg-Primary-50" : "hplxt-bg-White", "\n              ").concat(index + 1 !== options.length && "hplxt-border-r-1 hplxt-border-Gray-300"),
+        className: "hplxt-flex hplxt-items-center hplxt-justify-center hplxt-flex-1 hplxt-h-10\n              ".concat(!disabled && isSelected ? "hplxt-bg-Gray-100" : "hplxt-bg-White", "\n              ").concat(index + 1 !== options.length && "hplxt-border-r-1 hplxt-border-Gray-300"),
         onClick: handleChange(buttonValue)
       }, ButtonGroupsProps, {
         children: [Boolean(start_icon) && jsxRuntime.exports.jsx("div", __assign({
-          className: "hplxt-flex hplxt-items-center hplxt-pl-2 ".concat(!label && "hplxt-pr-2", " ").concat(disabled ? "hplxt-text-Gray-300" : isSelected ? "hplxt-text-Primary-700" : isHovered ? "hplxt-text-Gray-800" : "hplxt-text-Gray-500")
+          className: "hplxt-flex hplxt-items-center hplxt-pl-2 ".concat(!label && "hplxt-pr-2", " ").concat(disabled ? "hplxt-text-Gray-300" : isSelected ? "hplxt-text-Gray-800" : isHovered ? "hplxt-text-Gray-800" : "hplxt-text-Gray-600")
         }, {
           children: jsxRuntime.exports.jsx("span", {
             className: start_icon
           })
         })), Boolean(label) && jsxRuntime.exports.jsx("div", __assign({
-          className: "hplxt-px-2 ".concat(disabled ? "hplxt-text-Gray-300" : isSelected ? "hplxt-text-Primary-700" : isHovered ? "hplxt-text-Gray-800" : "hplxt-text-Gray-700")
+          className: "hplxt-px-2 ".concat(disabled ? "hplxt-text-Gray-300" : isSelected ? "hplxt-text-Gray-800" : isHovered ? "hplxt-text-Gray-800" : "hplxt-text-Gray-600")
         }, {
           children: jsxRuntime.exports.jsx(Typography, __assign({
             variant: "Medium",
@@ -5219,6 +5223,8 @@ var AddSuggestion = function AddSuggestion(_a) {
       labelSize = _a.labelSize,
       _c = _a.start_icon,
       start_icon = _c === void 0 ? "" : _c,
+      height = _a.height,
+      width = _a.width,
       _d = _a.end_icon,
       end_icon = _d === void 0 ? "" : _d,
       prefix = _a.prefix,
@@ -5333,6 +5339,8 @@ var AddSuggestion = function AddSuggestion(_a) {
       labelColor: labelColor,
       labelSize: labelSize,
       start_icon: start_icon,
+      width: width,
+      height: height,
       end_icon: end_icon,
       prefix: prefix,
       suffixButton: suffixButton,
@@ -16930,6 +16938,7 @@ var DatePicker = function DatePicker(_a) {
       minDate = _a.minDate,
       maxDate = _a.maxDate,
       label = _a.label,
+      width = _a.width,
       labelColor = _a.labelColor,
       labelSize = _a.labelSize,
       _c = _a.height,
@@ -17006,6 +17015,7 @@ var DatePicker = function DatePicker(_a) {
       className: "hplxt-relative hplxt-w-[189px]"
     }, {
       children: jsxRuntime.exports.jsx(InputField, {
+        width: width,
         label: label,
         labelColor: labelColor,
         labelSize: labelSize,

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, fieldColor, handleSuffixClick, }: InputFieldProps) => JSX.Element;
+declare const InputField: ({ label, labelColor, labelSize, height, start_icon, width, border, 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/inputFieldSplit/InputFieldSplit.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { InputFieldSplitProps } from "../types";
-declare const InputFieldSplit: ({ label, labelColor, labelSize, height, start_icon, end_icon, hint_text_icon, prefix, suffix, hint_text, fieldNames, char_count, errorMsg, onChange, value, inputProps, }: InputFieldSplitProps) => JSX.Element;
+declare const InputFieldSplit: ({ label, labelColor, labelSize, height, start_icon, end_icon, hint_text_icon, prefix, suffix, hint_text, border, fieldNames, char_count, errorMsg, onChange, value, inputProps, }: InputFieldSplitProps) => JSX.Element;
 export default InputFieldSplit;

package/dist/esm/popUpModal/PopUpModal.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { popUpModalProps } from "../types";
+declare const PopUpModal: ({ backgroundColor, position, margin, zIndex, padding, width, height, boxShadow, borderRadius, ClassNames, openModal, closeModal, Children, style, }: popUpModalProps) => JSX.Element;
+export default PopUpModal;

package/dist/esm/types.d.ts

@@ -2,6 +2,8 @@ import { ReactNode } from "react";
 export interface InputFieldProps {
     label?: string;
     fieldColor?: string;
+    width?: string | number;
+    border?: string;
     labelSize?: typographyTextType;
     labelColor?: string;
     height?: string;
@@ -28,8 +30,10 @@ export interface DatePickerProps {
     selectDate?: any;
     dateVar: (val: Date) => void;
     minDate?: Date;
+    width?: string | number;
     maxDate?: Date;
     label?: string;
+    border?: string;
     fieldColor?: string;
     labelSize?: typographyTextType;
     labelColor?: string;
@@ -60,6 +64,7 @@ export interface InputFieldSplitProps {
     suffix?: ReactNode;
     start_icon?: string;
     end_icon?: string;
+    border?: string;
     fieldNames: [string, string];
     hint_text?: string;
     hint_text_icon?: string;
@@ -84,6 +89,23 @@ export interface OtpFieldProps {
     errorMsg?: string;
     inputProps: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 }
+type popUpPositionType = "-webkit-sticky" | "absolute" | "fixed" | "relative" | "static" | "sticky";
+export interface popUpModalProps {
+    backgroundColor?: string;
+    position?: popUpPositionType;
+    style?: {};
+    margin?: string;
+    zIndex?: string;
+    padding?: string;
+    width?: string;
+    Children?: ReactNode;
+    height?: string;
+    boxShadow?: string;
+    borderRadius?: string;
+    ClassNames?: ReactNode;
+    openModal?: boolean;
+    closeModal?: () => void;
+}
 export interface TextAreaFieldProps {
     label?: string;
     hint_text?: string;
@@ -334,6 +356,8 @@ export interface AddSuggestionProps {
     className?: string;
     rows?: number;
     isDynamicHeight?: boolean;
+    width?: string | number;
+    height?: string;
     labelSize?: typographyTextType;
     labelColor?: string;
     prefix?: ReactNode;

package/package.json

@@ -9,7 +9,7 @@
     "frontend",
     "healthplix"
   ],
-  "version": "1.0.43",
+  "version": "1.0.45",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
@@ -22,7 +22,8 @@
     "url": "git+https://hplx-admin@bitbucket.org/healthplixrepos/ui-elements.git"
   },
   "dependencies": {
-    "react-date-range": "^1.4.0"
+    "react-date-range": "^1.4.0",
+    "react-modal": "^3.16.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -91,6 +92,7 @@
     "@types/react-calendar": "^3.5.3",
     "@types/react-date-range": "^1.4.4",
     "@types/react-dom": "^18.0.6",
+    "@types/react-modal": "^3.13.1",
     "@types/webfontloader": "^1.6.34",
     "autoprefixer": "^10.4.7",
     "babel-plugin-named-exports-order": "^0.0.2",