@dreamtree-org/twreact-ui 1.3.11 → 2.0.0

package/dist/esm/components/navigation/Navbar.js

@@ -2,15 +2,70 @@
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cn } from '../../utils/cn.js';
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useRef, useCallback, useEffect, useSyncExternalStore } from 'react';
 import { ChevronLeft, Search, LogIn, LogOut, X, Menu, User, Bell } from 'lucide-react';
 import { Dropdown } from './Dropdown.js';
 import Avatar from '../utility/Avatar.js';
+import Sheet from '../feedback/Sheet.js';
+import SearchField from '../core/SearchField.js';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 import PropTypes from '../../_vendor/prop-types/index.js';
 
 var _excluded = ["emitter", "content", "notifications"],
-  _excluded2 = ["emitter", "logo", "center", "items", "user", "notifications", "searchable", "onSearch", "leftIcon", "rightMenuContent", "onLeftIconClick", "onLoginClick", "onLogoutClick", "className", "onFetch", "isMobileOpen", "setIsMobileOpen"];
+  _excluded2 = ["emitter", "logo", "center", "items", "user", "notifications", "searchable", "onSearch", "leftIcon", "rightMenuContent", "onLeftIconClick", "onLoginClick", "onLogoutClick", "className", "onFetch", "isMobileOpen", "setIsMobileOpen", "sticky", "largeTitle"];
 var NO_NOTIFICATIONS = [];
+// Icon-only bar buttons: 36px on desktop, the 44px touch target on coarse pointers.
+var ICON_BUTTON = cn("inline-flex items-center justify-center rounded-md p-2 text-primary-400 hover:text-primary-500 hover:bg-gray-100 dark:hover:bg-gray-800", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", TOUCH_TARGET);
+// Badge counts above this read "99+".
+var BADGE_MAX = 99;
+var formatBadgeCount = function formatBadgeCount(count) {
+  return count > BADGE_MAX ? "".concat(BADGE_MAX, "+") : String(count);
+};
+// Large title: collapses past COLLAPSE_AT and re-expands under EXPAND_AT. The
+// gap (hysteresis) stops the bar flickering when collapsing it shortens the page.
+var LARGE_TITLE_COLLAPSE_AT = 44;
+var LARGE_TITLE_EXPAND_AT = 8;
+// Per-instance scroll store for useSyncExternalStore: one passive window
+// scroll listener; `false` (expanded) on the server and while hydrating.
+function createScrollCollapseStore() {
+  var collapsed = false;
+  var read = function read() {
+    var y = window.scrollY || window.pageYOffset || 0;
+    if (!collapsed && y > LARGE_TITLE_COLLAPSE_AT) collapsed = true;else if (collapsed && y < LARGE_TITLE_EXPAND_AT) collapsed = false;
+  };
+  return {
+    subscribe: function subscribe(onChange) {
+      if (typeof window === "undefined") return function () {};
+      var handle = function handle() {
+        var prev = collapsed;
+        read();
+        if (prev !== collapsed) onChange();
+      };
+      handle();
+      window.addEventListener("scroll", handle, {
+        passive: true
+      });
+      return function () {
+        return window.removeEventListener("scroll", handle);
+      };
+    },
+    getSnapshot: function getSnapshot() {
+      return collapsed;
+    }
+  };
+}
+var NEVER_SUBSCRIBE = function NEVER_SUBSCRIBE() {
+  return function () {};
+};
+var ALWAYS_FALSE = function ALWAYS_FALSE() {
+  return false;
+};
+function useLargeTitleCollapsed(enabled) {
+  var _useState = useState(createScrollCollapseStore),
+    _useState2 = _slicedToArray(_useState, 1),
+    store = _useState2[0];
+  return useSyncExternalStore(enabled ? store.subscribe : NEVER_SUBSCRIBE, enabled ? store.getSnapshot : ALWAYS_FALSE, ALWAYS_FALSE);
+}
 // Simplified Notifications, uses notifications from props and a single effect for fetch/update
 var NotificationsDropdown = function NotificationsDropdown(_ref) {
   var emitter = _ref.emitter,
@@ -20,10 +75,10 @@ var NotificationsDropdown = function NotificationsDropdown(_ref) {
     onFetch = _ref$onFetch === void 0 ? function () {
       return console.log("invoked onFetch notifications");
     } : _ref$onFetch;
-  var _useState = useState(initialNotifications),
-    _useState2 = _slicedToArray(_useState, 2),
-    notifications = _useState2[0],
-    setNotifications = _useState2[1];
+  var _useState3 = useState(initialNotifications),
+    _useState4 = _slicedToArray(_useState3, 2),
+    notifications = _useState4[0],
+    setNotifications = _useState4[1];
   var onView = function onView() {
     emitter.emit("notification:view", notifications);
   };
@@ -46,10 +101,10 @@ var NotificationsDropdown = function NotificationsDropdown(_ref) {
   };
   // Reset to the `notifications` prop when it changes (adjust-during-render
   // pattern), then let onFetch refresh from the server.
-  var _useState3 = useState(initialNotifications),
-    _useState4 = _slicedToArray(_useState3, 2),
-    prevInitial = _useState4[0],
-    setPrevInitial = _useState4[1];
+  var _useState5 = useState(initialNotifications),
+    _useState6 = _slicedToArray(_useState5, 2),
+    prevInitial = _useState6[0],
+    setPrevInitial = _useState6[1];
   if (initialNotifications !== prevInitial) {
     setPrevInitial(initialNotifications);
     setNotifications(initialNotifications);
@@ -67,13 +122,19 @@ var NotificationsDropdown = function NotificationsDropdown(_ref) {
   // For simplicity, shows notifications in the dropdown, can be expanded
   return jsx(Dropdown, {
     trigger: jsxs("button", {
-      className: "relative rounded-md p-2 text-primary-400 hover:text-primary-500 hover:bg-gray-100 dark:hover:bg-gray-800",
-      "aria-label": "notifications",
+      type: "button",
+      className: cn(ICON_BUTTON, "relative"),
+      "aria-label": unreadCount > 0 ? "Notifications, ".concat(formatBadgeCount(unreadCount), " unread") : "Notifications",
       children: [jsx(Bell, {
-        className: "h-5 w-5"
-      }), unreadCount > 0 && jsx("span", {
-        className: "absolute -top-1 -right-1 h-4 w-4 rounded-full bg-error-500 text-xs text-white flex items-center justify-center",
-        children: unreadCount
+        className: "h-5 w-5",
+        "aria-hidden": "true"
+      }), unreadCount > 0 &&
+      // Grows with the count (min-w + padding) and caps at "99+".
+      jsx("span", {
+        "aria-hidden": "true",
+        "data-navbar-badge": "",
+        className: "absolute -right-0.5 -top-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded-pill bg-error-500 px-1 text-micro font-semibold leading-none text-white",
+        children: formatBadgeCount(unreadCount)
       })]
     }),
     placement: "bottom-end",
@@ -159,7 +220,7 @@ var RightMenuContent = function RightMenuContent(_ref2) {
   });
 };
 var styledClassNames = {
-  button: "rounded-md p-2 text-primary-400 hover:text-primary-500 hover:bg-gray-100 dark:hover:bg-gray-800",
+  button: ICON_BUTTON,
   mobileItem: "md:hidden",
   icon: "h-6 w-6",
   dropdown: "w-56 rounded-md border border-line bg-surface py-1 shadow-lg"
@@ -192,19 +253,29 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
     onFetch = _ref3.onFetch;
     _ref3.isMobileOpen;
     _ref3.setIsMobileOpen;
-    var props = _objectWithoutProperties(_ref3, _excluded2);
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isMobileMenuOpen = _useState6[0],
-    setIsMobileMenuOpen = _useState6[1];
-  var _useState7 = useState(""),
+    var _ref3$sticky = _ref3.sticky,
+    sticky = _ref3$sticky === void 0 ? false : _ref3$sticky,
+    largeTitle = _ref3.largeTitle,
+    props = _objectWithoutProperties(_ref3, _excluded2);
+  var _useState7 = useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    searchTerm = _useState8[0],
-    setSearchTerm = _useState8[1];
-  var _useState9 = useState(typeof window !== "undefined" ? window.innerWidth < 768 : false),
+    isMobileMenuOpen = _useState8[0],
+    setIsMobileMenuOpen = _useState8[1];
+  var _useState9 = useState(""),
     _useState0 = _slicedToArray(_useState9, 2),
-    isMobile = _useState0[0],
-    setIsMobile = _useState0[1];
+    searchTerm = _useState0[0],
+    setSearchTerm = _useState0[1];
+  var _useState1 = useState(false),
+    _useState10 = _slicedToArray(_useState1, 2),
+    isMobileSearchOpen = _useState10[0],
+    setIsMobileSearchOpen = _useState10[1];
+  var mobileSearchRef = useRef(null);
+  var hasLargeTitle = largeTitle !== undefined && largeTitle !== null && largeTitle !== false;
+  var titleCollapsed = useLargeTitleCollapsed(hasLargeTitle);
+  var _useState11 = useState(typeof window !== "undefined" ? window.innerWidth < 768 : false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    isMobile = _useState12[0],
+    setIsMobile = _useState12[1];
   // Responsive flag update
   var handleResize = useCallback(function () {
     setIsMobile(window.innerWidth < 768);
@@ -221,6 +292,12 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
     e.preventDefault();
     onSearch === null || onSearch === void 0 || onSearch(searchTerm);
   };
+  // Phones: the inline field is hidden below `sm`; a search button opens it
+  // in a top Sheet instead, sharing the same term and `onSearch`.
+  var handleMobileSearch = function handleMobileSearch(term) {
+    onSearch === null || onSearch === void 0 || onSearch(term);
+    setIsMobileSearchOpen(false);
+  };
   var handleLoginClick = function handleLoginClick() {
     onLoginClick === null || onLoginClick === void 0 || onLoginClick();
   };
@@ -262,11 +339,17 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
   };
   return jsxs("nav", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn("bg-surface text-foreground border-b border-line px-4 sm:px-6 lg:px-8", className)
+    className: cn("bg-surface text-foreground border-b border-line px-4 sm:px-6 lg:px-8", sticky && "sticky top-0 z-sticky pt-safe supports-[backdrop-filter]:bg-surface/80 supports-[backdrop-filter]:backdrop-blur", className),
+    "data-sticky": sticky ? "" : undefined
   }, props), {}, {
     children: [jsxs("div", {
-      className: "flex h-16 min-w-0 items-center justify-between gap-2 sm:gap-4",
-      children: [jsxs("div", {
+      className: "relative flex h-16 min-w-0 items-center justify-between gap-2 sm:gap-4",
+      children: [hasLargeTitle && jsx("div", {
+        "aria-hidden": "true",
+        "data-navbar-compact-title": "",
+        className: cn("pointer-events-none absolute left-1/2 top-1/2 max-w-[50%] -translate-x-1/2 -translate-y-1/2 truncate text-base font-semibold", "transition-opacity duration-base ease-standard motion-reduce:transition-none", titleCollapsed ? "opacity-100" : "opacity-0"),
+        children: largeTitle
+      }), jsxs("div", {
         className: "flex min-w-0 shrink items-center",
         children: [leftIcon !== false && jsx("div", {
           className: "mr-2 hidden md:block md:mr-4",
@@ -275,8 +358,9 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
           className: "flex min-w-0 items-center",
           children: [leftIcon !== false && jsx("button", {
             onClick: onLeftIconClick,
-            className: "shrink-0 md:hidden rounded-md p-2 text-primary-400 hover:text-primary-500 hover:bg-gray-100 dark:hover:bg-gray-800",
-            "aria-label": "back",
+            type: "button",
+            className: cn(ICON_BUTTON, "shrink-0 md:hidden"),
+            "aria-label": "Go back",
             children: leftIcon
           }), logo && jsx("div", {
             className: "ml-2 min-w-0 truncate sm:ml-4 md:ml-0",
@@ -309,6 +393,20 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
               }
             })]
           })
+        }), searchable && jsx("button", {
+          type: "button",
+          className: cn(styledClassNames.button, "sm:hidden"),
+          onClick: function onClick() {
+            return setIsMobileSearchOpen(true);
+          },
+          "aria-label": "Search",
+          "aria-haspopup": "dialog",
+          "aria-expanded": isMobileSearchOpen,
+          "data-navbar-search-button": "",
+          children: jsx(Search, {
+            className: "h-5 w-5",
+            "aria-hidden": "true"
+          })
         }), jsx(RightMenuComponent, {
           notifications: notifications,
           onFetch: onFetch
@@ -333,12 +431,14 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
           className: "relative",
           children: !user ? jsx("button", {
             className: cn(styledClassNames.button, styledClassNames.mobileItem),
+            type: "button",
             onClick: function onClick() {
               return setIsMobileMenuOpen(function (s) {
                 return !s;
               });
             },
-            "aria-label": "menu",
+            "aria-label": isMobileMenuOpen ? "Close menu" : "Open menu",
+            "aria-expanded": isMobileMenuOpen,
             children: isMobileMenuOpen ? jsx(X, {
               className: styledClassNames.icon
             }) : jsx(Menu, {
@@ -346,8 +446,9 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
             })
           }) : jsx(Dropdown, {
             trigger: jsx("button", {
+              type: "button",
               className: styledClassNames.button,
-              "aria-label": "user menu",
+              "aria-label": "User menu",
               children: user.avatar || user.name ?
               // Image when `avatar` is set; otherwise initials from
               // `name` (Avatar's own fallback logic).
@@ -361,7 +462,7 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
               })
             }),
             placement: "bottom-end",
-            className: "z-50",
+            className: "z-dropdown",
             children: jsxs("div", {
               className: styledClassNames.dropdown,
               children: [jsxs("div", {
@@ -404,6 +505,38 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
           })
         })]
       })]
+    }), hasLargeTitle && jsx("div", {
+      "data-navbar-large-title": "",
+      "data-collapsed": titleCollapsed ? "" : undefined,
+      className: cn("overflow-hidden transition-[max-height,opacity] duration-base ease-standard motion-reduce:transition-none", titleCollapsed ? "max-h-0 opacity-0" : "max-h-16 opacity-100"),
+      children: jsx("h1", {
+        className: "truncate pb-3 text-3xl font-bold tracking-tight text-foreground",
+        children: largeTitle
+      })
+    }), searchable && jsx(Sheet, {
+      open: isMobileSearchOpen,
+      onClose: function onClose() {
+        return setIsMobileSearchOpen(false);
+      },
+      placement: "top",
+      initialFocus: mobileSearchRef,
+      "aria-label": "Search",
+      "data-navbar-search-sheet": "",
+      children: jsx("div", {
+        className: "px-4 py-3",
+        children: jsx(SearchField, {
+          ref: mobileSearchRef,
+          presentation: "popover",
+          showCancel: true,
+          placeholder: "Search...",
+          value: searchTerm,
+          onValueChange: setSearchTerm,
+          onSearch: handleMobileSearch,
+          onCancel: function onCancel() {
+            return setIsMobileSearchOpen(false);
+          }
+        })
+      })
     }), isMobileMenuOpen && !user && jsx("div", {
       className: "md:hidden h-full",
       children: jsx("div", {
@@ -431,7 +564,9 @@ Navbar.propTypes = {
   user: PropTypes.object,
   notifications: PropTypes.array,
   searchable: PropTypes.bool,
-  onSearch: PropTypes.func
+  onSearch: PropTypes.func,
+  sticky: PropTypes.bool,
+  largeTitle: PropTypes.node
 };
 
 export { Navbar, Navbar as default };