hplx-react-elements-dev 1.1.29 → 1.1.30

package/dist/esm/index.js

@@ -2964,8 +2964,8 @@ var TextAreaField = function TextAreaField(_a) {
     setTimeout(function () {
       var textarea = ref.current;
       textarea.focus();
-      textarea.value += ' ';
       textarea.value = textarea.value.trim();
+      if (textarea.value) textarea.value += "\n";
     }, 0);
     isDynamicHeight && handleHeight();
   };
@@ -18226,100 +18226,105 @@ var InputTagDropdownItem = function InputTagDropdownItem(_a) {
 };
 
 var InputTag = function InputTag(_a) {
-  var _b;
+  var _b, _c;
 
   var inputProps = _a.inputProps,
       className = _a.className,
       dropdownClassName = _a.dropdownClassName,
-      _c = _a.options,
-      options = _c === void 0 ? [] : _c,
-      _d = _a.tagList,
-      tagList = _d === void 0 ? [] : _d,
-      _e = _a.tagString,
-      tagString = _e === void 0 ? "" : _e,
+      _d = _a.options,
+      options = _d === void 0 ? [] : _d,
+      _e = _a.tagList,
+      tagList = _e === void 0 ? [] : _e,
+      _f = _a.tagString,
+      tagString = _f === void 0 ? "" : _f,
       // comma separated string which is created into separate tags
-  _f = _a.handleValChange,
+  _g = _a.handleValChange,
       // comma separated string which is created into separate tags
-  handleValChange = _f === void 0 ? function (_, _currentInputValue, _fromEvent) {
-  } : _f,
-      _g = _a.onDropdownClick,
-      onDropdownClick = _g === void 0 ? function (_selectedValue, _index, _searchString) {} : _g,
-      _h = _a.allowDuplicates,
-      allowDuplicates = _h === void 0 ? false : _h,
-      _j = _a.getInputValue,
-      getInputValue = _j === void 0 ? function (input) {
+  handleValChange = _g === void 0 ? function (_, _currentInputValue, _fromEvent) {
+  } : _g,
+      _h = _a.onDropdownClick,
+      onDropdownClick = _h === void 0 ? function (_selectedValue, _index, _searchString) {} : _h,
+      _j = _a.allowDuplicates,
+      allowDuplicates = _j === void 0 ? false : _j,
+      _k = _a.getInputValue,
+      getInputValue = _k === void 0 ? function (input) {
     return input;
-  } : _j;
+  } : _k;
 
-  var _k = inputProps || {},
-      disabled = _k.disabled,
-      onFocus = _k.onFocus,
-      onBlur = _k.onBlur;
-
-  var _l = useState(false),
-      active = _l[0],
-      setActive = _l[1];
+  var _l = inputProps || {},
+      disabled = _l.disabled,
+      onFocus = _l.onFocus,
+      onBlur = _l.onBlur;
 
   var _m = useState(false),
-      showDropdown = _m[0],
-      setShowDropdown = _m[1];
+      active = _m[0],
+      setActive = _m[1];
 
-  var _o = useState(""),
-      dropdownOffset = _o[0],
-      setdropdownOffset = _o[1];
+  var _o = useState(false),
+      showDropdown = _o[0],
+      setShowDropdown = _o[1];
 
   var _p = useState(""),
-      value = _p[0],
-      setValue = _p[1]; //  tag string
+      dropdownOffset = _p[0],
+      setdropdownOffset = _p[1];
+
+  var _q = useState(""),
+      value = _q[0],
+      setValue = _q[1]; //  tag string
 
 
   var wrapperRef = useRef(null);
   var inputRef = useRef(null);
+  var divRef = useRef([]);
   var ddRef = useRef(null);
   var editRef = useRef(null);
   var spanRef = useRef(null);
 
-  var _q = useState([]),
-      dropdownArr = _q[0],
-      setDropdownArr = _q[1];
+  var _r = useState([]),
+      dropdownArr = _r[0],
+      setDropdownArr = _r[1];
 
-  var _r = useState(""),
-      tagInputValue = _r[0],
-      setTagInputValue = _r[1]; // input field state
+  var _s = useState(""),
+      tagInputValue = _s[0],
+      setTagInputValue = _s[1]; // input field state
 
 
-  var _s = useState(__spreadArray(__spreadArray([], tagList.filter(Boolean), true), tagString.split(",").filter(Boolean).map(function (item) {
+  var _t = 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
+      tags = _t[0],
+      setTags = _t[1]; // tag array
 
 
-  var _t = useState(-1),
-      focusIndex = _t[0],
-      setFocusIndex = _t[1];
+  var _u = useState(-1),
+      focusIndex = _u[0],
+      setFocusIndex = _u[1];
 
-  var _u = useState(true),
-      changeLeft = _u[0],
-      setChangeLeft = _u[1];
+  var _v = useState(true),
+      changeLeft = _v[0],
+      setChangeLeft = _v[1];
 
-  var _v = useState(-1),
-      editIndex = _v[0],
-      setEditIndex = _v[1];
+  var _w = useState(-1),
+      editIndex = _w[0],
+      setEditIndex = _w[1];
 
-  var _w = useState(""),
-      editInputValue = _w[0],
-      setEditInputValue = _w[1];
+  var _x = useState(""),
+      editInputValue = _x[0],
+      setEditInputValue = _x[1];
 
   var dropdownClickedRef = useRef(false);
 
-  var _x = useState(""),
-      content = _x[0],
-      setContent = _x[1];
+  var _y = useState(""),
+      content = _y[0],
+      setContent = _y[1];
+
+  var _z = useState(0),
+      width = _z[0],
+      setWidth = _z[1];
 
-  var _y = useState(0),
-      width = _y[0],
-      setWidth = _y[1];
+  var _0 = useState(-1),
+      divIndex = _0[0],
+      setDivIndex = _0[1];
 
   var handleDragStart = function handleDragStart(e, index) {
     e.dataTransfer.setData("text/plain", index.toString());
@@ -18392,6 +18397,64 @@ var InputTag = function InputTag(_a) {
     dropdownClickedRef.current = false;
   };
 
+  var sortDropdownArray = function sortDropdownArray(index) {
+    var inputValue = divRef.current[index].textContent;
+    var sug = [],
+        sortedSug = []; // Show the dropdown list
+
+    setShowDropdown(true);
+
+    if (options && options.length > 0) {
+      // Filter options that contain the input value
+      sug = options === null || options === void 0 ? void 0 : options.filter(function (options) {
+        return options.label.toLowerCase().includes(inputValue.toLowerCase());
+      });
+      sortedSug = sug.sort(function (a, b) {
+        var aStartsWithTerm = a.label.toLowerCase().startsWith(inputValue.toLowerCase());
+        var bStartsWithTerm = b.label.toLowerCase().startsWith(inputValue.toLowerCase());
+
+        if (aStartsWithTerm && !bStartsWithTerm) {
+          return -1;
+        } else if (!aStartsWithTerm && bStartsWithTerm) {
+          return 1;
+        } else {
+          return a.label.localeCompare(b.label);
+        }
+      }); // Filter out items that already exist in tags, unless allowDuplicates flag is true
+
+      if (!allowDuplicates) {
+        sortedSug = sortedSug.filter(function (item) {
+          return !tags.includes(item.value);
+        });
+      }
+
+      setDropdownArr(sortedSug);
+    }
+  };
+
+  useEffect(function () {
+    if (divIndex >= 0) {
+      var targetDiv = divRef.current[divIndex];
+
+      var mutationCallback = function mutationCallback(mutationsList) {
+        for (var _i = 0, mutationsList_1 = mutationsList; _i < mutationsList_1.length; _i++) {
+          var mutation = mutationsList_1[_i];
+
+          if (mutation.type === 'childList' || mutation.type === 'characterData') {
+            sortDropdownArray(divIndex);
+          }
+        }
+      };
+
+      var observer = new MutationObserver(mutationCallback);
+      var observerConfig = {
+        characterData: true,
+        subtree: true
+      }; // Start observing the target element
+
+      observer.observe(targetDiv, observerConfig);
+    }
+  }, [(_b = divRef.current[divIndex]) === null || _b === void 0 ? void 0 : _b.textContent]);
   useEffect(function () {
     var _a; // Filter options based on whether duplicates are allowed or not
 
@@ -18404,17 +18467,32 @@ var InputTag = function InputTag(_a) {
     } // Set the dropdown offset
 
 
-    showDropdown && setdropdownOffset("".concat((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.offsetLeft, "px"));
+    if (divIndex === -1) {
+      showDropdown && setdropdownOffset("".concat((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.offsetLeft, "px"));
+    }
   }, [options, tags, inputRef, allowDuplicates, showDropdown]); // This function handles the click event of a dropdown item
 
-  var handleDropdownClick = function handleDropdownClick(selectedItem, index) {
+  var handleDropdownClick = function handleDropdownClick(selectedItem, index, divIndex) {
     // Set a timeout to add the selected item to the tags after a certain time
     var sto = setTimeout(function () {
       // If allowDuplicates flag is true or the selected item is not already in the tags, add the item to the tags
       if (allowDuplicates || !tags.includes(selectedItem.value)) {
-        setTags(function (prev) {
-          return __spreadArray(__spreadArray([], prev, true), [selectedItem.value], false);
-        });
+        if (divIndex !== -1) {
+          var newTagList = __spreadArray([], tags, true);
+
+          newTagList.splice(divIndex, 0, selectedItem.value);
+          setTags(newTagList);
+          divRef.current[divIndex].textContent = "";
+          setTimeout(function () {
+            divRef.current[divIndex + 1].focus();
+          }, 0);
+          setDivIndex(divIndex + 1);
+          setFocusIndex(-1);
+        } else {
+          setTags(function (prev) {
+            return __spreadArray(__spreadArray([], prev, true), [selectedItem.value], false);
+          });
+        }
       } // Add the selected item to the input value and update the displayed value
 
 
@@ -18455,12 +18533,23 @@ var InputTag = function InputTag(_a) {
     setWidth(((_a = spanRef === null || spanRef === void 0 ? void 0 : spanRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0);
   }, [content]);
 
+  var handleFocusDiv = function handleFocusDiv(event, index) {
+    var _a;
+
+    setdropdownOffset("".concat((_a = divRef.current[index]) === null || _a === void 0 ? void 0 : _a.offsetLeft, "px"));
+    setShowDropdown(true);
+    setActive(true);
+    setDivIndex(index);
+    onFocus && onFocus(event);
+  };
+
   var handleFocus = function handleFocus(event) {
     var _a;
 
     setdropdownOffset("".concat((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.offsetLeft, "px"));
     setShowDropdown(true);
     setActive(true);
+    setDivIndex(-1);
     onFocus && onFocus(event);
   };
 
@@ -18525,6 +18614,92 @@ var InputTag = function InputTag(_a) {
     }
   };
 
+  var addTagsfromDiv = function addTagsfromDiv(e, index) {
+    var ITEM_HEIGHT = 40;
+    var inputValue = divRef.current[index].textContent;
+
+    if ((e.keyCode === 9 || e.keyCode === 13) && inputValue.trim() && inputValue.trim().length > 1 && (allowDuplicates || !tags.includes(inputValue.trim())) // check if allowDuplicates flag is true or tagInputValue is not already in tags
+    ) {
+      e.preventDefault();
+
+      var newTagList = __spreadArray([], tags, true);
+
+      newTagList.splice(index, 0, inputValue.trim());
+      setTags(newTagList);
+      divRef.current[index].textContent = "";
+      setTimeout(function () {
+        divRef.current[index + 1].focus();
+      }, 0);
+      setDivIndex(index + 1);
+      setFocusIndex(-1);
+    } else if (e.keyCode === 13 && inputValue.trim().length <= 1) {
+      setFocusIndex(-1);
+
+      if (wrapperRef && wrapperRef.current) {
+        wrapperRef.current.scrollTop = 0;
+      }
+    } //on backspace
+
+
+    if (e.keyCode === 8 && !inputValue) {
+      setShowDropdown(false); // setEditInputValue(tags[tags.length - 1] + " ");
+      // setEditIndex(tags.length - 1);
+    } // on key down
+
+
+    if (e.keyCode === 40) {
+      if (focusIndex < dropdownArr.length - 1) {
+        var focusI = focusIndex + 1;
+
+        if (wrapperRef && wrapperRef.current && focusI > 1) {
+          wrapperRef.current.scrollBy(0, ITEM_HEIGHT);
+        }
+
+        setFocusIndex(focusI);
+      }
+    } // on key up
+
+
+    if (e.keyCode === 38) {
+      if (focusIndex > 0) {
+        var focusI = focusIndex - 1;
+
+        if (wrapperRef && wrapperRef.current && focusI < dropdownArr.length - 2) {
+          wrapperRef.current.scrollBy(0, -ITEM_HEIGHT);
+        }
+
+        setFocusIndex(focusI);
+      }
+    } // on key left or right key
+
+
+    if (e.keyCode === 37 || e.keyCode === 39) {
+      if (focusIndex >= 0) {
+        setFocusIndex(focusIndex);
+        setTagInputValue(dropdownArr[focusIndex].value);
+      }
+    } // on key enter
+
+
+    if (e.keyCode === 13 || e.keyCode === 9) {
+      if (focusIndex >= 0) {
+        e.preventDefault();
+
+        var newTagList = __spreadArray([], tags, true);
+
+        newTagList.splice(index, 0, inputValue.trim());
+        setTags(newTagList);
+        divRef.current[index].textContent = "";
+        setTimeout(function () {
+          divRef.current[index + 1].focus();
+        }, 0);
+        setDivIndex(index + 1);
+        setFocusIndex(-1);
+        handleDropdownClick(dropdownArr[focusIndex], focusIndex, index);
+      }
+    }
+  };
+
   var addTags = function addTags(e) {
     var ITEM_HEIGHT = 40;
 
@@ -18600,12 +18775,13 @@ var InputTag = function InputTag(_a) {
         setValue(res.filter(Boolean).join(", "));
         setTagInputValue("");
         setFocusIndex(-1);
-        handleDropdownClick(dropdownArr[focusIndex], focusIndex);
+        handleDropdownClick(dropdownArr[focusIndex], focusIndex, -1);
       }
     }
   };
 
   var deleteTag = function deleteTag(_, del_index) {
+    setDivIndex(-1);
     var deletedValue = tags[del_index];
     var remainingTags = tags.filter(function (_, index) {
       return del_index !== index;
@@ -18619,16 +18795,13 @@ var InputTag = function InputTag(_a) {
     setValue(tags.filter(Boolean).join(", "));
   }, [tags]);
   useEffect(function () {
-    var _a;
-
     if (editIndex >= 0) {
       editRef.current && editRef.current.focus();
-    }
+    } // setdropdownOffset(`${inputRef.current?.offsetLeft}px`);
 
-    setdropdownOffset("".concat((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.offsetLeft, "px"));
-  }, [editIndex, dropdownArr]);
+  }, [editIndex]);
   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)
+    className: "inputTag hplxt-w-auto hplxt-gap-y-1 hplxt-h-auto 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 index === editIndex ? jsxRuntime.exports.jsxs("div", {
@@ -18668,46 +18841,71 @@ var InputTag = function InputTag(_a) {
         }, {
           children: content
         }))]
-      }, "".concat(item, "+").concat(index)) : jsxRuntime.exports.jsxs("div", __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",
-        draggable: true,
-        onDragStart: function onDragStart(e) {
-          return handleDragStart(e, index);
-        },
-        onDragOver: handleDragOver,
-        onDragEnter: function onDragEnter(e) {
-          return handleDragEnter(e);
-        },
-        onDrop: function onDrop(e) {
-          return handleDrop(e, index);
-        }
-      }, {
-        children: [jsxRuntime.exports.jsx("button", __assign({
-          onClick: function onClick() {
-            setEditIndex(index);
-            setEditInputValue(item);
-            setContent(item);
+      }, "".concat(item, "+").concat(index)) : jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, {
+        children: [jsxRuntime.exports.jsx("div", __assign({
+          contentEditable: true,
+          value: divRef.current[index],
+          ref: function ref(el) {
+            return divRef.current[index] = el;
+          },
+          style: {
+            minWidth: '5px',
+            maxWidth: 'auto',
+            padding: '2px'
+          },
+          className: "focus-visible:hplxt-outline-0 hplxt-border-0 focus:hplxt-border-0",
+          onChange: function onChange(e) {
+            handleValueChange(e);
+            getInputValue(e.target.value);
+          },
+          onKeyDown: function onKeyDown(e) {
+            return addTagsfromDiv(e, index);
+          }
+        }, inputProps, {
+          onFocus: function onFocus(e) {
+            return handleFocusDiv(e, index);
+          }
+        }), index), jsxRuntime.exports.jsxs("div", __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",
+          draggable: true,
+          onDragStart: function onDragStart(e) {
+            return handleDragStart(e, index);
+          },
+          onDragOver: handleDragOver,
+          onDragEnter: function onDragEnter(e) {
+            return handleDragEnter(e);
+          },
+          onDrop: function onDrop(e) {
+            return handleDrop(e, index);
           }
         }, {
-          children: jsxRuntime.exports.jsx(Typography, __assign({
-            variant: "Semibold",
-            type: "Text sm",
-            className: "hplxt-text-Gray-600"
+          children: [jsxRuntime.exports.jsx("button", __assign({
+            onClick: function onClick() {
+              setEditIndex(index);
+              setEditInputValue(item);
+              setContent(item);
+            }
           }, {
-            children: item
-          }))
-        }), index), jsxRuntime.exports.jsx("i", {
-          className: "hx_close hplxt-text-[75%] hplxt-text-Primary-700",
-          onClick: function onClick() {
-            return deleteTag(item, index);
-          }
-        })]
-      }), "".concat(item, "+").concat(index));
+            children: jsxRuntime.exports.jsx(Typography, __assign({
+              variant: "Semibold",
+              type: "Text sm",
+              className: "hplxt-text-Gray-600"
+            }, {
+              children: item
+            }))
+          }), index), jsxRuntime.exports.jsx("i", {
+            className: "hx_close hplxt-text-[75%] hplxt-text-Primary-700",
+            onClick: function onClick() {
+              return deleteTag(item, index);
+            }
+          })]
+        }), "".concat(item, "+").concat(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",
+      className: "hplxt-flex-1 hplxt-ml-[5px] placeholder:hplxt-text-Gray-500 focus-visible:hplxt-outline-0 hplxt-border-0 focus:hplxt-border-0",
       placeholder: "Enter Text",
       onChange: function onChange(e) {
         getInputValue(e.target.value);
@@ -18726,7 +18924,7 @@ var InputTag = function InputTag(_a) {
       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: changeLeft ? dropdownOffset : "",
-        top: "".concat((((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.offsetTop) || 0) + 30, "px")
+        top: "".concat((((_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.offsetTop) || 0) + 40, "px")
       }
     }, {
       children: dropdownArr && dropdownArr.length > 0 && jsxRuntime.exports.jsx("div", {
@@ -18738,7 +18936,7 @@ var InputTag = function InputTag(_a) {
           }, restOptions, {
             onSelect: function onSelect() {
               dropdownClickedRef.current = true;
-              handleDropdownClick(restOptions, index);
+              handleDropdownClick(restOptions, index, divIndex);
             },
             ddRef: ddRef,
             setChangeLeft: setChangeLeft

package/package.json

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