hplx-react-elements-dev 1.0.65 → 1.0.66

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,29 +17813,52 @@ 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({
-        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"
+      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);
+
+          if ((editInputValue === null || editInputValue === void 0 ? void 0 : editInputValue.length) === 0) {
+            deleteTag("", editIndex);
+          }
+        },
+        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("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",
+        onClick: function onClick() {
+          setEditIndex(index);
+          setEditInputValue(item);
+        }
       }, {
         children: [jsxRuntime.exports.jsx(Typography, __assign({
           variant: "Semibold",
           type: "Text sm",
-          className: "hplxt-text-Gray-600",
-          onClick: function onClick() {
-            return editTag(item, index);
-          }
+          className: "hplxt-text-Gray-600"
         }, {
           children: item
         })), jsxRuntime.exports.jsx("div", {

package/package.json

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