@blocklet/ui-react 2.9.90 → 2.10.0

package/lib/Footer/links.js

@@ -1,119 +1,89 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-module.exports = Links;
-var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Theme = require("@arcblock/ux/lib/Theme");
-var _clsx = _interopRequireDefault(require("clsx"));
-var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
-var _Icon = _interopRequireDefault(require("../Icon"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function Links({
-  links,
-  flowLayout,
-  ...rest
-}) {
-  const [activeIndex, setActiveIndex] = (0, _react.useState)(-1);
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import PropTypes from "prop-types";
+import { styled } from "@arcblock/ux/lib/Theme";
+import clsx from "clsx";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import Icon from "../Icon/index.js";
+export default function Links({ links, flowLayout, ...rest }) {
+  const [activeIndex, setActiveIndex] = useState(-1);
   if (!links?.length) {
     return null;
   }
-  const isGroupMode = links.some(item => item.items?.length);
-  const renderItem = ({
-    label,
-    link,
-    icon,
-    render,
-    props
-  }) => {
+  const isGroupMode = links.some((item) => item.items?.length);
+  const renderItem = ({ label, link, icon, render, props }) => {
     let result = label;
     if (render) {
-      result = render({
-        label,
-        link,
-        props
-      });
+      result = render({ label, link, props });
     } else if (link) {
-      result = /* @__PURE__ */(0, _jsxRuntime.jsx)("a", {
-        href: link,
-        "aria-label": `Footer link for ${label}`,
-        ...props,
-        children: label
-      });
+      result = /* @__PURE__ */ jsx("a", { href: link, "aria-label": `Footer link for ${label}`, ...props, children: label });
     }
-    return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [icon && /* @__PURE__ */(0, _jsxRuntime.jsx)(_Icon.default, {
-        icon,
-        size: 20,
-        sx: {
-          mr: 0.5
-        }
-      }), result]
-    });
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon && /* @__PURE__ */ jsx(Icon, { icon, size: 20, sx: { mr: 0.5 } }),
+      result
+    ] });
   };
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Root, {
-    ...rest,
-    className: (0, _clsx.default)(rest.className, {
-      "footer-links--grouped": isGroupMode,
-      "footer-links--flow": flowLayout
-    }),
-    children: /* @__PURE__ */(0, _jsxRuntime.jsxs)("div", {
-      className: "footer-links-inner",
-      children: [flowLayout && links.map((item, i) => /* @__PURE__ */(0, _jsxRuntime.jsx)("span", {
-        className: "footer-links-item",
-        children: renderItem(item)
-      }, i)), !flowLayout && links.map((item, i) => {
-        const {
-          items
-        } = item;
-        const isActive = i === activeIndex;
-        return /* @__PURE__ */(0, _jsxRuntime.jsxs)("div", {
-          className: (0, _clsx.default)("footer-links-group", {
-            "footer-links-group--active": isActive
-          }),
-          onClick: () => setActiveIndex(activeIndex === i ? -1 : i),
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)("span", {
-            className: "footer-links-item",
-            children: [renderItem(item), !!items?.length && /* @__PURE__ */(0, _jsxRuntime.jsx)("span", {
-              className: "footer-links-group-expand-icon",
-              children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_ExpandMore.default, {
-                style: {
-                  transform: `rotate(${isActive ? 180 : 0}deg)`
-                }
-              })
-            })]
-          }), !!items?.length && /* @__PURE__ */(0, _jsxRuntime.jsx)("div", {
-            className: "footer-links-sub",
-            children: items.map((child, j) => /* @__PURE__ */(0, _jsxRuntime.jsx)("span", {
-              className: "footer-links-item",
-              children: renderItem(child)
-            }, j))
-          })]
-        }, i);
-      })]
-    })
-  });
+  return /* @__PURE__ */ jsx(
+    Root,
+    {
+      ...rest,
+      className: clsx(rest.className, {
+        "footer-links--grouped": isGroupMode,
+        "footer-links--flow": flowLayout
+      }),
+      children: /* @__PURE__ */ jsxs("div", { className: "footer-links-inner", children: [
+        flowLayout && links.map((item, i) => /* @__PURE__ */ jsx("span", { className: "footer-links-item", children: renderItem(item) }, i)),
+        !flowLayout && links.map((item, i) => {
+          const { items } = item;
+          const isActive = i === activeIndex;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: clsx("footer-links-group", {
+                "footer-links-group--active": isActive
+              }),
+              onClick: () => setActiveIndex(activeIndex === i ? -1 : i),
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "footer-links-item", children: [
+                  renderItem(item),
+                  !!items?.length && /* @__PURE__ */ jsx("span", { className: "footer-links-group-expand-icon", children: /* @__PURE__ */ jsx(
+                    ExpandMoreIcon,
+                    {
+                      style: {
+                        transform: `rotate(${isActive ? 180 : 0}deg)`
+                      }
+                    }
+                  ) })
+                ] }),
+                !!items?.length && /* @__PURE__ */ jsx("div", { className: "footer-links-sub", children: items.map((child, j) => /* @__PURE__ */ jsx("span", { className: "footer-links-item", children: renderItem(child) }, j)) })
+              ]
+            },
+            i
+          );
+        })
+      ] })
+    }
+  );
 }
 Links.propTypes = {
-  links: _propTypes.default.arrayOf(_propTypes.default.shape({
-    label: _propTypes.default.string,
-    link: _propTypes.default.string,
-    render: _propTypes.default.func,
-    props: _propTypes.default.object
-  })),
+  links: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      link: PropTypes.string,
+      render: PropTypes.func,
+      props: PropTypes.object
+    })
+  ),
   // 流动布局, 简单的从左到右排列
-  flowLayout: _propTypes.default.bool
+  flowLayout: PropTypes.bool
 };
 Links.defaultProps = {
   links: [],
   flowLayout: false
 };
-const Root = (0, _Theme.styled)("div")`
+const Root = styled("div")`
   overflow: hidden;
-  color: ${props => props.theme.palette.grey[600]};
+  color: ${(props) => props.theme.palette.grey[600]};
   .footer-links-inner {
     display: flex;
     justify-content: space-between;
@@ -125,7 +95,7 @@ const Root = (0, _Theme.styled)("div")`
     flex-direction: column;
   }
   .footer-links-sub .footer-links-item {
-    color: ${props => props.theme.palette.grey[900]};
+    color: ${(props) => props.theme.palette.grey[900]};
   }
   .footer-links-group-expand-icon {
     display: none;
@@ -182,12 +152,12 @@ const Root = (0, _Theme.styled)("div")`
         top: 50%;
         transform: translate(0, -50%);
         height: 1em;
-        border-left: 1px solid ${props => props.theme.palette.grey[400]};
+        border-left: 1px solid ${(props) => props.theme.palette.grey[400]};
       }
     }
   }
 
-  ${props => props.theme.breakpoints.down("md")} {
+  ${(props) => props.theme.breakpoints.down("md")} {
     .footer-links-inner {
       flex-direction: column;
       margin: 0;
@@ -203,7 +173,7 @@ const Root = (0, _Theme.styled)("div")`
       }
     }
     .footer-links-group + .footer-links-group {
-      border-top: 1px solid ${props => props.theme.palette.grey[200]};
+      border-top: 1px solid ${(props) => props.theme.palette.grey[200]};
     }
     .footer-links-group--active {
       .footer-links-sub {
@@ -234,4 +204,4 @@ const Root = (0, _Theme.styled)("div")`
       }
     }
   }
-`;
+`;

package/lib/Footer/social-media.js

@@ -1,67 +1,60 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-module.exports = SocialMedia;
-var _jsxRuntime = require("react/jsx-runtime");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Theme = require("@arcblock/ux/lib/Theme");
-var _Icon = _interopRequireDefault(require("../Icon"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function SocialMedia({
-  items,
-  ...rest
-}) {
-  const theme = (0, _Theme.useTheme)();
+import { jsx } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import { useTheme, styled } from "@arcblock/ux/lib/Theme";
+import Icon from "../Icon/index.js";
+export default function SocialMedia({ items, ...rest }) {
+  const theme = useTheme();
   if (!items?.length) {
     return null;
   }
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Root, {
-    ...rest,
-    children: items.map((item, i) => {
-      return /* @__PURE__ */(0, _jsxRuntime.jsx)("a", {
+  return /* @__PURE__ */ jsx(Root, { ...rest, children: items.map((item, i) => {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
         href: item.link,
         target: "_blank",
         "aria-label": `Social media icon${item.title ? ` for ${item.title}` : ""}`,
         rel: "noreferrer",
-        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Icon.default, {
-          icon: item.icon || item.title,
-          sx: {
-            bgcolor: theme.palette.grey[600],
-            color: "#fff"
-          },
-          size: 24,
-          component: "span"
-        })
-      }, i);
-    })
-  });
+        children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: item.icon || item.title,
+            sx: { bgcolor: theme.palette.grey[600], color: "#fff" },
+            size: 24,
+            component: "span"
+          }
+        )
+      },
+      i
+    );
+  }) });
 }
 SocialMedia.propTypes = {
-  items: _propTypes.default.arrayOf(_propTypes.default.shape({
-    // icon 对应 Icon#icon prop, 支持 iconify name 和 url 2 种形式:
-    icon: _propTypes.default.string,
-    link: _propTypes.default.string
-  }))
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      // icon 对应 Icon#icon prop, 支持 iconify name 和 url 2 种形式:
+      icon: PropTypes.string,
+      link: PropTypes.string
+    })
+  )
 };
 SocialMedia.defaultProps = {
   items: null
 };
-const Root = (0, _Theme.styled)("div")`
+const Root = styled("div")`
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 20px;
   a {
-    color: ${props => props.theme.palette.grey[400]};
+    color: ${(props) => props.theme.palette.grey[400]};
     text-decoration: none;
     &:hover {
-      color: ${props => props.theme.palette.primary.light};
+      color: ${(props) => props.theme.palette.primary.light};
     }
   }
-  ${props => props.theme.breakpoints.down("md")} {
+  ${(props) => props.theme.breakpoints.down("md")} {
     gap: 12px;
   }
-`;
+`;

package/lib/Header/index.js

@@ -1,40 +1,28 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactErrorBoundary = require("react-error-boundary");
-var _ErrorBoundary = require("@arcblock/ux/lib/ErrorBoundary");
-var _Theme = require("@arcblock/ux/lib/Theme");
-var _Header = require("@arcblock/ux/lib/Header");
-var _NavMenu = _interopRequireDefault(require("@arcblock/ux/lib/NavMenu"));
-var _context = require("@arcblock/ux/lib/Locale/context");
-var _Colors = require("@arcblock/ux/lib/Colors");
-var _omit = _interopRequireDefault(require("lodash/omit"));
-var _Icon = _interopRequireDefault(require("../Icon"));
-var _overridableThemeProvider = _interopRequireDefault(require("../common/overridable-theme-provider"));
-var _types = require("../types");
-var _utils = require("../utils");
-var _blocklets = require("../blocklets");
-var _headerAddons = _interopRequireDefault(require("../common/header-addons"));
-var _walletHiddenTopbar = require("../common/wallet-hidden-topbar");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const parseNavigation = navigation => {
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import PropTypes from "prop-types";
+import { withErrorBoundary } from "react-error-boundary";
+import { ErrorFallback } from "@arcblock/ux/lib/ErrorBoundary";
+import { styled } from "@arcblock/ux/lib/Theme";
+import { ResponsiveHeader } from "@arcblock/ux/lib/Header";
+import NavMenu from "@arcblock/ux/lib/NavMenu";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { temp as colors } from "@arcblock/ux/lib/Colors";
+import omit from "lodash/omit";
+import Icon from "../Icon/index.js";
+import OverridableThemeProvider from "../common/overridable-theme-provider.js";
+import { BlockletMetaProps, SessionManagerProps } from "../types.js";
+import { mapRecursive, flatRecursive, matchPaths } from "../utils.js";
+import { publicPath, formatBlockletInfo, getLocalizedNavigation } from "../blocklets.js";
+import HeaderAddons from "../common/header-addons.js";
+import { useWalletHiddenTopbar } from "../common/wallet-hidden-topbar.js";
+const parseNavigation = (navigation) => {
   if (!navigation?.length) {
-    return {
-      navItems: [],
-      activeId: null
-    };
+    return { navItems: [], activeId: null };
   }
   let counter = 1;
-  const parseItem = item => {
-    const icon = item.icon ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_Icon.default, {
-      icon: item.icon
-    }) : null;
+  const parseItem = (item) => {
+    const icon = item.icon ? /* @__PURE__ */ jsx(Icon, { icon: item.icon }) : null;
     if (item.items) {
       return {
         id: `${counter++}`,
@@ -52,40 +40,23 @@ const parseNavigation = navigation => {
     }
     return {
       id: `${counter++}`,
-      label: /* @__PURE__ */(0, _jsxRuntime.jsx)("a", {
-        href: item.link,
-        ...props,
-        children: item.title
-      }),
+      label: /* @__PURE__ */ jsx("a", { href: item.link, ...props, children: item.title }),
       icon,
       link: item.link
     };
   };
-  const navItems = (0, _utils.mapRecursive)(navigation, parseItem, "items");
-  const flattened = (0, _utils.flatRecursive)(navItems);
-  const matchedIndex = (0, _utils.matchPaths)(flattened.map(item => item.link));
-  return {
-    navItems,
-    activeId: matchedIndex >= 0 ? flattened[matchedIndex].id : null
-  };
+  const navItems = mapRecursive(navigation, parseItem, "items");
+  const flattened = flatRecursive(navItems);
+  const matchedIndex = matchPaths(flattened.map((item) => item.link));
+  return { navItems, activeId: matchedIndex >= 0 ? flattened[matchedIndex].id : null };
 };
-function Header({
-  meta,
-  addons,
-  sessionManagerProps,
-  homeLink,
-  theme: themeOverrides,
-  hideNavMenu,
-  ...rest
-}) {
-  (0, _walletHiddenTopbar.useWalletHiddenTopbar)();
-  const {
-    locale
-  } = (0, _context.useLocaleContext)() || {};
-  const formattedBlocklet = (0, _react.useMemo)(() => {
+function Header({ meta, addons, sessionManagerProps, homeLink, theme: themeOverrides, hideNavMenu, ...rest }) {
+  useWalletHiddenTopbar();
+  const { locale } = useLocaleContext() || {};
+  const formattedBlocklet = useMemo(() => {
     const blocklet = Object.assign({}, window.blocklet, meta);
     try {
-      return (0, _blocklets.formatBlockletInfo)(blocklet);
+      return formatBlockletInfo(blocklet);
     } catch (e) {
       console.error("Failed to format blocklet info", e, blocklet);
       return blocklet;
@@ -94,61 +65,46 @@ function Header({
   if (!formattedBlocklet.appName) {
     return null;
   }
-  const {
-    appLogo,
-    appLogoRect,
-    theme
-  } = formattedBlocklet;
-  const navigation = (0, _blocklets.getLocalizedNavigation)(formattedBlocklet?.navigation?.header, locale);
+  const { appLogo, appLogoRect, theme } = formattedBlocklet;
+  const navigation = getLocalizedNavigation(formattedBlocklet?.navigation?.header, locale);
   const parsedNavigation = parseNavigation(navigation);
-  const {
-    navItems,
-    activeId
-  } = parsedNavigation;
-  const _addons = typeof addons === "function" ? builtInAddons => addons(builtInAddons, {
-    navigation: parsedNavigation
-  }) : addons;
-  const headerAddons = /* @__PURE__ */(0, _jsxRuntime.jsx)(_headerAddons.default, {
-    formattedBlocklet,
-    addons: _addons,
-    sessionManagerProps
-  });
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_overridableThemeProvider.default, {
-    theme: themeOverrides,
-    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(StyledUxHeader, {
+  const { navItems, activeId } = parsedNavigation;
+  const _addons = typeof addons === "function" ? (builtInAddons) => addons(builtInAddons, { navigation: parsedNavigation }) : addons;
+  const headerAddons = /* @__PURE__ */ jsx(HeaderAddons, { formattedBlocklet, addons: _addons, sessionManagerProps });
+  return /* @__PURE__ */ jsx(OverridableThemeProvider, { theme: themeOverrides, children: /* @__PURE__ */ jsx(
+    StyledUxHeader,
+    {
       homeLink,
-      logo: /* @__PURE__ */(0, _jsxRuntime.jsx)("img", {
-        src: appLogoRect || appLogo,
-        alt: "logo"
-      }),
+      logo: /* @__PURE__ */ jsx("img", { src: appLogoRect || appLogo, alt: "logo" }),
       addons: headerAddons,
-      ...(0, _omit.default)(rest, ["bordered"]),
+      ...omit(rest, ["bordered"]),
       $bordered: rest?.bordered,
       $bgcolor: theme?.background?.header,
-      children: hideNavMenu || !navItems?.length ? null : ({
-        isMobile
-      }) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_NavMenu.default, {
-        mode: isMobile ? "inline" : "horizontal",
-        activeId,
-        items: navItems,
-        className: "header-nav",
-        bgColor: "transparent",
-        textColor: "#777"
-      })
-    })
-  });
+      children: hideNavMenu || !navItems?.length ? null : ({ isMobile }) => /* @__PURE__ */ jsx(
+        NavMenu,
+        {
+          mode: isMobile ? "inline" : "horizontal",
+          activeId,
+          items: navItems,
+          className: "header-nav",
+          bgColor: "transparent",
+          textColor: "#777"
+        }
+      )
+    }
+  ) });
 }
 Header.propTypes = {
-  meta: _types.BlockletMetaProps,
+  meta: BlockletMetaProps,
   // 需要考虑 定制的 addons 与内置的 连接钱包/选择语言 addons 共存的情况
   // - PropTypes.func: 可以把自定义 addons 插在 session-manager 或 locale-selector (如果存在的话) 前/中/后
   // - PropTypes.node: 将 addons 原样传给 UX Header 组件
-  addons: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
-  sessionManagerProps: _types.SessionManagerProps,
-  homeLink: _propTypes.default.string,
+  addons: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  sessionManagerProps: SessionManagerProps,
+  homeLink: PropTypes.string,
   // 允许覆盖 header 内置的 theme
-  theme: _propTypes.default.object,
-  hideNavMenu: _propTypes.default.bool
+  theme: PropTypes.object,
+  hideNavMenu: PropTypes.bool
 };
 Header.defaultProps = {
   meta: {},
@@ -156,23 +112,19 @@ Header.defaultProps = {
   sessionManagerProps: {
     showRole: true
   },
-  homeLink: _blocklets.publicPath,
+  homeLink: publicPath,
   theme: null,
   hideNavMenu: false
 };
-const StyledUxHeader = (0, _Theme.styled)(_Header.ResponsiveHeader)`
-  ${({
-  $bgcolor
-}) => `background-color: ${$bgcolor || "#fff"};`}
+const StyledUxHeader = styled(ResponsiveHeader)`
+  ${({ $bgcolor }) => `background-color: ${$bgcolor || "#fff"};`}
   font-family: Inter, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   .header-logo {
     min-width: 44px;
   }
-  ${({
-  $bordered
-}) => $bordered ? `border-bottom: 1px solid ${_Colors.temp.strokeSep};` : ""}
-  ${props => props.theme.breakpoints.down("md")} {
+  ${({ $bordered }) => $bordered ? `border-bottom: 1px solid ${colors.strokeSep};` : ""}
+  ${(props) => props.theme.breakpoints.down("md")} {
     .header-logo {
       min-width: 32px;
     }
@@ -198,6 +150,6 @@ const StyledUxHeader = (0, _Theme.styled)(_Header.ResponsiveHeader)`
     }
   }
 `;
-module.exports = (0, _reactErrorBoundary.withErrorBoundary)(Header, {
-  FallbackComponent: _ErrorBoundary.ErrorFallback
-});
+export default withErrorBoundary(Header, {
+  FallbackComponent: ErrorFallback
+});