hplx-react-elements-dev 1.0.75 → 1.0.77

package/dist/esm/index.js

@@ -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],
@@ -17757,6 +17758,14 @@ var InputTag = function InputTag(_a) {
 
   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);
@@ -17806,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;
@@ -17863,6 +17877,8 @@ var InputTag = function InputTag(_a) {
   };
 
   var addTags = function addTags(e) {
+    var ITEM_HEIGHT = 40;
+
     if (e.keyCode === 13 && tagInputValue.trim()) {
       setTags(__spreadArray(__spreadArray([], tags, true), [tagInputValue.trim()], false));
       setValue(tags.filter(Boolean).join(", "));
@@ -17884,7 +17900,7 @@ var InputTag = function InputTag(_a) {
         var focusI = focusIndex + 1;
 
         if (wrapperRef && wrapperRef.current) {
-          wrapperRef.current.scrollBy(0, 18);
+          wrapperRef.current.scrollBy(0, ITEM_HEIGHT);
         }
 
         setFocusIndex(focusI);
@@ -17893,11 +17909,11 @@ var InputTag = function InputTag(_a) {
 
 
     if (e.keyCode === 38) {
-      if (focusIndex !== 0) {
+      if (focusIndex > 0) {
         var focusI = focusIndex - 1;
 
         if (wrapperRef && wrapperRef.current) {
-          wrapperRef.current.scrollBy(0, -18);
+          wrapperRef.current.scrollBy(0, -ITEM_HEIGHT);
         }
 
         setFocusIndex(focusI);
@@ -17946,34 +17962,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({
@@ -17989,7 +18019,7 @@ var InputTag = function InputTag(_a) {
             return deleteTag(item, index);
           }
         })]
-      }));
+      }), item);
     }), jsxRuntime.exports.jsx("input", __assign({
       type: "text",
       value: tagInputValue,

package/package.json

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