hplx-react-elements-dev 1.1.7 → 1.1.8

package/dist/esm/index.js

@@ -5625,9 +5625,10 @@ $$5({ target: 'String', proto: true, forced: forcedStringTrimMethod('trim') }, {
 var AddSuggestion = function AddSuggestion(_a) {
   var label = _a.label,
       _b = _a.handleSuggestionValChange,
-      handleSuggestionValChange = _b === void 0 ? function (_) {} : _b,
+      handleSuggestionValChange = _b === void 0 ? function (_, _fromEvent) {
+  } : _b,
       _c = _a.onSuggestionClick,
-      onSuggestionClick = _c === void 0 ? function (_selectedValue) {} : _c,
+      onSuggestionClick = _c === void 0 ? function (_selectedValue, _index, _searchString) {} : _c,
       className = _a.className,
       _d = _a.rows,
       rows = _d === void 0 ? 2 : _d,
@@ -5650,7 +5651,7 @@ var AddSuggestion = function AddSuggestion(_a) {
 
   var wrapperRef = useRef(null);
 
-  var _k = useState(),
+  var _k = useState([]),
       suggestionArr = _k[0],
       setSuggestionArr = _k[1];
 
@@ -5658,6 +5659,10 @@ var AddSuggestion = function AddSuggestion(_a) {
       sugVal = _l[0],
       setSugVal = _l[1];
 
+  var _m = useState(-1),
+      focusIndex = _m[0],
+      setFocusIndex = _m[1];
+
   var suggestionText = function suggestionText(text) {
     // Find the last occurrence of comma, period, or newline
     var lastCommaIndex = text.lastIndexOf(",");
@@ -5705,6 +5710,8 @@ var AddSuggestion = function AddSuggestion(_a) {
     if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
       setShowDropdown(false);
     }
+
+    setFocusIndex(-1);
   }; // const checkComma = (val: string) => {
   //   const lastEle = val.trim().charAt(sugVal.length - 1);
   //   if (lastEle === "," || lastEle === "." || lastEle === "\n") {
@@ -5715,7 +5722,7 @@ var AddSuggestion = function AddSuggestion(_a) {
   // };
 
 
-  var handleSuggestionClick = function handleSuggestionClick(selectedItem) {
+  var handleSuggestionClick = function handleSuggestionClick(selectedItem, index) {
     var val = selectedItem.value + ", ";
     var result = "";
 
@@ -5732,12 +5739,57 @@ var AddSuggestion = function AddSuggestion(_a) {
       val = result + " " + selectedItem.value + ", ";
     }
 
-    handleSuggestionValChange && handleSuggestionValChange(val);
-    onSuggestionClick(suggestionValue);
+    handleSuggestionValChange && handleSuggestionValChange(val, "dropdown");
+    onSuggestionClick(suggestionValue, index, suggestionText(suggestionValue)[1].trim());
     setSugVal(val);
     setShowDropdown(false);
   };
 
+  var handleOnKeyDown = function handleOnKeyDown(e) {
+    var ITEM_HEIGHT = 40;
+
+    if (e.code === "Enter" || e.code === "Period" || e.code === "Comma") {
+      setShowDropdown(true);
+    }
+
+    if (e.keyCode === 40) {
+      if (focusIndex < suggestionArr.length - 1) {
+        var focusI = focusIndex + 1;
+
+        if (wrapperRef && wrapperRef.current && focusI > 1) {
+          wrapperRef.current.scrollBy(0, ITEM_HEIGHT);
+        }
+
+        setFocusIndex(focusI);
+      }
+    } // on key up
+
+
+    if (e.keyCode === 38) {
+      if (focusIndex > 0) {
+        var focusI = focusIndex - 1;
+
+        if (wrapperRef && wrapperRef.current && focusI < suggestionArr.length - 2) {
+          wrapperRef.current.scrollBy(0, -ITEM_HEIGHT);
+        }
+
+        setFocusIndex(focusI);
+      }
+    }
+
+    if (e.keyCode === 13 || e.keyCode === 9) {
+      e.preventDefault();
+
+      if (focusIndex >= 0) {
+        // const res = [suggestionArr[focusIndex].value.trim()];
+        // setValue(res.filter(Boolean).join(", "));
+        // setTagInputValue("");
+        setFocusIndex(-1);
+        handleSuggestionClick(suggestionArr[focusIndex], focusIndex);
+      }
+    }
+  };
+
   useEffect(function () {
     setSugVal(suggestionValue);
   }, [suggestionValue]); // Attaching the previous event with UseEffect hook
@@ -5763,12 +5815,12 @@ var AddSuggestion = function AddSuggestion(_a) {
       isDynamicHeight: isDynamicHeight,
       inputProps: __assign(__assign({}, inputProps), {
         onChange: changeHandler,
-        value: sugVal.replace(/<br \/>/g, ''),
+        value: sugVal.replace(/<br \/>/g, ""),
         onFocus: function onFocus() {
           return setShowDropdown(true);
         },
         onKeyDown: function onKeyDown(e) {
-          if (e.code === "Enter" || e.code === "Period" || e.code === "Comma") setShowDropdown(true);
+          handleOnKeyDown(e);
         }
       })
     }), showDropdown && jsxRuntime.exports.jsx("div", __assign({
@@ -5776,14 +5828,14 @@ var AddSuggestion = function AddSuggestion(_a) {
       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 "
     }, {
       children: suggestionArr && suggestionArr.length > 0 && jsxRuntime.exports.jsx("div", {
-        children: (suggestionArr === null || suggestionArr === void 0 ? void 0 : suggestionArr.constructor) === Array && suggestionArr.length ? suggestionArr.map(function (option) {
+        children: (suggestionArr === null || suggestionArr === void 0 ? void 0 : suggestionArr.constructor) === Array && suggestionArr.length ? suggestionArr.map(function (option, index) {
           var restOptions = __rest(option || {}, []);
 
           return jsxRuntime.exports.jsx(DropdownItems, __assign({
-            className: "hplxt-text-Primary-700"
+            className: "hplxt-text-Primary-700 ".concat(index === focusIndex ? "hplxt-bg-Blue_gray-100 hplxt-font-inter-1" : "")
           }, restOptions, {
             onSelect: function onSelect() {
-              return handleSuggestionClick(restOptions);
+              return handleSuggestionClick(restOptions, index);
             }
           }));
         }) : null

package/dist/esm/types.d.ts

@@ -407,10 +407,10 @@ export interface AddSuggestionProps {
     inputFieldInputProps?: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
     suffixInputProps?: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
     suffixClassName?: string;
-    onSuggestionClick?: (selectedValue: any) => void;
+    onSuggestionClick?: (selectedValue: any, index?: number, _searchString?: string) => void;
     options?: Array<DropdownItemsProps>;
     suggestionValue?: string;
-    handleSuggestionValChange?: (value: any) => void;
+    handleSuggestionValChange?: (value: any, fromEvent?: string) => void;
     handleSuffixValChange?: (value: any) => void;
     isborderRequired?: boolean;
     getInputValue?: (value: string) => void;

package/package.json

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