@blocklet/ui-react 2.1.18 → 2.1.21

package/lib/Footer/brand.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Brand;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -13,10 +13,18 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _useTheme = _interopRequireDefault(require("@mui/styles/useTheme"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 const _excluded = ["name", "logo", "description"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -35,19 +43,25 @@ function Brand(_ref) {
     return null;
   }
 
-  const logoElement = /*#__PURE__*/_react.default.isValidElement(logo) ? logo : /*#__PURE__*/_react.default.createElement("img", {
+  const logoElement = /*#__PURE__*/(0, _react.isValidElement)(logo) ? logo : /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
     src: logo,
     alt: name
   });
-  return /*#__PURE__*/_react.default.createElement(Root, Object.assign({}, rest, {
-    $theme: theme
-  }), /*#__PURE__*/_react.default.createElement("div", null, logo && /*#__PURE__*/_react.default.createElement("div", {
-    className: "footer-brand-logo"
-  }, logoElement), name && /*#__PURE__*/_react.default.createElement("div", {
-    className: "footer-brand-name"
-  }, name)), description && /*#__PURE__*/_react.default.createElement("div", {
-    className: "footer-brand-desc"
-  }, description));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, _objectSpread(_objectSpread({}, rest), {}, {
+    $theme: theme,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [logo && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "footer-brand-logo",
+        children: logoElement
+      }), name && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "footer-brand-name",
+        children: name
+      })]
+    }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "footer-brand-desc",
+      children: description
+    })]
+  }));
 }
 
 Brand.propTypes = {

package/lib/Footer/copyright.js

@@ -5,16 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Copyright;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 const _excluded = ["owner", "year"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -26,7 +32,9 @@ function Copyright(_ref) {
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/_react.default.createElement(Root, rest, "Copyright \xA9 ", year, " ", owner);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, _objectSpread(_objectSpread({}, rest), {}, {
+    children: ["Copyright \xA9 ", year, " ", owner]
+  }));
 }
 
 Copyright.propTypes = {

package/lib/Footer/index.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _useTheme = _interopRequireDefault(require("@mui/styles/useTheme"));
@@ -33,6 +31,8 @@ var _utils = require("../utils");
 
 var _types = require("../types");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 const _excluded = ["meta"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -80,34 +80,42 @@ function Footer(_ref) {
     label: item.title,
     link: item.link
   }), 'items');
-  return /*#__PURE__*/_react.default.createElement(Root, Object.assign({}, rest, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, _objectSpread(_objectSpread({}, rest), {}, {
     $bgcolor: blockletTheme === null || blockletTheme === void 0 ? void 0 : blockletTheme.background,
-    $theme: theme
-  }), /*#__PURE__*/_react.default.createElement(_Container.default, null, /*#__PURE__*/_react.default.createElement(_row.default, null, /*#__PURE__*/_react.default.createElement(_Box.default, null, /*#__PURE__*/_react.default.createElement(_brand.default, {
-    name: appName,
-    logo: appLogo,
-    description: appDescription || description
-  }), /*#__PURE__*/_react.default.createElement(_socialMedia.default, {
-    items: socialMedia,
-    style: {
-      marginTop: 24
-    }
-  })), /*#__PURE__*/_react.default.createElement(_links.default, {
-    links: navMenuItems
-  })), /*#__PURE__*/_react.default.createElement(_row.default, {
-    autoCenter: true,
-    style: {
-      marginTop: 72
-    }
-  }, /*#__PURE__*/_react.default.createElement(_copyright.default, {
-    owner: copyrightOwner || appName
-  }), /*#__PURE__*/_react.default.createElement(_links.default, {
-    flowLayout: true,
-    links: footerLinks,
-    style: {
-      color: '#999'
-    }
-  }))));
+    $theme: theme,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Container.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_row.default, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_brand.default, {
+            name: appName,
+            logo: appLogo,
+            description: appDescription || description
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_socialMedia.default, {
+            items: socialMedia,
+            style: {
+              marginTop: 24
+            }
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_links.default, {
+          links: navMenuItems
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_row.default, {
+        autoCenter: true,
+        style: {
+          marginTop: 72
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_copyright.default, {
+          owner: copyrightOwner || appName
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_links.default, {
+          flowLayout: true,
+          links: footerLinks,
+          style: {
+            color: '#999'
+          }
+        })]
+      })]
+    })
+  }));
 }
 
 Footer.propTypes = {

package/lib/Footer/links.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Links;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -15,13 +15,17 @@ var _useTheme = _interopRequireDefault(require("@mui/styles/useTheme"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 const _excluded = ["links", "flowLayout"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
@@ -68,44 +72,50 @@ function Links(_ref) {
         props
       });
     } else if (link) {
-      result = /*#__PURE__*/_react.default.createElement("a", Object.assign({
+      result = /*#__PURE__*/(0, _jsxRuntime.jsx)("a", _objectSpread(_objectSpread({
         href: link
-      }, props), label);
+      }, props), {}, {
+        children: label
+      }));
     }
 
     return result;
   };
 
-  return /*#__PURE__*/_react.default.createElement(Root, Object.assign({}, rest, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, _objectSpread(_objectSpread({}, rest), {}, {
     className: (0, _clsx.default)(rest.className, {
       'footer-links--grouped': isGroupMode,
       'footer-links--flow': flowLayout
     }),
-    $theme: theme
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "footer-links-inner"
-  }, flowLayout && links.map((item, i) => /*#__PURE__*/_react.default.createElement("span", {
-    key: i,
-    className: "footer-links-item"
-  }, renderItem(item))), !flowLayout && links.map((item, i) => {
-    const {
-      items
-    } = item;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      key: i,
-      className: (0, _clsx.default)('footer-links-group', {
-        'footer-links-group--active': i === activeIndex
-      }),
-      onClick: () => setActiveIndex(activeIndex === i ? -1 : i)
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "footer-links-item"
-    }, renderItem(item)), !!(items !== null && items !== void 0 && items.length) && /*#__PURE__*/_react.default.createElement("div", {
-      className: "footer-links-sub"
-    }, items.map((child, j) => /*#__PURE__*/_react.default.createElement("span", {
-      key: j,
-      className: "footer-links-item"
-    }, renderItem(child)))));
-  })));
+    $theme: theme,
+    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;
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _clsx.default)('footer-links-group', {
+            'footer-links-group--active': i === activeIndex
+          }),
+          onClick: () => setActiveIndex(activeIndex === i ? -1 : i),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "footer-links-item",
+            children: renderItem(item)
+          }), !!(items !== null && items !== void 0 && 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);
+      })]
+    })
+  }));
 }
 
 Links.propTypes = {

package/lib/Footer/row.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Row;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -15,10 +13,18 @@ var _useTheme = _interopRequireDefault(require("@mui/styles/useTheme"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 const _excluded = ["children", "autoCenter"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -36,12 +42,13 @@ function Row(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/_react.default.createElement(RowRoot, Object.assign({}, rest, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RowRoot, _objectSpread(_objectSpread({}, rest), {}, {
     className: (0, _clsx.default)(rest.className, {
       'footer-row-auto-center': autoCenter
     }),
-    $theme: theme
-  }), children);
+    $theme: theme,
+    children: children
+  }));
 }
 
 Row.propTypes = {

package/lib/Footer/social-media.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = SocialMedia;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -15,10 +13,18 @@ var _useTheme = _interopRequireDefault(require("@mui/styles/useTheme"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 const _excluded = ["items"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -35,26 +41,28 @@ function SocialMedia(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/_react.default.createElement(Root, rest, items.map((item, i) => {
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line react/no-array-index-key
-      _react.default.createElement("a", {
-        key: i,
-        href: item.link,
-        target: "_blank",
-        rel: "noreferrer"
-      }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-        icon: item.icon,
-        sx: {
-          bgcolor: theme.palette.grey[600],
-          color: '#fff'
-        },
-        size: 44,
-        variant: "rounded",
-        component: "span"
-      }))
-    );
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, _objectSpread(_objectSpread({}, rest), {}, {
+    children: items.map((item, i) => {
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line react/no-array-index-key
+        (0, _jsxRuntime.jsx)("a", {
+          href: item.link,
+          target: "_blank",
+          rel: "noreferrer",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            icon: item.icon,
+            sx: {
+              bgcolor: theme.palette.grey[600],
+              color: '#fff'
+            },
+            size: 44,
+            variant: "rounded",
+            component: "span"
+          })
+        }, i)
+      );
+    })
   }));
 }
 

package/lib/Header/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -35,6 +35,8 @@ require("@iconify/iconify");
 
 var _types = require("../types");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 const _excluded = ["meta", "addons", "sessionManagerProps"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -43,6 +45,12 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 const muiTheme = (0, _Theme.create)();
 
 const isLinkActive = link => {
@@ -58,7 +66,7 @@ const parseNavigation = navigation => {
   const parseItem = item => {
     var _item$link, _item$link2;
 
-    const icon = item.icon ? /*#__PURE__*/_react.default.createElement("span", {
+    const icon = item.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: "iconify",
       "data-icon": item.icon
     }) : null;
@@ -81,9 +89,11 @@ const parseNavigation = navigation => {
     }
 
     return {
-      label: /*#__PURE__*/_react.default.createElement("a", Object.assign({
+      label: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", _objectSpread(_objectSpread({
         href: item.link
-      }, props), item.title),
+      }, props), {}, {
+        children: item.title
+      })),
       active: isLinkActive(item.link),
       icon
     };
@@ -106,8 +116,7 @@ function Header(_ref) {
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  const sessionInfo = _react.default.useContext(_Session.SessionContext);
-
+  const sessionInfo = (0, _react.useContext)(_Session.SessionContext);
   const {
     locale
   } = (0, _context.useLocaleContext)() || {};
@@ -136,14 +145,14 @@ function Header(_ref) {
     let addonsArray = []; // 启用了多语言并且检测到了 locale context
 
     if (enableLocale && locale) {
-      addonsArray.push( /*#__PURE__*/_react.default.createElement(_selector.default, {
+      addonsArray.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_selector.default, {
         showText: false
       }));
     } // 启用了连接钱包并且检测到了 session context
 
 
     if (enableConnect && sessionInfo) {
-      addonsArray.push( /*#__PURE__*/_react.default.createElement(_SessionManager.default, Object.assign({
+      addonsArray.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_SessionManager.default, _objectSpread({
         session: sessionInfo.session
       }, sessionManagerProps)));
     } // 在内置 addons 基础上定制 addons
@@ -153,37 +162,39 @@ function Header(_ref) {
       addonsArray = addons(addonsArray) || [];
     }
 
-    const addonsFragment = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ...addonsArray);
-
+    const addonsFragment = /*#__PURE__*/(0, _react.createElement)(_react.Fragment, null, ...addonsArray);
     return addonsFragment;
   };
 
-  return /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
-    theme: muiTheme
-  }, /*#__PURE__*/_react.default.createElement(StyledUxHeader, Object.assign({
-    logo: /*#__PURE__*/_react.default.createElement("a", {
-      href: "/"
-    }, /*#__PURE__*/_react.default.createElement("img", {
-      src: appLogo,
-      alt: "logo"
-    })),
-    brand: appName,
-    addons: renderAddons()
-  }, rest, {
-    $bgcolor: theme === null || theme === void 0 ? void 0 : theme.background
-  }), !(navItems !== null && navItems !== void 0 && navItems.length) ? null : _ref2 => {
-    let {
-      isMobile,
-      closeMenu
-    } = _ref2;
-    return /*#__PURE__*/_react.default.createElement(_NavMenu.default, {
-      mode: isMobile ? 'inline' : 'horizontal',
-      items: navItems,
-      onSelected: closeMenu,
-      className: "header-nav",
-      bgColor: "transparent"
-    });
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ThemeProvider, {
+    theme: muiTheme,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledUxHeader, _objectSpread(_objectSpread({
+      logo: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+        href: "/",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: appLogo,
+          alt: "logo"
+        })
+      }),
+      brand: appName,
+      addons: renderAddons()
+    }, rest), {}, {
+      $bgcolor: theme === null || theme === void 0 ? void 0 : theme.background,
+      children: !(navItems !== null && navItems !== void 0 && navItems.length) ? null : _ref2 => {
+        let {
+          isMobile,
+          closeMenu
+        } = _ref2;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavMenu.default, {
+          mode: isMobile ? 'inline' : 'horizontal',
+          items: navItems,
+          onSelected: closeMenu,
+          className: "header-nav",
+          bgColor: "transparent"
+        });
+      }
+    }))
+  });
 }
 
 Header.propTypes = {

package/lib/Icon/index.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Icon;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Avatar = _interopRequireDefault(require("@mui/material/Avatar"));
@@ -15,6 +13,8 @@ require("@iconify/iconify");
 
 var _utils = require("../utils");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 const _excluded = ["icon", "size"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -47,7 +47,7 @@ function Icon(_ref) {
   }
 
   if ((0, _utils.isUrl)(icon)) {
-    return /*#__PURE__*/_react.default.createElement(_Avatar.default, Object.assign({}, rest, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, _objectSpread(_objectSpread({}, rest), {}, {
       src: icon,
       sx: sx
     }));
@@ -56,14 +56,15 @@ function Icon(_ref) {
   if (icon) {
     // y = 0.6 * x + 4
     const iconHeight = size ? 0.6 * size + 4 : 0;
-    return /*#__PURE__*/_react.default.createElement(_Avatar.default, Object.assign({}, rest, {
-      sx: sx
-    }), /*#__PURE__*/_react.default.createElement("span", Object.assign({
-      className: "iconify",
-      "data-icon": icon
-    }, iconHeight && {
-      'data-height': iconHeight
-    })));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, _objectSpread(_objectSpread({}, rest), {}, {
+      sx: sx,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread({
+        className: "iconify",
+        "data-icon": icon
+      }, iconHeight && {
+        'data-height': iconHeight
+      }))
+    }));
   }
 
   return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.1.18",
+  "version": "2.1.21",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -34,8 +34,8 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.1.18",
-    "@arcblock/ux": "^2.1.18",
+    "@arcblock/did-connect": "^2.1.21",
+    "@arcblock/ux": "^2.1.21",
     "@iconify/iconify": "^2.2.1",
     "@mui/material": "^5.6.4",
     "core-js": "^3.6.4",
@@ -57,5 +57,5 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^24.1.0"
   },
-  "gitHead": "5724cf7868e1dcb5d96af8d100f4254546a59442"
+  "gitHead": "ee49a5560e16fa5791cef6ab0cc5930c4f1c2cf5"
 }

package/src/Footer/brand.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import useTheme from '@mui/styles/useTheme';
@@ -9,7 +9,7 @@ export default function Brand({ name, logo, description, ...rest }) {
     return null;
   }
 
-  const logoElement = React.isValidElement(logo) ? logo : <img src={logo} alt={name} />;
+  const logoElement = isValidElement(logo) ? logo : <img src={logo} alt={name} />;
 
   return (
     <Root {...rest} $theme={theme}>
@@ -66,7 +66,7 @@ const Root = styled.div`
     margin-top: 16px;
   }
 
-  ${props => props.$theme.breakpoints.down('sm')} {
+  ${(props) => props.$theme.breakpoints.down('sm')} {
     width: auto;
   }
 `;

package/src/Footer/copyright.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 

package/src/Footer/index.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 import useTheme from '@mui/styles/useTheme';
 import Box from '@mui/material/Box';
@@ -39,7 +38,7 @@ function Footer({ meta, ...rest }) {
   const navMenuItems = mapRecursive(
     // TODO: 需要讨论 blocklet.yml 是否需要专门为 footer navigation 提供配置, 暂时与 header 共用 navigation 配置
     footerNavigation || navigation,
-    item => ({
+    (item) => ({
       ...item,
       label: item.title,
       link: item.link,
@@ -58,8 +57,8 @@ function Footer({ meta, ...rest }) {
           <Links links={navMenuItems} />
         </Row>
         <Row autoCenter style={{ marginTop: 72 }}>
-          {<Copyright owner={copyrightOwner || appName} />}
-          {<Links flowLayout links={footerLinks} style={{ color: '#999' }} />}
+          <Copyright owner={copyrightOwner || appName} />
+          <Links flowLayout links={footerLinks} style={{ color: '#999' }} />
         </Row>
       </Container>
     </Root>
@@ -77,7 +76,7 @@ Footer.defaultProps = {
 const Root = styled.div`
   padding: 48px 0;
   border-top: 1px solid #eee;
-  color: ${props => props.$theme.palette.grey[600]};
+  color: ${(props) => props.$theme.palette.grey[600]};
   ${({ $bgcolor }) => $bgcolor && `background-color: ${$bgcolor};`}
 `;
 

package/src/Footer/links.js

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-array-index-key */
-import React, { useState } from 'react';
+import { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import useTheme from '@mui/styles/useTheme';
@@ -16,7 +16,7 @@ export default function Links({ links, flowLayout, ...rest }) {
     return null;
   }
   // 只要发现一项元素有子元素, 就认为是分组 (大字号突出 group title)
-  const isGroupMode = links.some(item => item.items?.length);
+  const isGroupMode = links.some((item) => item.items?.length);
   const renderItem = ({ label, link, render, props }) => {
     let result = label;
     if (render) {
@@ -94,7 +94,7 @@ Links.defaultProps = {
 
 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;
@@ -144,19 +144,19 @@ const Root = styled.div`
     }
   }
 
-  ${props => props.$theme.breakpoints.down('lg')} {
+  ${(props) => props.$theme.breakpoints.down('lg')} {
     .footer-links-group + .footer-links-group {
       margin-left: 56px;
     }
   }
 
-  ${props => props.$theme.breakpoints.down('lg')} {
+  ${(props) => props.$theme.breakpoints.down('lg')} {
     .footer-links-group + .footer-links-group {
       margin-left: 40px;
     }
   }
 
-  ${props => props.$theme.breakpoints.down('sm')} {
+  ${(props) => props.$theme.breakpoints.down('sm')} {
     .footer-links-inner {
       flex-direction: column;
       margin: 0;
@@ -166,7 +166,7 @@ const Root = styled.div`
     }
     .footer-links-group {
       padding: 12px 0;
-      border-top: 1px solid ${props => props.$theme.palette.grey[200]};
+      border-top: 1px solid ${(props) => props.$theme.palette.grey[200]};
     }
     .footer-links-group + .footer-links-group {
       margin-left: 0;

package/src/Footer/row.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import useTheme from '@mui/styles/useTheme';
@@ -10,10 +9,7 @@ export default function Row({ children, autoCenter, ...rest }) {
     return null;
   }
   return (
-    <RowRoot
-      {...rest}
-      className={clsx(rest.className, { 'footer-row-auto-center': autoCenter })}
-      $theme={theme}>
+    <RowRoot {...rest} className={clsx(rest.className, { 'footer-row-auto-center': autoCenter })} $theme={theme}>
       {children}
     </RowRoot>
   );
@@ -39,7 +35,7 @@ const RowRoot = styled.div`
     margin: 0 auto;
   }
 
-  ${props => props.$theme.breakpoints.down('md')} {
+  ${(props) => props.$theme.breakpoints.down('md')} {
     align-items: stretch;
     flex-direction: column;
     gap: 16px;

package/src/Footer/social-media.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import useTheme from '@mui/styles/useTheme';

package/src/Header/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useContext, createElement, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { ThemeProvider } from '@mui/material/styles';
@@ -17,7 +17,7 @@ import { blockletMetaProps, sessionManagerProps } from '../types';
 
 const muiTheme = create();
 
-const isLinkActive = link => {
+const isLinkActive = (link) => {
   if (window.location.pathname === '/') {
     return link === '/';
   }
@@ -25,8 +25,8 @@ const isLinkActive = link => {
 };
 
 // blocklet meta 中的 navigation 数据 => NavMenu 组件的 items
-const parseNavigation = navigation => {
-  const parseItem = item => {
+const parseNavigation = (navigation) => {
+  const parseItem = (item) => {
     const icon = item.icon ? <span className="iconify" data-icon={item.icon} /> : null;
     if (item.items) {
       return {
@@ -61,21 +61,14 @@ const parseNavigation = navigation => {
  */
 // eslint-disable-next-line no-shadow
 function Header({ meta, addons, sessionManagerProps, ...rest }) {
-  const sessionInfo = React.useContext(SessionContext);
+  const sessionInfo = useContext(SessionContext);
   const { locale } = useLocaleContext() || {};
   const blocklet = Object.assign({}, window.blocklet, meta);
   if (!blocklet.appName) {
     return null;
   }
 
-  const {
-    appLogo,
-    appName,
-    theme,
-    navigation = [],
-    enableConnect = true,
-    enableLocale = true,
-  } = blocklet;
+  const { appLogo, appName, theme, navigation = [], enableConnect = true, enableLocale = true } = blocklet;
   const navItems = parseNavigation(navigation);
 
   const renderAddons = () => {
@@ -96,7 +89,7 @@ function Header({ meta, addons, sessionManagerProps, ...rest }) {
     if (typeof addons === 'function') {
       addonsArray = addons(addonsArray) || [];
     }
-    const addonsFragment = React.createElement(React.Fragment, null, ...addonsArray);
+    const addonsFragment = createElement(Fragment, null, ...addonsArray);
     return addonsFragment;
   };
 

package/src/Icon/index.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import Avatar from '@mui/material/Avatar';
 import '@iconify/iconify';
@@ -21,11 +20,7 @@ export default function Icon({ icon, size, ...rest }) {
     const iconHeight = size ? 0.6 * size + 4 : 0;
     return (
       <Avatar {...rest} sx={sx}>
-        <span
-          className="iconify"
-          data-icon={icon}
-          {...(iconHeight && { 'data-height': iconHeight })}
-        />
+        <span className="iconify" data-icon={icon} {...(iconHeight && { 'data-height': iconHeight })} />
       </Avatar>
     );
   }

package/src/utils.js

@@ -1,5 +1,5 @@
 export const mapRecursive = (array, fn, childrenKey = 'children') => {
-  return array.map(item => {
+  return array.map((item) => {
     if (Array.isArray(item[childrenKey])) {
       return fn({
         ...item,
@@ -11,6 +11,6 @@ export const mapRecursive = (array, fn, childrenKey = 'children') => {
 };
 
 // "http://", "https://", "//" 开头的 3 种情况
-export const isUrl = str => {
+export const isUrl = (str) => {
   return /^(https?:)?\/\//.test(str);
 };