hplx-react-elements-dev 1.0.38 → 1.0.40

package/dist/esm/index.js

@@ -2067,6 +2067,18 @@ var DropdownItems = function DropdownItems(_a) {
     setHover(false);
   };
 
+  var ref = useRef(null);
+
+  var checkOverFlow = function checkOverFlow() {
+    var element = ref.current;
+
+    if (element) {
+      return element.scrollWidth > element.offsetWidth;
+    }
+
+    return false;
+  };
+
   return jsxRuntime.exports.jsxs("div", __assign({
     onClick: function onClick() {
       !disabled && onSelect && onSelect(value);
@@ -2081,12 +2093,15 @@ var DropdownItems = function DropdownItems(_a) {
       children: jsxRuntime.exports.jsx("span", {
         className: start_icon
       })
-    })), jsxRuntime.exports.jsx("div", __assign({
-      className: "hplxt-flex-1 ".concat(disabled ? "hplxt-text-Gray-200" : "hplxt-text-Gray-700", " ").concat(className)
+    })), jsxRuntime.exports.jsx(Typography, __assign({
+      variant: hover && !disabled ? 'Medium' : 'Regular',
+      type: "Text md",
+      className: "hplxt-truncate"
     }, {
-      children: jsxRuntime.exports.jsx(Typography, __assign({
-        variant: hover && !disabled ? "Medium" : "Regular",
-        type: "Text md"
+      children: jsxRuntime.exports.jsx("div", __assign({
+        className: "hplxt-flex-1 ".concat(disabled ? 'hplxt-text-Gray-200' : 'hplxt-text-Gray-700', " ").concat(className),
+        title: checkOverFlow() ? label : undefined,
+        ref: ref
       }, {
         children: label
       }))
@@ -2936,33 +2951,23 @@ var getTheme = function getTheme(theme) {
 };
 
 var Tooltip = function Tooltip(props) {
-  var _a = useState(false),
-      active = _a[0],
-      setActive = _a[1];
-
-  var _b = props || {},
-      _c = _b.variant,
-      variant = _c === void 0 ? "Bottom" : _c,
-      children = _b.children,
-      _d = _b.theme,
-      theme = _d === void 0 ? "dark" : _d,
-      text = _b.text,
-      supportingText = _b.supportingText;
+  var _a = props || {},
+      _b = _a.variant,
+      variant = _b === void 0 ? "Bottom" : _b,
+      children = _a.children,
+      _c = _a.theme,
+      theme = _c === void 0 ? "dark" : _c,
+      text = _a.text,
+      supportingText = _a.supportingText;
 
   return jsxRuntime.exports.jsxs("div", __assign({
-    className: "hplxt-relative hplxt-inline-block",
-    onMouseEnter: function onMouseEnter() {
-      return setActive(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setActive(false);
-    }
+    className: "hplxt-group hplxt-relative hplxt-inline-block"
   }, {
     children: [children, jsxRuntime.exports.jsxs("div", __assign({
-      className: "hplxt-w-max hplxt-text-left hplxt-max-w-xs ".concat(getVariantPlacement(variant))
+      className: " hplxt-invisible group-hover:hplxt-visible hplxt-opacity-0 group-hover:hplxt-opacity-100  hplxt-transition hplxt-delay-1000\t   hplxt-w-max hplxt-text-left hplxt-max-w-xs ".concat(getVariantPlacement(variant))
     }, {
       children: [// using short circuit operator to show the tooltip //{`${getVariantMessagePlacement(variant)}`}
-      active && (text || supportingText) && jsxRuntime.exports.jsxs("div", __assign({
+      (text || supportingText) && jsxRuntime.exports.jsxs("div", __assign({
         className: "hplxt-px-3 hplxt-py-2 hplxt-shadow-lg hplxt-rounded-lg ".concat(getTheme(theme), " ").concat(getVariantMessagePlacement(variant))
       }, {
         children: [jsxRuntime.exports.jsx(Typography, __assign({
@@ -2977,7 +2982,7 @@ var Tooltip = function Tooltip(props) {
           children: supportingText
         }))]
       })), // using short circuit operator to show the tooltip arrow
-      active && variant && (text || supportingText) && jsxRuntime.exports.jsx("div", {
+      variant && (text || supportingText) && jsxRuntime.exports.jsx("div", {
         className: "hplxt-absolute hplxt-w-3 hplxt-h-3 hplxt-rotate-45 ".concat(getTheme(theme), " ").concat(getVariantArrowPlacement(variant))
       })]
     }))]
@@ -16899,13 +16904,23 @@ var DatePicker = function DatePicker(_a) {
 
   var handleSelect = function handleSelect(date) {
     setDate(date);
-    setClicked(!clicked);
+    setClicked(function (prev_clicked) {
+      return !prev_clicked;
+    });
     console.log(dayjs().format("MMM DD, YYYY"));
     dateVar(date);
   };
 
   var inputClick = function inputClick() {
-    setClicked(!clicked);
+    setClicked(function (prev_clicked) {
+      return !prev_clicked;
+    });
+  };
+
+  var inputFocus = function inputFocus() {
+    setClicked(function (prev_clicked) {
+      return !prev_clicked;
+    });
   };
 
   useEffect(function () {
@@ -16933,6 +16948,7 @@ var DatePicker = function DatePicker(_a) {
         inputProps: {
           placeholder: "Select date",
           onClick: inputClick,
+          onFocus: inputFocus,
           value: date ? dayjs(date).format("MMM DD, YYYY") : selectDate === null || selectDate === void 0 ? void 0 : selectDate.toString()
         },
         fieldColor: fieldColor

package/package.json

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