@blocklet/ui-react 2.9.91 → 2.10.0

package/es/Dashboard/index.d.ts

@@ -1,40 +0,0 @@
-export default Dashboard;
-/**
- * 专门用于 (composable) blocklet 的 Dashboard 组件, 解析 blocklet meta 中 section 为 dashboard 的 navigation 数据, 渲染一个 UX Dashboard
- */
-declare function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessionManagerProps, links, ...rest }: {
-    [x: string]: any;
-    meta: any;
-    fallbackUrl: any;
-    invalidPathFallback: any;
-    headerAddons: any;
-    sessionManagerProps: any;
-    links: any;
-}): import("react").JSX.Element | null;
-declare namespace Dashboard {
-    namespace propTypes {
-        export { BlockletMetaProps as meta };
-        export let fallbackUrl: any;
-        export let invalidPathFallback: any;
-        export let headerAddons: any;
-        export { SessionManagerProps as sessionManagerProps };
-        export let links: any;
-    }
-    namespace defaultProps {
-        export let meta: {};
-        export { publicPath as fallbackUrl };
-        let invalidPathFallback_1: null;
-        export { invalidPathFallback_1 as invalidPathFallback };
-        let headerAddons_1: undefined;
-        export { headerAddons_1 as headerAddons };
-        export namespace sessionManagerProps {
-            let showRole: boolean;
-            function onLogout(): void;
-        }
-        let links_1: never[];
-        export { links_1 as links };
-    }
-}
-import { BlockletMetaProps } from '../types';
-import { SessionManagerProps } from '../types';
-import { publicPath } from '../blocklets';

package/es/Dashboard/index.js

@@ -1,118 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import "iconify-icon";
-import { useMemo, useLayoutEffect, useContext } from "react";
-import PropTypes from "prop-types";
-import { SessionContext } from "@arcblock/did-connect/lib/Session";
-import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import UxDashboard from "@arcblock/ux/lib/Layout/dashboard";
-import { BlockletMetaProps, SessionManagerProps } from "../types.js";
-import { mapRecursive, flatRecursive, matchPaths } from "../utils.js";
-import { publicPath, formatBlockletInfo, getLocalizedNavigation, filterNavByRole } from "../blocklets.js";
-import HeaderAddons from "../common/header-addons.js";
-import { useWalletHiddenTopbar } from "../common/wallet-hidden-topbar.js";
-function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessionManagerProps, links, ...rest }) {
-  useWalletHiddenTopbar();
-  const sessionCtx = useContext(SessionContext);
-  const user = sessionCtx?.session?.user;
-  const userRole = user?.role;
-  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]);
-  const { localizedNav, flattened, matchedIndex } = useMemo(() => {
-    let localizedNav2 = getLocalizedNavigation(formattedBlocklet?.navigation?.dashboard, locale) || [];
-    localizedNav2 = filterNavByRole(localizedNav2, userRole);
-    localizedNav2 = mapRecursive(
-      localizedNav2,
-      (item) => ({
-        title: item.title,
-        url: item.link,
-        icon: item.icon ? /* @__PURE__ */ jsx("iconify-icon", { height: "100%", width: "100%", icon: item.icon }) : null,
-        // https://github.com/ArcBlock/ux/issues/755#issuecomment-1208692620
-        external: true,
-        children: item.items
-      }),
-      "items"
-    );
-    const flattened2 = flatRecursive(localizedNav2).filter((item) => !!item.url);
-    const matchedIndex2 = matchPaths(flattened2.map((item) => item.url));
-    if (matchedIndex2 !== -1) {
-      flattened2[matchedIndex2].active = true;
-    }
-    return { localizedNav: localizedNav2, flattened: flattened2, matchedIndex: matchedIndex2 };
-  }, [formattedBlocklet, locale, userRole]);
-  const allLinks = typeof links === "function" ? links(localizedNav) : [...localizedNav, ...links];
-  useLayoutEffect(() => {
-    if (!!user && !flattened?.length && fallbackUrl) {
-      window.location.href = fallbackUrl;
-    }
-  }, [fallbackUrl]);
-  useLayoutEffect(() => {
-    if (!!user && !!flattened?.length && matchedIndex === -1) {
-      if (invalidPathFallback) {
-        invalidPathFallback();
-      } else {
-      }
-    }
-  }, [invalidPathFallback, flattened, matchedIndex]);
-  if (!formattedBlocklet.appName) {
-    return null;
-  }
-  const { appLogo, appLogoRect, appName } = formattedBlocklet;
-  const _headerAddons = /* @__PURE__ */ jsx(
-    HeaderAddons,
-    {
-      formattedBlocklet,
-      addons: headerAddons,
-      sessionManagerProps
-    }
-  );
-  return /* @__PURE__ */ jsx(
-    UxDashboard,
-    {
-      title: appName,
-      fullWidth: true,
-      sidebarWidth: 128,
-      legacy: false,
-      links: allLinks,
-      ...rest,
-      headerProps: {
-        homeLink: publicPath,
-        logo: /* @__PURE__ */ jsx("img", { src: appLogoRect || appLogo, alt: "logo" }),
-        addons: _headerAddons,
-        ...rest.headerProps
-      }
-    }
-  );
-}
-Dashboard.propTypes = {
-  meta: BlockletMetaProps,
-  // 如果当前用户没有权限访问任何导航菜单, 则自动跳转到 fallbackUrl, 默认值为 publicPath, 设置为 null 表示禁用自动跳转
-  fallbackUrl: PropTypes.string,
-  // 当前路径未匹配任何 nav links 时的 fallback, 默认行为跳转到首个可用的 nav link
-  invalidPathFallback: PropTypes.func,
-  headerAddons: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-  sessionManagerProps: SessionManagerProps,
-  links: PropTypes.oneOfType([PropTypes.array, PropTypes.func])
-};
-Dashboard.defaultProps = {
-  meta: {},
-  fallbackUrl: publicPath,
-  invalidPathFallback: null,
-  headerAddons: void 0,
-  sessionManagerProps: {
-    showRole: true,
-    // dashboard 默认退出登录行为: 跳转到 (root) blocklet 首页
-    onLogout: () => {
-      window.location.href = publicPath;
-    }
-  },
-  links: []
-};
-export default Dashboard;

package/es/Footer/brand.d.ts

@@ -1,22 +0,0 @@
-declare function Brand({ name, logo, description, ...rest }: {
-    [x: string]: any;
-    name: any;
-    logo: any;
-    description: any;
-}): import("react").JSX.Element | null;
-declare namespace Brand {
-    namespace propTypes {
-        let name: any;
-        let logo: any;
-        let description: any;
-    }
-    namespace defaultProps {
-        let name_1: string;
-        export { name_1 as name };
-        let logo_1: string;
-        export { logo_1 as logo };
-        let description_1: string;
-        export { description_1 as description };
-    }
-}
-export default Brand;

package/es/Footer/brand.js

@@ -1,73 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { isValidElement } from "react";
-import PropTypes from "prop-types";
-import { styled } from "@arcblock/ux/lib/Theme";
-export default function Brand({ name, logo, description, ...rest }) {
-  if (!name && !logo && !description) {
-    return null;
-  }
-  const logoElement = isValidElement(logo) ? logo : /* @__PURE__ */ jsx("img", { src: logo, alt: name });
-  return /* @__PURE__ */ jsxs(Root, { ...rest, children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      logo && /* @__PURE__ */ jsx("div", { className: "footer-brand-logo", children: logoElement }),
-      name && /* @__PURE__ */ jsx("div", { className: "footer-brand-name", children: name })
-    ] }),
-    description && /* @__PURE__ */ jsx("div", { className: "footer-brand-desc", children: description })
-  ] });
-}
-Brand.propTypes = {
-  name: PropTypes.node,
-  logo: PropTypes.node,
-  description: PropTypes.string
-};
-Brand.defaultProps = {
-  name: "",
-  logo: "",
-  description: ""
-};
-const Root = styled("div")`
-  display: flex;
-  flex-direction: column;
-  font-size: 14px;
-  a {
-    text-decoration: none;
-    color: inherit;
-  }
-  > div:first-of-type {
-    display: flex;
-    align-items: center;
-  }
-  .footer-brand-logo {
-    display: flex;
-    align-items: center;
-    margin-right: 16px;
-    line-height: 1;
-    img,
-    svg {
-      width: auto;
-      height: 44px;
-      max-height: 44px;
-    }
-  }
-  .footer-brand-name {
-    font-size: 16px;
-    font-weight: bold;
-  }
-  .footer-brand-desc {
-    margin-top: 16px;
-  }
-
-  ${(props) => props.theme.breakpoints.down("sm")} {
-    width: auto;
-  }
-
-  ${(props) => props.theme.breakpoints.down("md")} {
-    .footer-brand-logo {
-      img,
-      svg {
-        height: 32px;
-        max-height: 32px;
-      }
-    }
-  }
-`;

package/es/Footer/copyright.d.ts

@@ -1,18 +0,0 @@
-declare function Copyright({ owner, year, ...rest }: {
-    [x: string]: any;
-    owner: any;
-    year: any;
-}): import("react").JSX.Element;
-declare namespace Copyright {
-    namespace propTypes {
-        let owner: any;
-        let year: any;
-    }
-    namespace defaultProps {
-        let owner_1: string;
-        export { owner_1 as owner };
-        let year_1: string;
-        export { year_1 as year };
-    }
-}
-export default Copyright;

package/es/Footer/copyright.js

@@ -1,25 +0,0 @@
-import { jsxs } from "react/jsx-runtime";
-import { styled } from "@arcblock/ux/lib/Theme";
-import PropTypes from "prop-types";
-export default function Copyright({ owner, year, ...rest }) {
-  return /* @__PURE__ */ jsxs(Root, { ...rest, children: [
-    "Copyright \xA9 ",
-    year,
-    " ",
-    owner
-  ] });
-}
-Copyright.propTypes = {
-  owner: PropTypes.string,
-  year: PropTypes.string
-};
-Copyright.defaultProps = {
-  owner: "ArcBlock",
-  year: `${(/* @__PURE__ */ new Date()).getFullYear()}`
-};
-const Root = styled("p")`
-  display: flex;
-  align-items: center;
-  margin: 0;
-  font-size: 13px;
-`;

package/es/Footer/index.d.ts

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

package/es/Footer/index.js

@@ -1,82 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import PropTypes from "prop-types";
-import { styled } from "@arcblock/ux/lib/Theme";
-import { withErrorBoundary } from "react-error-boundary";
-import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { ErrorFallback } from "@arcblock/ux/lib/ErrorBoundary";
-import { temp as colors } from "@arcblock/ux/lib/Colors";
-import omit from "lodash/omit";
-import OverridableThemeProvider from "../common/overridable-theme-provider.js";
-import InternalFooter from "./internal-footer.js";
-import { mapRecursive } from "../utils.js";
-import { formatBlockletInfo, getLocalizedNavigation } from "../blocklets.js";
-import { BlockletMetaProps } from "../types.js";
-function Footer({ meta, theme: themeOverrides, ...rest }) {
-  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, appName, appDescription, description, theme, copyright } = formattedBlocklet;
-  const localized = {
-    footerNav: getLocalizedNavigation(formattedBlocklet?.navigation?.footer, locale) || [],
-    socialMedia: getLocalizedNavigation(formattedBlocklet?.navigation?.social, locale) || [],
-    links: getLocalizedNavigation(formattedBlocklet?.navigation?.bottom, locale) || []
-  };
-  const props = {
-    brand: {
-      name: appName,
-      description: appDescription || description,
-      logo: appLogoRect || appLogo
-    },
-    navigation: mapRecursive(
-      localized.footerNav,
-      (item) => ({
-        ...item,
-        label: item.title,
-        link: item.link
-      }),
-      "items"
-    ),
-    copyright,
-    socialMedia: localized.socialMedia,
-    links: localized.links.map((item) => ({ ...item, label: item.title }))
-  };
-  return /* @__PURE__ */ jsx(OverridableThemeProvider, { theme: themeOverrides, children: /* @__PURE__ */ jsx(
-    StyledInternalFooter,
-    {
-      ...props,
-      ...omit(rest, ["bordered"]),
-      $bordered: rest?.bordered,
-      $bgcolor: theme?.background?.footer
-    }
-  ) });
-}
-Footer.propTypes = {
-  meta: BlockletMetaProps,
-  // 允许覆盖 footer 内置的 theme
-  theme: PropTypes.object
-};
-Footer.defaultProps = {
-  meta: {},
-  theme: null
-};
-const StyledInternalFooter = styled(InternalFooter)`
-  ${({ $bordered }) => `border-top: 1px solid ${$bordered ? colors.strokeSep : "#eee"};`}
-  color: ${(props) => props.theme.palette.grey[600]};
-  ${({ $bgcolor }) => $bgcolor && `background-color: ${$bgcolor};`}
-  font-family: Inter, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-`;
-export default withErrorBoundary(Footer, {
-  FallbackComponent: ErrorFallback
-});

package/es/Footer/internal-footer.d.ts

@@ -1,29 +0,0 @@
-export default InternalFooter;
-/**
- * 通用的内部 footer 组件, 定义并渲染常见的几种 footer 元素: brand/navigation/social medial 等
- */
-declare function InternalFooter(props: any): import("react").JSX.Element;
-declare namespace InternalFooter {
-    namespace propTypes {
-        let brand: any;
-        let navigation: any;
-        let socialMedia: any;
-        let copyright: any;
-        let links: any;
-        let layout: any;
-    }
-    namespace defaultProps {
-        let brand_1: null;
-        export { brand_1 as brand };
-        let navigation_1: null;
-        export { navigation_1 as navigation };
-        let copyright_1: null;
-        export { copyright_1 as copyright };
-        let socialMedia_1: null;
-        export { socialMedia_1 as socialMedia };
-        let links_1: null;
-        export { links_1 as links };
-        let layout_1: string;
-        export { layout_1 as layout };
-    }
-}

package/es/Footer/internal-footer.js

@@ -1,117 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import PropTypes from "prop-types";
-import Box from "@mui/material/Box";
-import Brand from "./brand.js";
-import Links from "./links.js";
-import SocialMedia from "./social-media.js";
-import Copyright from "./copyright.js";
-import StandardLayout from "./layout/standard.js";
-import PlainLayout from "./layout/plain.js";
-const layouts = [
-  {
-    name: "plain",
-    // navigation 数据为空时, 使用简单布局
-    support: (_, data) => !data.navigation?.length && !data.socialMedia?.length,
-    component: PlainLayout
-  },
-  {
-    name: "standard",
-    // 默认标准布局
-    support: () => true,
-    component: StandardLayout
-  }
-];
-const layoutsKeyByName = layouts.reduce((acc, cur) => ({ ...acc, [cur.name]: cur }), {});
-function InternalFooter(props) {
-  const { brand, navigation, socialMedia, copyright, links, layout, ...rest } = props;
-  const renderBrand = () => {
-    return brand ? /* @__PURE__ */ jsx(Brand, { ...brand }) : null;
-  };
-  const renderNavigation = () => {
-    return navigation?.length ? /* @__PURE__ */ jsx(Links, { links: navigation }) : null;
-  };
-  const renderSocialMedia = () => {
-    return socialMedia?.length ? /* @__PURE__ */ jsx(SocialMedia, { items: socialMedia }) : null;
-  };
-  const renderCopyright = () => {
-    const copyrightOwner = copyright?.owner || brand?.name;
-    if (!copyrightOwner) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx(Copyright, { owner: copyrightOwner, year: copyright?.year || void 0 });
-  };
-  const renderLinks = () => {
-    return links?.length ? /* @__PURE__ */ jsx(Links, { flowLayout: true, links }) : null;
-  };
-  const elements = {
-    brand: renderBrand(),
-    navigation: renderNavigation(),
-    socialMedia: renderSocialMedia(),
-    copyright: renderCopyright(),
-    links: renderLinks()
-  };
-  let LayoutComponent = null;
-  if (layout === "auto") {
-    LayoutComponent = layouts.find((item) => item.support(elements, props)).component;
-  } else {
-    LayoutComponent = layoutsKeyByName[layout]?.component;
-  }
-  if (!LayoutComponent) {
-    throw new Error(`layout ${layout} is not supported.`);
-  }
-  return /* @__PURE__ */ jsxs(Box, { position: "relative", ...rest, children: [
-    /* @__PURE__ */ jsx(LayoutComponent, { elements, data: props }),
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        position: "absolute",
-        right: 16,
-        bottom: 0,
-        fontSize: 12,
-        sx: { color: "transparent", "::selection": { background: "#000", color: "#fff" } },
-        children: window?.blocklet?.version
-      }
-    )
-  ] });
-}
-InternalFooter.propTypes = {
-  brand: PropTypes.shape({
-    name: PropTypes.node,
-    description: PropTypes.string,
-    logo: PropTypes.node
-  }),
-  navigation: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.node,
-      link: PropTypes.string
-    })
-  ),
-  socialMedia: PropTypes.arrayOf(
-    PropTypes.shape({
-      icon: PropTypes.node,
-      link: PropTypes.string
-    })
-  ),
-  copyright: PropTypes.shape({
-    owner: PropTypes.string,
-    year: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-  }),
-  // privacy/legal 等链接, 常放于 footer 右下侧或最底部
-  links: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.node,
-      link: PropTypes.string
-    })
-  ),
-  // 可显式指定 footer layout, 默认根据内容自动决定 layout
-  layout: PropTypes.oneOf(["auto", "standard", "plain"])
-};
-InternalFooter.defaultProps = {
-  brand: null,
-  navigation: null,
-  copyright: null,
-  socialMedia: null,
-  links: null,
-  layout: "auto"
-};
-export default InternalFooter;

package/es/Footer/layout/plain.d.ts

@@ -1,15 +0,0 @@
-export default PlainLayout;
-/**
- * footer plain layout
- */
-declare function PlainLayout({ elements, data, ...rest }: {
-    [x: string]: any;
-    elements: any;
-    data: any;
-}): import("react").JSX.Element;
-declare namespace PlainLayout {
-    namespace propTypes {
-        let elements: any;
-        let data: any;
-    }
-}

package/es/Footer/layout/plain.js

@@ -1,39 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { cloneElement } from "react";
-import PropTypes from "prop-types";
-import Container from "@mui/material/Container";
-import { styled } from "@arcblock/ux/lib/Theme";
-import Row from "./row.js";
-function PlainLayout({ elements, data, ...rest }) {
-  return /* @__PURE__ */ jsx(Root, { ...rest, children: /* @__PURE__ */ jsxs(Container, { className: "plain-layout-container", children: [
-    !!data.links && /* @__PURE__ */ jsxs(Row, { sx: { width: 1 }, autoCenter: true, children: [
-      elements.copyright,
-      elements.links
-    ] }),
-    !data.links && /* @__PURE__ */ jsxs(Fragment, { children: [
-      cloneElement(elements.brand, { name: null, description: null }),
-      elements.copyright
-    ] })
-  ] }) });
-}
-PlainLayout.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: 24px 0;
-  .plain-layout-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-`;
-export default PlainLayout;

package/es/Footer/layout/row.d.ts

@@ -1,18 +0,0 @@
-declare function Row({ children, autoCenter, ...rest }: {
-    [x: string]: any;
-    children: any;
-    autoCenter: any;
-}): import("react").JSX.Element | null;
-declare namespace Row {
-    namespace propTypes {
-        let children: any;
-        let autoCenter: any;
-    }
-    namespace defaultProps {
-        let children_1: null;
-        export { children_1 as children };
-        let autoCenter_1: boolean;
-        export { autoCenter_1 as autoCenter };
-    }
-}
-export default Row;

package/es/Footer/layout/row.js

@@ -1,41 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import PropTypes from "prop-types";
-import Box from "@mui/material/Box";
-import { styled } from "@arcblock/ux/lib/Theme";
-import clsx from "clsx";
-export default function Row({ children, autoCenter, ...rest }) {
-  if (!children) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(RowRoot, { ...rest, className: clsx(rest.className, { "footer-row-auto-center": autoCenter }), children });
-}
-Row.propTypes = {
-  children: PropTypes.any,
-  autoCenter: PropTypes.bool
-};
-Row.defaultProps = {
-  children: null,
-  autoCenter: false
-};
-const RowRoot = styled(Box)`
-  display: flex;
-  justify-content: space-between;
-  & + & {
-    margin-top: 24px;
-  }
-  &.footer-row-auto-center > *:only-child {
-    margin: 0 auto;
-  }
-
-  ${(props) => props.theme.breakpoints.down("md")} {
-    align-items: stretch;
-    flex-direction: column;
-    gap: 16px;
-    > * {
-      flex: 1 0 100%;
-    }
-    &.footer-row-auto-center > * {
-      margin: 0 auto;
-    }
-  }
-`;

package/es/Footer/layout/standard.d.ts

@@ -1,15 +0,0 @@
-export default StandardLayout;
-/**
- * footer standard layout
- */
-declare function StandardLayout({ elements, data, ...rest }: {
-    [x: string]: any;
-    elements: any;
-    data: any;
-}): import("react").JSX.Element;
-declare namespace StandardLayout {
-    namespace propTypes {
-        let elements: any;
-        let data: any;
-    }
-}