@blocklet/ui-react 2.9.13 → 2.9.15

package/es/Footer/links.js

@@ -1,111 +1,79 @@
-/* eslint-disable react/no-array-index-key */
-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';
-
-/**
- * footer 中的 links (支持分组, 最多支持 2 级)
- * TODO: dark/light theme
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function Links({
-  links,
-  flowLayout,
-  ...rest
-}) {
+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;
   }
-  // 只要发现一项元素有子元素, 就认为是分组 (大字号突出 group title)
-  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__*/_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__*/_jsxs(_Fragment, {
-      children: [icon && /*#__PURE__*/_jsx(Icon, {
-        icon: 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__*/_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);
-      })]
-    })
-  });
+  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.arrayOf(PropTypes.shape({
-    label: PropTypes.string,
-    link: PropTypes.string,
-    render: PropTypes.func,
-    props: PropTypes.object
-  })),
+  links: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      link: PropTypes.string,
+      render: PropTypes.func,
+      props: PropTypes.object
+    })
+  ),
   // 流动布局, 简单的从左到右排列
   flowLayout: PropTypes.bool
 };
@@ -113,9 +81,9 @@ Links.defaultProps = {
   links: [],
   flowLayout: false
 };
-const Root = 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;
@@ -127,7 +95,7 @@ const Root = 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;
@@ -184,12 +152,12 @@ const Root = 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;
@@ -205,7 +173,7 @@ const Root = 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 {
@@ -236,4 +204,4 @@ const Root = styled('div')`
       }
     }
   }
-`;
+`;

package/es/Footer/social-media.d.ts

@@ -0,0 +1,14 @@
+declare function SocialMedia({ items, ...rest }: {
+    [x: string]: any;
+    items: any;
+}): import("react").JSX.Element | null;
+declare namespace SocialMedia {
+    namespace propTypes {
+        let items: any;
+    }
+    namespace defaultProps {
+        let items_1: null;
+        export { items_1 as items };
+    }
+}
+export default SocialMedia;

package/es/Footer/social-media.js

@@ -1,60 +1,60 @@
-import PropTypes from 'prop-types';
-import { useTheme, styled } from '@arcblock/ux/lib/Theme';
-import Icon from '../Icon';
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function SocialMedia({
-  items,
-  ...rest
-}) {
+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__*/_jsx(Root, {
-    ...rest,
-    children: items.map((item, i) => {
-      return /*#__PURE__*/_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}` : ''}`,
+        "aria-label": `Social media icon${item.title ? ` for ${item.title}` : ""}`,
         rel: "noreferrer",
-        children: /*#__PURE__*/_jsx(Icon, {
-          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.arrayOf(PropTypes.shape({
-    // icon 对应 Icon#icon prop, 支持 iconify name 和 url 2 种形式:
-    icon: PropTypes.string,
-    link: PropTypes.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 = 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/es/Header/index.d.ts

@@ -0,0 +1,9 @@
+declare const _default: import("react").ComponentType<{
+    [x: string]: any;
+    meta: any;
+    addons: any;
+    sessionManagerProps: any;
+    homeLink: any;
+    theme: any;
+}>;
+export default _default;

package/es/Header/index.js

@@ -1,33 +1,26 @@
-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 Icon from '../Icon';
-import OverridableThemeProvider from '../common/overridable-theme-provider';
-import { blockletMetaProps, sessionManagerProps } from '../types';
-import { mapRecursive, flatRecursive, matchPaths } from '../utils';
-import { publicPath, formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
-import HeaderAddons from '../common/header-addons';
-import { useWalletHiddenTopbar } from '../common/wallet-hidden-topbar';
-
-// blocklet meta 中的 navigation 数据 => NavMenu 组件的 items
-import { jsx as _jsx } from "react/jsx-runtime";
-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 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__*/_jsx(Icon, {
-      icon: item.icon
-    }) : null;
+  const parseItem = (item) => {
+    const icon = item.icon ? /* @__PURE__ */ jsx(Icon, { icon: item.icon }) : null;
     if (item.items) {
       return {
         id: `${counter++}`,
@@ -37,102 +30,66 @@ const parseNavigation = navigation => {
       };
     }
     let props = {};
-    if (item.link?.startsWith('http://') || item.link?.startsWith('https://')) {
+    if (item.link?.startsWith("http://") || item.link?.startsWith("https://")) {
       props = {
-        target: '_blank',
-        rel: 'noreferrer'
+        target: "_blank",
+        rel: "noreferrer"
       };
     }
     return {
       id: `${counter++}`,
-      label: /*#__PURE__*/_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 = mapRecursive(navigation, parseItem, 'items');
+  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
-  };
+  const matchedIndex = matchPaths(flattened.map((item) => item.link));
+  return { navItems, activeId: matchedIndex >= 0 ? flattened[matchedIndex].id : null };
 };
-
-/**
- * 专门用于 (composable) blocklet 的 Header 组件, 解析 blocklet meta 中的数据, 通过组合 UX 中的 Header & NavMenu 组件来渲染
- */
-// eslint-disable-next-line no-shadow
-function Header({
-  meta,
-  addons,
-  sessionManagerProps,
-  homeLink,
-  theme: themeOverrides,
-  ...rest
-}) {
+function Header({ meta, addons, sessionManagerProps: sessionManagerProps2, homeLink, theme: themeOverrides, ...rest }) {
   useWalletHiddenTopbar();
-  const {
-    locale
-  } = useLocaleContext() || {};
+  const { locale } = useLocaleContext() || {};
   const formattedBlocklet = useMemo(() => {
     const blocklet = Object.assign({}, window.blocklet, meta);
     try {
       return formatBlockletInfo(blocklet);
     } catch (e) {
-      console.error('Failed to format blocklet info', e, blocklet);
+      console.error("Failed to format blocklet info", e, blocklet);
       return blocklet;
     }
   }, [meta]);
   if (!formattedBlocklet.appName) {
     return null;
   }
-  const {
-    appLogo,
-    appLogoRect,
-    theme
-  } = formattedBlocklet;
+  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__*/_jsx(HeaderAddons, {
-    formattedBlocklet: formattedBlocklet,
-    addons: _addons,
-    sessionManagerProps: sessionManagerProps
-  });
-  return /*#__PURE__*/_jsx(OverridableThemeProvider, {
-    theme: themeOverrides,
-    children: /*#__PURE__*/_jsx(StyledUxHeader, {
-      homeLink: homeLink,
-      logo: /*#__PURE__*/_jsx("img", {
-        src: appLogoRect || appLogo,
-        alt: "logo"
-      }),
+  const { navItems, activeId } = parsedNavigation;
+  const _addons = typeof addons === "function" ? (builtInAddons) => addons(builtInAddons, { navigation: parsedNavigation }) : addons;
+  const headerAddons = /* @__PURE__ */ jsx(HeaderAddons, { formattedBlocklet, addons: _addons, sessionManagerProps: sessionManagerProps2 });
+  return /* @__PURE__ */ jsx(OverridableThemeProvider, { theme: themeOverrides, children: /* @__PURE__ */ jsx(
+    StyledUxHeader,
+    {
+      homeLink,
+      logo: /* @__PURE__ */ jsx("img", { src: appLogoRect || appLogo, alt: "logo" }),
       addons: headerAddons,
       ...rest,
       $bgcolor: theme?.background?.header,
-      children: !navItems?.length ? null : ({
-        isMobile
-      }) => /*#__PURE__*/_jsx(NavMenu, {
-        mode: isMobile ? 'inline' : 'horizontal',
-        activeId: activeId,
-        items: navItems,
-        className: "header-nav",
-        bgColor: "transparent",
-        textColor: "#777"
-      })
-    })
-  });
+      children: !navItems?.length ? null : ({ isMobile }) => /* @__PURE__ */ jsx(
+        NavMenu,
+        {
+          mode: isMobile ? "inline" : "horizontal",
+          activeId,
+          items: navItems,
+          className: "header-nav",
+          bgColor: "transparent",
+          textColor: "#777"
+        }
+      )
+    }
+  ) });
 }
 Header.propTypes = {
   meta: blockletMetaProps,
@@ -155,15 +112,13 @@ Header.defaultProps = {
   theme: null
 };
 const StyledUxHeader = styled(ResponsiveHeader)`
-  ${({
-  $bgcolor
-}) => `background-color: ${$bgcolor || '#fff'};`}
-  font-family: Lato, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
+  ${({ $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;
   }
-  ${props => props.theme.breakpoints.down('md')} {
+  ${(props) => props.theme.breakpoints.down("md")} {
     .header-logo {
       min-width: 32px;
     }
@@ -191,4 +146,4 @@ const StyledUxHeader = styled(ResponsiveHeader)`
 `;
 export default withErrorBoundary(Header, {
   FallbackComponent: ErrorFallback
-});
+});

package/es/Icon/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Icon 组件, 基于 mui Avatar 组件扩展对 iconify 的支持
+ */
+declare function Icon({ icon, size, sx, ...rest }: {
+    [x: string]: any;
+    icon: any;
+    size: any;
+    sx: any;
+}): import("react").JSX.Element | null;
+declare namespace Icon {
+    namespace propTypes {
+        let icon: any;
+        let size: any;
+        let sx: any;
+    }
+    namespace defaultProps {
+        let size_1: null;
+        export { size_1 as size };
+        let sx_1: null;
+        export { sx_1 as sx };
+    }
+}
+export default Icon;