hplx-react-elements-dev 1.1.6 → 1.1.8

package/dist/esm/carousel/imageCarousel.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { CarouselProps } from "../types";
 import "../carousel/imageCarousel.css";
-declare const ImageCarousel: ({ imageList, isNextPrev, caroselLeftIcon, caroselRightIcon, timeInterval, autoPlay, carouselIndicator }: CarouselProps) => JSX.Element;
+declare const ImageCarousel: ({ leftIconClassName, rightIconClassName, imageList, isNextPrev, caroselLeftIcon, caroselRightIcon, timeInterval, autoPlay, carouselIndicator }: CarouselProps) => JSX.Element;
 export default ImageCarousel;

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
@@ -20515,27 +20567,31 @@ var PopUpModal = function PopUpModal(_a) {
 };
 
 var ImageCarousel = function ImageCarousel(_a) {
-  var imageList = _a.imageList,
-      _b = _a.isNextPrev,
-      isNextPrev = _b === void 0 ? true : _b,
-      _c = _a.caroselLeftIcon,
-      caroselLeftIcon = _c === void 0 ? 'hx_left' : _c,
-      _d = _a.caroselRightIcon,
-      caroselRightIcon = _d === void 0 ? 'hx_right' : _d,
-      _e = _a.timeInterval,
-      timeInterval = _e === void 0 ? 5000 : _e,
-      _f = _a.autoPlay,
-      autoPlay = _f === void 0 ? true : _f,
-      _g = _a.carouselIndicator,
-      carouselIndicator = _g === void 0 ? true : _g;
-
-  var _h = useState(0),
-      current = _h[0],
-      setCurrent = _h[1];
-
-  var _j = useState(autoPlay),
-      isAutoPlay = _j[0],
-      setIsAutoPlay = _j[1];
+  var _b = _a.leftIconClassName,
+      leftIconClassName = _b === void 0 ? '' : _b,
+      _c = _a.rightIconClassName,
+      rightIconClassName = _c === void 0 ? '' : _c,
+      imageList = _a.imageList,
+      _d = _a.isNextPrev,
+      isNextPrev = _d === void 0 ? true : _d,
+      _e = _a.caroselLeftIcon,
+      caroselLeftIcon = _e === void 0 ? 'hx_left' : _e,
+      _f = _a.caroselRightIcon,
+      caroselRightIcon = _f === void 0 ? 'hx_right' : _f,
+      _g = _a.timeInterval,
+      timeInterval = _g === void 0 ? 5000 : _g,
+      _h = _a.autoPlay,
+      autoPlay = _h === void 0 ? true : _h,
+      _j = _a.carouselIndicator,
+      carouselIndicator = _j === void 0 ? true : _j;
+
+  var _k = useState(0),
+      current = _k[0],
+      setCurrent = _k[1];
+
+  var _l = useState(autoPlay),
+      isAutoPlay = _l[0],
+      setIsAutoPlay = _l[1];
 
   var length = imageList.length;
 
@@ -20583,45 +20639,47 @@ var ImageCarousel = function ImageCarousel(_a) {
   }
 
   var carouselIndicatorDoms = [];
-  return jsxRuntime.exports.jsxs("div", __assign({
-    className: "slider"
-  }, {
-    children: [Boolean(caroselLeftIcon) && isNextPrev && jsxRuntime.exports.jsx("div", __assign({
-      className: "left-arrow"
-    }, {
-      children: jsxRuntime.exports.jsx("span", {
-        className: caroselLeftIcon,
-        onClick: prevSlide
-      })
-    })), Boolean(caroselRightIcon) && isNextPrev && jsxRuntime.exports.jsx("div", __assign({
-      className: "right-arrow "
+  return (//
+    jsxRuntime.exports.jsxs("div", __assign({
+      className: "slider"
     }, {
-      children: jsxRuntime.exports.jsx("span", {
-        className: caroselRightIcon,
-        onClick: nextSlide
-      })
-    })), imageList.map(function (d, index) {
-      carouselIndicatorDoms.push(jsxRuntime.exports.jsx("li", {
-        className: index === current ? 'active' : '',
-        onClick: function onClick() {
-          goToSlide(index);
-        }
-      }));
-      return jsxRuntime.exports.jsx("div", __assign({
-        className: index === current ? 'slide active ' : 'slide'
+      children: [Boolean(caroselLeftIcon) && isNextPrev && jsxRuntime.exports.jsx("div", __assign({
+        className: "left-arrow hplxt-flex hplxt-items-center hplxt-justify-center ".concat(leftIconClassName)
       }, {
-        children: index === current && jsxRuntime.exports.jsx("img", {
-          src: d,
-          alt: d,
-          className: 'image'
+        children: jsxRuntime.exports.jsx("span", {
+          className: "".concat(caroselLeftIcon),
+          onClick: prevSlide
         })
-      }), index);
-    }), carouselIndicator && jsxRuntime.exports.jsx("ul", __assign({
-      className: "carousel-indicators"
-    }, {
-      children: carouselIndicatorDoms
-    }))]
-  }));
+      })), Boolean(caroselRightIcon) && isNextPrev && jsxRuntime.exports.jsx("div", __assign({
+        className: "right-arrow hplxt-flex hplxt-items-center hplxt-justify-center ".concat(rightIconClassName)
+      }, {
+        children: jsxRuntime.exports.jsx("span", {
+          className: "".concat(caroselRightIcon),
+          onClick: nextSlide
+        })
+      })), imageList.map(function (d, index) {
+        carouselIndicatorDoms.push(jsxRuntime.exports.jsx("li", {
+          className: index === current ? 'active' : '',
+          onClick: function onClick() {
+            goToSlide(index);
+          }
+        }));
+        return jsxRuntime.exports.jsx("div", __assign({
+          className: index === current ? 'slide active ' : 'slide'
+        }, {
+          children: index === current && jsxRuntime.exports.jsx("img", {
+            src: d,
+            alt: d,
+            className: 'image'
+          })
+        }), index);
+      }), carouselIndicator && jsxRuntime.exports.jsx("ul", __assign({
+        className: "carousel-indicators"
+      }, {
+        children: carouselIndicatorDoms
+      }))]
+    }))
+  );
 };
 
 export { AddSuggestion, Avatar, Badge, BadgeGroup, Button, ButtonGroups, CalendarView, Card, Checkbox, CheckboxGroup, CheckboxGroupItem, CollapsibleCard, DatePicker, DoubleInput, DropdownField, DropdownItems as DropdownItem, ImageCarousel, InputField, InputFieldSplit, InputTag, InputTagDropdownItem, MessageToast, NestedDropdown, OtpField, PopUpModal, ProgressBar, ProgressCircle, RadioBtn, Slider, TextAreaField, ToggleSwitch, Tooltip, Typography };

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;
@@ -456,6 +456,8 @@ export interface InputTagProps {
     getInputValue?: (value: string) => void;
 }
 export interface CarouselProps {
+    leftIconClassName?: string;
+    rightIconClassName?: string;
     imageList: Array<string>;
     isNextPrev?: boolean;
     caroselLeftIcon?: string;

package/package.json

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