@arcblock/ux 2.12.60 → 2.12.62

package/lib/Config/config-provider.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useMemo, useState, useCallback, useEffect } from 'react';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import set from 'lodash/set';
+import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
 import { LocaleProvider, useLocaleContext } from '../Locale/context';
 import ThemeProvider from '../Theme/theme-provider';
 import { createTheme, useTheme } from '../Theme';
@@ -85,7 +86,10 @@ export function ConfigProvider({
       children: /*#__PURE__*/_jsx(ThemeProvider, {
         theme: theme,
         injectFirst: injectFirst,
-        children: children
+        children: /*#__PURE__*/_jsx(EmotionThemeProvider, {
+          theme: theme,
+          children: children
+        })
       })
     })
   });

package/lib/NavMenu/nav-menu.js

@@ -339,6 +339,7 @@ export const Sub = /*#__PURE__*/forwardRef(({
         isOpen
       }) : expandIcon
     }), /*#__PURE__*/_jsx(SubContainer, {
+      inline: isInlineMode,
       ...containerProps,
       children: typeof children === 'function' ? children({
         isOpen

package/lib/NavMenu/products.js

@@ -1562,7 +1562,7 @@ export default function Products({
         icon: /*#__PURE__*/_jsx(BlockletServerSvg, {})
       }, {
         label: /*#__PURE__*/_jsx(Link, {
-          to: `https://www.arcblock.io/content/collections/${locale}/blockchain`,
+          to: `https://www.arcblock.io/content/collections/${locale}/ocap`,
           target: "_blank",
           rel: "noreferrer noopener",
           children: "\u041E\u0421\u0410\u0420"

package/lib/NavMenu/style.js

@@ -45,6 +45,8 @@ export const NavMenuItem = styled('li', {
   transition: theme.transitions.create('color', {
     duration: theme.transitions.duration.standard
   }),
+  '-webkit-tap-highlight-color': 'transparent',
+  // 禁用触摸反馈
   // 间距调整
   '&:first-of-type': {
     paddingLeft: 0

package/lib/NavMenu/sub-container.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 interface SubContainerProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
+    inline?: false | true;
 }
-export declare function SubContainer({ children, ...props }: SubContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function SubContainer({ children, inline, ...props }: SubContainerProps): import("react/jsx-runtime").JSX.Element;
 export default SubContainer;

package/lib/NavMenu/sub-container.js

@@ -6,6 +6,7 @@ const paddingTop = 8;
 // 下拉子菜单容器
 export function SubContainer({
   children,
+  inline = false,
   ...props
 }) {
   const rootRef = useRef(null);
@@ -16,6 +17,14 @@ export function SubContainer({
   const {
     run: updatePosition
   } = useThrottleFn(() => {
+    // 移动端无需计算
+    if (inline) {
+      setPosition(0);
+      if (!positionUpdated) {
+        setPositionUpdated(true);
+      }
+      return;
+    }
     if (!rootRef.current || !contentRef.current) return;
     const anchor = rootRef.current.parentElement; // 以父容器作为参照
     if (!anchor) return;
@@ -91,8 +100,8 @@ export function SubContainer({
     ...props,
     children: /*#__PURE__*/_jsx("div", {
       style: {
-        display: 'inline-block',
-        boxShadow: '0px 40px 60px rgba(0, 0, 0, 0.08)'
+        display: inline ? 'block' : 'inline-block',
+        boxShadow: inline ? 'none' : '0px 40px 60px rgba(0, 0, 0, 0.08)'
       },
       ref: contentRef,
       children: children

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.12.60",
+  "version": "2.12.62",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -70,12 +70,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "c850736bd234c93fdc218bc61cfd70fa90384c26",
+  "gitHead": "30267c6d2ad1fdc5ce8c13c6d2323c8b7c58ee65",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.12.60",
-    "@arcblock/nft-display": "^2.12.60",
-    "@arcblock/react-hooks": "^2.12.60",
+    "@arcblock/icons": "^2.12.62",
+    "@arcblock/nft-display": "^2.12.62",
+    "@arcblock/react-hooks": "^2.12.62",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/roboto": "^5.2.5",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/Config/config-provider.tsx

@@ -2,6 +2,7 @@ import { createContext, useContext, ReactNode, useMemo, useState, useCallback, u
 import type { ThemeOptions } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import set from 'lodash/set';
+import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
 import { LocaleProvider, LocaleProviderProps, useLocaleContext } from '../Locale/context';
 import ThemeProvider, { ThemeProviderProps } from '../Theme/theme-provider';
 import { createTheme, useTheme } from '../Theme';
@@ -113,7 +114,7 @@ export function ConfigProvider({
         onLoadingTranslation={onLoadingTranslation}
         languages={languages}>
         <ThemeProvider theme={theme} injectFirst={injectFirst}>
-          {children}
+          <EmotionThemeProvider theme={theme}>{children}</EmotionThemeProvider>
         </ThemeProvider>
       </LocaleProvider>
     </ConfigContext.Provider>

package/src/NavMenu/nav-menu.tsx

@@ -395,7 +395,7 @@ export const Sub = forwardRef<HTMLLIElement, SubProps>(
             {typeof expandIcon === 'function' ? expandIcon({ isOpen }) : expandIcon}
           </span>
         )}
-        <SubContainer {...containerProps}>
+        <SubContainer inline={isInlineMode} {...containerProps}>
           {typeof children === 'function' ? (
             children({ isOpen }) // 自定义渲染
           ) : (

package/src/NavMenu/products.tsx

@@ -344,7 +344,7 @@ export default function Products({ className, isOpen, ...rest }: ProductsProps)
             {
               label: (
                 <Link
-                  to={`https://www.arcblock.io/content/collections/${locale}/blockchain`}
+                  to={`https://www.arcblock.io/content/collections/${locale}/ocap`}
                   target="_blank"
                   rel="noreferrer noopener">
                   ОСАР

package/src/NavMenu/style.ts

@@ -49,6 +49,7 @@ export const NavMenuItem = styled('li', {
   transition: theme.transitions.create('color', {
     duration: theme.transitions.duration.standard,
   }),
+  '-webkit-tap-highlight-color': 'transparent', // 禁用触摸反馈
   // 间距调整
   '&:first-of-type': {
     paddingLeft: 0,

package/src/NavMenu/sub-container.tsx

@@ -3,12 +3,13 @@ import React, { useEffect, useRef, useState } from 'react';
 
 interface SubContainerProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
+  inline?: false | true;
 }
 
 const paddingTop = 8;
 
 // 下拉子菜单容器
-export function SubContainer({ children, ...props }: SubContainerProps) {
+export function SubContainer({ children, inline = false, ...props }: SubContainerProps) {
   const rootRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
   const [positionUpdated, setPositionUpdated] = useState(false);
@@ -16,6 +17,14 @@ export function SubContainer({ children, ...props }: SubContainerProps) {
 
   const { run: updatePosition } = useThrottleFn(
     () => {
+      // 移动端无需计算
+      if (inline) {
+        setPosition(0);
+        if (!positionUpdated) {
+          setPositionUpdated(true);
+        }
+        return;
+      }
       if (!rootRef.current || !contentRef.current) return;
       const anchor = rootRef.current.parentElement; // 以父容器作为参照
       if (!anchor) return;
@@ -101,7 +110,12 @@ export function SubContainer({ children, ...props }: SubContainerProps) {
         overflow: positionUpdated ? 'visible' : 'hidden',
       }}
       {...props}>
-      <div style={{ display: 'inline-block', boxShadow: '0px 40px 60px rgba(0, 0, 0, 0.08)' }} ref={contentRef}>
+      <div
+        style={{
+          display: inline ? 'block' : 'inline-block',
+          boxShadow: inline ? 'none' : '0px 40px 60px rgba(0, 0, 0, 0.08)',
+        }}
+        ref={contentRef}>
         {children}
       </div>
     </div>