@arcblock/ux 2.13.70 → 3.0.1

package/lib/Layout/index.js

@@ -1,198 +1,136 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import Helmet from 'react-helmet';
-import { AppBar, Container, Drawer, Divider, IconButton, Link, List, ListItem, ListItemText, Toolbar, Typography } from '@mui/material';
-import MenuIcon from '@mui/icons-material/Menu';
-import Footer from '../Footer';
-import OpenInWallet from '../Wallet/Open';
-import Icon from '../Icon';
-import Logo from '../Logo';
-import { styled } from '../Theme';
-export default function Layout({
-  title,
-  brand,
-  description,
-  links = [],
-  logo = /*#__PURE__*/_jsx(Logo, {
-    showText: false,
-    style: {
-      width: '40px',
-      height: '40px'
-    }
-  }),
-  showLogo = false,
-  addons,
-  footer = /*#__PURE__*/_jsx(Container, {
-    children: /*#__PURE__*/_jsx(Footer, {})
-  }),
-  baseUrl = '',
-  homeUrl = '/',
-  variant = 'shadow',
-  contentOnly = false,
-  children,
-  ...rest
+import { jsx as e, jsxs as o, Fragment as P } from "react/jsx-runtime";
+import { useState as R, useEffect as W } from "react";
+import $ from "react-helmet";
+import { Container as t, Toolbar as u, Divider as B, List as C, Link as v, ListItemButton as G, ListItemText as M, AppBar as j, IconButton as E, Typography as w, Drawer as F } from "@mui/material";
+import { Menu as S } from "@mui/icons-material";
+import Z from "../Footer/index.js";
+import A from "../Wallet/Open.js";
+import b from "../Icon/index.js";
+import H from "../Logo/index.js";
+import { styled as x } from "../Theme/index.js";
+function ie({
+  title: i,
+  brand: l,
+  description: s,
+  links: a = [],
+  logo: c = /* @__PURE__ */ e(H, { showText: !1, style: { width: "40px", height: "40px" } }),
+  showLogo: d = !1,
+  addons: y,
+  footer: k = /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(Z, {}) }),
+  baseUrl: h = "",
+  homeUrl: N = "/",
+  variant: z = "shadow",
+  contentOnly: L = !1,
+  children: p,
+  ...D
 }) {
-  const [drawerOpen, setDrawerOpen] = useState(false);
-  const onToggleDrawer = () => {
-    setDrawerOpen(!drawerOpen);
+  const [m, I] = R(!1), f = () => {
+    I(!m);
   };
-  useEffect(() => {
-    const {
-      searchParams
-    } = new URL(window.location.href);
-    const inviter = searchParams.get('inviter');
-    if (inviter) {
-      window.localStorage.setItem('inviter', inviter);
-    }
-  }, []);
-  if (contentOnly) {
-    return /*#__PURE__*/_jsx(Container, {
-      children: children
-    });
-  }
-  let activeLink = '';
-  // @ts-expect-error
-  const {
-    pathname: currentPath
-  } = new URL(window.location);
-  links.forEach(link => {
-    if (currentPath.startsWith(link.url) && link.url.length > activeLink.length) {
-      activeLink = link.url;
-    }
-  });
-  const drawer = /*#__PURE__*/_jsxs("div", {
-    children: [/*#__PURE__*/_jsxs(Toolbar, {
-      className: "toolbar toolbar--drawer",
-      children: [!!showLogo && /*#__PURE__*/_jsx("div", {
-        className: "menu-logo",
-        children: logo
-      }), /*#__PURE__*/_jsx("div", {
-        style: {
-          flexGrow: 1,
-          overflow: 'hidden',
-          textOverflow: 'ellipsis'
-        },
-        children: brand
-      })]
-    }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(List, {
-      children: links.map(x => /*#__PURE__*/_jsx(Link, {
-        className: "nav-link",
-        href: x.url,
-        underline: "hover",
-        children: /*#__PURE__*/_jsx(ListItem, {
-          button: true,
-          className: activeLink === x.url ? 'drawer-highlight-nav' : '',
-          children: /*#__PURE__*/_jsxs(ListItemText, {
-            children: [typeof x.icon === 'string' ? /*#__PURE__*/_jsx(Icon, {
-              name: x.icon,
-              size: 18 * (x.iconZoom || 1),
-              color: "inherit",
-              style: {
-                marginRight: '5px'
-              }
-            }) : x.icon, x.title]
-          })
-        })
-      }, x.url))
-    })]
+  if (W(() => {
+    const { searchParams: r } = new URL(window.location.href), g = r.get("inviter");
+    g && window.localStorage.setItem("inviter", g);
+  }, []), L)
+    return /* @__PURE__ */ e(t, { children: p });
+  let n = "";
+  const { pathname: T } = new URL(window.location);
+  a.forEach((r) => {
+    T.startsWith(r.url) && r.url.length > n.length && (n = r.url);
   });
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(Div, {
-      ...rest,
-      children: [/*#__PURE__*/_jsx(Helmet, {
-        title: title
-      }), /*#__PURE__*/_jsx(AppBar, {
-        position: "fixed",
-        className: `appbar appbar--${variant}`,
-        color: "default",
-        style: {
-          height: 56
-        },
-        children: /*#__PURE__*/_jsx(Container, {
-          disableGutters: true,
-          children: /*#__PURE__*/_jsxs(Toolbar, {
-            className: "toolbar",
-            children: [/*#__PURE__*/_jsx(IconButton, {
-              color: "inherit",
-              "aria-label": "open drawer",
-              edge: "start",
-              onClick: onToggleDrawer,
-              className: "menu-button",
-              size: "large",
-              children: /*#__PURE__*/_jsx(MenuIcon, {})
-            }), !!showLogo && /*#__PURE__*/_jsx("div", {
-              className: "menu-logo",
-              children: logo
-            }), /*#__PURE__*/_jsx(Typography, {
-              href: homeUrl,
-              component: "a",
-              variant: "h5",
-              color: "inherit",
-              noWrap: true,
-              display: "block",
-              className: "brand",
-              children: brand
-            }), description && /*#__PURE__*/_jsx(Typography, {
-              component: "small",
-              variant: "subtitle2",
-              color: "inherit",
-              noWrap: true,
-              className: "description",
-              children: description
-            }), /*#__PURE__*/_jsx("div", {
-              style: {
-                flexGrow: 1
-              }
-            }), /*#__PURE__*/_jsx("div", {
-              className: "nav-links",
-              children: links.map(x => /*#__PURE__*/_jsxs(Link, {
-                href: x.url,
-                className: `nav-link ${activeLink === x.url ? 'highlight-nav' : ''}`,
-                color: x.color,
-                underline: "hover",
-                children: [typeof x.icon === 'string' ? /*#__PURE__*/_jsx(Icon, {
-                  name: x.icon,
-                  size: 20 * (x.iconZoom || 1),
+  const O = /* @__PURE__ */ o("div", { children: [
+    /* @__PURE__ */ o(u, { className: "toolbar toolbar--drawer", children: [
+      !!d && /* @__PURE__ */ e("div", { className: "menu-logo", children: c }),
+      /* @__PURE__ */ e("div", { style: { flexGrow: 1, overflow: "hidden", textOverflow: "ellipsis" }, children: l })
+    ] }),
+    /* @__PURE__ */ e(B, {}),
+    /* @__PURE__ */ e(C, { children: a.map((r) => /* @__PURE__ */ e(v, { className: "nav-link", href: r.url, underline: "hover", children: /* @__PURE__ */ e(G, { className: n === r.url ? "drawer-highlight-nav" : "", children: /* @__PURE__ */ o(M, { children: [
+      typeof r.icon == "string" ? /* @__PURE__ */ e(b, { name: r.icon, size: 18 * (r.iconZoom || 1), color: "inherit", style: { marginRight: "5px" } }) : r.icon,
+      r.title
+    ] }) }) }, r.url)) })
+  ] });
+  return /* @__PURE__ */ o(P, { children: [
+    /* @__PURE__ */ o(U, { ...D, children: [
+      /* @__PURE__ */ e($, { title: i }),
+      /* @__PURE__ */ e(j, { position: "fixed", className: `appbar appbar--${z}`, color: "default", style: { height: 56 }, children: /* @__PURE__ */ e(t, { disableGutters: !0, children: /* @__PURE__ */ o(u, { className: "toolbar", children: [
+        /* @__PURE__ */ e(
+          E,
+          {
+            color: "inherit",
+            "aria-label": "open drawer",
+            edge: "start",
+            onClick: f,
+            className: "menu-button",
+            size: "large",
+            children: /* @__PURE__ */ e(S, {})
+          }
+        ),
+        !!d && /* @__PURE__ */ e("div", { className: "menu-logo", children: c }),
+        /* @__PURE__ */ e(
+          w,
+          {
+            href: N,
+            component: "a",
+            variant: "h5",
+            color: "inherit",
+            noWrap: !0,
+            className: "brand",
+            sx: {
+              display: "block"
+            },
+            children: l
+          }
+        ),
+        s && /* @__PURE__ */ e(w, { component: "small", variant: "subtitle2", color: "inherit", noWrap: !0, className: "description", children: s }),
+        /* @__PURE__ */ e("div", { style: { flexGrow: 1 } }),
+        /* @__PURE__ */ e("div", { className: "nav-links", children: a.map((r) => /* @__PURE__ */ o(
+          v,
+          {
+            href: r.url,
+            className: `nav-link ${n === r.url ? "highlight-nav" : ""}`,
+            color: r.color,
+            underline: "hover",
+            children: [
+              typeof r.icon == "string" ? /* @__PURE__ */ e(
+                b,
+                {
+                  name: r.icon,
+                  size: 20 * (r.iconZoom || 1),
                   color: "inherit",
-                  style: {
-                    marginRight: '5px'
-                  }
-                }) : x.icon, x.title]
-              }, x.url))
-            }), addons]
-          })
-        })
-      }), /*#__PURE__*/_jsx("div", {
-        className: "toolbar"
-      }), /*#__PURE__*/_jsx(Container, {
-        style: {
-          marginTop: 16,
-          flex: 1
-        },
-        children: children
-      }), footer, !!baseUrl && /*#__PURE__*/_jsx(OpenInWallet, {
-        locale: "zh",
-        link: baseUrl
-      })]
-    }), /*#__PURE__*/_jsx(DrawerDiv, {
-      children: /*#__PURE__*/_jsx(Drawer, {
+                  style: { marginRight: "5px" }
+                }
+              ) : r.icon,
+              r.title
+            ]
+          },
+          r.url
+        )) }),
+        y
+      ] }) }) }),
+      /* @__PURE__ */ e("div", { className: "toolbar" }),
+      /* @__PURE__ */ e(t, { style: { marginTop: 16, flex: 1 }, children: p }),
+      k,
+      !!h && /* @__PURE__ */ e(A, { locale: "zh", link: h })
+    ] }),
+    /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(
+      F,
+      {
         variant: "temporary",
-        open: drawerOpen,
-        onClose: onToggleDrawer,
+        open: m,
+        onClose: f,
         classes: {
-          paper: 'drawer-paper'
+          paper: "drawer-paper"
         },
         ModalProps: {
-          keepMounted: true,
+          keepMounted: !0,
           // Better open performance on mobile.
-          disablePortal: true
+          disablePortal: !0
         },
-        children: drawer
-      })
-    })]
-  });
+        children: O
+      }
+    ) })
+  ] });
 }
-const Div = styled('div')`
+const U = x("div")`
   width: 100%;
   min-height: 100vh;
   display: flex;
@@ -252,7 +190,7 @@ const Div = styled('div')`
     }
   }
 
-  ${props => props.theme.breakpoints.up('md')} {
+  ${(i) => i.theme.breakpoints.up("md")} {
     .toolbar {
       .menu-button {
         display: none;
@@ -266,7 +204,7 @@ const Div = styled('div')`
     }
   }
 
-  ${props => props.theme.breakpoints.down('md')} {
+  ${(i) => i.theme.breakpoints.down("md")} {
     .toolbar {
       .nav-links,
       .menu-logo,
@@ -275,8 +213,7 @@ const Div = styled('div')`
       }
     }
   }
-`;
-const DrawerDiv = styled('nav')`
+`, q = x("nav")`
   width: 240px;
   .drawer-paper {
     width: 240px;
@@ -302,4 +239,7 @@ const DrawerDiv = styled('nav')`
       display: inline-flex;
     }
   }
-`;
+`;
+export {
+  ie as default
+};

package/lib/LoadingMask/index.js

@@ -1,86 +1,95 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@mui/material';
-export default function LoadingMask({
-  size = 64,
-  padding,
-  borderWidth,
-  borderRadius,
-  duration,
-  children
+import { jsxs as p, jsx as a } from "react/jsx-runtime";
+import { Box as n } from "@mui/material";
+function b({
+  size: s = 64,
+  padding: d,
+  borderWidth: l,
+  borderRadius: f,
+  duration: c,
+  children: g
 }) {
-  const finialSize = size;
-  const finialRadius = borderRadius ?? finialSize / 8;
-  const finialBorderWidth = borderWidth ?? finialSize / 32;
-  const finialPadding = padding ?? finialSize * 0.25 - finialBorderWidth;
-  const finialDuration = duration ?? 2.5;
-  return /*#__PURE__*/_jsxs(Box, {
-    sx: {
-      display: 'inline-flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      width: finialSize,
-      height: finialSize,
-      position: 'relative'
-    },
-    children: [/*#__PURE__*/_jsx(Box, {
+  const t = s, o = f ?? t / 8, e = l ?? t / 32, i = d ?? t * 0.25 - e, m = c ?? 2.5;
+  return /* @__PURE__ */ p(
+    n,
+    {
       sx: {
-        pointerEvents: 'none',
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: finialSize,
-        height: finialSize,
-        overflow: 'hidden',
-        borderRadius: `${finialRadius}px`,
-        backgroundColor: 'grey.200',
-        '&::before,&::after': {
-          content: '""',
-          position: 'absolute',
-          top: 0,
-          bottom: 0,
-          left: 0,
-          right: 0,
-          pointerEvents: 'none'
-        },
-        '&::after': {
-          left: finialBorderWidth,
-          right: finialBorderWidth,
-          top: finialBorderWidth,
-          bottom: finialBorderWidth,
-          backgroundColor: 'background.default',
-          borderRadius: `${finialRadius - finialBorderWidth}px`
-        },
-        '&::before': {
-          background: ({
-            palette
-          }) => `conic-gradient(from 45deg, transparent 0%, transparent 50%, ${palette.secondary.main} 90%, ${palette.secondary.main} 100%)`,
-          transform: 'scale(100)',
-          animation: `rotate ${finialDuration}s linear infinite`,
-          '@keyframes rotate': {
-            '0%': {
-              transform: 'scale(100) rotate(0deg)'
-            },
-            '100%': {
-              transform: 'scale(100) rotate(360deg)'
+        display: "inline-flex",
+        justifyContent: "center",
+        alignItems: "center",
+        width: t,
+        height: t,
+        position: "relative"
+      },
+      children: [
+        /* @__PURE__ */ a(
+          n,
+          {
+            sx: {
+              pointerEvents: "none",
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              width: t,
+              height: t,
+              overflow: "hidden",
+              borderRadius: `${o}px`,
+              backgroundColor: "grey.200",
+              "&::before,&::after": {
+                content: '""',
+                position: "absolute",
+                top: 0,
+                bottom: 0,
+                left: 0,
+                right: 0,
+                pointerEvents: "none"
+              },
+              "&::after": {
+                left: e,
+                right: e,
+                top: e,
+                bottom: e,
+                backgroundColor: "background.default",
+                borderRadius: `${o - e}px`
+              },
+              "&::before": {
+                background: ({ palette: r }) => `conic-gradient(from 45deg, transparent 0%, transparent 50%, ${r.secondary.main} 90%, ${r.secondary.main} 100%)`,
+                transform: "scale(100)",
+                animation: `rotate ${m}s linear infinite`,
+                "@keyframes rotate": {
+                  "0%": {
+                    transform: "scale(100) rotate(0deg)"
+                  },
+                  "100%": {
+                    transform: "scale(100) rotate(360deg)"
+                  }
+                }
+              }
             }
           }
-        }
-      }
-    }), /*#__PURE__*/_jsx(Box, {
-      sx: {
-        position: 'relative',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: finialSize - finialPadding - finialBorderWidth,
-        height: finialSize - finialPadding - finialBorderWidth
-      },
-      children: children
-    })]
-  });
-}
+        ),
+        /* @__PURE__ */ a(
+          n,
+          {
+            sx: {
+              position: "relative",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              width: t - i - e,
+              height: t - i - e
+            },
+            children: g
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  b as default
+};

package/lib/Locale/LocaleSelector.stories.d.ts

@@ -0,0 +1,22 @@
+import { default as Basic } from './demo/basic';
+import { default as WithText } from './demo/with-text';
+import { default as DarkMode } from './demo/dark-mode';
+import { default as PopperProps } from './demo/popper-props';
+import { default as PopperTypeProps } from './demo/popper-type-props';
+import { default as IconProps } from './demo/icon-props';
+import { default as Languages } from './demo/languages';
+declare namespace _default {
+    let title: string;
+    namespace parameters {
+        namespace docs {
+            namespace description {
+                let component: string;
+            }
+            let inlineStories: boolean;
+            let iframeHeight: number;
+        }
+    }
+    let decorators: ((StoryFn: any) => import("react/jsx-runtime").JSX.Element)[];
+}
+export default _default;
+export { Basic, WithText, DarkMode, PopperProps, PopperTypeProps, IconProps, Languages };

package/lib/Locale/browser-lang.js

@@ -1,57 +1,28 @@
-/* eslint-disable no-param-reassign */
-function startsWith(string, target, position = 0) {
-  const {
-    length
-  } = string;
-  if (position < 0) {
-    position = 0;
-  } else if (position > length) {
-    position = length;
-  }
-  target = `${target}`;
-  // eslint-disable-next-line eqeqeq
-  return string.slice(position, position + target.length) == target;
+function o(e, a, n = 0) {
+  const { length: r } = e;
+  return n < 0 ? n = 0 : n > r && (n = r), a = `${a}`, e.slice(n, n + a.length) == a;
 }
-function getBrowserLang() {
-  if (typeof window === 'undefined') {
-    return null;
-  }
-  const lang = window.navigator.languages && window.navigator.languages[0] || window.navigator.language ||
-  // @ts-expect-error
-  window.navigator.browserLanguage ||
-  // @ts-expect-error
-  window.navigator.userLanguage ||
-  // @ts-expect-error
+function u() {
+  return typeof window > "u" ? null : window.navigator.languages && window.navigator.languages[0] || window.navigator.language || // @ts-expect-error
+  window.navigator.browserLanguage || // @ts-expect-error
+  window.navigator.userLanguage || // @ts-expect-error
   window.navigator.systemLanguage || null;
-  return lang;
 }
-function normalizeCode(code) {
-  return (code || '').toLowerCase().replace(/-/, '_');
+function l(e) {
+  return (e || "").toLowerCase().replace(/-/, "_");
 }
-function getPreferredLanguage(options) {
-  if (!options) {
-    return getBrowserLang();
-  }
-  const {
-    languages,
-    fallback
-  } = options;
-  if (!options.languages) {
-    return fallback;
-  }
-
-  // some browsers report language as en-US instead of en_US
-  const browserLanguage = normalizeCode(getBrowserLang());
-  if (!browserLanguage) {
-    return fallback;
-  }
-  const match = languages.filter(lang => normalizeCode(lang) === browserLanguage);
-  if (match.length > 0) {
-    return match[0] || fallback;
-  }
-
-  // en == en_US
-  const matchCodeOnly = languages.filter(lang => startsWith(browserLanguage, lang));
-  return matchCodeOnly[0] || fallback;
+function w(e) {
+  if (!e)
+    return u();
+  const { languages: a, fallback: n } = e;
+  if (!e.languages)
+    return n;
+  const r = l(u());
+  if (!r)
+    return n;
+  const t = a.filter((g) => l(g) === r);
+  return t.length > 0 ? t[0] || n : a.filter((g) => o(r, g))[0] || n;
 }
-export default getPreferredLanguage;
+export {
+  w as default
+};