@blocklet/ui-react 2.13.69 → 3.0.0

package/src/Notifications/hooks/use-title.tsx

@@ -71,11 +71,14 @@ function UserLink({ user, color }: UserLinkProps) {
     <Link
       href={profileLink}
       color={_color}
-      fontWeight={600}
       target="_blank"
-      sx={{ textDecoration: 'none', '&:hover': { cursor: 'pointer' } }}
       onClick={(e: CustomMouseEvent) => {
         e.customPreventRedirect = true;
+      }}
+      sx={{
+        fontWeight: 600,
+        textDecoration: 'none',
+        '&:hover': { cursor: 'pointer' },
       }}>
       {user.fullName || 'System'}
     </Link>

package/src/Notifications/hooks/use-width.tsx

@@ -1,5 +1,5 @@
 import { useTheme } from '@arcblock/ux/lib/Theme';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import { useMediaQuery } from '@mui/material';
 
 function useWidth() {
   const theme = useTheme();

package/src/UserCenter/components/config-profile.tsx

@@ -3,7 +3,6 @@ import { useMemoizedFn, useReactive } from 'ahooks';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import ArrowDownwardIcon from '@arcblock/icons/lib/ArrowDown';
 
 import { translations } from '../libs/locales';

package/src/UserCenter/components/danger-zone.tsx

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { use } from 'react';
 import { Box, Button, Typography } from '@mui/material';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { translate } from '@arcblock/ux/lib/Locale/util';
@@ -17,7 +17,7 @@ export default function DangerZone() {
   const { confirmApi, confirmHolder } = useConfirm();
 
   const { locale } = useLocaleContext();
-  const { session, connectApi } = useContext<TSessionContext>(SessionContext);
+  const { session, connectApi } = use<TSessionContext>(SessionContext);
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
@@ -121,7 +121,11 @@ export default function DangerZone() {
               }}>
               {t('dangerZone.deleteAccount')}
             </Typography>
-            <Typography variant="caption" color="text.secondary">
+            <Typography
+              variant="caption"
+              sx={{
+                color: 'text.secondary',
+              }}>
               {t('dangerZone.deleteAccountDescription')}
             </Typography>
           </Box>

package/src/UserCenter/components/editable-field.tsx

@@ -1,14 +1,9 @@
 import React, { useState } from 'react';
-import Box from '@mui/material/Box';
-import TextField from '@mui/material/TextField';
-import Typography from '@mui/material/Typography';
-import Tooltip from '@mui/material/Tooltip';
-import type { TooltipProps } from '@mui/material/Tooltip';
-import useTheme from '@mui/material/styles/useTheme';
 import { useCreation, useMemoizedFn } from 'ahooks';
+import { Box, TextField, Typography, Tooltip, type TooltipProps, useTheme } from '@mui/material';
+import { Verified as VerifiedIcon } from '@mui/icons-material';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { translate } from '@arcblock/ux/lib/Locale/util';
-import VerifiedIcon from '@mui/icons-material/Verified';
 import { mergeSx } from '@arcblock/ux/lib/Util/style';
 import { translations } from '../libs/locales';
 
@@ -131,16 +126,18 @@ function EditableField({
         <TextField
           variant="outlined"
           className="editable-field"
-          InputProps={{
-            sx: { backgroundColor: 'transparent' },
-            placeholder,
-          }}
           value={value}
-          onChange={(e) => handleChange(e.target.value)}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChange(e.target.value)}
           sx={mergeSx(inputFieldStyle, !errorMsg ? commonInputStyle : {})}
           error={Boolean(errorMsg)}
           helperText={errorMsg}
           disabled={disabled}
+          slotProps={{
+            input: {
+              sx: { backgroundColor: 'transparent' },
+              placeholder,
+            },
+          }}
         />
       );
     }
@@ -150,17 +147,19 @@ function EditableField({
       <Box position="relative">
         <TextField
           variant="outlined"
-          InputProps={{
-            multiline: true,
-            minRows: rows,
-            placeholder,
-          }}
           sx={mergeSx(inputFieldStyle, !errorMsg ? commonInputStyle : {})}
           value={value}
-          onChange={(e) => handleChange(e.target.value)}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChange(e.target.value)}
           error={Boolean(errorMsg)}
           helperText={errorMsg}
           disabled={disabled}
+          slotProps={{
+            input: {
+              multiline: true,
+              minRows: rows,
+              placeholder,
+            },
+          }}
         />
         {maxLength && maxLength > 0 ? (
           <Typography
@@ -190,32 +189,34 @@ function EditableField({
         title={tooltip}
         placement="top"
         arrow
-        PopperProps={{
-          // 使用虚拟锚点元素，基于鼠标位置
-          anchorEl: mousePosition
-            ? {
-                getBoundingClientRect: () => ({
-                  top: mousePosition.mouseY,
-                  left: mousePosition.mouseX,
-                  right: mousePosition.mouseX,
-                  bottom: mousePosition.mouseY,
-                  width: 0,
-                  height: 0,
-                  x: mousePosition.mouseX,
-                  y: mousePosition.mouseY,
-                  toJSON: () => {},
-                }),
-              }
-            : null,
-          // 设置偏移，使tooltip显示在鼠标上方
-          modifiers: [
-            {
-              name: 'offset',
-              options: {
-                offset: [0, 10],
+        slotProps={{
+          popper: {
+            // 使用虚拟锚点元素，基于鼠标位置
+            anchorEl: mousePosition
+              ? {
+                  getBoundingClientRect: () => ({
+                    top: mousePosition.mouseY,
+                    left: mousePosition.mouseX,
+                    right: mousePosition.mouseX,
+                    bottom: mousePosition.mouseY,
+                    width: 0,
+                    height: 0,
+                    x: mousePosition.mouseX,
+                    y: mousePosition.mouseY,
+                    toJSON: () => {},
+                  }),
+                }
+              : null,
+            // 设置偏移，使tooltip显示在鼠标上方
+            modifiers: [
+              {
+                name: 'offset',
+                options: {
+                  offset: [0, 10],
+                },
               },
-            },
-          ],
+            ],
+          },
         }}>
         <Typography
           variant="subtitle1"
@@ -231,7 +232,7 @@ function EditableField({
           alignItems="center"
           gap={1}>
           {icon
-            ? React.cloneElement(icon as React.ReactElement, {
+            ? React.cloneElement(icon as React.ReactElement<any>, {
                 style: {
                   filter: isDark ? 'brightness(0) saturate(100%) invert(1)' : 'none',
                 },

package/src/UserCenter/components/nft.tsx

@@ -68,9 +68,20 @@ export default function Nft({ user }: { user: User }) {
       ));
 
       return (
-        <Box display="flex" flexDirection="column" gap={2}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2,
+          }}>
           <Skeleton width="20%" />
-          <Box display="flex" flexDirection="row" gap={2} flexWrap="nowrap">
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              gap: 2,
+              flexWrap: 'nowrap',
+            }}>
             {skeletonItems}
           </Box>
         </Box>
@@ -103,10 +114,10 @@ export default function Nft({ user }: { user: User }) {
             <Box
               key={item.address}
               sx={{
+                flexShrink: 0,
                 width: { xs: 120, sm: 120, md: 120, lg: 166 },
                 height: { xs: 120, sm: 120, md: 120, lg: 166 },
-              }}
-              flexShrink={0}>
+              }}>
               <NFTDisplay
                 data={item.display}
                 address={item.address}
@@ -120,7 +131,14 @@ export default function Nft({ user }: { user: User }) {
             </Box>
           ))}
           {data?.assets?.length === 0 && !loading && (
-            <Box display="flex" justifyContent="center" alignItems="center" width="100%" height="100%">
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                width: '100%',
+                height: '100%',
+              }}>
               <Empty>{t('common.noNFT')}</Empty>
             </Box>
           )}

package/src/UserCenter/components/notification.tsx

@@ -36,19 +36,24 @@ function NotificationItem({
   });
 
   return (
-    <Box display="flex" alignItems="center" gap={1}>
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+      }}>
       <Switch checked={value} size="small" onChange={onChange} />
       <Typography
-        color="text.primary"
+        onClick={handleClick}
         sx={{
+          color: 'text.primary',
           fontSize: 14,
           display: 'flex',
           flexWrap: isMobile ? 'wrap' : 'nowrap',
           columnGap: 1,
           flex: 1,
           whiteSpace: isMobile ? 'normal' : 'nowrap',
-        }}
-        onClick={handleClick}>
+        }}>
         {title}
         {description}
       </Typography>
@@ -212,7 +217,12 @@ export default function Notification({ user, isMobile }: { user: User; isMobile:
           title={t('emailNotification')}
           description={
             user?.email && (
-              <Typography component="span" color="text.secondary" fontSize={13}>
+              <Typography
+                component="span"
+                sx={{
+                  color: 'text.secondary',
+                  fontSize: 13,
+                }}>
                 {user?.email}
               </Typography>
             )
@@ -252,7 +262,13 @@ export default function Notification({ user, isMobile }: { user: User; isMobile:
           onChange={(event: ChangeEvent<HTMLInputElement>) => handleChangeSwitch('phone', event.target.checked)}
         /> */}
       </Box>
-      <Stack spacing={1.5} useFlexGap direction="column" alignItems="start">
+      <Stack
+        spacing={1.5}
+        useFlexGap
+        direction="column"
+        sx={{
+          alignItems: 'start',
+        }}>
         {webhooks.map((item: WebhookItemData, index: number) => (
           <WebhookItem
             // eslint-disable-next-line react/no-array-index-key

package/src/UserCenter/components/privacy.tsx

@@ -97,8 +97,8 @@ export default function Privacy({
             labelProps={{
               label: (
                 <Typography
-                  color="text.primary"
                   sx={{
+                    color: 'text.primary',
                     fontSize: 14,
                     display: 'flex',
                     flexFlow: 'wrap',

package/src/UserCenter/components/settings.tsx

@@ -144,7 +144,12 @@ export default function Settings({
               }}>
               {tab.label}
             </Typography>
-            <Box mt={2.5}>{tab.content}</Box>
+            <Box
+              sx={{
+                mt: 2.5,
+              }}>
+              {tab.content}
+            </Box>
           </Box>
         );
       })}

package/src/UserCenter/components/status-dialog/date-picker.tsx

@@ -42,16 +42,9 @@ export default function DateTimeInput({ value, onChange, error, helperText, labe
         type="datetime-local"
         value={formatValue}
         onChange={handleChange}
-        inputProps={{
-          min: minDateTime,
-          style: { cursor: 'pointer' },
-        }}
         label={label}
         error={error}
         onClick={handleClick}
-        InputLabelProps={{
-          shrink: true,
-        }}
         sx={{
           '& .MuiInputBase-root': {
             cursor: 'pointer',
@@ -60,6 +53,16 @@ export default function DateTimeInput({ value, onChange, error, helperText, labe
             cursor: 'pointer',
           },
         }}
+        slotProps={{
+          htmlInput: {
+            min: minDateTime,
+            style: { cursor: 'pointer' },
+          },
+
+          inputLabel: {
+            shrink: true,
+          },
+        }}
       />
       {helperText && <FormHelperText>{helperText}</FormHelperText>}
     </FormControl>

package/src/UserCenter/components/status-dialog/index.tsx

@@ -15,10 +15,9 @@ import {
   IconButton,
 } from '@mui/material';
 import dayjs from 'dayjs';
-import CloseIcon from '@mui/icons-material/Close';
+import { Close as CloseIcon } from '@mui/icons-material';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useMemoizedFn } from 'ahooks';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import ArrowDownwardIcon from '@arcblock/icons/lib/ArrowDown';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { DurationEnum, UserMetadata } from '../../../@types';
@@ -163,7 +162,11 @@ export default function StatusDialog({ open, onClose, data, selected, onSelect,
 
         {!status ? (
           <Box sx={{ mt: '24px' }}>
-            <Typography variant="body2" color="text.secondary">
+            <Typography
+              variant="body2"
+              sx={{
+                color: 'text.secondary',
+              }}>
               {t('profile.quickSettings')}
             </Typography>
             {data.map((item) => (
@@ -191,7 +194,11 @@ export default function StatusDialog({ open, onClose, data, selected, onSelect,
                   )}
                   {item.name}
                   {item.durationName && (
-                    <Typography variant="body2" color="text.secondary">
+                    <Typography
+                      variant="body2"
+                      sx={{
+                        color: 'text.secondary',
+                      }}>
                       - {item.durationName}
                     </Typography>
                   )}

package/src/UserCenter/components/status-selector/duration-menu.tsx

@@ -44,7 +44,6 @@ function DurationMenu({ data, selected, onSelect }: StatusDurationMenuProps) {
       <StatusMenuItem icon={data.icon} selected={selected?.value === data.id} onClick={onSelectStatus}>
         {data.name}
       </StatusMenuItem>
-
       <StyledMenu
         anchorOrigin={{
           vertical: 'top',
@@ -57,7 +56,13 @@ function DurationMenu({ data, selected, onSelect }: StatusDurationMenuProps) {
         open={open}
         onClose={closeSubMenu}
         anchorEl={anchorEl}>
-        <Typography component="span" color="text.secondary" pl={2} fontSize="14px">
+        <Typography
+          component="span"
+          sx={{
+            color: 'text.secondary',
+            pl: 2,
+            fontSize: '14px',
+          }}>
           {t('profile.removeStatusAfter')}
         </Typography>
         {data.children?.map((item) => (

package/src/UserCenter/components/status-selector/index.tsx

@@ -41,7 +41,13 @@ function StatusSelector({ data, open, onSelect, anchorEl, selected }: StatusSele
 
   return (
     <StyledMenu open={open} onClose={() => onSelectStatus()} anchorEl={anchorEl}>
-      <Typography component="span" color="text.secondary" pl={2} fontSize="14px">
+      <Typography
+        component="span"
+        sx={{
+          color: 'text.secondary',
+          pl: 2,
+          fontSize: '14px',
+        }}>
         {t('profile.setStatus')}
       </Typography>
       {renderMenuItems()}

package/src/UserCenter/components/status-selector/menu-item.tsx

@@ -1,5 +1,4 @@
-import { ListItemIcon, MenuItem, Menu, styled } from '@mui/material';
-import { SvgIconProps } from '@mui/material/SvgIcon';
+import { ListItemIcon, MenuItem, Menu, styled, type SvgIconProps } from '@mui/material';
 import React from 'react';
 import { UserMetadata } from '../../../@types';
 

package/src/UserCenter/components/storage/action.tsx

@@ -1,7 +1,7 @@
 import { DIDSpaceConnect, DIDSpaceGateway, DIDSpaceStatus } from '@blocklet/did-space-react';
 import { IconButton, Link, Stack } from '@mui/material';
 import Toast from '@arcblock/ux/lib/Toast';
-import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import { OpenInNew as OpenInNewIcon } from '@mui/icons-material';
 import { AxiosError } from 'axios';
 import { getSpaceHomeUrl } from '../../../libs/spaces';
 import { Session } from '../../../@types';
@@ -28,7 +28,6 @@ function Action({
           session={session}
           spaceDid={session.user?.didSpace?.did}
           spaceGatewayUrl={session.user?.didSpace?.url}
-          // @ts-expect-error 待 did-space-react 发版后，移除 connectScope 的类型忽略
           connectScope="user"
           onSuccess={async () => {
             await refresh();

package/src/UserCenter/components/storage/connected.tsx

@@ -14,12 +14,26 @@ function Connected({ spaceGateway }: { spaceGateway: SpaceGateway | undefined })
     updateSpaceGateway(_spaceGateway);
 
   return (
-    <Box display="flex" flexDirection="column">
-      <Box display="flex" flexDirection="row" alignItems="center" justifyContent="space-between" marginBottom="12px">
-        <Typography fontSize="16px" fontWeight="bold">
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+      }}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          marginBottom: '12px',
+        }}>
+        <Typography
+          sx={{
+            fontSize: '16px',
+            fontWeight: 'bold',
+          }}>
           {t('storage.spaces.connected.title')}
         </Typography>
-        {/* @ts-expect-error 待 did-space-react 发版后，移除 connectScope 的类型忽略 */}
         {!isMobile && <DIDSpaceConnect connectScope="user" session={session} onSuccess={onSuccess} />}
       </Box>
       <Box>
@@ -37,7 +51,6 @@ function Connected({ spaceGateway }: { spaceGateway: SpaceGateway | undefined })
       </Box>
       {isMobile && (
         <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 2 }}>
-          {/* @ts-expect-error 待 did-space-react 发版后，移除 connectScope 的类型忽略 */}
           <DIDSpaceConnect connectScope="user" session={session} onSuccess={onSuccess} />
         </Box>
       )}

package/src/UserCenter/components/storage/delete.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { IconButton } from '@mui/material';
-import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import { DeleteOutline as DeleteOutlineIcon } from '@mui/icons-material';
 import Confirm from '@arcblock/ux/lib/Dialog/confirm';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import toast from '@arcblock/ux/lib/Toast';

package/src/UserCenter/components/storage/disconnect.tsx

@@ -10,8 +10,16 @@ function Disconnect() {
   const onSuccess = ({ spaceGateway }: { spaceGateway: DIDSpaceGateway }) => updateSpaceGateway(spaceGateway);
 
   return (
-    <Box display="flex" flexDirection="column">
-      <Typography fontSize="16px" fontWeight="bold">
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+      }}>
+      <Typography
+        sx={{
+          fontSize: '16px',
+          fontWeight: 'bold',
+        }}>
         {t('storage.spaces.connect.providerForStorage')}
       </Typography>
       <EmptySpacesNFTIcon

package/src/UserCenter/components/storage/index.tsx

@@ -22,7 +22,12 @@ function DidSpace() {
   return (
     <LocaleProvider translations={translations} locale={locale}>
       <Container>
-        <Box maxWidth="720px">{hasStorageEndpoint ? <Connected spaceGateway={spaceGateway} /> : <Disconnect />}</Box>
+        <Box
+          sx={{
+            maxWidth: '720px',
+          }}>
+          {hasStorageEndpoint ? <Connected spaceGateway={spaceGateway} /> : <Disconnect />}
+        </Box>
       </Container>
     </LocaleProvider>
   );

package/src/UserCenter/components/storage/preview-nft.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import ReactPlaceholder from 'react-placeholder';
 import { Dialog, DialogContent, IconButton } from '@mui/material';
-import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
+import { CloseOutlined as CloseOutlinedIcon } from '@mui/icons-material';
 // @ts-expect-error
 import EmptySpacesNFT from './icons/empty-spaces-nft.svg?react';
 

package/src/UserCenter/components/third-party-login/index.tsx

@@ -1,5 +1,5 @@
 import noop from 'lodash/noop';
-import { useContext, useState } from 'react';
+import { use, useState } from 'react';
 import { Box } from '@mui/material';
 import { useAsyncEffect, useCreation } from 'ahooks';
 import { getConnectedAccounts, getSourceProvider } from '@arcblock/ux/lib/SessionUser/libs/utils';
@@ -16,7 +16,7 @@ type ConnectedAccountProps = OAuthAccount & {
 };
 
 export default function ThirdPartyLogin({ user }: { user: User }) {
-  const { session } = useContext<TSessionContext>(SessionContext);
+  const { session } = use<TSessionContext>(SessionContext);
   const [oauthConfigs, setOauthConfigs] = useState<Record<string, ConnectedAccountProps>>({});
   const { getOAuthConfigs } = session.useOAuth();
   const browser = useBrowser();

package/src/UserCenter/components/third-party-login/third-party-item.tsx

@@ -16,7 +16,7 @@ import GithubIcon from '@iconify-icons/logos/github-icon';
 import GoogleIcon from '@iconify-icons/logos/google-icon';
 // import Auth0Icon from '@iconify-icons/logos/auth0-icon';
 import { SessionContext } from '@arcblock/did-connect/lib/Session';
-import { useContext } from 'react';
+import { use } from 'react';
 import pick from 'lodash/pick';
 import { getFederatedEnabled, getMaster } from '@arcblock/ux/lib/Util/federated';
 import { LOGIN_PROVIDER, LOGIN_PROVIDER_NAME, OAUTH_PROVIDER } from '@arcblock/ux/lib/Util/constant';
@@ -48,7 +48,7 @@ export default function ThirdPartyItem({
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
-  const { session } = useContext<TSessionContext>(SessionContext);
+  const { session } = use<TSessionContext>(SessionContext);
   const { bindOAuth, unbindOAuth, setBaseUrl, baseUrl: oauthBaseUrl } = session.useOAuth();
   const { disconnectPasskey, setTargetAppPid } = session.usePasskey();
 
@@ -173,12 +173,13 @@ export default function ThirdPartyItem({
         <Box
           component={Icon}
           icon={icon}
-          width="1em"
-          height="1em"
           fill="currentColor"
           sx={{
+            width: '1em',
+            height: '1em',
             flexShrink: 0,
             fontSize: 16,
+
             // githubIcon 不支持变色，dark 模式做一个反色处理
             filter: ({ palette }) =>
               item?.provider === LOGIN_PROVIDER.GITHUB && palette.mode === 'dark' ? 'invert(1)' : 'none',
@@ -245,9 +246,12 @@ export default function ThirdPartyItem({
               <Box
                 component={Icon}
                 icon={InfoOutlineRoundedIcon}
-                color="text.secondary"
-                fontSize={16}
-                sx={{ cursor: 'pointer', flexShrink: 0 }}
+                sx={{
+                  color: 'text.secondary',
+                  fontSize: 16,
+                  cursor: 'pointer',
+                  flexShrink: 0,
+                }}
               />
             </Tooltip>
           ) : null}