@dreamtree-org/twreact-ui 1.0.62 → 1.0.63

package/dist/index.js

@@ -15112,24 +15112,7 @@ function LocationPicker(_ref) {
   }, iconButton)));
 }
 
-var _excluded$d = ["items", "collapsed", "onToggle", "className", "logo", "user", "onUserClick", "drawerPosition", "isMobileOpen", "setIsMobileOpen", "showCollapsedTooltips", "tooltipClassName"];
-
-/**
- * Small built-in tooltip used by the Sidebar when collapsed.
- * Pure CSS + tiny visible prop for fade in/out.
- */
-var SidebarTooltip = function SidebarTooltip(_ref) {
-  var label = _ref.label,
-    visible = _ref.visible,
-    className = _ref.className;
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn$1("absolute left-full top-1/2 -translate-y-1/2 ml-2 whitespace-nowrap", "px-2 py-1 rounded-md bg-gray-900 text-white text-xs shadow-lg", "opacity-0 pointer-events-none transition-opacity duration-150 pb-2 pt-2", {
-      "opacity-100": visible
-    }, className),
-    role: "tooltip",
-    "aria-hidden": !visible
-  }, label);
-};
+var _excluded$d = ["items", "collapsed", "onToggle", "className", "logo", "user", "onUserClick", "drawerPosition", "isMobileOpen", "setIsMobileOpen", "showCollapsedTooltips", "tooltipOptions"];
 
 /**
  * Sidebar component with custom tooltip for collapsed mode.
@@ -15160,7 +15143,7 @@ var Sidebar = function Sidebar(_ref2) {
     setIsMobileOpen = _ref2.setIsMobileOpen,
     _ref2$showCollapsedTo = _ref2.showCollapsedTooltips,
     showCollapsedTooltips = _ref2$showCollapsedTo === void 0 ? true : _ref2$showCollapsedTo,
-    tooltipClassName = _ref2.tooltipClassName,
+    tooltipOptions = _ref2.tooltipOptions,
     props = _objectWithoutProperties$1(_ref2, _excluded$d);
   var _useState = React.useState(new Set()),
     _useState2 = _slicedToArray(_useState, 2),
@@ -15171,9 +15154,9 @@ var Sidebar = function Sidebar(_ref2) {
     activeItemId = _useState4[0],
     setActiveItemId = _useState4[1];
   var _useState5 = React.useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    hoveredItemId = _useState6[0],
-    setHoveredItemId = _useState6[1];
+    _useState6 = _slicedToArray(_useState5, 2);
+    _useState6[0];
+    var setHoveredItemId = _useState6[1];
   var mobileOpen = isMobileOpen !== null && isMobileOpen !== void 0 ? isMobileOpen : false;
   var effectiveCollapsed = mobileOpen ? false : collapsed;
   React.useEffect(function () {
@@ -15260,12 +15243,21 @@ var Sidebar = function Sidebar(_ref2) {
           return id === item.id ? null : id;
         });
       }
-    }, item.icon && /*#__PURE__*/React.createElement("span", {
+    }, showTooltipForThis ? /*#__PURE__*/React.createElement(Tooltip, _extends({}, tooltipOptions, {
+      trigger: "hover",
+      content: item.label,
+      position: "right"
+    }), item.icon && /*#__PURE__*/React.createElement("span", {
+      className: cn$1("flex-shrink-0", {
+        "mr-3": !effectiveCollapsed || level > 0,
+        "mr-0": effectiveCollapsed && level === 0
+      })
+    }, item.icon)) : /*#__PURE__*/React.createElement(React.Fragment, null, item.icon && /*#__PURE__*/React.createElement("span", {
       className: cn$1("flex-shrink-0", {
         "mr-3": !effectiveCollapsed || level > 0,
         "mr-0": effectiveCollapsed && level === 0
       })
-    }, item.icon), (!effectiveCollapsed || level > 0) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    }, item.icon)), (!effectiveCollapsed || level > 0) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
       className: "flex-1 truncate"
     }, item.label), hasChildren && /*#__PURE__*/React.createElement("span", {
       className: "ml-2 flex-shrink-0"
@@ -15276,12 +15268,8 @@ var Sidebar = function Sidebar(_ref2) {
     })))), hasChildren && isExpanded && (!effectiveCollapsed || level > 0) && /*#__PURE__*/React.createElement("div", {
       className: "mt-1 space-y-1 ml-2"
     }, item.children.map(function (child) {
-      return _renderMenuItem(child, level + 1);
-    })), showTooltipForThis && /*#__PURE__*/React.createElement(SidebarTooltip, {
-      label: item.label,
-      visible: hoveredItemId === item.id,
-      className: tooltipClassName
-    }));
+      return _renderMenuItem(child, level + 1, tooltipOptions);
+    })));
   };
   var handleToggleClick = function handleToggleClick() {
     if (mobileOpen && setIsMobileOpen) setIsMobileOpen(false);else onToggle === null || onToggle === void 0 || onToggle();
@@ -15304,7 +15292,7 @@ var Sidebar = function Sidebar(_ref2) {
   }) : /*#__PURE__*/React.createElement(ChevronLeft, {
     className: "h-5 w-5"
   }))), /*#__PURE__*/React.createElement("nav", {
-    className: "flex-1 space-y-1 p-4 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 hover:[&::-webkit-scrollbar-thumb]:bg-gray-400"
+    className: "flex-1 space-y-1 overflow-y-auto p-4 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 hover:[&::-webkit-scrollbar-thumb]:bg-gray-400"
   }, items.map(function (item) {
     return _renderMenuItem(item);
   })), user && /*#__PURE__*/React.createElement("div", {
@@ -15345,10 +15333,7 @@ var Sidebar = function Sidebar(_ref2) {
     className: "text-sm font-medium text-gray-700 truncate"
   }, user.name), /*#__PURE__*/React.createElement("p", {
     className: "text-xs text-gray-500 truncate"
-  }, user.email))), effectiveCollapsed && showCollapsedTooltips && /*#__PURE__*/React.createElement(SidebarTooltip, {
-    label: user.name,
-    visible: hoveredItemId === "user"
-  }))));
+  }, user.email))))));
   var isRight = drawerPosition === "right";
   var mobileDrawerClasses = cn$1("fixed top-0 z-50 h-full transition-transform duration-300 ease-in-out md:hidden", {
     "left-0": !isRight,