@blocklet/ui-react 2.11.24 → 2.11.25

package/lib/Footer/internal-footer.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import PropTypes from "prop-types";
-import Box from "@mui/material/Box";
+import { Box } from "@mui/material";
+import clsx from "clsx";
 import Brand from "./brand.js";
 import Links from "./links.js";
 import SocialMedia from "./social-media.js";
@@ -59,7 +60,7 @@ function InternalFooter(props) {
   if (!LayoutComponent) {
     throw new Error(`layout ${layout} is not supported.`);
   }
-  return /* @__PURE__ */ jsxs(Box, { position: "relative", ...rest, children: [
+  return /* @__PURE__ */ jsxs(Box, { position: "relative", ...rest, className: clsx("blocklet__footer", rest.className), children: [
     /* @__PURE__ */ jsx(LayoutComponent, { elements, data: props }),
     /* @__PURE__ */ jsx(
       Box,

package/lib/Header/index.js

@@ -8,6 +8,7 @@ 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 clsx from "clsx";
 import Icon from "../Icon/index.js";
 import OverridableThemeProvider from "../common/overridable-theme-provider.js";
 import { mapRecursive, flatRecursive, matchPaths } from "../utils.js";
@@ -91,6 +92,7 @@ function Header({
       ...omit(rest, ["bordered"]),
       $bordered: rest?.bordered,
       $bgcolor: theme?.background?.header,
+      className: clsx("blocklet__header", rest.className),
       children: hideNavMenu || !navItems?.length ? null : ({ isMobile }) => (
         // @ts-ignore
         /* @__PURE__ */ jsx(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.11.24",
+  "version": "2.11.25",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -32,8 +32,8 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/bridge": "^2.11.24",
-    "@arcblock/react-hooks": "^2.11.24",
+    "@arcblock/bridge": "^2.11.25",
+    "@arcblock/react-hooks": "^2.11.25",
     "@blocklet/did-space-react": "^1.0.2",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
@@ -81,5 +81,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "b0e72f64c6407b009f86c4e787cb6c68e02c7538"
+  "gitHead": "1efa61a0f43a73a0b90654ff2db7d116782952a1"
 }

package/src/Footer/internal-footer.jsx

@@ -1,5 +1,7 @@
 import PropTypes from 'prop-types';
-import Box from '@mui/material/Box';
+import { Box } from '@mui/material';
+import clsx from 'clsx';
+
 import Brand from './brand';
 import Links from './links';
 import SocialMedia from './social-media';
@@ -66,8 +68,9 @@ function InternalFooter(props) {
   if (!LayoutComponent) {
     throw new Error(`layout ${layout} is not supported.`);
   }
+
   return (
-    <Box position="relative" {...rest}>
+    <Box position="relative" {...rest} className={clsx('blocklet__footer', rest.className)}>
       <LayoutComponent elements={elements} data={props} />
       <Box
         position="absolute"

package/src/Header/index.tsx

@@ -9,6 +9,7 @@ import { temp as colors } from '@arcblock/ux/lib/Colors';
 import omit from 'lodash/omit';
 import { LiteralUnion } from 'type-fest';
 import type { BoxProps } from '@mui/material';
+import clsx from 'clsx';
 
 import Icon from '../Icon';
 import OverridableThemeProvider from '../common/overridable-theme-provider';
@@ -125,12 +126,14 @@ function Header({
   return (
     <OverridableThemeProvider theme={themeOverrides}>
       <StyledUxHeader
+        // @ts-ignore
         homeLink={homeLink}
         logo={<img src={appLogoRect || appLogo} alt="logo" />}
         addons={headerAddons}
         {...omit(rest, ['bordered'])}
         $bordered={rest?.bordered}
-        $bgcolor={theme?.background?.header}>
+        $bgcolor={theme?.background?.header}
+        className={clsx('blocklet__header', rest.className)}>
         {/* blocklet.yml 没有配置 navigation 时, 则为 children 传入 null, 此时 ResponsiveHeader 会渲染普通的不带 menu 的 Header */}
         {hideNavMenu || !navItems?.length
           ? null