@blocklet/ui-react 2.9.70 → 2.9.72

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/es/UserSessions/components/user-session-info.js +41 -7
  2. package/es/UserSessions/components/user-sessions.js +1 -1
  3. package/lib/UserSessions/components/user-session-info.js +34 -13
  4. package/lib/UserSessions/components/user-sessions.js +9 -3
  5. package/package.json +6 -6
  6. package/src/UserSessions/components/user-session-info.tsx +36 -9
  7. package/src/UserSessions/components/user-sessions.tsx +5 -1
package/es/UserSessions/components/user-session-info.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
- import { Box, Chip, Typography } from "@mui/material";
2
+ import { Box, Chip, Tooltip, Typography } from "@mui/material";
3
3
  import Avatar from "@arcblock/ux/lib/Avatar";
4
4
  import { useCreation } from "ahooks";
5
5
  import { temp as colors } from "@arcblock/ux/lib/Colors";
@@ -16,8 +16,18 @@ export default function UserSessionInfo({ user, sessionUser }) {
16
16
  gap: 1
17
17
  },
18
18
  children: [
19
- /* @__PURE__ */ jsx(Avatar, { size: 40, variant: "circle", shape: "circle", src: sessionUser.avatar, did: sessionUser.did }),
20
- /* @__PURE__ */ jsxs(Box, { children: [
19
+ /* @__PURE__ */ jsx(
20
+ Avatar,
21
+ {
22
+ size: 40,
23
+ variant: "circle",
24
+ shape: "circle",
25
+ src: sessionUser.avatar,
26
+ did: sessionUser.did,
27
+ sx: { flexShrink: 0 }
28
+ }
29
+ ),
30
+ /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, overflow: "hidden" }, children: [
21
31
  /* @__PURE__ */ jsxs(
22
32
  Box,
23
33
  {
@@ -27,7 +37,18 @@ export default function UserSessionInfo({ user, sessionUser }) {
27
37
  gap: 1
28
38
  },
29
39
  children: [
30
- /* @__PURE__ */ jsx(Typography, { sx: { whiteSpace: "normal", wordBreak: "break-all" }, children: sessionUser.fullName }),
40
+ /* @__PURE__ */ jsx(Tooltip, { title: sessionUser.fullName, children: /* @__PURE__ */ jsx(
41
+ Typography,
42
+ {
43
+ sx: {
44
+ whiteSpace: "nowrap",
45
+ overflow: "hidden",
46
+ textOverflow: "ellipsis",
47
+ flex: 1
48
+ },
49
+ children: sessionUser.fullName
50
+ }
51
+ ) }),
31
52
  /* @__PURE__ */ jsx(
32
53
  Chip,
33
54
  {
@@ -42,15 +63,28 @@ export default function UserSessionInfo({ user, sessionUser }) {
42
63
  borderColor: colors.strokeBorderStrong,
43
64
  backgroundColor: "transparent",
44
65
  textTransform: "capitalize",
45
- pr: 1,
46
- pl: 0.5
66
+ pr: 0.5,
67
+ pl: 0,
68
+ height: "auto"
47
69
  }
48
70
  }
49
71
  )
50
72
  ]
51
73
  }
52
74
  ),
53
- /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "grey", children: sessionUser.email })
75
+ /* @__PURE__ */ jsx(Tooltip, { title: sessionUser.email, children: /* @__PURE__ */ jsx(
76
+ Typography,
77
+ {
78
+ variant: "body2",
79
+ color: "grey",
80
+ sx: {
81
+ whiteSpace: "nowrap",
82
+ overflow: "hidden",
83
+ textOverflow: "ellipsis"
84
+ },
85
+ children: sessionUser.email
86
+ }
87
+ ) })
54
88
  ] })
55
89
  ]
56
90
  }
package/es/UserSessions/components/user-sessions.js CHANGED
@@ -174,7 +174,7 @@ export default function UserSessions({
174
174
  options: {
175
175
  customBodyRenderLite: (rawIndex) => {
176
176
  const x = safeData[rawIndex];
177
- return /* @__PURE__ */ jsx(UserSessionInfo, { sessionUser: x.user, user });
177
+ return /* @__PURE__ */ jsx(Box, { sx: { minWidth: 150, maxWidth: 250 }, children: /* @__PURE__ */ jsx(UserSessionInfo, { sessionUser: x.user, user }) });
178
178
  }
179
179
  }
180
180
  },
package/lib/UserSessions/components/user-session-info.js CHANGED
@@ -28,20 +28,32 @@ function UserSessionInfo({
28
28
  variant: "circle",
29
29
  shape: "circle",
30
30
  src: sessionUser.avatar,
31
- did: sessionUser.did
31
+ did: sessionUser.did,
32
+ sx: {
33
+ flexShrink: 0
34
+ }
32
35
  }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
36
+ sx: {
37
+ flex: 1,
38
+ overflow: "hidden"
39
+ },
33
40
  children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
34
41
  sx: {
35
42
  display: "flex",
36
43
  alignItems: "center",
37
44
  gap: 1
38
45
  },
39
- children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
40
- sx: {
41
- whiteSpace: "normal",
42
- wordBreak: "break-all"
43
- },
44
- children: sessionUser.fullName
46
+ children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
47
+ title: sessionUser.fullName,
48
+ children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
49
+ sx: {
50
+ whiteSpace: "nowrap",
51
+ overflow: "hidden",
52
+ textOverflow: "ellipsis",
53
+ flex: 1
54
+ },
55
+ children: sessionUser.fullName
56
+ })
45
57
  }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
46
58
  label: currentRole?.title || currentRole?.name || "Guest",
47
59
  size: "small",
@@ -54,14 +66,23 @@ function UserSessionInfo({
54
66
  borderColor: _Colors.temp.strokeBorderStrong,
55
67
  backgroundColor: "transparent",
56
68
  textTransform: "capitalize",
57
- pr: 1,
58
- pl: 0.5
69
+ pr: 0.5,
70
+ pl: 0,
71
+ height: "auto"
59
72
  }
60
73
  })]
61
- }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
62
- variant: "body2",
63
- color: "grey",
64
- children: sessionUser.email
74
+ }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
75
+ title: sessionUser.email,
76
+ children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
77
+ variant: "body2",
78
+ color: "grey",
79
+ sx: {
80
+ whiteSpace: "nowrap",
81
+ overflow: "hidden",
82
+ textOverflow: "ellipsis"
83
+ },
84
+ children: sessionUser.email
85
+ })
65
86
  })]
66
87
  })]
67
88
  });
package/lib/UserSessions/components/user-sessions.js CHANGED
@@ -196,9 +196,15 @@ function UserSessions({
196
196
  options: {
197
197
  customBodyRenderLite: rawIndex => {
198
198
  const x = safeData[rawIndex];
199
- return /* @__PURE__ */(0, _jsxRuntime.jsx)(_userSessionInfo.default, {
200
- sessionUser: x.user,
201
- user
199
+ return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
200
+ sx: {
201
+ minWidth: 150,
202
+ maxWidth: 250
203
+ },
204
+ children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_userSessionInfo.default, {
205
+ sessionUser: x.user,
206
+ user
207
+ })
202
208
  });
203
209
  }
204
210
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blocklet/ui-react",
3
- "version": "2.9.70",
3
+ "version": "2.9.72",
4
4
  "description": "Some useful front-end web components that can be used in Blocklets.",
5
5
  "keywords": [
6
6
  "react",
@@ -62,10 +62,10 @@
62
62
  }
63
63
  },
64
64
  "dependencies": {
65
- "@arcblock/bridge": "^2.9.70",
66
- "@arcblock/did-connect": "^2.9.70",
67
- "@arcblock/react-hooks": "^2.9.70",
68
- "@arcblock/ux": "^2.9.70",
65
+ "@arcblock/bridge": "^2.9.72",
66
+ "@arcblock/did-connect": "^2.9.72",
67
+ "@arcblock/react-hooks": "^2.9.72",
68
+ "@arcblock/ux": "^2.9.72",
69
69
  "@blocklet/js-sdk": "^1.16.25",
70
70
  "@emotion/react": "^11.10.4",
71
71
  "@emotion/styled": "^11.10.4",
@@ -109,5 +109,5 @@
109
109
  "jest": "^28.1.3",
110
110
  "unbuild": "^2.0.0"
111
111
  },
112
- "gitHead": "1b21b7431fd4c078da8b2c6e94029af8319bda64"
112
+ "gitHead": "4400bf9e1e2b461926c1e00def2a95d484e74be2"
113
113
  }
package/src/UserSessions/components/user-session-info.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Box, Chip, Typography } from '@mui/material';
1
+ import { Box, Chip, Tooltip, Typography } from '@mui/material';
2
2
  import Avatar from '@arcblock/ux/lib/Avatar';
3
3
  import { useCreation } from 'ahooks';
4
4
  import { temp as colors } from '@arcblock/ux/lib/Colors';
@@ -17,15 +17,32 @@ export default function UserSessionInfo({ user, sessionUser }: { readonly user:
17
17
  alignItems: 'center',
18
18
  gap: 1,
19
19
  }}>
20
- <Avatar size={40} variant="circle" shape="circle" src={sessionUser.avatar} did={sessionUser.did} />
21
- <Box>
20
+ <Avatar
21
+ size={40}
22
+ variant="circle"
23
+ shape="circle"
24
+ src={sessionUser.avatar}
25
+ did={sessionUser.did}
26
+ sx={{ flexShrink: 0 }}
27
+ />
28
+ <Box sx={{ flex: 1, overflow: 'hidden' }}>
22
29
  <Box
23
30
  sx={{
24
31
  display: 'flex',
25
32
  alignItems: 'center',
26
33
  gap: 1,
27
34
  }}>
28
- <Typography sx={{ whiteSpace: 'normal', wordBreak: 'break-all' }}>{sessionUser.fullName}</Typography>
35
+ <Tooltip title={sessionUser.fullName}>
36
+ <Typography
37
+ sx={{
38
+ whiteSpace: 'nowrap',
39
+ overflow: 'hidden',
40
+ textOverflow: 'ellipsis',
41
+ flex: 1,
42
+ }}>
43
+ {sessionUser.fullName}
44
+ </Typography>
45
+ </Tooltip>
29
46
  <Chip
30
47
  label={currentRole?.title || currentRole?.name || 'Guest'}
31
48
  size="small"
@@ -38,14 +55,24 @@ export default function UserSessionInfo({ user, sessionUser }: { readonly user:
38
55
  borderColor: colors.strokeBorderStrong,
39
56
  backgroundColor: 'transparent',
40
57
  textTransform: 'capitalize',
41
- pr: 1,
42
- pl: 0.5,
58
+ pr: 0.5,
59
+ pl: 0,
60
+ height: 'auto',
43
61
  }}
44
62
  />
45
63
  </Box>
46
- <Typography variant="body2" color="grey">
47
- {sessionUser.email}
48
- </Typography>
64
+ <Tooltip title={sessionUser.email}>
65
+ <Typography
66
+ variant="body2"
67
+ color="grey"
68
+ sx={{
69
+ whiteSpace: 'nowrap',
70
+ overflow: 'hidden',
71
+ textOverflow: 'ellipsis',
72
+ }}>
73
+ {sessionUser.email}
74
+ </Typography>
75
+ </Tooltip>
49
76
  </Box>
50
77
  </Box>
51
78
  );
package/src/UserSessions/components/user-sessions.tsx CHANGED
@@ -191,7 +191,11 @@ export default function UserSessions({
191
191
  options: {
192
192
  customBodyRenderLite: (rawIndex: number) => {
193
193
  const x = safeData[rawIndex];
194
- return <UserSessionInfo sessionUser={x.user} user={user} />;
194
+ return (
195
+ <Box sx={{ minWidth: 150, maxWidth: 250 }}>
196
+ <UserSessionInfo sessionUser={x.user} user={user} />
197
+ </Box>
198
+ );
195
199
  },
196
200
  },
197
201
  },