@arcblock/ux 2.13.28 → 2.13.30

package/lib/DIDConnect/did-connect-container.d.ts

@@ -1,5 +1,5 @@
 import { SxProps } from '@mui/material';
-export default function DIDConnectContainer({ open, popup, hideCloseButton, children, appPid, slotProps, onClose, }: {
+export default function DIDConnectContainer({ open, popup, hideCloseButton, children, appPid, slotProps, onClose, keepMounted, }: {
     popup?: boolean;
     open?: boolean;
     hideCloseButton?: boolean;
@@ -20,4 +20,5 @@ export default function DIDConnectContainer({ open, popup, hideCloseButton, chil
             sx?: SxProps;
         };
     };
+    keepMounted?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/lib/DIDConnect/did-connect-container.js

@@ -30,7 +30,8 @@ export default function DIDConnectContainer({
   children,
   appPid,
   slotProps,
-  onClose = noop
+  onClose = noop,
+  keepMounted = false
 }) {
   const color = useCreation(() => {
     const did = appPid || window.blocklet.appPid;
@@ -63,7 +64,7 @@ export default function DIDConnectContainer({
     if (['backdropClick', 'escapeKeyDown'].includes(reason)) return;
     onClose();
   };
-  const showModal = debouncedOpen || open;
+  const showModal = debouncedOpen || open || keepMounted;
   const DrawerComponent = hideCloseButton ? Drawer : SwipeableDrawer;
   const hslColor = colorConvert.hex.hsl(color);
   const [h, s, l] = hslColor;
@@ -237,6 +238,7 @@ export default function DIDConnectContainer({
     slots: {
       backdrop: BackdropWrap
     },
+    keepMounted: keepMounted,
     className: "did-connect__container-dialog",
     onClose: handleOnClose,
     PaperProps: {

package/lib/DIDConnect/index.d.ts

@@ -6,3 +6,4 @@ export { default as withContainer } from './with-container';
 export { default as withUxTheme } from './with-ux-theme';
 export { default as DIDConnectLogo } from './did-connect-logo';
 export { default as DIDConnectContainer } from './did-connect-container';
+export { default as RequestStorageAccessApiDialog } from './request-storage-access-api-dialog';

package/lib/DIDConnect/index.js

@@ -5,4 +5,5 @@ export { default as PoweredBy } from './powered-by';
 export { default as withContainer } from './with-container';
 export { default as withUxTheme } from './with-ux-theme';
 export { default as DIDConnectLogo } from './did-connect-logo';
-export { default as DIDConnectContainer } from './did-connect-container';
+export { default as DIDConnectContainer } from './did-connect-container';
+export { default as RequestStorageAccessApiDialog } from './request-storage-access-api-dialog';

package/lib/DIDConnect/request-storage-access-api-dialog.d.ts

@@ -0,0 +1,12 @@
+import { Locale } from '../type';
+type StorageAccessState = 'prompt' | 'granted' | 'denied';
+declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<{
+    locale?: Locale;
+    src: string;
+    storageAccessState: StorageAccessState;
+    onHandle: (data: {
+        value: boolean;
+        error?: Error;
+    }) => void;
+} & import("react").RefAttributes<unknown>>>;
+export default _default;

package/lib/DIDConnect/request-storage-access-api-dialog.js

@@ -0,0 +1,325 @@
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Button, Typography, Chip, List, ListItem } from '@mui/material';
+import { Icon } from '@iconify/react';
+import externalLinkIcon from '@iconify-icons/tabler/external-link';
+import lockOutlineIcon from '@iconify-icons/material-symbols/lock-outline';
+import checkCircleIcon from '@iconify-icons/material-symbols/check-circle';
+import rocketLaunchRoundedIcon from '@iconify-icons/material-symbols/rocket-launch-rounded';
+import { useMemoizedFn, useReactive } from 'ahooks';
+import { forwardRef, memo, useImperativeHandle, useRef } from 'react';
+import noop from 'lodash/noop';
+import { translate } from '../Locale/util';
+import DIDConnectContainer from './did-connect-container';
+import CloseButton from '../CloseButton';
+import SharedBridge from '../SharedBridge';
+import { setVisitorId } from '../Util';
+const translations = {
+  en: {
+    allow: 'Allow',
+    dataUsage: 'Your data is only used for identity authentication, and will not be collected or used for any other purpose.',
+    title: 'Authorization Request',
+    clickAllow: ({
+      allowButton
+    }) => {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["You only need to click the ", allowButton, " button below, and you will not see this request again."]
+      });
+    },
+    reason: ({
+      site
+    }) => {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["For a better login experience, we need to apply for the storage permission of the ", site, " site."]
+      });
+    },
+    afterAllow: {
+      title: 'After authorization, you will enjoy:',
+      list1: 'More convenient login experience',
+      list2: 'Faster access speed'
+    }
+  },
+  zh: {
+    allow: '允许',
+    dataUsage: '您的数据仅用于身份认证，不会被收集或用于其他用途。',
+    title: '授权请求',
+    clickAllow: ({
+      allowButton
+    }) => {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["\u60A8\u53EA\u9700\u8981\u70B9\u51FB\u4E0B\u65B9\u7684 ", allowButton, " \u6309\u94AE\uFF0C\u540E\u7EED\u5C06\u4E0D\u4F1A\u518D\u770B\u5230\u8FD9\u4E2A\u8BF7\u6C42\u3002"]
+      });
+    },
+    reason: ({
+      site
+    }) => {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["\u4E3A\u4E86\u8BA9\u60A8\u83B7\u5F97\u66F4\u597D\u7684\u767B\u5F55\u4F53\u9A8C\uFF0C\u6211\u4EEC\u9700\u8981\u7533\u8BF7 ", site, " \u7AD9\u70B9\u5B58\u50A8\u6743\u9650\u3002"]
+      });
+    },
+    afterAllow: {
+      title: '授权后，您将享受：',
+      list1: '更便捷的登录体验',
+      list2: '更快的访问速度'
+    }
+  }
+};
+const RequestStorageAccessApiDialog = /*#__PURE__*/forwardRef(({
+  locale = 'en',
+  src,
+  storageAccessState,
+  onHandle = noop
+}, ref) => {
+  const sharedBridgeRef = useRef(null);
+  const currentState = useReactive({
+    callback: noop,
+    open: false,
+    get origin() {
+      try {
+        return new URL(src).origin;
+      } catch (error) {
+        return src;
+      }
+    },
+    get host() {
+      try {
+        return new URL(src).host;
+      } catch (error) {
+        return src;
+      }
+    }
+  });
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  const reset = useMemoizedFn(() => {
+    currentState.open = false;
+    currentState.callback = noop;
+  });
+  const open = useMemoizedFn(() => {
+    currentState.open = true;
+  });
+  const close = useMemoizedFn(() => {
+    currentState.open = false;
+  });
+  const _requestStorageAccess = useMemoizedFn(async callback => {
+    const result = await sharedBridgeRef.current?.callIframe('requestStorageAccess');
+    if (result.value) {
+      callback(true, 'broswer');
+    } else if (storageAccessState === undefined) {
+      // 用户未在当前网页交互过，此时必然需要进行一次弹窗
+      callback(false, 'system');
+    } else if (storageAccessState === 'denied') {
+      // 用户已经明确拒绝过跨站授权，直接弹窗
+      callback(false);
+    } else {
+      // NOTICE: 暂时保留这部分逻辑，后续可能会用上
+      // else if (
+      //   result.error?.name === 'NotAllowedError' &&
+      //   result.error?.message === 'requestStorageAccess not allowed'
+      // ) {
+      //   // 操作被浏览器禁止，需要用户手动与 iframe 交互一次才可以
+      //   currentState.open = true;
+      //   currentState.callback = callback;
+      // }
+      currentState.open = true;
+      currentState.callback = callback;
+    }
+  });
+  const requestStorageAccess = useMemoizedFn(() => {
+    return new Promise(resolve => {
+      _requestStorageAccess((result, origin) => {
+        reset();
+        resolve({
+          value: result,
+          origin
+        });
+      });
+    });
+  });
+  const handleAllow = useMemoizedFn(() => {
+    currentState.open = false;
+  });
+  const handleClose = useMemoizedFn(() => {
+    currentState.open = false;
+    currentState.callback(false, 'system');
+  });
+  useImperativeHandle(ref, () => ({
+    open,
+    close,
+    requestStorageAccess
+  }));
+  return /*#__PURE__*/_jsx(DIDConnectContainer, {
+    popup: true,
+    open: currentState.open,
+    onClose: handleClose,
+    keepMounted: true,
+    children: /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        backgroundColor: 'background.default',
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        position: 'relative',
+        maxWidth: '100%',
+        transition: 'width 0.2s ease-in-out',
+        margin: 'auto',
+        p: 3,
+        gap: 2
+      },
+      children: [/*#__PURE__*/_jsx(CloseButton, {
+        onClose: handleClose,
+        sx: {
+          position: 'absolute',
+          right: 14,
+          top: 14
+        }
+      }), /*#__PURE__*/_jsxs(Typography, {
+        component: "div",
+        variant: "h4",
+        sx: {
+          fontWeight: 700,
+          fontFamily: 'Lexend',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1
+        },
+        children: [/*#__PURE__*/_jsx(Box, {
+          component: Icon,
+          icon: lockOutlineIcon,
+          fontSize: 28,
+          sx: {
+            color: 'warning.main'
+          }
+        }), t('title')]
+      }), /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 1
+        },
+        children: [/*#__PURE__*/_jsx(Typography, {
+          children: t('reason', {
+            site: /*#__PURE__*/_jsx(Chip, {
+              clickable: true,
+              component: "a",
+              href: currentState.origin,
+              label: currentState.host,
+              size: "small",
+              deleteIcon: /*#__PURE__*/_jsx(Icon, {
+                icon: externalLinkIcon
+              }),
+              onDelete: () => {},
+              target: "_blank"
+            })
+          })
+        }), /*#__PURE__*/_jsx(Typography, {
+          component: "div",
+          children: t('clickAllow', {
+            allowButton: /*#__PURE__*/_jsx(Chip, {
+              label: t('allow'),
+              size: "small",
+              color: "success"
+            })
+          })
+        }), /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            mt: 2
+          },
+          children: [/*#__PURE__*/_jsxs(Typography, {
+            sx: {
+              display: 'flex',
+              alignItems: 'center',
+              gap: 1,
+              mb: 0.5
+            },
+            children: [/*#__PURE__*/_jsx(Box, {
+              component: Icon,
+              icon: checkCircleIcon,
+              fontSize: 24,
+              sx: {
+                color: 'success.main'
+              }
+            }), t('afterAllow.title')]
+          }), /*#__PURE__*/_jsxs(List, {
+            dense: true,
+            sx: {
+              py: 0,
+              pl: 2
+            },
+            children: [/*#__PURE__*/_jsxs(ListItem, {
+              sx: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: 0.8
+              },
+              children: [/*#__PURE__*/_jsx(Box, {
+                component: Icon,
+                icon: rocketLaunchRoundedIcon,
+                fontSize: 20,
+                sx: {
+                  color: 'success.main'
+                }
+              }), t('afterAllow.list1')]
+            }), /*#__PURE__*/_jsxs(ListItem, {
+              sx: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: 0.8
+              },
+              children: [/*#__PURE__*/_jsx(Box, {
+                component: Icon,
+                icon: rocketLaunchRoundedIcon,
+                fontSize: 20,
+                sx: {
+                  color: 'success.main'
+                }
+              }), t('afterAllow.list2')]
+            })]
+          })]
+        }), /*#__PURE__*/_jsx(Typography, {
+          component: "div",
+          variant: "body2",
+          color: "grey.700",
+          children: t('dataUsage')
+        })]
+      }), /*#__PURE__*/_jsx(Box, {
+        sx: {
+          display: 'flex',
+          justifyContent: 'center'
+        },
+        children: /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            position: 'relative',
+            display: 'inline-block',
+            cursor: 'pointer'
+          },
+          children: [/*#__PURE__*/_jsx(Button, {
+            variant: "contained",
+            color: "success",
+            onClick: handleAllow,
+            sx: {
+              minWidth: 100,
+              letterSpacing: 1
+            },
+            children: t('allow')
+          }), /*#__PURE__*/_jsx(SharedBridge, {
+            ref: sharedBridgeRef,
+            onClick: ({
+              value,
+              visitorId
+            }) => {
+              if (visitorId) setVisitorId(visitorId);
+              currentState.callback(value, 'broswer');
+            },
+            locale: locale,
+            src: src,
+            sx: {
+              zIndex: 1
+            }
+          })]
+        })
+      })]
+    })
+  });
+});
+export default /*#__PURE__*/memo(RequestStorageAccessApiDialog);

package/lib/RelativeTime/index.d.ts

@@ -11,5 +11,6 @@ export interface RelativeTimeProps {
     relativeRange?: number;
     enableTooltip?: boolean;
     showUTCPrefix?: boolean;
+    disableUTC?: boolean;
 }
-export default function RelativeTime({ value, locale, withoutSuffix, from, to, type, tz, relativeRange, enableTooltip, showUTCPrefix, ...rest }: RelativeTimeProps): import("react/jsx-runtime").JSX.Element;
+export default function RelativeTime({ value, locale, withoutSuffix, from, to, type, tz, relativeRange, enableTooltip, showUTCPrefix, disableUTC, ...rest }: RelativeTimeProps): import("react/jsx-runtime").JSX.Element;

package/lib/RelativeTime/index.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Tooltip } from '@mui/material';
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
@@ -136,7 +136,15 @@ function UTCChip({
   setIsUtc,
   showUTCPrefix = true
 }) {
-  const prefix = showUTCPrefix ? `${translations[locale].utc}: ` : '';
+  const prefix = useMemo(() => {
+    if (showUTCPrefix) {
+      if (isUtc) {
+        return '';
+      }
+      return `${translations[locale].utc}: `;
+    }
+    return '';
+  }, [locale, showUTCPrefix, isUtc]);
   return /*#__PURE__*/_jsx(Box, {
     component: "span",
     sx: {
@@ -164,6 +172,7 @@ export default function RelativeTime({
   relativeRange,
   enableTooltip = true,
   showUTCPrefix = true,
+  disableUTC = false,
   ...rest
 }) {
   const {
@@ -190,10 +199,9 @@ export default function RelativeTime({
       placement: "top-end",
       enterTouchDelay: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        display: "flex",
+        display: "inline-flex",
         alignItems: "center",
         gap: 0.5,
-        width: "max-content",
         ...rest,
         children: [/*#__PURE__*/_jsx(Box, {
           component: "span",
@@ -212,19 +220,21 @@ export default function RelativeTime({
             color: 'text.secondary'
           },
           children: relativeString
-        }), /*#__PURE__*/_jsx(Box, {
-          component: "span",
-          sx: {
-            color: 'inherit'
-          },
-          children: "\xB7"
-        }), /*#__PURE__*/_jsx(UTCChip, {
-          locale: locale,
-          isUtc: isUtc,
-          sign: sign,
-          hoursOffset: hoursOffset,
-          setIsUtc: setIsUtc,
-          showUTCPrefix: showUTCPrefix
+        }), !disableUTC && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(Box, {
+            component: "span",
+            sx: {
+              color: 'inherit'
+            },
+            children: "\xB7"
+          }), /*#__PURE__*/_jsx(UTCChip, {
+            locale: locale,
+            isUtc: isUtc,
+            sign: sign,
+            hoursOffset: hoursOffset,
+            setIsUtc: setIsUtc,
+            showUTCPrefix: showUTCPrefix
+          })]
         })]
       })
     });
@@ -234,15 +244,14 @@ export default function RelativeTime({
     placement: "top-end",
     enterTouchDelay: 0,
     children: /*#__PURE__*/_jsxs(Box, {
-      display: "flex",
+      display: "inline-flex",
       alignItems: "center",
       gap: 1,
-      width: "max-content",
       children: [/*#__PURE__*/_jsx(Box, {
         component: "span",
         ...rest,
         children: innerContent
-      }), type === 'utc' && /*#__PURE__*/_jsx(UTCChip, {
+      }), type === 'utc' && !disableUTC && /*#__PURE__*/_jsx(UTCChip, {
         locale: locale,
         isUtc: isUtc,
         sign: sign,

package/lib/SessionUser/components/un-login.js

@@ -14,7 +14,7 @@ import { translations } from '../libs/translation';
 import Typography from '../../Typography';
 import QuickLoginItem from './quick-login-item';
 import { getFederatedEnabled, getMaster } from '../../Util/federated';
-import LoginButton from '../../LoginButton';
+import { BLOCKLET_SERVICE_PATH_PREFIX } from '../../Util/constant';
 export default function UnLogin({
   session,
   onLogin = noop,
@@ -56,7 +56,7 @@ export default function UnLogin({
   const masterSite = getMaster(blocklet);
   const loginApp = federatedEnabled && masterSite ? masterSite : blocklet;
   const loginAppName = loginApp?.appName || 'DID Connect';
-  const loginAppLogo = joinURL(loginApp?.appUrl || '/', loginApp?.appLogo || '/.well-known/service/blocklet/logo?imageFilter=convert&f=png&h=80');
+  const loginAppLogo = joinURL(loginApp?.appUrl || '/', loginApp?.appLogo || `${BLOCKLET_SERVICE_PATH_PREFIX}/blocklet/logo?imageFilter=convert&f=png&h=80`);
   useEffect(() => {
     let timer;
 
@@ -88,42 +88,34 @@ export default function UnLogin({
     }
   });
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(LoginButton, {
-      locale: locale,
+    children: [/*#__PURE__*/_jsx(IconButton, {
+      ref: userAnchorRef,
+      "data-cy": "sessionManager-login",
+      className: "arc-session-user-unlogin",
+      size: "medium",
       onClick: _onLogin,
-      render: ({
-        onClick
-      }) => {
-        return /*#__PURE__*/_jsx(IconButton, {
-          ref: userAnchorRef,
-          "data-cy": "sessionManager-login",
-          className: "arc-session-user-unlogin",
-          size: "medium",
-          onClick: onClick,
-          "aria-label": "Login button",
-          children: isFirstLoading ? /*#__PURE__*/_jsx(Box, {
-            width: size,
-            height: size,
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            children: /*#__PURE__*/_jsx(CircularProgress, {
-              style: {
-                width: size - 4,
-                height: size - 4,
-                color: dark ? '#fff' : ''
-              }
-            })
-          }) : /*#__PURE__*/_jsx(Icon, {
-            icon: UserIcon,
-            fontSize: size,
-            color: dark ? '#fff' : 'inherit',
-            style: {
-              transform: 'scale(1.25)'
-            }
-          })
-        });
-      }
+      "aria-label": "Login button",
+      children: isFirstLoading ? /*#__PURE__*/_jsx(Box, {
+        width: size,
+        height: size,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        children: /*#__PURE__*/_jsx(CircularProgress, {
+          style: {
+            width: size - 4,
+            height: size - 4,
+            color: dark ? '#fff' : ''
+          }
+        })
+      }) : /*#__PURE__*/_jsx(Icon, {
+        icon: UserIcon,
+        fontSize: size,
+        color: dark ? '#fff' : 'inherit',
+        style: {
+          transform: 'scale(1.25)'
+        }
+      })
     }), /*#__PURE__*/_jsx(Popper, {
       open: currentState.open,
       anchorEl: userAnchorRef.current,

package/lib/SharedBridge/index.d.ts

@@ -1,16 +1,15 @@
 import type { SxProps } from '@mui/material';
-import React from 'react';
 import { Locale } from '../type';
-declare const SharedBridge: React.NamedExoticComponent<{
+declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<{
     src: string;
     onClick: (data: {
         action: string;
         value: boolean;
         visitorId?: string;
+        error?: Error;
     }) => void;
-    onLoad: () => void;
+    onLoad?: () => void;
     sx?: SxProps;
-    iframeRef?: React.RefObject<HTMLIFrameElement>;
     locale?: Locale;
-}>;
-export default SharedBridge;
+} & import("react").RefAttributes<unknown>>>;
+export default _default;