@blocklet/ui-react 2.9.91 → 2.10.0

package/es/Footer/layout/standard.js

@@ -1,53 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import PropTypes from "prop-types";
-import Box from "@mui/material/Box";
-import Container from "@mui/material/Container";
-import { styled } from "@arcblock/ux/lib/Theme";
-import Row from "./row.js";
-function StandardLayout({ elements, data, ...rest }) {
-  return /* @__PURE__ */ jsx(Root, { ...rest, children: /* @__PURE__ */ jsxs(Container, { children: [
-    /* @__PURE__ */ jsxs(
-      Box,
-      {
-        sx: {
-          display: "flex",
-          flexDirection: { xs: "column", md: "row" },
-          justifyContent: "space-between",
-          alignItems: { xs: "center", md: "space-between" },
-          gap: 2,
-          pb: 3
-        },
-        children: [
-          /* @__PURE__ */ jsx(Box, { children: elements.brand }),
-          /* @__PURE__ */ jsx(Box, { lineHeight: 1, children: elements.socialMedia })
-        ]
-      }
-    ),
-    !!data.navigation?.length && /* @__PURE__ */ jsx(Box, { sx: { mb: 6, pt: 3, borderTop: 1, borderColor: "grey.200" }, children: elements.navigation }),
-    /* @__PURE__ */ jsxs(Row, { sx: { pt: 3, borderTop: 1, borderColor: "grey.200" }, autoCenter: true, children: [
-      elements.copyright,
-      elements.links
-    ] })
-  ] }) });
-}
-StandardLayout.propTypes = {
-  elements: PropTypes.shape({
-    brand: PropTypes.element,
-    navigation: PropTypes.element,
-    socialMedia: PropTypes.element,
-    copyright: PropTypes.element,
-    links: PropTypes.element
-  }).isRequired,
-  data: PropTypes.object.isRequired
-};
-const Root = styled("div")`
-  padding: 32px 0 24px 0;
-  .footer-brand-name,
-  .footer-brand-desc {
-    display: none;
-  }
-  && .footer-brand-logo {
-    margin-right: 0;
-  }
-`;
-export default StandardLayout;

package/es/Footer/links.d.ts

@@ -1,22 +0,0 @@
-/**
- * footer 中的 links (支持分组, 最多支持 2 级)
- * TODO: dark/light theme
- */
-declare function Links({ links, flowLayout, ...rest }: {
-    [x: string]: any;
-    links: any;
-    flowLayout: any;
-}): import("react").JSX.Element | null;
-declare namespace Links {
-    namespace propTypes {
-        let links: any;
-        let flowLayout: any;
-    }
-    namespace defaultProps {
-        let links_1: never[];
-        export { links_1 as links };
-        let flowLayout_1: boolean;
-        export { flowLayout_1 as flowLayout };
-    }
-}
-export default Links;

package/es/Footer/links.js

@@ -1,207 +0,0 @@
-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 }) => {
-    let result = label;
-    if (render) {
-      result = render({ label, link, props });
-    } else if (link) {
-      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, 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
-          );
-        })
-      ] })
-    }
-  );
-}
-Links.propTypes = {
-  links: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string,
-      link: PropTypes.string,
-      render: PropTypes.func,
-      props: PropTypes.object
-    })
-  ),
-  // 流动布局, 简单的从左到右排列
-  flowLayout: PropTypes.bool
-};
-Links.defaultProps = {
-  links: [],
-  flowLayout: false
-};
-const Root = styled("div")`
-  overflow: hidden;
-  color: ${(props) => props.theme.palette.grey[600]};
-  .footer-links-inner {
-    display: flex;
-    justify-content: space-between;
-    margin: 0 -8px;
-  }
-  .footer-links-group,
-  .footer-links-sub {
-    display: flex;
-    flex-direction: column;
-  }
-  .footer-links-sub .footer-links-item {
-    color: ${(props) => props.theme.palette.grey[900]};
-  }
-  .footer-links-group-expand-icon {
-    display: none;
-    position: absolute;
-    right: 16px;
-    top: 50%;
-    transform: translate(0, -50%);
-    line-height: 1;
-    svg {
-      width: auto;
-      height: 0.75em;
-    }
-  }
-  .footer-links-item {
-    display: inline-flex;
-    align-items: center;
-    position: relative;
-    padding: 4px 8px;
-    font-size: 14px;
-  }
-  &.footer-links--grouped {
-    .footer-links-group {
-      > .footer-links-item {
-        font-weight: bold;
-      }
-      .footer-links-sub {
-        margin-top: 8px;
-      }
-    }
-  }
-  a {
-    display: inline-block;
-    max-width: 150px;
-    color: inherit;
-    text-decoration: none;
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  &.footer-links--flow {
-    display: inline-flex;
-    .footer-links-inner {
-      justify-content: center;
-      flex-wrap: wrap;
-      margin: 0 -8px;
-      .footer-links-item {
-        padding: 0 8px;
-      }
-      .footer-links-item + .footer-links-item::before {
-        content: '';
-        position: absolute;
-        left: 0;
-        top: 50%;
-        transform: translate(0, -50%);
-        height: 1em;
-        border-left: 1px solid ${(props) => props.theme.palette.grey[400]};
-      }
-    }
-  }
-
-  ${(props) => props.theme.breakpoints.down("md")} {
-    .footer-links-inner {
-      flex-direction: column;
-      margin: 0;
-    }
-    .footer-links-sub {
-      display: none;
-    }
-    .footer-links-group {
-      position: relative;
-      padding: 12px 0;
-      .footer-links-item .footer-links-group-expand-icon {
-        display: inline-block;
-      }
-    }
-    .footer-links-group + .footer-links-group {
-      border-top: 1px solid ${(props) => props.theme.palette.grey[200]};
-    }
-    .footer-links-group--active {
-      .footer-links-sub {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        .footer-links-item {
-          flex: 0 0 50%;
-        }
-      }
-    }
-    .footer-links-item {
-      padding-left: 0;
-      padding-right: 0;
-      font-size: 13px;
-    }
-    &.footer-links--grouped {
-      .footer-links-group {
-        > .footer-links-item {
-          font-size: 14px;
-        }
-      }
-    }
-
-    &.footer-links--flow {
-      .footer-links-inner {
-        flex-direction: row;
-      }
-    }
-  }
-`;

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

@@ -1,14 +0,0 @@
-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 +0,0 @@
-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",
-      {
-        href: item.link,
-        target: "_blank",
-        "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
-    );
-  }) });
-}
-SocialMedia.propTypes = {
-  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")`
-  display: inline-flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: 20px;
-  a {
-    color: ${(props) => props.theme.palette.grey[400]};
-    text-decoration: none;
-    &:hover {
-      color: ${(props) => props.theme.palette.primary.light};
-    }
-  }
-  ${(props) => props.theme.breakpoints.down("md")} {
-    gap: 12px;
-  }
-`;

package/es/Header/index.d.ts

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

package/es/Header/index.js

@@ -1,155 +0,0 @@
-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 };
-  }
-  let counter = 1;
-  const parseItem = (item) => {
-    const icon = item.icon ? /* @__PURE__ */ jsx(Icon, { icon: item.icon }) : null;
-    if (item.items) {
-      return {
-        id: `${counter++}`,
-        label: item.title,
-        icon,
-        children: item.items
-      };
-    }
-    let props = {};
-    if (item.link?.startsWith("http://") || item.link?.startsWith("https://")) {
-      props = {
-        target: "_blank",
-        rel: "noreferrer"
-      };
-    }
-    return {
-      id: `${counter++}`,
-      label: /* @__PURE__ */ jsx("a", { href: item.link, ...props, children: item.title }),
-      icon,
-      link: item.link
-    };
-  };
-  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 }) {
-  useWalletHiddenTopbar();
-  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);
-      return blocklet;
-    }
-  }, [meta]);
-  if (!formattedBlocklet.appName) {
-    return null;
-  }
-  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, addons: _addons, sessionManagerProps });
-  return /* @__PURE__ */ jsx(OverridableThemeProvider, { theme: themeOverrides, children: /* @__PURE__ */ jsx(
-    StyledUxHeader,
-    {
-      homeLink,
-      logo: /* @__PURE__ */ jsx("img", { src: appLogoRect || appLogo, alt: "logo" }),
-      addons: headerAddons,
-      ...omit(rest, ["bordered"]),
-      $bordered: rest?.bordered,
-      $bgcolor: theme?.background?.header,
-      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: BlockletMetaProps,
-  // 需要考虑 定制的 addons 与内置的 连接钱包/选择语言 addons 共存的情况
-  // - PropTypes.func: 可以把自定义 addons 插在 session-manager 或 locale-selector (如果存在的话) 前/中/后
-  // - PropTypes.node: 将 addons 原样传给 UX Header 组件
-  addons: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-  sessionManagerProps: SessionManagerProps,
-  homeLink: PropTypes.string,
-  // 允许覆盖 header 内置的 theme
-  theme: PropTypes.object,
-  hideNavMenu: PropTypes.bool
-};
-Header.defaultProps = {
-  meta: {},
-  addons: null,
-  sessionManagerProps: {
-    showRole: true
-  },
-  homeLink: publicPath,
-  theme: null,
-  hideNavMenu: false
-};
-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.strokeSep};` : ""}
-  ${(props) => props.theme.breakpoints.down("md")} {
-    .header-logo {
-      min-width: 32px;
-    }
-  }
-  .header-nav {
-    .navmenu-sub .navmenu-item {
-      min-width: 80px;
-    }
-  }
-  .header-nav.navmenu--horizontal {
-    .navmenu-root > .navmenu-sub,
-    .navmenu-root > .navmenu-item {
-      padding: 16px 4px;
-
-      .navmenu-sub-container {
-        padding-top: 0;
-      }
-    }
-    .navmenu-item-icon > .MuiAvatar-root,
-    .navmenu-sub-icon > .MuiAvatar-root {
-      width: 20px;
-      height: 20px;
-    }
-  }
-`;
-export default withErrorBoundary(Header, {
-  FallbackComponent: ErrorFallback
-});

package/es/Icon/index.d.ts

@@ -1,23 +0,0 @@
-/**
- * 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;

package/es/Icon/index.js

@@ -1,55 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import "iconify-icon";
-import PropTypes from "prop-types";
-import Avatar from "@mui/material/Avatar";
-import { isUrl, isIconifyString } from "../utils.js";
-export default function Icon({ icon, size, sx, ...rest }) {
-  const _sx = [...Array.isArray(sx) ? sx : [sx]];
-  if (size) {
-    _sx.push({ width: size, height: size });
-  }
-  if (!rest.variant) {
-    _sx.push({
-      "&.MuiAvatar-root": {
-        color: "inherit",
-        fontWeight: "bold",
-        backgroundColor: "transparent",
-        borderRadius: 0
-      },
-      // 无 icon 背景时, svg icon 尺寸与窗口尺寸一致
-      "&.MuiAvatar-root svg": {
-        width: "100%",
-        height: "100%"
-      }
-    });
-  }
-  if (isUrl(icon)) {
-    return /* @__PURE__ */ jsx(Avatar, { as: "span", ...rest, src: icon, sx: _sx });
-  }
-  if (isIconifyString(icon)) {
-    const height = size ? 0.6 * size + 4 : 0;
-    return /* @__PURE__ */ jsx(Avatar, { as: "span", ...rest, sx: _sx, children: /* @__PURE__ */ jsx("iconify-icon", { icon, height: height || void 0 }) });
-  }
-  if (icon && typeof icon === "string") {
-    _sx.push({
-      "&.MuiAvatar-root": {
-        display: "inline-flex",
-        ...size && { fontSize: size - 2 }
-      }
-    });
-    return /* @__PURE__ */ jsx(Avatar, { as: "span", ...rest, sx: _sx, children: Array.from(icon)[0] });
-  }
-  return null;
-}
-Icon.propTypes = {
-  // icon 支持 2 种形式:
-  // 1. iconify icon name: <prefix>:<name>
-  // 2. url
-  icon: PropTypes.string.isRequired,
-  size: PropTypes.number,
-  sx: PropTypes.oneOfType([PropTypes.array, PropTypes.func, PropTypes.object])
-};
-Icon.defaultProps = {
-  size: null,
-  sx: null
-};