xladmin 0.6.0 → 0.9.1

package/README.md

@@ -71,6 +71,7 @@ For framework routing, use one of the adapter packages instead of the default br
 ## Current User And Logout
 
 `Shell` shows a compact current-user panel pinned to the bottom of the sidebar when a user is available.
+Long login values wrap inside the panel instead of overflowing the sidebar.
 By default it calls:
 
 - `client.getCurrentUser()` -> `GET /xladmin/me/`

package/dist/components/layout/ShellContext.d.ts

@@ -1,7 +1,9 @@
 import type { ReactNode } from 'react';
 type ShellContextValue = {
-    isMobile: boolean;
-    openMobileSidebar: () => void;
+    hasSidebar: boolean;
+    sidebarId: string;
+    isSidebarOpen: boolean;
+    toggleSidebar: () => void;
     pendingPath: string | null;
     pendingView: 'overview' | 'model' | 'generic' | null;
     startPendingNavigation: (path: string, view?: 'overview' | 'model' | 'generic') => void;

package/dist/index.js

@@ -1716,8 +1716,10 @@ function useAdminData() {
 import { createContext as createContext5, useContext as useContext5 } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var defaultShellContextValue = {
-  isMobile: false,
-  openMobileSidebar: () => {
+  hasSidebar: false,
+  sidebarId: "",
+  isSidebarOpen: false,
+  toggleSidebar: () => {
   },
   pendingPath: null,
   pendingView: null,
@@ -2156,7 +2158,6 @@ var MAIN_HEADER_TITLE_HEIGHT = 34;
 var MAIN_HEADER_SUBTITLE_HEIGHT = 16;
 function MainHeader({ title, subtitle, details, error, beforeTitle, beforeSubtitle, actions }) {
   const t = useAdminTranslation();
-  const { isMobile, openMobileSidebar } = useShellContext();
   const [isDetailsOpen, setIsDetailsOpen] = useState6(false);
   return /* @__PURE__ */ jsxs7(
     Paper3,
@@ -2175,16 +2176,7 @@ function MainHeader({ title, subtitle, details, error, beforeTitle, beforeSubtit
         /* @__PURE__ */ jsxs7(Stack5, { spacing: 0.5, children: [
           /* @__PURE__ */ jsxs7(Stack5, { direction: "row", spacing: 1.5, sx: { minWidth: 0, alignItems: "center", justifyContent: "space-between" }, children: [
             /* @__PURE__ */ jsxs7(Stack5, { direction: "row", spacing: 1, sx: { minWidth: 0, flex: 1, alignItems: "center" }, children: [
-              isMobile ? /* @__PURE__ */ jsx13(Box5, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: /* @__PURE__ */ jsx13(
-                IconButton,
-                {
-                  "aria-label": t("menu"),
-                  onClick: openMobileSidebar,
-                  size: "small",
-                  sx: { ml: -0.5 },
-                  children: /* @__PURE__ */ jsx13(MenuIcon, { fontSize: "small" })
-                }
-              ) }) : null,
+              /* @__PURE__ */ jsx13(SidebarMenuButton, {}),
               beforeTitle ? /* @__PURE__ */ jsx13(Box5, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: beforeTitle }) : null,
               /* @__PURE__ */ jsx13(
                 Typography3,
@@ -2257,15 +2249,18 @@ function MainHeaderSkeleton({
         zIndex: 3
       },
       children: /* @__PURE__ */ jsxs7(Stack5, { spacing: 1, children: [
-        /* @__PURE__ */ jsx13(
-          Skeleton,
-          {
-            variant: "rounded",
-            width: titleWidth,
-            height: MAIN_HEADER_TITLE_HEIGHT,
-            sx: { transform: "none" }
-          }
-        ),
+        /* @__PURE__ */ jsxs7(Stack5, { direction: "row", spacing: 1, sx: { alignItems: "center" }, children: [
+          /* @__PURE__ */ jsx13(SidebarMenuButton, {}),
+          /* @__PURE__ */ jsx13(
+            Skeleton,
+            {
+              variant: "rounded",
+              width: titleWidth,
+              height: MAIN_HEADER_TITLE_HEIGHT,
+              sx: { transform: "none" }
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx13(
           Skeleton,
           {
@@ -2279,6 +2274,25 @@ function MainHeaderSkeleton({
     }
   );
 }
+function SidebarMenuButton() {
+  const t = useAdminTranslation();
+  const { hasSidebar, sidebarId, isSidebarOpen, toggleSidebar } = useShellContext();
+  if (!hasSidebar) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx13(Box5, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: /* @__PURE__ */ jsx13(
+    IconButton,
+    {
+      "aria-label": t("menu"),
+      "aria-controls": sidebarId,
+      "aria-expanded": isSidebarOpen,
+      onClick: toggleSidebar,
+      size: "small",
+      sx: { ml: -0.5 },
+      children: /* @__PURE__ */ jsx13(MenuIcon, { fontSize: "small" })
+    }
+  ) });
+}
 
 // src/components/OverviewPage.tsx
 import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
@@ -5434,11 +5448,12 @@ function SidebarCurrentUser({ currentUser, isLoggingOut, onLogout }) {
             sx: {
               flex: 1,
               minWidth: 0,
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
+              overflowWrap: "anywhere",
+              whiteSpace: "normal",
+              wordBreak: "break-word",
               fontSize: 13,
-              fontWeight: 650
+              fontWeight: 650,
+              lineHeight: 1.25
             },
             children: currentUser.login
           }
@@ -5491,6 +5506,7 @@ function Shell({
   const location = useAdminLocation(resolvedRouter);
   const pathname = location.pathname;
   const isDesktopSidebar = useMediaQuery4(activeTheme.breakpoints.up("lg"));
+  const [isDesktopSidebarOpen, setIsDesktopSidebarOpen] = useState13(true);
   const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState13(false);
   const [pendingPath, setPendingPath] = useState13(null);
   const [pendingView, setPendingView] = useState13(null);
@@ -5543,8 +5559,16 @@ function Shell({
     }
   }, [client, isLoggingOut, loginPath, onLogout, resolvedRouter]);
   const shellContextValue = useMemo11(() => ({
-    isMobile: !isDesktopSidebar,
-    openMobileSidebar: () => setIsMobileSidebarOpen(true),
+    hasSidebar: true,
+    sidebarId: isDesktopSidebar ? "xladmin-desktop-sidebar" : "xladmin-mobile-sidebar",
+    isSidebarOpen: isDesktopSidebar ? isDesktopSidebarOpen : isMobileSidebarOpen,
+    toggleSidebar: () => {
+      if (isDesktopSidebar) {
+        setIsDesktopSidebarOpen((current) => !current);
+        return;
+      }
+      setIsMobileSidebarOpen((current) => !current);
+    },
     pendingPath,
     pendingView,
     startPendingNavigation: (path, view = "generic") => {
@@ -5564,7 +5588,14 @@ function Shell({
       setPendingPath(null);
       setPendingView(null);
     }
-  }), [isDesktopSidebar, pathname, pendingPath, pendingView]);
+  }), [
+    isDesktopSidebar,
+    isDesktopSidebarOpen,
+    isMobileSidebarOpen,
+    pathname,
+    pendingPath,
+    pendingView
+  ]);
   return /* @__PURE__ */ jsx28(AdminRouterProvider, { router: resolvedRouter, children: /* @__PURE__ */ jsx28(ThemeProvider, { theme: activeTheme, children: /* @__PURE__ */ jsx28(AdminLocaleProvider, { locale, children: /* @__PURE__ */ jsx28(AdminDataProvider, { value: { locale: locale === "en" ? "en" : "ru", models, blocks }, children: /* @__PURE__ */ jsx28(ShellContextProvider, { value: shellContextValue, children: /* @__PURE__ */ jsxs20(AdminMessageProvider, { children: [
     /* @__PURE__ */ jsx28(CssBaseline, {}),
     /* @__PURE__ */ jsx28(
@@ -5624,9 +5655,10 @@ function Shell({
             spacing: 0,
             sx: { height: "100%", minHeight: 0, alignItems: "stretch" },
             children: [
-              /* @__PURE__ */ jsx28(
+              isDesktopSidebarOpen ? /* @__PURE__ */ jsx28(
                 Box17,
                 {
+                  id: "xladmin-desktop-sidebar",
                   sx: {
                     display: { xs: "none", lg: "block" },
                     width: 320,
@@ -5648,7 +5680,7 @@ function Shell({
                     }
                   )
                 }
-              ),
+              ) : null,
               /* @__PURE__ */ jsx28(
                 Box17,
                 {
@@ -5674,6 +5706,7 @@ function Shell({
     /* @__PURE__ */ jsx28(
       Drawer,
       {
+        id: "xladmin-mobile-sidebar",
         anchor: "left",
         open: isMobileSidebarOpen,
         onClose: () => setIsMobileSidebarOpen(false),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xladmin",
-  "version": "0.6.0",
+  "version": "0.9.1",
   "description": "Framework-agnostic React + MUI admin frontend for xladmin.",
   "license": "MIT",
   "type": "module",