hplx-react-elements-dev 1.0.74 → 1.0.76

package/dist/esm/index.js

@@ -17709,7 +17709,7 @@ var InputTag = function InputTag(_a) {
       showDropdown = _k[0],
       setShowDropdown = _k[1];
 
-  var _l = useState(''),
+  var _l = useState(""),
       dropdownOffset = _l[0],
       setdropdownOffset = _l[1];
 
@@ -17722,6 +17722,7 @@ var InputTag = function InputTag(_a) {
   var inputRef = useRef(null);
   var ddRef = useRef(null);
   var editRef = useRef(null);
+  var spanRef = useRef(null);
 
   var _o = useState([]),
       dropdownArr = _o[0],
@@ -17755,6 +17756,16 @@ var InputTag = function InputTag(_a) {
       editInputValue = _u[0],
       setEditInputValue = _u[1];
 
+  var dropdownClickedRef = useRef(false);
+
+  var _v = useState(""),
+      content = _v[0],
+      setContent = _v[1];
+
+  var _w = useState(0),
+      width = _w[0],
+      setWidth = _w[1];
+
   var handleValueChange = function handleValueChange(e) {
     var sug = [];
     setShowDropdown(true);
@@ -17770,22 +17781,22 @@ var InputTag = function InputTag(_a) {
   };
 
   var handleClickOutside = function handleClickOutside(e) {
-    setDropdownArr(options);
-
     if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
       setShowDropdown(false);
       setFocusIndex(-1);
     }
+
+    dropdownClickedRef.current = false;
   };
 
   var handleDropdownClick = function handleDropdownClick(selectedItem) {
+    setTagInputValue("");
     setTags(function (prev) {
       return __spreadArray(__spreadArray([], prev, true), [selectedItem.value], false);
     });
     setValue(function (prev) {
       return prev.trim() + ", " + selectedItem.value;
     });
-    setTagInputValue("");
     onDropdownClick && onDropdownClick(selectedItem);
     handleValChange && handleValChange(value);
     setFocusIndex(-1);
@@ -17804,6 +17815,11 @@ var InputTag = function InputTag(_a) {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   });
+  useEffect(function () {
+    var _a;
+
+    setWidth(((_a = spanRef === null || spanRef === void 0 ? void 0 : spanRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0);
+  }, [content]);
 
   var handleFocus = function handleFocus(event) {
     var _a;
@@ -17815,15 +17831,24 @@ var InputTag = function InputTag(_a) {
   };
 
   var handleBlur = function handleBlur(event) {
-    if (tagInputValue.trim()) {
-      setTags(__spreadArray(__spreadArray([], tags, true), [tagInputValue.trim()], false));
-      setValue(tags.filter(Boolean).join(", "));
-      setTagInputValue("");
-    }
+    var sto = setTimeout(function () {
+      if (dropdownClickedRef.current) {
+        dropdownClickedRef.current = false;
+        return;
+      }
 
-    setFocusIndex(-1);
-    setActive(false);
-    onBlur && onBlur(event);
+      if (Boolean(tagInputValue) && tagInputValue.trim()) {
+        setTags(__spreadArray(__spreadArray([], tags, true), [tagInputValue.trim()], false));
+        setValue(tags.filter(Boolean).join(", "));
+        setTagInputValue("");
+      }
+
+      setFocusIndex(-1);
+      setActive(false);
+      onBlur && onBlur(event);
+      dropdownClickedRef.current = false;
+      sto && clearTimeout(sto);
+    }, 100);
   };
 
   var addEditTags = function addEditTags(e) {
@@ -17935,34 +17960,48 @@ var InputTag = function InputTag(_a) {
     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 index === editIndex ? jsxRuntime.exports.jsx("input", {
-        type: "text",
-        value: editInputValue,
-        ref: editRef,
-        className: "hplxt-flex hplxt-flex-1 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() {
-          if (editInputValue.trim()) {
-            var newArr = __spreadArray([], tags, true);
-
-            newArr[index] = editInputValue.trim();
-            setTags(newArr);
-            setValue(tags.filter(Boolean).join(", "));
-          } else deleteTag("", editIndex);
-
-          setEditIndex(-1);
-          setEditInputValue("");
-        }
-      }) : jsxRuntime.exports.jsxs("div", __assign({
+      return index === editIndex ? jsxRuntime.exports.jsxs("div", {
+        children: [jsxRuntime.exports.jsx("input", {
+          type: "text",
+          value: editInputValue,
+          ref: editRef,
+          className: " hplxt-flex-1 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);
+            setContent(e.target.value);
+          },
+          style: {
+            width: width + 30
+          },
+          onKeyDown: addEditTags,
+          onBlur: function onBlur() {
+            if (editInputValue.trim()) {
+              var newArr = __spreadArray([], tags, true);
+
+              newArr[index] = editInputValue.trim();
+              setTags(newArr);
+              setValue(tags.filter(Boolean).join(", "));
+            } else deleteTag("", editIndex);
+
+            setEditIndex(-1);
+            setEditInputValue("");
+            setContent("");
+          }
+        }), jsxRuntime.exports.jsx("span", __assign({
+          id: "hide",
+          ref: spanRef,
+          className: "hplxt-opacity-0 hplxt-absolute"
+        }, {
+          children: content
+        }))]
+      }, item) : 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("button", __assign({
           onClick: function onClick() {
             setEditIndex(index);
             setEditInputValue(item);
+            setContent(item);
           }
         }, {
           children: jsxRuntime.exports.jsx(Typography, __assign({
@@ -17978,7 +18017,7 @@ var InputTag = function InputTag(_a) {
             return deleteTag(item, index);
           }
         })]
-      }));
+      }), item);
     }), jsxRuntime.exports.jsx("input", __assign({
       type: "text",
       value: tagInputValue,
@@ -18012,7 +18051,8 @@ var InputTag = function InputTag(_a) {
             className: "hplxt-text-Primary-700 ".concat(index === focusIndex ? "hplxt-bg-Blue_gray-100 hplxt-font-inter-1" : "")
           }, restOptions, {
             onSelect: function onSelect() {
-              return handleDropdownClick(restOptions);
+              dropdownClickedRef.current = true;
+              handleDropdownClick(restOptions);
             },
             ddRef: ddRef,
             setChangeLeft: setChangeLeft

package/package.json

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