hplx-react-elements-dev 1.0.64 → 1.0.66

package/dist/esm/index.js

@@ -17384,29 +17384,20 @@ var DoubleInput = function DoubleInput(_a) {
       suffixValueChanged = _z[0],
       setSuffixValueChanged = _z[1];
 
-  var _0 = useState(false),
-      active = _0[0],
-      setActive = _0[1];
-
-  var _1 = useState(false),
-      setSuffixActive = _1[1];
-
   var handleFocus = function handleFocus(event) {
-    setActive(true);
     setShowDropdown(true);
     setDropdownArr(options);
     onFocus && onFocus(event);
   };
 
   var handleBlur = function handleBlur(event) {
-    setActive(false);
     setShowDropdown(false);
     onBlur && onBlur(event);
   };
 
   var handleClickOutside = function handleClickOutside(e) {
     if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
-      !active && valueChanged && onlyDropdownItemsAllowed && setValue("");
+      valueChanged && onlyDropdownItemsAllowed && setValue("");
       setShowDropdown(false);
     }
 
@@ -17528,12 +17519,10 @@ var DoubleInput = function DoubleInput(_a) {
             return handleSuffixValueChange(e);
           },
           onFocus: function onFocus() {
-            setSuffixActive(true);
             setShowSuffixDropdown(true);
             setSuffixDropdownArr(suffixOptions);
           },
           onBlur: function onBlur() {
-            setSuffixActive(false);
             setShowSuffixDropdown(false);
           }
         }, suffixInputProps)), Boolean(end_icon) && jsxRuntime.exports.jsx("div", __assign({
@@ -17599,69 +17588,78 @@ var DoubleInput = function DoubleInput(_a) {
 };
 
 var InputTag = function InputTag(_a) {
-  var _b, _c, _d, _e;
+  var _b, _c;
 
   var inputProps = _a.inputProps,
       className = _a.className,
       dropdownClassName = _a.dropdownClassName,
-      _f = _a.options,
-      options = _f === void 0 ? [] : _f,
-      _g = _a.tagList,
-      tagList = _g === void 0 ? [] : _g,
-      _h = _a.tagString,
-      tagString = _h === void 0 ? "" : _h,
+      _d = _a.options,
+      options = _d === void 0 ? [] : _d,
+      _e = _a.tagList,
+      tagList = _e === void 0 ? [] : _e,
+      _f = _a.tagString,
+      tagString = _f === void 0 ? "" : _f,
       // comma separated string which is created into separate tags
-  _j = _a.handleValChange,
+  _g = _a.handleValChange,
       // comma separated string which is created into separate tags
-  handleValChange = _j === void 0 ? function (_) {} : _j,
-      _k = _a.onDropdownClick,
-      onDropdownClick = _k === void 0 ? function (_) {} : _k;
+  handleValChange = _g === void 0 ? function (_) {} : _g,
+      _h = _a.onDropdownClick,
+      onDropdownClick = _h === void 0 ? function (_) {} : _h;
 
-  var _l = inputProps || {},
-      disabled = _l.disabled,
-      onFocus = _l.onFocus,
-      onBlur = _l.onBlur;
+  var _j = inputProps || {},
+      disabled = _j.disabled,
+      onFocus = _j.onFocus,
+      onBlur = _j.onBlur;
 
-  var _m = useState(false),
-      active = _m[0],
-      setActive = _m[1];
+  var _k = useState(false),
+      active = _k[0],
+      setActive = _k[1];
 
-  var _o = useState(false),
-      showDropdown = _o[0],
-      setShowDropdown = _o[1];
+  var _l = useState(false),
+      showDropdown = _l[0],
+      setShowDropdown = _l[1];
 
-  var _p = useState(""),
-      value = _p[0],
-      setValue = _p[1]; //  tag string
+  var _m = useState(""),
+      value = _m[0],
+      setValue = _m[1]; //  tag string
 
 
   var wrapperRef = useRef(null);
   var inputRef = useRef(null);
   var ddRef = useRef(null);
+  var editRef = useRef(null);
 
-  var _q = useState([]),
-      dropdownArr = _q[0],
-      setDropdownArr = _q[1];
+  var _o = useState([]),
+      dropdownArr = _o[0],
+      setDropdownArr = _o[1];
 
-  var _r = useState(""),
-      tagInputValue = _r[0],
-      setTagInputValue = _r[1]; // input field state
+  var _p = useState(""),
+      tagInputValue = _p[0],
+      setTagInputValue = _p[1]; // input field state
 
 
-  var _s = useState(__spreadArray(__spreadArray([], tagList.filter(Boolean), true), tagString.split(",").filter(Boolean).map(function (item) {
+  var _q = useState(__spreadArray(__spreadArray([], tagList.filter(Boolean), true), tagString.split(",").filter(Boolean).map(function (item) {
     return item.trim();
   }), true)),
-      tags = _s[0],
-      setTags = _s[1]; // tag array
+      tags = _q[0],
+      setTags = _q[1]; // tag array
+
 
+  var _r = useState(-1),
+      focusIndex = _r[0],
+      setFocusIndex = _r[1];
+
+  var _s = useState(true),
+      changeLeft = _s[0],
+      setChangeLeft = _s[1];
 
   var _t = useState(-1),
-      focusIndex = _t[0],
-      setFocusIndex = _t[1];
+      editIndex = _t[0],
+      setEditIndex = _t[1];
 
-  var _u = useState(true),
-      changeLeft = _u[0],
-      setChangeLeft = _u[1];
+  var _u = useState(""),
+      editInputValue = _u[0],
+      setEditInputValue = _u[1];
 
   var handleValueChange = function handleValueChange(e) {
     var sug = [];
@@ -17732,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));
@@ -17792,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", {
@@ -17839,11 +17883,14 @@ var InputTag = function InputTag(_a) {
       onFocus: handleFocus,
       onBlur: handleBlur
     })), showDropdown && jsxRuntime.exports.jsx("div", __assign({
+      onClick: function onClick() {
+        return inputRef.current && inputRef.current.focus();
+      },
       ref: wrapperRef,
       className: "hplxt-absolute hplxt-border hplxt-border-Gray-300 hplxt-mt-1 hplxt-min-w-max hplxt-rounded-lg hplxt-bg-Indigo-25 hplxt-overflow-y-auto hplxt-shadow-md hplxt-z-10 hplxt-max-h-80 ".concat(dropdownClassName),
       style: {
-        left: changeLeft ? '' : "".concat((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.offsetLeft, "px"),
-        top: "".concat(((_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.offsetTop) ? ((_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.offsetTop) + 30 : (_e = inputRef.current) === null || _e === void 0 ? void 0 : _e.offsetTop, "px")
+        left: changeLeft ? "".concat((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.offsetLeft, "px") : "",
+        top: "".concat((((_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.offsetTop) || 0) + 30, "px")
       }
     }, {
       children: dropdownArr && dropdownArr.length > 0 && jsxRuntime.exports.jsx("div", {

package/package.json

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