@dreamtree-org/twreact-ui 1.0.61 → 1.0.62

package/dist/index.js

@@ -10430,7 +10430,7 @@ function Switch(props) {
 
   // Container layout: column if top or bottom labels exist, otherwise row
   var containerIsColumn = Boolean(topLabel || bottomLabel);
-  var containerClass = [containerIsColumn ? "flex flex-col items-center" : "inline-flex items-center", "gap-2", className].filter(Boolean).join(" ");
+  var containerClass = [containerIsColumn ? "flex flex-col " : "inline-flex items-center", "gap-2", className].filter(Boolean).join(" ");
   var labelOpacityClass = disabled ? "opacity-50" : "";
   return /*#__PURE__*/React.createElement("div", {
     className: containerClass
@@ -15112,23 +15112,56 @@ function LocationPicker(_ref) {
   }, iconButton)));
 }
 
-var _excluded$d = ["items", "collapsed", "onToggle", "className", "logo", "user", "onUserClick", "drawerPosition", "isMobileOpen", "setIsMobileOpen"];
-var Sidebar = function Sidebar(_ref) {
-  var _ref$items = _ref.items,
-    items = _ref$items === void 0 ? [] : _ref$items,
-    _ref$collapsed = _ref.collapsed,
-    collapsed = _ref$collapsed === void 0 ? false : _ref$collapsed,
-    onToggle = _ref.onToggle,
-    className = _ref.className,
-    logo = _ref.logo,
-    user = _ref.user,
-    onUserClick = _ref.onUserClick,
-    _ref$drawerPosition = _ref.drawerPosition,
-    drawerPosition = _ref$drawerPosition === void 0 ? "left" : _ref$drawerPosition,
-    _ref$isMobileOpen = _ref.isMobileOpen,
-    isMobileOpen = _ref$isMobileOpen === void 0 ? false : _ref$isMobileOpen,
-    setIsMobileOpen = _ref.setIsMobileOpen,
-    props = _objectWithoutProperties$1(_ref, _excluded$d);
+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);
+};
+
+/**
+ * Sidebar component with custom tooltip for collapsed mode.
+ *
+ * Props:
+ * - items: array of { id, label, icon, children?, onClick?, active? }
+ * - collapsed: boolean (desktop collapsed)
+ * - onToggle: function to toggle collapse
+ * - className, logo, user, onUserClick
+ * - drawerPosition: 'left' | 'right'
+ * - isMobileOpen, setIsMobileOpen
+ * - showCollapsedTooltips: boolean (default true)
+ */
+var Sidebar = function Sidebar(_ref2) {
+  var _ref2$items = _ref2.items,
+    items = _ref2$items === void 0 ? [] : _ref2$items,
+    _ref2$collapsed = _ref2.collapsed,
+    collapsed = _ref2$collapsed === void 0 ? false : _ref2$collapsed,
+    onToggle = _ref2.onToggle,
+    className = _ref2.className,
+    logo = _ref2.logo,
+    user = _ref2.user,
+    onUserClick = _ref2.onUserClick,
+    _ref2$drawerPosition = _ref2.drawerPosition,
+    drawerPosition = _ref2$drawerPosition === void 0 ? "left" : _ref2$drawerPosition,
+    _ref2$isMobileOpen = _ref2.isMobileOpen,
+    isMobileOpen = _ref2$isMobileOpen === void 0 ? false : _ref2$isMobileOpen,
+    setIsMobileOpen = _ref2.setIsMobileOpen,
+    _ref2$showCollapsedTo = _ref2.showCollapsedTooltips,
+    showCollapsedTooltips = _ref2$showCollapsedTo === void 0 ? true : _ref2$showCollapsedTo,
+    tooltipClassName = _ref2.tooltipClassName,
+    props = _objectWithoutProperties$1(_ref2, _excluded$d);
   var _useState = React.useState(new Set()),
     _useState2 = _slicedToArray(_useState, 2),
     expandedItems = _useState2[0],
@@ -15137,19 +15170,14 @@ var Sidebar = function Sidebar(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     activeItemId = _useState4[0],
     setActiveItemId = _useState4[1];
-
-  // Use props for mobile state, fallback to false
+  var _useState5 = React.useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    hoveredItemId = _useState6[0],
+    setHoveredItemId = _useState6[1];
   var mobileOpen = isMobileOpen !== null && isMobileOpen !== void 0 ? isMobileOpen : false;
-
-  // Ensure mobile always shows full sidebar (no collapse on mobile)
   var effectiveCollapsed = mobileOpen ? false : collapsed;
   React.useEffect(function () {
-    // Prevent body scroll when mobile sidebar is open
-    if (mobileOpen) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
-    }
+    if (mobileOpen) document.body.style.overflow = "hidden";else document.body.style.overflow = "";
     return function () {
       document.body.style.overflow = "";
     };
@@ -15159,58 +15187,53 @@ var Sidebar = function Sidebar(_ref) {
     if (next.has(itemId)) next["delete"](itemId);else next.add(itemId);
     setExpandedItems(next);
   };
-
-  // New helper to expand a single item (replace existing expanded set)
   var expandSingle = function expandSingle(itemId) {
-    var next = new Set(expandedItems);
+    var next = new Set();
     next.add(itemId);
     setExpandedItems(next);
   };
   var handleItemClick = function handleItemClick(item) {
     var hasChildren = item.children && item.children.length > 0;
-
-    // If item has children and sidebar is collapsed (desktop),
-    // uncollapse the sidebar and expand + activate this item.
     if (hasChildren && effectiveCollapsed && !mobileOpen) {
-      // Ask parent to toggle collapsed state (uncollapse)
+      // ask parent to uncollapse
       onToggle === null || onToggle === void 0 || onToggle();
-
-      // Mark this item active and expanded locally.
-      // We don't delay because the parent prop change will re-render; this state persists.
       setActiveItemId(item.id);
       expandSingle(item.id);
       return;
     }
-
-    // Normal behavior when not collapsed or on mobile:
     if (hasChildren) {
       toggleExpanded(item.id);
       setActiveItemId(item.id);
     } else {
       var _item$onClick;
-      // leaf item: call its onClick and close mobile if needed
       (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item, item);
       setActiveItemId(item.id);
-      if (mobileOpen && setIsMobileOpen) {
-        setIsMobileOpen(false);
-      }
+      if (mobileOpen && setIsMobileOpen) setIsMobileOpen(false);
     }
   };
   var handleUserClick = function handleUserClick() {
     onUserClick === null || onUserClick === void 0 || onUserClick(user);
-    // Close mobile sidebar when user is clicked
-    if (mobileOpen && setIsMobileOpen) {
-      setIsMobileOpen(false);
-    }
+    if (mobileOpen && setIsMobileOpen) setIsMobileOpen(false);
   };
   var _renderMenuItem = function renderMenuItem(item) {
     var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
     var hasChildren = item.children && item.children.length > 0;
     var isExpanded = expandedItems.has(item.id);
-    // isActive if either the prop says so or we marked it active locally
     var isActive = Boolean(item.active) || activeItemId === item.id;
+    var showTooltipForThis = effectiveCollapsed && level === 0 && showCollapsedTooltips;
+
+    // container needs relative to position tooltip
     return /*#__PURE__*/React.createElement("div", {
-      key: item.id
+      key: item.id,
+      className: "relative",
+      onMouseEnter: function onMouseEnter() {
+        return setHoveredItemId(item.id);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setHoveredItemId(function (id) {
+          return id === item.id ? null : id;
+        });
+      }
     }, /*#__PURE__*/React.createElement("div", {
       className: cn$1("flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors cursor-pointer", {
         "bg-primary-100 text-primary-700": isActive,
@@ -15222,11 +15245,20 @@ var Sidebar = function Sidebar(_ref) {
       },
       role: "button",
       tabIndex: 0,
+      "aria-label": item.label,
       onKeyDown: function onKeyDown(e) {
         if (e.key === "Enter" || e.key === " ") {
           e.preventDefault();
           handleItemClick(item);
         }
+      },
+      onFocus: function onFocus() {
+        return setHoveredItemId(item.id);
+      },
+      onBlur: function onBlur() {
+        return setHoveredItemId(function (id) {
+          return id === item.id ? null : id;
+        });
       }
     }, item.icon && /*#__PURE__*/React.createElement("span", {
       className: cn$1("flex-shrink-0", {
@@ -15245,16 +15277,14 @@ var Sidebar = function Sidebar(_ref) {
       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
+    }));
   };
-
-  // When on mobile, clicking the toggle should close drawer instead of toggling collapse
   var handleToggleClick = function handleToggleClick() {
-    if (mobileOpen && setIsMobileOpen) {
-      setIsMobileOpen(false);
-    } else {
-      onToggle === null || onToggle === void 0 || onToggle();
-    }
+    if (mobileOpen && setIsMobileOpen) setIsMobileOpen(false);else onToggle === null || onToggle === void 0 || onToggle();
   };
   var SidebarContent = /*#__PURE__*/React.createElement("div", {
     className: cn$1("flex h-full flex-col bg-white border-r border-gray-200 shadow-sm", "w-64 transition-all duration-200", {
@@ -15274,11 +15304,21 @@ var Sidebar = function Sidebar(_ref) {
   }) : /*#__PURE__*/React.createElement(ChevronLeft, {
     className: "h-5 w-5"
   }))), /*#__PURE__*/React.createElement("nav", {
-    className: "flex-1 space-y-1 p-4 overflow-y-auto [&::-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 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", {
     className: "border-t border-gray-200 p-4"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "relative",
+    onMouseEnter: function onMouseEnter() {
+      return setHoveredItemId("user");
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setHoveredItemId(function (id) {
+        return id === "user" ? null : id;
+      });
+    }
   }, /*#__PURE__*/React.createElement("div", {
     className: cn$1("flex items-center rounded-md px-3 py-2 cursor-pointer hover:bg-gray-100 transition-colors", {
       "justify-center": effectiveCollapsed,
@@ -15287,10 +15327,13 @@ var Sidebar = function Sidebar(_ref) {
     onClick: handleUserClick,
     role: "button",
     tabIndex: 0,
-    onKeyDown: function onKeyDown(e) {
-      if (e.key === "Enter" || e.key === " ") {
-        handleUserClick();
-      }
+    onFocus: function onFocus() {
+      return setHoveredItemId("user");
+    },
+    onBlur: function onBlur() {
+      return setHoveredItemId(function (id) {
+        return id === "user" ? null : id;
+      });
     }
   }, user.avatar && /*#__PURE__*/React.createElement("img", {
     src: user.avatar,
@@ -15302,12 +15345,11 @@ var Sidebar = function Sidebar(_ref) {
     className: "text-sm font-medium text-gray-700 truncate"
   }, user.name), /*#__PURE__*/React.createElement("p", {
     className: "text-xs text-gray-500 truncate"
-  }, user.email)))));
-
-  // Compute classes based on drawer position
+  }, user.email))), effectiveCollapsed && showCollapsedTooltips && /*#__PURE__*/React.createElement(SidebarTooltip, {
+    label: user.name,
+    visible: hoveredItemId === "user"
+  }))));
   var isRight = drawerPosition === "right";
-
-  // Mobile drawer styles
   var mobileDrawerClasses = cn$1("fixed top-0 z-50 h-full transition-transform duration-300 ease-in-out md:hidden", {
     "left-0": !isRight,
     "right-0": isRight
@@ -15316,8 +15358,6 @@ var Sidebar = function Sidebar(_ref) {
     "-translate-x-full": !mobileOpen && !isRight,
     "translate-x-full": !mobileOpen && isRight
   });
-
-  // Desktop placement
   var desktopPlacementClass = isRight ? "md:order-last" : "";
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "hidden md:flex sticky top-0 h-screen"