hplx-react-elements-dev 1.0.52 → 1.0.53

package/dist/esm/doubleInput/DoubleInput.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { DoubleInputProps } from "../types";
+declare const DoubleInput: ({ input1value, input2value, errorMsg, prefix, start_icon, end_icon, hint_text_icon, hint_text, className, suffixClassName, dropdownClassName, suffixDropdownClassName, options, suffixOptions, handleValChange, handleSuffixValChange, onDropdownClick, onSuffixDropdownClick, onlyDropdownItemsAllowed, onlySuffixDropdownItemsAllowed, inputProps, suffixInputProps, }: DoubleInputProps) => JSX.Element;
+export default DoubleInput;

package/dist/esm/index.d.ts

@@ -25,3 +25,4 @@ export { default as AddSuggestion } from "./addSuggestion/AddSuggestion";
 export { default as MessageToast } from "./messageToast/MessageToast";
 export { default as NestedDropdown } from "./nestedDropdown/NestedDropdown";
 export { default as DatePicker } from "./datePicker/DatePicker";
+export { default as DoubleInput } from "./doubleInput/DoubleInput";

package/dist/esm/index.js

@@ -17167,4 +17167,290 @@ var DatePicker = function DatePicker(_a) {
   }));
 };
 
-export { AddSuggestion, Avatar, Badge, BadgeGroup, Button, ButtonGroups, Card, Checkbox, CheckboxGroup, CheckboxGroupItem, CollapsibleCard, DatePicker, DropdownField, DropdownItems as DropdownItem, InputField, InputFieldSplit, MessageToast, NestedDropdown, OtpField, ProgressBar, ProgressCircle, RadioBtn, Slider, TextAreaField, ToggleSwitch, Tooltip, Typography };
+var DoubleInput = function DoubleInput(_a) {
+  var _b = _a.input1value,
+      input1value = _b === void 0 ? "" : _b,
+      _c = _a.input2value,
+      input2value = _c === void 0 ? "" : _c,
+      _d = _a.errorMsg,
+      errorMsg = _d === void 0 ? "" : _d,
+      prefix = _a.prefix,
+      _e = _a.start_icon,
+      start_icon = _e === void 0 ? "" : _e,
+      _f = _a.end_icon,
+      end_icon = _f === void 0 ? "" : _f,
+      _g = _a.hint_text_icon,
+      hint_text_icon = _g === void 0 ? "" : _g,
+      hint_text = _a.hint_text,
+      className = _a.className,
+      suffixClassName = _a.suffixClassName,
+      dropdownClassName = _a.dropdownClassName,
+      suffixDropdownClassName = _a.suffixDropdownClassName,
+      _h = _a.options,
+      options = _h === void 0 ? [] : _h,
+      _j = _a.suffixOptions,
+      suffixOptions = _j === void 0 ? [] : _j,
+      _k = _a.handleValChange,
+      handleValChange = _k === void 0 ? function (_) {} : _k,
+      _l = _a.handleSuffixValChange,
+      handleSuffixValChange = _l === void 0 ? function (_) {} : _l,
+      _m = _a.onDropdownClick,
+      onDropdownClick = _m === void 0 ? function (_) {} : _m,
+      _o = _a.onSuffixDropdownClick,
+      onSuffixDropdownClick = _o === void 0 ? function (_) {} : _o,
+      _p = _a.onlyDropdownItemsAllowed,
+      onlyDropdownItemsAllowed = _p === void 0 ? false : _p,
+      _q = _a.onlySuffixDropdownItemsAllowed,
+      onlySuffixDropdownItemsAllowed = _q === void 0 ? true : _q,
+      inputProps = _a.inputProps,
+      suffixInputProps = _a.suffixInputProps;
+
+  var _r = inputProps || {},
+      disabled = _r.disabled,
+      onFocus = _r.onFocus,
+      onBlur = _r.onBlur;
+
+  var _s = useState(""),
+      value = _s[0],
+      setValue = _s[1];
+
+  var _t = useState(""),
+      suffixValue = _t[0],
+      setSuffixValue = _t[1];
+
+  var _u = useState(true),
+      showDropdown = _u[0],
+      setShowDropdown = _u[1];
+
+  var _v = useState(false),
+      showSuffixDropdown = _v[0],
+      setShowSuffixDropdown = _v[1];
+
+  var _w = useState(),
+      dropdownArr = _w[0],
+      setDropdownArr = _w[1];
+
+  var _x = useState(),
+      suffixDropdownArr = _x[0],
+      setSuffixDropdownArr = _x[1];
+
+  var wrapperRef = useRef(null);
+  var suffixWrapperRef = useRef(null);
+
+  var _y = useState(false),
+      valueChanged = _y[0],
+      setValueChanged = _y[1];
+
+  var _z = useState(false),
+      suffixValueChanged = _z[0],
+      setSuffixValueChanged = _z[1];
+
+  var _0 = useState(false),
+      active = _0[0],
+      setActive = _0[1];
+
+  var _1 = useState(false),
+      suffixActive = _1[0],
+      setSuffixActive = _1[1];
+
+  var handleFocus = function handleFocus(event) {
+    setActive(true);
+    setShowDropdown(true);
+    onFocus && onFocus(event);
+  };
+
+  var handleBlur = function handleBlur(event) {
+    setActive(false);
+    setShowDropdown(false);
+    onBlur && onBlur(event);
+  };
+
+  var handleClickOutside = function handleClickOutside(e) {
+    if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+      !active && valueChanged && onlyDropdownItemsAllowed && setValue("");
+      setShowDropdown(false);
+    }
+
+    if (suffixWrapperRef.current && !suffixWrapperRef.current.contains(e.target)) {
+      !suffixActive && suffixValueChanged && onlySuffixDropdownItemsAllowed && setSuffixValue("");
+      setShowSuffixDropdown(false);
+    }
+  };
+
+  var handleValueChange = function handleValueChange(e) {
+    setValueChanged(true);
+    var sug = dropdownArr || [];
+    setShowDropdown(true);
+
+    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.toLowerCase());
+      });
+      setDropdownArr(sug);
+    } // if (sug.length === 0 || e.target.value.length === 0) {
+
+
+    handleValChange && handleValChange(e.target.value); // }
+
+    setValue(e.target.value);
+  };
+
+  var handleSuffixValueChange = function handleSuffixValueChange(e) {
+    setSuffixValueChanged(true);
+    var sug = suffixDropdownArr || [];
+    setShowSuffixDropdown(true);
+
+    if (suffixOptions && suffixOptions.length > 0) {
+      sug = suffixOptions === null || suffixOptions === void 0 ? void 0 : suffixOptions.filter(function (suffixOption) {
+        return suffixOption.label.toLowerCase().includes(e.target.value.toLowerCase());
+      });
+      setSuffixDropdownArr(sug);
+    } // if (sug.length === 0 || e.target.value.length === 0) {
+
+
+    handleSuffixValChange && handleSuffixValChange(e.target.value); // }
+
+    setSuffixValue(e.target.value);
+  };
+
+  var handleDropdownClick = function handleDropdownClick(selectedItem) {
+    setSuffixValueChanged(false);
+    setValue(selectedItem.value);
+    onDropdownClick && onDropdownClick(selectedItem);
+    setShowDropdown(false);
+  };
+
+  var handleSuffixDropdownClick = function handleSuffixDropdownClick(selectedItem) {
+    setSuffixValueChanged(false);
+    setSuffixValue(selectedItem.value);
+    onSuffixDropdownClick && onSuffixDropdownClick(selectedItem);
+    setShowSuffixDropdown(false);
+  };
+
+  useEffect(function () {
+    document.addEventListener("mousedown", handleClickOutside);
+    return function () {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  });
+  useEffect(function () {
+    setValue(input1value);
+  }, [input1value]);
+  useEffect(function () {
+    setSuffixValue(input2value);
+  }, [input2value]);
+  return jsxRuntime.exports.jsx("div", __assign({
+    className: "inputfield hplxt-flex "
+  }, {
+    children: jsxRuntime.exports.jsxs(Typography, __assign({
+      variant: "Regular",
+      type: "Text md"
+    }, {
+      children: [jsxRuntime.exports.jsxs("div", __assign({
+        "data-setid": "error-msg",
+        className: "hplxt-flex hplxt-shadow-xs hplxt-border-1 hplxt-border-Blue_gray-100 hplxt-rounded-lg hover:hplxt-border-Primary-300 hover:hplxt-shadow-xs-primary\n           hplxt-overflow-hidden placeholder:hplxt-text-Gray-500 hplxt-bg-White hplxt-h-10\n           ".concat(errorMsg ? "hplxt-border-Error-300" : '', " \n            ").concat(disabled ? "hplxt-bg-Gray-50" : "".concat("hplxt-bg-White", " \n              ").concat(errorMsg ? "hover:hplxt-shadow-xs-error" : "hover:hplxt-border-Primary-300 hover:hplxt-shadow-xs-primary "))
+      }, {
+        children: [Boolean(prefix) && jsxRuntime.exports.jsx("div", __assign({
+          "data-testid": "input-prefix",
+          className: "hplxt-bg-Gray-50 hplxt-border-r-1 hplxt-border-r-Gray-300 hplxt-text-Gray-500 hplxt-flex hplxt-items-center hplxt-px-3"
+        }, {
+          children: jsxRuntime.exports.jsx(Typography, __assign({
+            type: "Text md",
+            variant: "Regular"
+          }, {
+            children: prefix
+          }))
+        })), Boolean(start_icon) && jsxRuntime.exports.jsx("div", __assign({
+          className: "hplxt-text-Gray-500 hplxt-flex hplxt-items-center hplxt-pl-2"
+        }, {
+          children: jsxRuntime.exports.jsx("span", {
+            className: start_icon
+          })
+        })), jsxRuntime.exports.jsx("input", __assign({
+          type: "text",
+          className: "hplxt-flex-1 hplxt-pl-[14px] placeholder:hplxt-text-Indigo-500 placeholder:hplxt-opacity-50 hplxt-pr-[12px] hplxt-py-1 focus-visible:hplxt-outline-0 hplxt-border-0 focus:hplxt-border-0 ".concat(className),
+          value: value,
+          onChange: function onChange(e) {
+            return handleValueChange(e);
+          }
+        }, inputProps, {
+          onFocus: handleFocus,
+          onBlur: handleBlur
+        })), jsxRuntime.exports.jsx("input", __assign({
+          type: "text",
+          className: "hplxt-flex-1 hplxt-border-l-1 hplxt-border-Blue_gray-100 hplxt-pl-[14px] focus-visible:hplxt-outline-0 hplxt-bg-Gray-50 ".concat(suffixClassName),
+          value: suffixValue,
+          onChange: function onChange(e) {
+            return handleSuffixValueChange(e);
+          },
+          onFocus: function onFocus() {
+            setSuffixActive(true);
+            setShowSuffixDropdown(true);
+          },
+          onBlur: function onBlur() {
+            setSuffixActive(false);
+            setShowSuffixDropdown(false);
+          }
+        }, suffixInputProps)), Boolean(end_icon) && jsxRuntime.exports.jsx("div", __assign({
+          className: "hplxt-text-Gray-500 hplxt-bg-Gray-50 hplxt-flex hplxt-items-center hplxt-pr-2",
+          onClick: function onClick() {
+            return setShowSuffixDropdown(true);
+          }
+        }, {
+          children: jsxRuntime.exports.jsx("span", {
+            className: end_icon
+          })
+        }))]
+      })), (Boolean(hint_text) || Boolean(errorMsg)) && jsxRuntime.exports.jsx("div", __assign({
+        className: "".concat(errorMsg ? "hplxt-text-Error-500" : "hplxt-text-Gray-500 hplxt-mt-1")
+      }, {
+        children: jsxRuntime.exports.jsx(Typography, __assign({
+          type: "Text sm",
+          variant: "Regular"
+        }, {
+          children: errorMsg ? String(errorMsg) : jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, {
+            children: [Boolean(hint_text_icon) && jsxRuntime.exports.jsx("span", {
+              className: hint_text_icon
+            }), hint_text]
+          })
+        }))
+      })), showDropdown && jsxRuntime.exports.jsx("div", __assign({
+        ref: wrapperRef,
+        className: "hplxt-absolute hplxt-border hplxt-border-Gray-300  hplxt-mt-1 hplxt-min-w-max hplxt-rounded-lg hplxt-bg-Indigo-25 hplxt-overflow-y-auto hplxt-shadow-md hplxt-z-10 hplxt-max-h-80 ".concat(dropdownClassName)
+      }, {
+        children: dropdownArr && dropdownArr.length > 0 && jsxRuntime.exports.jsx("div", {
+          children: dropdownArr.map(function (option) {
+            var restOptions = __rest(option || {}, []);
+
+            return jsxRuntime.exports.jsx(DropdownItems, __assign({
+              className: "hplxt-text-Primary-700"
+            }, restOptions, {
+              onSelect: function onSelect() {
+                return handleDropdownClick(restOptions);
+              }
+            }));
+          })
+        })
+      })), showSuffixDropdown && jsxRuntime.exports.jsx("div", __assign({
+        ref: suffixWrapperRef,
+        className: "hplxt-absolute hplxt-border hplxt-border-Gray-300 hplxt-mt-1 hplxt-min-w-max hplxt-rounded-lg hplxt-bg-Indigo-25 hplxt-overflow-y-auto hplxt-shadow-md hplxt-z-10 hplxt-max-h-80 ".concat(suffixDropdownClassName)
+      }, {
+        children: suffixDropdownArr && suffixDropdownArr.length > 0 && jsxRuntime.exports.jsx("div", {
+          children: suffixDropdownArr.map(function (option) {
+            var restOptions = __rest(option || {}, []);
+
+            return jsxRuntime.exports.jsx(DropdownItems, __assign({
+              className: "hplxt-text-Primary-700"
+            }, restOptions, {
+              onSelect: function onSelect() {
+                return handleSuffixDropdownClick(restOptions);
+              }
+            }));
+          })
+        })
+      }))]
+    }))
+  }));
+};
+
+export { AddSuggestion, Avatar, Badge, BadgeGroup, Button, ButtonGroups, Card, Checkbox, CheckboxGroup, CheckboxGroupItem, CollapsibleCard, DatePicker, DoubleInput, DropdownField, DropdownItems as DropdownItem, InputField, InputFieldSplit, MessageToast, NestedDropdown, OtpField, ProgressBar, ProgressCircle, RadioBtn, Slider, TextAreaField, ToggleSwitch, Tooltip, Typography };

package/dist/esm/types.d.ts

@@ -391,4 +391,28 @@ export interface AddSuggestionProps {
     handleSuffixValChange?: (value: any) => void;
     isborderRequired?: boolean;
 }
+export interface DoubleInputProps {
+    prefix?: ReactNode;
+    start_icon?: string;
+    end_icon?: string;
+    errorMsg?: string;
+    inputProps?: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+    suffixInputProps?: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+    className?: string;
+    suffixClassName?: string;
+    options?: Array<DropdownItemsProps>;
+    suffixOptions?: Array<DropdownItemsProps>;
+    handleValChange?: (value: any) => void;
+    handleSuffixValChange?: (value: any) => void;
+    onDropdownClick?: (value: any) => void;
+    onSuffixDropdownClick?: (value: any) => void;
+    dropdownClassName?: string;
+    suffixDropdownClassName?: string;
+    input1value?: string;
+    input2value?: string;
+    onlySuffixDropdownItemsAllowed?: boolean;
+    onlyDropdownItemsAllowed?: boolean;
+    hint_text_icon?: string;
+    hint_text?: string;
+}
 export {};

package/package.json

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