hplx-react-elements-dev 1.0.60 → 1.0.62

package/dist/esm/buttonGroups/ButtonGroups.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ButtonGroupsProps } from "../types";
-declare const ButtonGroups: ({ options, disabled, value, onChange, ...ButtonGroupsProps }: ButtonGroupsProps) => JSX.Element;
+declare const ButtonGroups: ({ options, disabled, value, onChange, className, style, ...ButtonGroupsProps }: ButtonGroupsProps) => JSX.Element;
 export default ButtonGroups;

package/dist/esm/index.js

@@ -2135,7 +2135,7 @@ var DropdownItems = function DropdownItems(_a) {
     onMouseDown: function onMouseDown(e) {
       !disabled && handleOnSelect(e);
     },
-    className: "hplxt-h-10 hplxt-flex hplxt-items-center hplxt-px-2  ".concat(disabled ? "hplxt-cursor-not-allowed" : "hover:hplxt-bg-Blue_gray-100 hplxt-cursor-pointer"),
+    className: "hplxt-h-10 hplxt-flex hplxt-items-center hplxt-px-2  ".concat(disabled ? "hplxt-cursor-not-allowed" : "hover:hplxt-bg-Blue_gray-100 hplxt-cursor-pointer", " ").concat(className),
     onMouseEnter: onMouseEnterHandler,
     onMouseLeave: onMouseLeaveHandler
   }, {
@@ -2893,11 +2893,14 @@ var ButtonGroups = function ButtonGroups(_a) {
       disabled = _b === void 0 ? false : _b,
       value = _a.value,
       onChange = _a.onChange,
-      ButtonGroupsProps = __rest(_a, ["options", "disabled", "value", "onChange"]);
+      _c = _a.className,
+      className = _c === void 0 ? '' : _c,
+      style = _a.style,
+      ButtonGroupsProps = __rest(_a, ["options", "disabled", "value", "onChange", "className", "style"]);
 
-  var _c = useState(-1),
-      hovered = _c[0],
-      setHovered = _c[1]; // const touch = touched && touched[name];
+  var _d = useState(-1),
+      hovered = _d[0],
+      setHovered = _d[1]; // const touch = touched && touched[name];
   // const error = errors && errors[name];
   // const errorMsg = touch && error ? error : undefined;
 
@@ -2919,7 +2922,8 @@ var ButtonGroups = function ButtonGroups(_a) {
   };
 
   return jsxRuntime.exports.jsx("div", __assign({
-    className: "hplxt-border-1 hplxt-border-Gray-300 hplxt-rounded-lg hplxt-flex hplxt-overflow-hidden"
+    className: "hplxt-border-1 hplxt-border-Gray-300 hplxt-rounded-lg hplxt-flex hplxt-overflow-hidden ".concat(className),
+    style: style
   }, {
     children: !!options && options.constructor === Array && options.map(function (option, index) {
       var _a = option || {},
@@ -17625,7 +17629,7 @@ var InputTag = function InputTag(_a) {
   var wrapperRef = useRef(null);
   var inputRef = useRef(null);
 
-  var _q = useState(),
+  var _q = useState([]),
       dropdownArr = _q[0],
       setDropdownArr = _q[1];
 
@@ -17641,6 +17645,10 @@ var InputTag = function InputTag(_a) {
       setTags = _s[1]; // tag array
 
 
+  var _t = useState(-1),
+      focusIndex = _t[0],
+      setFocusIndex = _t[1];
+
   var handleValueChange = function handleValueChange(e) {
     var sug = [];
     setShowDropdown(true);
@@ -17660,6 +17668,7 @@ var InputTag = function InputTag(_a) {
 
     if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
       setShowDropdown(false);
+      setFocusIndex(-1);
     }
   };
 
@@ -17674,6 +17683,7 @@ var InputTag = function InputTag(_a) {
     onDropdownClick && onDropdownClick(selectedItem);
     handleValChange && handleValChange(value);
     setShowDropdown(false);
+    setFocusIndex(-1);
   };
 
   useEffect(function () {
@@ -17703,6 +17713,7 @@ var InputTag = function InputTag(_a) {
     }
 
     setShowDropdown(false);
+    setFocusIndex(-1);
     setActive(false);
     onBlur && onBlur(event);
   };
@@ -17712,9 +17723,51 @@ var InputTag = function InputTag(_a) {
       setTags(__spreadArray(__spreadArray([], tags, true), [tagInputValue], false));
       setValue(tags.filter(Boolean).join(", "));
       setTagInputValue("");
-    }
+      setFocusIndex(-1);
+      handleValChange && handleValChange(value);
+    } // on key down
 
-    handleValChange && handleValChange(value);
+
+    if (e.keyCode === 40) {
+      if (focusIndex < dropdownArr.length - 1) {
+        var focusI = focusIndex + 1;
+
+        if (wrapperRef && wrapperRef.current) {
+          wrapperRef.current.scrollBy(0, 18);
+        }
+
+        setFocusIndex(focusI); // setTagInputValue(dropdownArr[focusI].value);
+      }
+    } // on key up
+
+
+    if (e.keyCode === 38) {
+      if (focusIndex !== 0) {
+        var focusI = focusIndex - 1;
+
+        if (wrapperRef && wrapperRef.current) {
+          wrapperRef.current.scrollBy(0, -18);
+        }
+
+        setFocusIndex(focusI); // setTagInputValue(dropdownArr[focusI].value);
+      }
+    } // on key left
+
+
+    if (e.keyCode === 37) {
+      if (focusIndex >= 0) {
+        setFocusIndex(focusIndex);
+        setTagInputValue(dropdownArr[focusIndex].value);
+      }
+    } // on key right
+
+
+    if (e.keyCode === 39) {
+      if (focusIndex !== 0) {
+        setFocusIndex(focusIndex);
+        setTagInputValue(dropdownArr[focusIndex].value);
+      }
+    }
   };
 
   var deleteTag = function deleteTag(_, del_index) {
@@ -17780,11 +17833,11 @@ var InputTag = function InputTag(_a) {
       }
     }, {
       children: dropdownArr && dropdownArr.length > 0 && jsxRuntime.exports.jsx("div", {
-        children: dropdownArr.map(function (option) {
+        children: dropdownArr.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 handleDropdownClick(restOptions);

package/dist/esm/types.d.ts

@@ -184,6 +184,8 @@ export interface ButtonGroupsProps {
     onChange?: (value: string) => void;
     options: Array<ButtonGroupOptionType>;
     disabled: boolean;
+    className?: string;
+    style?: {};
 }
 type tooltipPosition = "Top" | "Top end" | "Top start" | "Bottom" | "Left" | "Right";
 type toolTipTheme = "dark" | "light";

package/package.json

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