@snapdragonsnursery/react-components 1.0.1 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapdragonsnursery/react-components",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "description": "",
   "main": "src/index.js",
   "scripts": {
@@ -19,6 +19,7 @@
   },
   "homepage": "https://github.com/Snapdragons-Nursery/react-components#readme",
   "dependencies": {
+    "@headlessui/react": "^2.2.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

package/src/AuthButtons.jsx

@@ -7,34 +7,19 @@ import {
   clearUserContext,
 } from "./telemetry";
 import ThemeToggle from "./ThemeToggle";
+import { Menu } from "@headlessui/react";
 
 const isMobile = window.innerWidth < 640;
 
 function AuthButtons({ theme, setTheme, authState, setAuthState }) {
   const [isLoggingIn, setIsLoggingIn] = useState(false);
   const [profilePicture, setProfilePicture] = useState(null);
-  const [showProfileMenu, setShowProfileMenu] = useState(false);
-  const menuRef = useRef();
   const isLocalhost = window.location.hostname === "localhost";
 
   // Use MSAL hooks - parent app should ensure MSAL is initialized
   const { instance, accounts } = useMsal();
   const isAuthenticated = useIsAuthenticated();
 
-  // Close profile menu when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (menuRef.current && !menuRef.current.contains(event.target)) {
-        setShowProfileMenu(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
-
   // Update auth state when MSAL state changes
   useEffect(() => {
     if (instance) {
@@ -250,70 +235,65 @@ function AuthButtons({ theme, setTheme, authState, setAuthState }) {
   }
 
   return (
-    <div className="relative">
-      {/* Profile picture as trigger */}
-      {profilePicture ? (
-        <img
-          src={profilePicture}
-          alt={`${displayName}'s profile picture`}
-          className="w-8 h-8 rounded-full object-cover border-2 border-blue-500 cursor-pointer"
-          onClick={() => setShowProfileMenu((v) => !v)}
-        />
-      ) : (
-        <div
-          className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center cursor-pointer border-2 border-blue-500"
-          onClick={() => setShowProfileMenu((v) => !v)}
-        >
-          <span className="text-white text-sm font-medium">
-            {displayName
-              .split(" ")
-              .map((n) => n[0])
-              .join("")
-              .toUpperCase()
-              .slice(0, 2)}
-          </span>
+    <Menu as="div" className="relative inline-block text-left">
+      <div>
+        <Menu.Button className="focus:outline-none">
+          {profilePicture ? (
+            <img
+              src={profilePicture}
+              alt={`${displayName}'s profile picture`}
+              className="w-8 h-8 rounded-full object-cover border-2 border-blue-500 cursor-pointer"
+            />
+          ) : (
+            <div className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center cursor-pointer border-2 border-blue-500">
+              <span className="text-white text-sm font-medium">
+                {displayName
+                  .split(" ")
+                  .map((n) => n[0])
+                  .join("")
+                  .toUpperCase()
+                  .slice(0, 2)}
+              </span>
+            </div>
+          )}
+        </Menu.Button>
+      </div>
+      <Menu.Items className="absolute right-0 mt-2 min-w-[220px] max-w-xs w-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg z-50 py-2 border border-gray-200 dark:border-gray-700 focus:outline-none">
+        <div className="px-4 py-2 text-xs text-gray-500 dark:text-gray-300 border-b border-gray-100 dark:border-gray-700">
+          Signed in as <span className="font-semibold">{displayName}</span>
         </div>
-      )}
-      {showProfileMenu && (
-        <div
-          ref={menuRef}
-          className="absolute right-0 mt-2 min-w-[220px] max-w-xs w-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg z-50 py-2 border border-gray-200 dark:border-gray-700"
-        >
-          <div className="px-4 py-2 text-xs text-gray-500 dark:text-gray-300 border-b border-gray-100 dark:border-gray-700">
-            Signed in as <span className="font-semibold">{displayName}</span>
-          </div>
-          {/* Theme toggle inside dropdown */}
-          <div className="px-4 py-2">
-            <ThemeToggle theme={theme} setTheme={setTheme} />
-          </div>
-          <button
-            className="flex items-center w-full px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
-            onClick={() => {
-              setShowProfileMenu(false);
-              handleLogout();
-            }}
-          >
-            <span className="mr-2">
-              {/* Logout icon */}
-              <svg
-                className="w-5 h-5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
-                />
-              </svg>
-            </span>
-            Logout
-          </button>
+        <div className="px-4 py-2">
+          <ThemeToggle theme={theme} setTheme={setTheme} />
         </div>
-      )}
-    </div>
+        <Menu.Item>
+          {({ active }) => (
+            <button
+              className={`flex items-center w-full px-4 py-2 text-sm transition-colors ${
+                active ? "bg-gray-100 dark:bg-gray-700" : ""
+              }`}
+              onClick={handleLogout}
+            >
+              <span className="mr-2">
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+                  />
+                </svg>
+              </span>
+              Logout
+            </button>
+          )}
+        </Menu.Item>
+      </Menu.Items>
+    </Menu>
   );
 }
 

package/src/ThemeToggle.jsx

@@ -59,17 +59,18 @@ function ThemeToggle({ theme, setTheme }) {
   };
 
   return (
-    <div className="flex justify-center items-center bg-gray-200 dark:bg-gray-700 rounded-full p-1.5 w-full">
+    <div className="flex justify-center items-center bg-gray-200 dark:bg-gray-700 rounded-full p-2 w-full gap-2">
       {options.map((opt) => (
         <button
           key={opt.value}
           onClick={() => handleThemeChange(opt.value)}
-          className={`flex-1 flex items-center justify-center h-10 rounded-full transition-all duration-200 focus:outline-none
+          className={`flex-1 flex items-center justify-center h-12 min-w-[44px] rounded-full transition-all duration-200 focus:outline-none mx-1
             ${
               theme === opt.value
                 ? "bg-white dark:bg-gray-900 shadow text-blue-600 dark:text-yellow-400"
                 : "bg-transparent text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600"
             }`}
+          style={{ padding: "0 12px" }}
           title={opt.label + " mode"}
           aria-pressed={theme === opt.value}
         >

package/src/ThemeToggleTest.jsx

@@ -0,0 +1,37 @@
+import React, { useState } from "react";
+import ThemeToggle from "./ThemeToggle";
+
+export default function ThemeToggleTest() {
+  const [theme, setTheme] = useState("system");
+
+  return (
+    <div
+      style={{
+        minHeight: "100vh",
+        background:
+          theme === "dark"
+            ? "#1a202c"
+            : theme === "light"
+            ? "#f9fafb"
+            : "#e5e7eb",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "background 0.3s",
+      }}
+    >
+      <div style={{ width: 300 }}>
+        <ThemeToggle theme={theme} setTheme={setTheme} />
+        <div
+          style={{
+            marginTop: 24,
+            textAlign: "center",
+            color: theme === "dark" ? "#fff" : "#222",
+          }}
+        >
+          <strong>Current theme:</strong> {theme}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/index.js

@@ -1,4 +1,5 @@
 export { default as AuthButtons } from "./AuthButtons";
 export { default as ThemeToggle } from "./ThemeToggle";
 export { default as ChildSearchModal } from "./ChildSearchModal";
+export { default as ThemeToggleTest } from "./ThemeToggleTest";
 export { configureTelemetry } from "./telemetry";