hplx-react-elements-dev 1.0.70 → 1.0.72

package/dist/esm/index.d.ts

@@ -27,3 +27,4 @@ export { default as NestedDropdown } from "./nestedDropdown/NestedDropdown";
 export { default as DatePicker } from "./datePicker/DatePicker";
 export { default as DoubleInput } from "./doubleInput/DoubleInput";
 export { default as InputTag } from "./inputTag/InputTag";
+export { default as InputTagDropdownItem } from "./inputTag/InputTagDropdownItem";

package/dist/esm/index.js

@@ -17587,37 +17587,127 @@ var DoubleInput = function DoubleInput(_a) {
   }));
 };
 
+var InputTagDropdownItem = function InputTagDropdownItem(_a) {
+  var className = _a.className,
+      label = _a.label,
+      value = _a.value,
+      disabled = _a.disabled,
+      start_icon = _a.start_icon,
+      _b = _a.active,
+      active = _b === void 0 ? false : _b,
+      end_icon = _a.end_icon,
+      onSelect = _a.onSelect,
+      ddRef = _a.ddRef,
+      setChangeLeft = _a.setChangeLeft;
+
+  var _c = useState(false),
+      hover = _c[0],
+      setHover = _c[1];
+
+  useEffect(function () {
+    if ((ddRef === null || ddRef === void 0 ? void 0 : ddRef.current.clientWidth) > 1300) setChangeLeft(false);
+  }, []);
+
+  var onMouseEnterHandler = function onMouseEnterHandler() {
+    setHover(true);
+  };
+
+  var onMouseLeaveHandler = function onMouseLeaveHandler() {
+    setHover(false);
+  };
+
+  var ref = useRef(null);
+
+  var checkOverFlow = function checkOverFlow() {
+    var element = ref.current;
+
+    if (element) {
+      return element.scrollWidth > element.offsetWidth;
+    }
+
+    return false;
+  };
+
+  var handleOnSelect = function handleOnSelect(e) {
+    e.stopPropagation();
+    onSelect && onSelect(value);
+  };
+
+  return jsxRuntime.exports.jsxs("div", __assign({
+    onMouseUp: function onMouseUp(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", " ").concat(className),
+    onMouseEnter: onMouseEnterHandler,
+    onMouseLeave: onMouseLeaveHandler,
+    style: {
+      maxWidth: '93.5vw'
+    },
+    ref: ddRef
+  }, {
+    children: [Boolean(start_icon) && jsxRuntime.exports.jsx("div", __assign({
+      className: "hplxt-mr-2 ".concat(disabled ? "hplxt-text-Gray-200" : hover ? "hplxt-text-Gray-700" : "hplxt-text-Gray-500")
+    }, {
+      children: jsxRuntime.exports.jsx("span", {
+        className: start_icon
+      })
+    })), jsxRuntime.exports.jsx(Typography, __assign({
+      variant: hover && !disabled ? "Medium" : "Regular",
+      type: "Text md",
+      className: "hplxt-w-64 hplxt-overflow-hidden"
+    }, {
+      children: jsxRuntime.exports.jsx("div", __assign({
+        className: "hplxt-flex-1 hplxt-truncate hplxt-overflow-hidden hplxt-line-clamp-3 ".concat(disabled ? "hplxt-text-Gray-200" : "hplxt-text-Gray-700", " ").concat(className),
+        title: checkOverFlow() ? label : undefined,
+        ref: ref
+      }, {
+        children: label
+      }))
+    })), Boolean(end_icon) && jsxRuntime.exports.jsx("div", __assign({
+      className: "hplxt-ml-2 ".concat(!disabled && (hover || active) ? "hplxt-text-Primary-700" : "hplxt-text-Gray-200")
+    }, {
+      children: jsxRuntime.exports.jsx("span", {
+        className: end_icon
+      })
+    }))]
+  }));
+};
+
 var InputTag = function InputTag(_a) {
-  var _b, _c;
+  var _b;
 
   var inputProps = _a.inputProps,
       className = _a.className,
       dropdownClassName = _a.dropdownClassName,
-      _d = _a.options,
-      options = _d === void 0 ? [] : _d,
-      _e = _a.tagList,
-      tagList = _e === void 0 ? [] : _e,
-      _f = _a.tagString,
-      tagString = _f === void 0 ? "" : _f,
+      _c = _a.options,
+      options = _c === void 0 ? [] : _c,
+      _d = _a.tagList,
+      tagList = _d === void 0 ? [] : _d,
+      _e = _a.tagString,
+      tagString = _e === void 0 ? "" : _e,
       // comma separated string which is created into separate tags
-  _g = _a.handleValChange,
+  _f = _a.handleValChange,
       // comma separated string which is created into separate tags
-  handleValChange = _g === void 0 ? function (_) {} : _g,
-      _h = _a.onDropdownClick,
-      onDropdownClick = _h === void 0 ? function (_) {} : _h;
+  handleValChange = _f === void 0 ? function (_) {} : _f,
+      _g = _a.onDropdownClick,
+      onDropdownClick = _g === void 0 ? function (_) {} : _g;
+
+  var _h = inputProps || {},
+      disabled = _h.disabled,
+      onFocus = _h.onFocus,
+      onBlur = _h.onBlur;
 
-  var _j = inputProps || {},
-      disabled = _j.disabled,
-      onFocus = _j.onFocus,
-      onBlur = _j.onBlur;
+  var _j = useState(false),
+      active = _j[0],
+      setActive = _j[1];
 
   var _k = useState(false),
-      active = _k[0],
-      setActive = _k[1];
+      showDropdown = _k[0],
+      setShowDropdown = _k[1];
 
-  var _l = useState(false),
-      showDropdown = _l[0],
-      setShowDropdown = _l[1];
+  var _l = useState(''),
+      dropdownOffset = _l[0],
+      setdropdownOffset = _l[1];
 
   var _m = useState(""),
       value = _m[0],
@@ -17693,8 +17783,7 @@ var InputTag = function InputTag(_a) {
     });
     setTagInputValue("");
     onDropdownClick && onDropdownClick(selectedItem);
-    handleValChange && handleValChange(value); // setShowDropdown(false);
-
+    handleValChange && handleValChange(value);
     setFocusIndex(-1);
     setDropdownArr(options);
   };
@@ -17713,6 +17802,9 @@ var InputTag = function InputTag(_a) {
   });
 
   var handleFocus = function handleFocus(event) {
+    var _a;
+
+    setdropdownOffset("".concat((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.offsetLeft, "px"));
     setShowDropdown(true);
     setActive(true);
     onFocus && onFocus(event);
@@ -17723,8 +17815,7 @@ var InputTag = function InputTag(_a) {
       setTags(__spreadArray(__spreadArray([], tags, true), [tagInputValue.trim()], false));
       setValue(tags.filter(Boolean).join(", "));
       setTagInputValue("");
-    } //setShowDropdown(false);
-
+    }
 
     setFocusIndex(-1);
     setActive(false);
@@ -17732,6 +17823,8 @@ var InputTag = function InputTag(_a) {
   };
 
   var addEditTags = function addEditTags(e) {
+    var _a;
+
     if (e.keyCode === 13 && editInputValue.trim()) {
       var newArr = __spreadArray([], tags, true);
 
@@ -17740,6 +17833,8 @@ var InputTag = function InputTag(_a) {
       setValue(tags.filter(Boolean).join(", "));
       setEditIndex(-1);
       setEditInputValue("");
+      inputRef.current && inputRef.current.focus();
+      setdropdownOffset("".concat((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.offsetLeft, "px"));
     } //on backspace
 
 
@@ -17748,7 +17843,7 @@ var InputTag = function InputTag(_a) {
       setEditInputValue(tags[editIndex - 1] + " ");
       setEditIndex(function (prev) {
         return prev - 1;
-      }); // setEditInputValue(tags[])
+      });
     }
   };
 
@@ -17763,10 +17858,9 @@ var InputTag = function InputTag(_a) {
 
 
     if (e.keyCode === 8 && !tagInputValue) {
-      // deleteTag("", editIndex);
       setShowDropdown(false);
       setEditInputValue(tags[tags.length - 1] + " ");
-      setEditIndex(tags.length - 1); // setEditInputValue(tags[])
+      setEditIndex(tags.length - 1);
     } // on key down
 
 
@@ -17778,7 +17872,7 @@ var InputTag = function InputTag(_a) {
           wrapperRef.current.scrollBy(0, 18);
         }
 
-        setFocusIndex(focusI); // setTagInputValue(dropdownArr[focusI].value);
+        setFocusIndex(focusI);
       }
     } // on key up
 
@@ -17791,7 +17885,7 @@ var InputTag = function InputTag(_a) {
           wrapperRef.current.scrollBy(0, -18);
         }
 
-        setFocusIndex(focusI); // setTagInputValue(dropdownArr[focusI].value);
+        setFocusIndex(focusI);
       }
     } // on key left
 
@@ -17825,9 +17919,13 @@ var InputTag = function InputTag(_a) {
     handleValChange && handleValChange(tags.filter(Boolean).join(", "));
   }, [tags]);
   useEffect(function () {
+    var _a;
+
     if (editIndex >= 0) {
       editRef.current && editRef.current.focus();
     }
+
+    setdropdownOffset("".concat((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.offsetLeft, "px"));
   }, [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)
@@ -17898,15 +17996,15 @@ var InputTag = function InputTag(_a) {
       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) || 0) + 30, "px")
+        left: changeLeft ? dropdownOffset : "",
+        top: "".concat((((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.offsetTop) || 0) + 30, "px")
       }
     }, {
       children: dropdownArr && dropdownArr.length > 0 && jsxRuntime.exports.jsx("div", {
         children: dropdownArr.map(function (option, index) {
           var restOptions = __rest(option || {}, []);
 
-          return jsxRuntime.exports.jsx(DropdownItems, __assign({
+          return jsxRuntime.exports.jsx(InputTagDropdownItem, __assign({
             className: "hplxt-text-Primary-700 ".concat(index === focusIndex ? "hplxt-bg-Blue_gray-100 hplxt-font-inter-1" : "")
           }, restOptions, {
             onSelect: function onSelect() {
@@ -17921,4 +18019,4 @@ var InputTag = function InputTag(_a) {
   }));
 };
 
-export { AddSuggestion, Avatar, Badge, BadgeGroup, Button, ButtonGroups, Card, Checkbox, CheckboxGroup, CheckboxGroupItem, CollapsibleCard, DatePicker, DoubleInput, DropdownField, DropdownItems as DropdownItem, InputField, InputFieldSplit, InputTag, MessageToast, NestedDropdown, OtpField, ProgressBar, ProgressCircle, RadioBtn, Slider, TextAreaField, ToggleSwitch, Tooltip, Typography };
+export { AddSuggestion, Avatar, Badge, BadgeGroup, Button, ButtonGroups, Card, Checkbox, CheckboxGroup, CheckboxGroupItem, CollapsibleCard, DatePicker, DoubleInput, DropdownField, DropdownItems as DropdownItem, InputField, InputFieldSplit, InputTag, InputTagDropdownItem, MessageToast, NestedDropdown, OtpField, ProgressBar, ProgressCircle, RadioBtn, Slider, TextAreaField, ToggleSwitch, Tooltip, Typography };

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { DropdownItemsProps } from "../types";
+declare const InputTagDropdownItem: ({ className, label, value, disabled, start_icon, active, end_icon, onSelect, ddRef, setChangeLeft }: DropdownItemsProps) => JSX.Element;
+export default InputTagDropdownItem;

package/package.json

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