hplx-react-elements-dev 1.0.59 → 1.0.61

package/dist/esm/index.js

@@ -2135,7 +2135,7 @@ var DropdownItems = function DropdownItems(_a) {
     onMouseDown: function onMouseDown(e) {
       !disabled && handleOnSelect(e);
     },
-    className: "hplxt-h-10 hplxt-flex hplxt-items-center hplxt-px-2  ".concat(disabled ? "hplxt-cursor-not-allowed" : "hover:hplxt-bg-Blue_gray-100 hplxt-cursor-pointer"),
+    className: "hplxt-h-10 hplxt-flex hplxt-items-center hplxt-px-2  ".concat(disabled ? "hplxt-cursor-not-allowed" : "hover:hplxt-bg-Blue_gray-100 hplxt-cursor-pointer", " ").concat(className),
     onMouseEnter: onMouseEnterHandler,
     onMouseLeave: onMouseLeaveHandler
   }, {
@@ -17625,7 +17625,7 @@ var InputTag = function InputTag(_a) {
   var wrapperRef = useRef(null);
   var inputRef = useRef(null);
 
-  var _q = useState(),
+  var _q = useState([]),
       dropdownArr = _q[0],
       setDropdownArr = _q[1];
 
@@ -17641,6 +17641,10 @@ var InputTag = function InputTag(_a) {
       setTags = _s[1]; // tag array
 
 
+  var _t = useState(-1),
+      focusIndex = _t[0],
+      setFocusIndex = _t[1];
+
   var handleValueChange = function handleValueChange(e) {
     var sug = [];
     setShowDropdown(true);
@@ -17660,6 +17664,7 @@ var InputTag = function InputTag(_a) {
 
     if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
       setShowDropdown(false);
+      setFocusIndex(-1);
     }
   };
 
@@ -17674,6 +17679,7 @@ var InputTag = function InputTag(_a) {
     onDropdownClick && onDropdownClick(selectedItem);
     handleValChange && handleValChange(value);
     setShowDropdown(false);
+    setFocusIndex(-1);
   };
 
   useEffect(function () {
@@ -17681,17 +17687,7 @@ var InputTag = function InputTag(_a) {
     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]);
-
+  }, [tagString]);
   useEffect(function () {
     document.addEventListener("mousedown", handleClickOutside);
     return function () {
@@ -17706,8 +17702,14 @@ var InputTag = function InputTag(_a) {
   };
 
   var handleBlur = function handleBlur(event) {
-    setTagInputValue("");
+    if (tagInputValue) {
+      setTags(__spreadArray(__spreadArray([], tags, true), [tagInputValue], false));
+      setValue(tags.filter(Boolean).join(", "));
+      setTagInputValue("");
+    }
+
     setShowDropdown(false);
+    setFocusIndex(-1);
     setActive(false);
     onBlur && onBlur(event);
   };
@@ -17717,9 +17719,51 @@ var InputTag = function InputTag(_a) {
       setTags(__spreadArray(__spreadArray([], tags, true), [tagInputValue], false));
       setValue(tags.filter(Boolean).join(", "));
       setTagInputValue("");
-    }
+      setFocusIndex(-1);
+      handleValChange && handleValChange(value);
+    } // on key down
 
-    handleValChange && handleValChange(value);
+
+    if (e.keyCode === 40) {
+      if (focusIndex < dropdownArr.length - 1) {
+        var focusI = focusIndex + 1;
+
+        if (wrapperRef && wrapperRef.current) {
+          wrapperRef.current.scrollBy(0, 18);
+        }
+
+        setFocusIndex(focusI); // setTagInputValue(dropdownArr[focusI].value);
+      }
+    } // on key up
+
+
+    if (e.keyCode === 38) {
+      if (focusIndex !== 0) {
+        var focusI = focusIndex - 1;
+
+        if (wrapperRef && wrapperRef.current) {
+          wrapperRef.current.scrollBy(0, -18);
+        }
+
+        setFocusIndex(focusI); // setTagInputValue(dropdownArr[focusI].value);
+      }
+    } // on key left
+
+
+    if (e.keyCode === 37) {
+      if (focusIndex >= 0) {
+        setFocusIndex(focusIndex);
+        setTagInputValue(dropdownArr[focusIndex].value);
+      }
+    } // on key right
+
+
+    if (e.keyCode === 39) {
+      if (focusIndex !== 0) {
+        setFocusIndex(focusIndex);
+        setTagInputValue(dropdownArr[focusIndex].value);
+      }
+    }
   };
 
   var deleteTag = function deleteTag(_, del_index) {
@@ -17785,11 +17829,11 @@ var InputTag = function InputTag(_a) {
       }
     }, {
       children: dropdownArr && dropdownArr.length > 0 && jsxRuntime.exports.jsx("div", {
-        children: dropdownArr.map(function (option) {
+        children: dropdownArr.map(function (option, index) {
           var restOptions = __rest(option || {}, []);
 
           return jsxRuntime.exports.jsx(DropdownItems, __assign({
-            className: "hplxt-text-Primary-700"
+            className: "hplxt-text-Primary-700 ".concat(index === focusIndex ? "hplxt-bg-Blue_gray-100 hplxt-font-inter-1" : "")
           }, restOptions, {
             onSelect: function onSelect() {
               return handleDropdownClick(restOptions);

package/package.json

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