@blocklet/ui-react 2.11.15 → 2.11.16

package/lib/UserCenter/components/settings.js

@@ -64,7 +64,7 @@ export default function Settings({
       {
         label: t("sessionManagement"),
         value: "session",
-        content: /* @__PURE__ */ jsx(UserSessions, { user })
+        content: /* @__PURE__ */ jsx(UserSessions, { user, showUser: false })
       }
     ].filter(Boolean);
   }, [user, privacyConfigList]);

package/lib/UserCenter/components/user-center.js

@@ -40,7 +40,7 @@ export default function UserCenter({
   stickySidebar = false
 }) {
   const { locale } = useLocaleContext();
-  const isMobile = useMobile({});
+  const isMobile = useMobile({ key: "md" });
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, "en", data);
   });

package/lib/UserSessions/components/user-sessions.js

@@ -10,9 +10,10 @@ import { getVisitorId } from "@arcblock/ux/lib/Util";
 import { useConfirm } from "@arcblock/ux/lib/Dialog";
 import pAll from "p-all";
 import PQueue from "p-queue";
-import { Box, Button, CircularProgress, Tooltip, Typography } from "@mui/material";
+import { Box, Button, CircularProgress, Tooltip, Typography, useMediaQuery } from "@mui/material";
 import { memo, useContext, useEffect } from "react";
 import { SessionContext } from "@arcblock/did-connect/lib/Session";
+import useMobile from "../../hooks/use-mobile.js";
 import UserSessionInfo from "./user-session-info.js";
 import { client } from "../../libs/client.js";
 import { translations } from "../libs/locales.js";
@@ -57,6 +58,8 @@ export default function UserSessions({
   const { session } = useContext(SessionContext);
   const currentVisitorId = getVisitorId();
   const { locale } = useLocaleContext();
+  const isMobile = useMobile({ key: "md" });
+  const isLg = useMediaQuery((theme) => theme.breakpoints.down("lg"));
   const { confirmApi, confirmHolder } = useConfirm();
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, "en", data);
@@ -257,7 +260,7 @@ export default function UserSessions({
     Box,
     {
       sx: {
-        maxWidth: 920,
+        maxWidth: isMobile ? "unset" : isLg ? "calc(100vw - 300px)" : "920px",
         ".MuiTableCell-head": {
           whiteSpace: "nowrap",
           fontWeight: "bold"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.11.15",
+  "version": "2.11.16",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -32,8 +32,8 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/bridge": "^2.11.15",
-    "@arcblock/react-hooks": "^2.11.15",
+    "@arcblock/bridge": "^2.11.16",
+    "@arcblock/react-hooks": "^2.11.16",
     "@blocklet/did-space-react": "^0.6.0",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
@@ -81,5 +81,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "08b1daa5c17ade28952f1c44fb4e6f79f1c3b178"
+  "gitHead": "1216fcd112e02c4135f5d748fe002cafaaebcfd9"
 }

package/src/UserCenter/components/settings.tsx

@@ -77,7 +77,7 @@ export default function Settings({
       {
         label: t('sessionManagement'),
         value: 'session',
-        content: <UserSessions user={user} />,
+        content: <UserSessions user={user} showUser={false} />,
       },
     ].filter(Boolean);
   }, [user, privacyConfigList]);

package/src/UserCenter/components/user-center.tsx

@@ -61,7 +61,7 @@ export default function UserCenter({
   readonly stickySidebar?: boolean;
 }) {
   const { locale } = useLocaleContext();
-  const isMobile = useMobile({});
+  const isMobile = useMobile({ key: 'md' });
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });

package/src/UserSessions/components/user-sessions.tsx

@@ -11,11 +11,12 @@ import { getVisitorId } from '@arcblock/ux/lib/Util';
 import { useConfirm } from '@arcblock/ux/lib/Dialog';
 import pAll from 'p-all';
 import PQueue from 'p-queue';
-import { Box, Button, CircularProgress, Tooltip, Typography } from '@mui/material';
+import { Box, Button, CircularProgress, Tooltip, Typography, useMediaQuery } from '@mui/material';
 import { memo, ReactElement, useContext, useEffect } from 'react';
 import { UserSession } from '@blocklet/js-sdk';
 import { SessionContext } from '@arcblock/did-connect/lib/Session';
 
+import useMobile from '../../hooks/use-mobile';
 import UserSessionInfo from './user-session-info';
 import { User, SessionContext as TSessionContext } from '../../@types';
 import { client } from '../../libs/client';
@@ -88,6 +89,8 @@ export default function UserSessions({
   const { session } = useContext<TSessionContext>(SessionContext);
   const currentVisitorId = getVisitorId();
   const { locale } = useLocaleContext();
+  const isMobile = useMobile({ key: 'md' });
+  const isLg = useMediaQuery((theme: any) => theme.breakpoints.down('lg'));
   const { confirmApi, confirmHolder } = useConfirm();
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
@@ -308,7 +311,7 @@ export default function UserSessions({
   return (
     <Box
       sx={{
-        maxWidth: 920,
+        maxWidth: isMobile ? 'unset' : isLg ? 'calc(100vw - 300px)' : '920px',
         '.MuiTableCell-head': {
           whiteSpace: 'nowrap',
           fontWeight: 'bold',