hplx-react-elements-dev 1.0.65 → 1.0.67

package/dist/esm/index.js

@@ -17627,6 +17627,7 @@ var InputTag = function InputTag(_a) {
   var wrapperRef = useRef(null);
   var inputRef = useRef(null);
   var ddRef = useRef(null);
+  var editRef = useRef(null);
 
   var _o = useState([]),
       dropdownArr = _o[0],
@@ -17652,6 +17653,14 @@ var InputTag = function InputTag(_a) {
       changeLeft = _s[0],
       setChangeLeft = _s[1];
 
+  var _t = useState(-1),
+      editIndex = _t[0],
+      setEditIndex = _t[1];
+
+  var _u = useState(""),
+      editInputValue = _u[0],
+      setEditInputValue = _u[1];
+
   var handleValueChange = function handleValueChange(e) {
     var sug = [];
     setShowDropdown(true);
@@ -17721,6 +17730,29 @@ var InputTag = function InputTag(_a) {
     onBlur && onBlur(event);
   };
 
+  var addEditTags = function addEditTags(e) {
+    if (e.keyCode === 13 && editInputValue) {
+      var newArr = __spreadArray([], tags, true);
+
+      newArr[editIndex] = editInputValue;
+      setTags(newArr);
+      setValue(tags.filter(Boolean).join(", "));
+      setEditIndex(-1);
+      setEditInputValue("");
+    } // if (Boolean(!tagInputValue) && e.keyCode === 8) {
+    //   setEditIndex(tags.length - 1);
+    //   setEditInputValue(tags[tags.length - 1]);
+    //   editRef.current && editRef.current.focus();
+    //   if (Boolean(!editInputValue) && e.keyCode === 8) {
+    //     deleteTag("", editIndex);
+    //     setEditIndex((prev) => prev - 1);
+    //     setEditInputValue(tags[editIndex]);
+    //     editRef.current && editRef.current.focus();
+    //   }
+    // }
+
+  };
+
   var addTags = function addTags(e) {
     if (e.keyCode === 13 && tagInputValue) {
       setTags(__spreadArray(__spreadArray([], tags, true), [tagInputValue], false));
@@ -17781,38 +17813,60 @@ var InputTag = function InputTag(_a) {
     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]);
+  useEffect(function () {
+    if (editIndex >= 0) {
+      editRef.current && editRef.current.focus();
+    }
+  }, [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)
   }, {
     children: [tags.map(function (item, index) {
-      return jsxRuntime.exports.jsxs("button", __assign({
+      return index === editIndex ? jsxRuntime.exports.jsx("input", {
+        type: "text",
+        value: editInputValue,
+        ref: editRef,
+        className: " placeholder:hplxt-text-Gray-500 focus-visible:hplxt-outline-0 hplxt-border-0 hplxt-rounded hplxt-py-1 hplxt-px-2 hplxt-bg-Primary-50 focus:hplxt-border-0",
+        onChange: function onChange(e) {
+          setEditInputValue(e.target.value);
+        },
+        onKeyDown: addEditTags,
+        onBlur: function onBlur() {
+          var newArr = __spreadArray([], tags, true);
+
+          newArr[index] = editInputValue;
+          setTags(newArr);
+          setValue(tags.filter(Boolean).join(", "));
+          setEditIndex(-1);
+          setEditInputValue("");
+        }
+      }) : 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"
       }, {
-        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() {
-            return editTag(item, index);
+            setEditIndex(index);
+            setEditInputValue(item);
           }
         }, {
-          children: item
-        })), jsxRuntime.exports.jsx("div", {
+          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);
           }
         })]
-      }), index);
+      }));
     }), jsxRuntime.exports.jsx("input", __assign({
       type: "text",
       value: tagInputValue,

package/package.json

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