hplx-react-elements-dev 1.0.54 → 1.0.56

package/dist/esm/index.d.ts

@@ -26,3 +26,4 @@ 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";
+export { default as InputTag } from "./inputTag/InputTag";

package/dist/esm/index.js

@@ -1956,6 +1956,16 @@ function __rest(s, e) {
                 t[p[i]] = s[p[i]];
         }
     return t;
+}
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 }
 
 var jsxRuntime = {exports: {}};
@@ -2439,15 +2449,18 @@ var InputField = function InputField(_a) {
       }))
     })), showEmailSuggestions && // This div displays a dropdown of email provider options
     jsxRuntime.exports.jsx("div", __assign({
-      className: "hplxt-absolute hplxt-mt-1 hplxt-left-10 hplxt-right-10 hplxt-min-w-max hplxt-rounded-lg hplxt-bg-White hplxt-overflow-y-scroll hplxt-shadow-md hplxt-z-10 hplxt-max-h-80 ".concat(showEmailDropdown ? "hplxt-block" : "hplxt-hidden")
+      className: "hplxt-absolute ".concat(showEmailDropdown ? "hplxt-block" : "hplxt-hidden", " hplxt-mt-1 hplxt-min-w-max hplxt-rounded-lg hplxt-border hplxt-border-Blue_gray-200 hplxt-bg-White  hplxt-overflow-y-scroll hplxt-shadow-md hplxt-z-10 hplxt-max-h-72 ")
     }, {
-      children: emailProviders === null || emailProviders === void 0 ? void 0 : emailProviders.map(function (option) {
-        return jsxRuntime.exports.jsx(DropdownItems, {
-          label: option,
-          onSelect: function onSelect() {
-            handleEmailProviderSelection(option);
-          }
-        }, option);
+      children: jsxRuntime.exports.jsx("div", {
+        children: emailProviders === null || emailProviders === void 0 ? void 0 : emailProviders.map(function (option) {
+          return jsxRuntime.exports.jsx(DropdownItems, {
+            className: "hplxt-text-Primary-700",
+            label: option,
+            onSelect: function onSelect() {
+              handleEmailProviderSelection(option);
+            }
+          }, option);
+        })
       })
     })), (Boolean(hint_text) || Boolean(errorMsg)) && jsxRuntime.exports.jsx("div", __assign({
       className: "".concat(errorMsg ? "hplxt-text-Error-500" : "hplxt-text-Gray-500 hplxt-mt-1")
@@ -17412,7 +17425,7 @@ var DoubleInput = function DoubleInput(_a) {
   };
 
   var handleDropdownClick = function handleDropdownClick(selectedItem) {
-    setSuffixValueChanged(false);
+    setValueChanged(false);
     setValue(selectedItem.value);
     onDropdownClick && onDropdownClick(selectedItem);
     setShowDropdown(false);
@@ -17438,7 +17451,7 @@ var DoubleInput = function DoubleInput(_a) {
     setSuffixValue(input2value);
   }, [input2value]);
   return jsxRuntime.exports.jsx("div", __assign({
-    className: "inputfield hplxt-flex "
+    className: "doubleInput hplxt-flex "
   }, {
     children: jsxRuntime.exports.jsxs(Typography, __assign({
       variant: "Regular",
@@ -17551,4 +17564,219 @@ var DoubleInput = function DoubleInput(_a) {
   }));
 };
 
-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 };
+var InputTag = function InputTag(_a) {
+  var _b, _c, _d, _e;
+
+  var inputProps = _a.inputProps,
+      className = _a.className,
+      dropdownClassName = _a.dropdownClassName,
+      _f = _a.options,
+      options = _f === void 0 ? [] : _f,
+      _g = _a.tagList,
+      tagList = _g === void 0 ? [] : _g,
+      _h = _a.tagString,
+      tagString = _h === void 0 ? "" : _h,
+      // comma separated string which is created into separate tags
+  _j = _a.handleValChange,
+      // comma separated string which is created into separate tags
+  handleValChange = _j === void 0 ? function (_) {} : _j,
+      _k = _a.onDropdownClick,
+      onDropdownClick = _k === void 0 ? function (_) {} : _k;
+
+  var _l = inputProps || {},
+      disabled = _l.disabled,
+      onFocus = _l.onFocus,
+      onBlur = _l.onBlur;
+
+  var _m = useState(false),
+      active = _m[0],
+      setActive = _m[1];
+
+  var _o = useState(false),
+      showDropdown = _o[0],
+      setShowDropdown = _o[1];
+
+  var _p = useState(""),
+      value = _p[0],
+      setValue = _p[1]; //  tag string
+
+
+  var wrapperRef = useRef(null);
+  var inputRef = useRef(null);
+
+  var _q = useState(),
+      dropdownArr = _q[0],
+      setDropdownArr = _q[1];
+
+  var _r = useState(""),
+      tagInputValue = _r[0],
+      setTagInputValue = _r[1]; // input field state
+
+
+  var _s = useState(__spreadArray(__spreadArray([], tagList.filter(Boolean), true), tagString.split(",").filter(Boolean).map(function (item) {
+    return item.trim();
+  }), true)),
+      tags = _s[0],
+      setTags = _s[1]; // tag array
+
+
+  var handleValueChange = function handleValueChange(e) {
+    var sug = [];
+    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);
+    }
+
+    setTagInputValue(e.target.value);
+  };
+
+  var handleClickOutside = function handleClickOutside(e) {
+    setDropdownArr(options);
+
+    if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+      setShowDropdown(false);
+    }
+  };
+
+  var handleDropdownClick = function handleDropdownClick(selectedItem) {
+    setTags(function (prev) {
+      return __spreadArray(__spreadArray([], prev, true), [selectedItem.value], false);
+    });
+    setValue(function (prev) {
+      return prev + ", " + selectedItem.value;
+    });
+    setTagInputValue("");
+    onDropdownClick && onDropdownClick(selectedItem);
+    handleValChange && handleValChange(value);
+    setShowDropdown(false);
+  };
+
+  useEffect(function () {
+    setValue(tagString);
+    setTags(tagString.split(",").filter(Boolean).map(function (item) {
+      return item.trim();
+    }));
+  }, [tagString]); // useEffect(() => {
+  //   let incomingTags=value.split("\\s*,\\s*");
+  //   incomingTags = incomingTags.filter(Boolean)
+  //   setTags(tagList)
+  // }, [tagList]);
+  // useEffect(() => {
+  //   let incomingTags=value.split("\\s*,\\s*");
+  //   incomingTags = incomingTags.filter(Boolean)
+  //   setTags(incomingTags)
+  // }, [value]);
+
+  useEffect(function () {
+    document.addEventListener("mousedown", handleClickOutside);
+    return function () {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  });
+
+  var handleFocus = function handleFocus(event) {
+    setShowDropdown(true);
+    setActive(true);
+    onFocus && onFocus(event);
+  };
+
+  var handleBlur = function handleBlur(event) {
+    setShowDropdown(false);
+    setActive(false);
+    onBlur && onBlur(event);
+  };
+
+  var addTags = function addTags(e) {
+    if (e.keyCode === 13 && tagInputValue) {
+      setTags(__spreadArray(__spreadArray([], tags, true), [tagInputValue], false));
+      setValue(tags.filter(Boolean).join(", "));
+      setTagInputValue("");
+    }
+
+    handleValChange && handleValChange(value);
+  };
+
+  var deleteTag = function deleteTag(_, del_index) {
+    var remainingTags = tags.filter(function (_, index) {
+      return del_index !== index;
+    });
+    setTags(remainingTags);
+    setValue(tags.filter(Boolean).join(", "));
+  };
+
+  var editTag = function editTag(item, index) {
+    setTagInputValue(item);
+    deleteTag(item, index);
+  };
+
+  useEffect(function () {
+    setValue(tags.filter(Boolean).join(", "));
+    handleValChange && handleValChange(tags.filter(Boolean).join(", "));
+  }, [tags]);
+  return jsxRuntime.exports.jsxs("div", __assign({
+    className: "inputTag hplxt-w-auto hplxt-h-auto hplxt-gap-1 hplxt-p-1.5 hplxt-flex hplxt-flex-wrap hplxt-border-1 hplxt-rounded-lg hplxt-border-Blue_gray-100 hover:hplxt-border-Primary-300 hover:hplxt-shadow-xs-primary ".concat(active ? "hplxt-border-Primary-300 hplxt-shadow-xs-primary" : "", " ").concat(disabled ? "hplxt-bg-Gray-50" : "", " ").concat(className)
+  }, {
+    children: [tags.map(function (item, index) {
+      return jsxRuntime.exports.jsxs("button", __assign({
+        className: "hplxt-flex hplxt-items-center hplxt-bg-Primary-50 hplxt-border-1 hplxt-rounded hplxt-border-Primary-100 hplxt-py-1 hplxt-px-2"
+      }, {
+        children: [jsxRuntime.exports.jsx(Typography, __assign({
+          variant: "Semibold",
+          type: "Text sm",
+          className: "hplxt-text-Gray-600",
+          onClick: function onClick() {
+            return editTag(item, index);
+          }
+        }, {
+          children: item
+        })), jsxRuntime.exports.jsx("div", {
+          className: "hx_close hplxt-text-[75%] hplxt-text-Primary-700",
+          onClick: function onClick() {
+            return deleteTag(item, index);
+          }
+        })]
+      }), index);
+    }), jsxRuntime.exports.jsx("input", __assign({
+      type: "text",
+      value: tagInputValue,
+      ref: inputRef,
+      className: "hplxt-flex-1 placeholder:hplxt-text-Gray-500 focus-visible:hplxt-outline-0 hplxt-border-0 focus:hplxt-border-0",
+      placeholder: "Enter Text",
+      onChange: function onChange(e) {
+        setTagInputValue(e.target.value);
+        handleValueChange(e);
+      },
+      onKeyDown: addTags
+    }, inputProps, {
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    })), 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),
+      style: {
+        left: "".concat((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.offsetLeft, "px"),
+        top: "".concat(((_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.offsetTop) ? ((_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.offsetTop) + 30 : (_e = inputRef.current) === null || _e === void 0 ? void 0 : _e.offsetTop, "px")
+      }
+    }, {
+      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);
+            }
+          }));
+        })
+      })
+    }))]
+  }));
+};
+
+export { AddSuggestion, Avatar, Badge, BadgeGroup, Button, ButtonGroups, Card, Checkbox, CheckboxGroup, CheckboxGroupItem, CollapsibleCard, DatePicker, DoubleInput, DropdownField, DropdownItems as DropdownItem, InputField, InputFieldSplit, InputTag, MessageToast, NestedDropdown, OtpField, ProgressBar, ProgressCircle, RadioBtn, Slider, TextAreaField, ToggleSwitch, Tooltip, Typography };

package/dist/esm/inputTag/InputTag.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { InputTagProps } from "../types";
+declare const InputTag: ({ inputProps, className, dropdownClassName, options, tagList, tagString, handleValChange, onDropdownClick, }: InputTagProps) => JSX.Element;
+export default InputTag;

package/dist/esm/types.d.ts

@@ -416,4 +416,14 @@ export interface DoubleInputProps {
     hint_text_icon?: string;
     hint_text?: string;
 }
+export interface InputTagProps {
+    className?: string;
+    tagList?: Array<string>;
+    tagString?: string;
+    dropdownClassName?: string;
+    onDropdownClick?: (value: any) => void;
+    options?: Array<DropdownItemsProps>;
+    inputProps?: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+    handleValChange?: (value: any) => void;
+}
 export {};

package/package.json

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