hplx-react-elements-dev 1.0.76 → 1.0.78

package/dist/esm/index.js

@@ -17694,28 +17694,30 @@ var InputTag = function InputTag(_a) {
       // comma separated string which is created into separate tags
   handleValChange = _f === void 0 ? function (_) {} : _f,
       _g = _a.onDropdownClick,
-      onDropdownClick = _g === void 0 ? function (_) {} : _g;
+      onDropdownClick = _g === void 0 ? function (_) {} : _g,
+      _h = _a.allowDuplicates,
+      allowDuplicates = _h === void 0 ? false : _h;
 
-  var _h = inputProps || {},
-      disabled = _h.disabled,
-      onFocus = _h.onFocus,
-      onBlur = _h.onBlur;
-
-  var _j = useState(false),
-      active = _j[0],
-      setActive = _j[1];
+  var _j = inputProps || {},
+      disabled = _j.disabled,
+      onFocus = _j.onFocus,
+      onBlur = _j.onBlur;
 
   var _k = useState(false),
-      showDropdown = _k[0],
-      setShowDropdown = _k[1];
+      active = _k[0],
+      setActive = _k[1];
 
-  var _l = useState(""),
-      dropdownOffset = _l[0],
-      setdropdownOffset = _l[1];
+  var _l = useState(false),
+      showDropdown = _l[0],
+      setShowDropdown = _l[1];
 
   var _m = useState(""),
-      value = _m[0],
-      setValue = _m[1]; //  tag string
+      dropdownOffset = _m[0],
+      setdropdownOffset = _m[1];
+
+  var _o = useState(""),
+      value = _o[0],
+      setValue = _o[1]; //  tag string
 
 
   var wrapperRef = useRef(null);
@@ -17724,58 +17726,69 @@ var InputTag = function InputTag(_a) {
   var editRef = useRef(null);
   var spanRef = useRef(null);
 
-  var _o = useState([]),
-      dropdownArr = _o[0],
-      setDropdownArr = _o[1];
+  var _p = useState([]),
+      dropdownArr = _p[0],
+      setDropdownArr = _p[1];
 
-  var _p = useState(""),
-      tagInputValue = _p[0],
-      setTagInputValue = _p[1]; // input field state
+  var _q = useState(""),
+      tagInputValue = _q[0],
+      setTagInputValue = _q[1]; // input field state
 
 
-  var _q = useState(__spreadArray(__spreadArray([], tagList.filter(Boolean), true), tagString.split(",").filter(Boolean).map(function (item) {
+  var _r = useState(__spreadArray(__spreadArray([], tagList.filter(Boolean), true), tagString.split(",").filter(Boolean).map(function (item) {
     return item.trim();
   }), true)),
-      tags = _q[0],
-      setTags = _q[1]; // tag array
+      tags = _r[0],
+      setTags = _r[1]; // tag array
 
 
-  var _r = useState(-1),
-      focusIndex = _r[0],
-      setFocusIndex = _r[1];
+  var _s = useState(-1),
+      focusIndex = _s[0],
+      setFocusIndex = _s[1];
 
-  var _s = useState(true),
-      changeLeft = _s[0],
-      setChangeLeft = _s[1];
+  var _t = useState(true),
+      changeLeft = _t[0],
+      setChangeLeft = _t[1];
 
-  var _t = useState(-1),
-      editIndex = _t[0],
-      setEditIndex = _t[1];
+  var _u = useState(-1),
+      editIndex = _u[0],
+      setEditIndex = _u[1];
 
-  var _u = useState(""),
-      editInputValue = _u[0],
-      setEditInputValue = _u[1];
+  var _v = useState(""),
+      editInputValue = _v[0],
+      setEditInputValue = _v[1];
 
   var dropdownClickedRef = useRef(false);
 
-  var _v = useState(""),
-      content = _v[0],
-      setContent = _v[1];
+  var _w = useState(""),
+      content = _w[0],
+      setContent = _w[1];
+
+  var _x = useState(0),
+      width = _x[0],
+      setWidth = _x[1]; // Handle the change event of the input element
 
-  var _w = useState(0),
-      width = _w[0],
-      setWidth = _w[1];
 
   var handleValueChange = function handleValueChange(e) {
-    var sug = [];
+    var sug = []; // Show the dropdown list
+
     setShowDropdown(true);
 
     if (options && options.length > 0) {
+      // Filter options that contain the input value
       sug = options === null || options === void 0 ? void 0 : options.filter(function (options) {
         return options.label.toLowerCase().includes(e.target.value.toLowerCase());
-      });
+      }); // Filter out items that already exist in tags, unless allowDuplicates flag is true
+
+      if (!allowDuplicates) {
+        sug = sug.filter(function (item) {
+          return !tags.includes(item.value);
+        });
+      }
+
       setDropdownArr(sug);
-    }
+    } // Update the input value
+
 
     setTagInputValue(e.target.value);
   };
@@ -17789,18 +17802,52 @@ var InputTag = function InputTag(_a) {
     dropdownClickedRef.current = false;
   };
 
+  useEffect(function () {
+    var _a; // Filter options based on whether duplicates are allowed or not
+
+
+    if (options && options.length > 0) {
+      var filteredOptions = options.filter(function (option) {
+        return allowDuplicates || !tags.includes(option.value);
+      });
+      setDropdownArr(filteredOptions);
+    } // Focus on the input element
+
+
+    inputRef.current && inputRef.current.focus(); // Set the dropdown offset
+
+    setdropdownOffset("".concat((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.offsetLeft, "px"));
+  }, [options, tags, inputRef, allowDuplicates]); // This function handles the click event of a dropdown item
+
   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;
-    });
-    onDropdownClick && onDropdownClick(selectedItem);
-    handleValChange && handleValChange(value);
-    setFocusIndex(-1);
-    setDropdownArr(options);
+    setTagInputValue(""); // Set a timeout to add the selected item to the tags after a certain time
+
+    var sto = setTimeout(function () {
+      // If allowDuplicates flag is true or the selected item is not already in the tags, add the item to the tags
+      if (allowDuplicates || !tags.includes(selectedItem.value)) {
+        setTags(function (prev) {
+          return __spreadArray(__spreadArray([], prev, true), [selectedItem.value], false);
+        });
+      } // Add the selected item to the input value and update the displayed value
+
+
+      setValue(function (prev) {
+        return prev.trim() + ", " + selectedItem.value;
+      }); // Call onDropdownClick function if it is defined
+
+      onDropdownClick && onDropdownClick(selectedItem); // Call handleValChange function if it is defined
+
+      handleValChange && handleValChange(value); // Reset focus index and dropdown array
+
+      setFocusIndex(-1);
+      setDropdownArr(options); // Clear the timeout
+
+      sto && clearTimeout(sto);
+    }, 100); // Return a function to clear the timeout when the component unmounts or when a new dropdown item is clicked
+
+    return function () {
+      return sto && clearTimeout(sto);
+    };
   };
 
   useEffect(function () {
@@ -17831,24 +17878,35 @@ var InputTag = function InputTag(_a) {
   };
 
   var handleBlur = function handleBlur(event) {
+    // create a setTimeout to handle tag input value after a delay
     var sto = setTimeout(function () {
+      // if the dropdown was clicked, reset the flag and return
       if (dropdownClickedRef.current) {
         dropdownClickedRef.current = false;
         return;
-      }
+      } // if tag input value is valid and either allowDuplicates flag is true or tag input value is not already in tags, add the tag
 
-      if (Boolean(tagInputValue) && tagInputValue.trim()) {
+
+      if (Boolean(tagInputValue) && tagInputValue.trim() && tagInputValue.trim().length > 1 && (allowDuplicates || !tags.includes(tagInputValue.trim())) // check if allowDuplicates flag is true or tagInputValue is not already in tags
+      ) {
         setTags(__spreadArray(__spreadArray([], tags, true), [tagInputValue.trim()], false));
         setValue(tags.filter(Boolean).join(", "));
-        setTagInputValue("");
-      }
+      } // reset tag input value and focus index
 
+
+      setTagInputValue("");
       setFocusIndex(-1);
-      setActive(false);
-      onBlur && onBlur(event);
+      setActive(false); // call onBlur function if it exists
+
+      onBlur && onBlur(event); // reset dropdown clicked flag and clear the timeout
+
       dropdownClickedRef.current = false;
       sto && clearTimeout(sto);
-    }, 100);
+    }, 200); // return a cleanup function to clear the timeout if necessary
+
+    return function () {
+      return sto && clearTimeout(sto);
+    };
   };
 
   var addEditTags = function addEditTags(e) {
@@ -17877,12 +17935,18 @@ var InputTag = function InputTag(_a) {
   };
 
   var addTags = function addTags(e) {
-    if (e.keyCode === 13 && tagInputValue.trim()) {
+    var ITEM_HEIGHT = 40;
+
+    if (e.keyCode === 13 && tagInputValue.trim() && tagInputValue.trim().length > 1 && (allowDuplicates || !tags.includes(tagInputValue.trim())) // check if allowDuplicates flag is true or tagInputValue is not already in tags
+    ) {
       setTags(__spreadArray(__spreadArray([], tags, true), [tagInputValue.trim()], false));
       setValue(tags.filter(Boolean).join(", "));
       setTagInputValue("");
       setFocusIndex(-1);
       handleValChange && handleValChange(value);
+    } else if (e.keyCode === 13 && tagInputValue.trim().length <= 1) {
+      setTagInputValue("");
+      setFocusIndex(-1);
     } //on backspace
 
 
@@ -17898,7 +17962,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);
@@ -17907,11 +17971,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);
@@ -17994,7 +18058,7 @@ var InputTag = function InputTag(_a) {
         }, {
           children: content
         }))]
-      }, item) : jsxRuntime.exports.jsxs("div", __assign({
+      }, "".concat(item, "+").concat(index)) : 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({
@@ -18017,7 +18081,7 @@ var InputTag = function InputTag(_a) {
             return deleteTag(item, index);
           }
         })]
-      }), item);
+      }), "".concat(item, "+").concat(index));
     }), jsxRuntime.exports.jsx("input", __assign({
       type: "text",
       value: tagInputValue,
@@ -18056,7 +18120,7 @@ var InputTag = function InputTag(_a) {
             },
             ddRef: ddRef,
             setChangeLeft: setChangeLeft
-          }));
+          }), "".concat(option.value, "+").concat(index));
         })
       })
     }))]

package/dist/esm/inputTag/InputTag.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { InputTagProps } from "../types";
-declare const InputTag: ({ inputProps, className, dropdownClassName, options, tagList, tagString, handleValChange, onDropdownClick, }: InputTagProps) => JSX.Element;
+declare const InputTag: ({ inputProps, className, dropdownClassName, options, tagList, tagString, handleValChange, onDropdownClick, allowDuplicates, }: InputTagProps) => JSX.Element;
 export default InputTag;

package/dist/esm/types.d.ts

@@ -436,5 +436,6 @@ export interface InputTagProps {
     options?: Array<DropdownItemsProps>;
     inputProps?: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
     handleValChange?: (value: any) => void;
+    allowDuplicates?: boolean;
 }
 export {};

package/package.json

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