@arcblock/ux 2.11.50 → 2.12.1

package/src/NavMenu/images/web3-kit.svg

@@ -0,0 +1,56 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_3296_9286" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="120" height="120">
+<rect width="119.883" height="119.883" fill="white"></rect>
+</mask>
+<g mask="url(#mask0_3296_9286)">
+<path d="M62.0254 14.05C62.0254 11.261 64.2864 9 67.0754 9H91.0629C93.8519 9 96.1129 11.261 96.1129 14.05V74.65C96.1129 77.439 93.8519 79.7 91.0629 79.7H67.0754C64.2864 79.7 62.0254 77.439 62.0254 74.65V14.05Z" fill="url(#paint0_linear_3296_9286)"></path>
+<path d="M24.1504 32.9875C24.1504 30.1985 26.4114 27.9375 29.2004 27.9375H69.6004C72.3894 27.9375 74.6504 30.1985 74.6504 32.9875V74.65C74.6504 77.439 72.3894 79.7 69.6004 79.7H29.2004C26.4114 79.7 24.1504 77.439 24.1504 74.65V32.9875Z" fill="url(#paint1_linear_3296_9286)"></path>
+<g filter="url(#filter0_i_3296_9286)">
+<path d="M16.5752 64.55C16.5752 58.9719 21.0971 54.45 26.6752 54.45H91.0627C96.6408 54.45 101.163 58.9719 101.163 64.55V99.8999C101.163 105.478 96.6408 110 91.0627 110H26.6752C21.0971 110 16.5752 105.478 16.5752 99.8999V64.55Z" fill="url(#paint2_linear_3296_9286)"></path>
+</g>
+<g filter="url(#filter1_i_3296_9286)">
+<path d="M10.2627 55.7125C10.2627 51.5289 13.6541 48.1375 17.8377 48.1375H99.9002C104.084 48.1375 107.475 51.5289 107.475 55.7125V65.8124C107.475 69.996 104.084 73.3874 99.9002 73.3874H17.8377C13.6541 73.3874 10.2627 69.996 10.2627 65.8124V55.7125Z" fill="url(#paint3_linear_3296_9286)"></path>
+</g>
+<circle cx="58.869" cy="87.9063" r="6.94375" fill="#6BADFF"></circle>
+</g>
+<defs>
+<filter id="filter0_i_3296_9286" x="16.5752" y="54.45" width="86.5874" height="57.55" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
+<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect1_innerShadow_3296_9286"></feMorphology>
+<feOffset dx="2" dy="2"></feOffset>
+<feGaussianBlur stdDeviation="3"></feGaussianBlur>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"></feComposite>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"></feColorMatrix>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_3296_9286"></feBlend>
+</filter>
+<filter id="filter1_i_3296_9286" x="10.2627" y="48.1375" width="99.2124" height="27.25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
+<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect1_innerShadow_3296_9286"></feMorphology>
+<feOffset dx="2" dy="2"></feOffset>
+<feGaussianBlur stdDeviation="3"></feGaussianBlur>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"></feComposite>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"></feColorMatrix>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_3296_9286"></feBlend>
+</filter>
+<linearGradient id="paint0_linear_3296_9286" x1="86.0129" y1="9" x2="86.6441" y2="46.875" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF7575"></stop>
+<stop offset="1" stop-color="#C91C1C"></stop>
+</linearGradient>
+<linearGradient id="paint1_linear_3296_9286" x1="49.4004" y1="56.975" x2="49.4004" y2="27.9375" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED7F1A"></stop>
+<stop offset="1" stop-color="#FFE074"></stop>
+</linearGradient>
+<linearGradient id="paint2_linear_3296_9286" x1="16.5752" y1="75.2812" x2="101.163" y2="114.419" gradientUnits="userSpaceOnUse">
+<stop stop-color="#54A0FD"></stop>
+<stop offset="1" stop-color="#136EDE"></stop>
+</linearGradient>
+<linearGradient id="paint3_linear_3296_9286" x1="16.5752" y1="55.7124" x2="58.7889" y2="111.945" gradientUnits="userSpaceOnUse">
+<stop stop-color="#83BAFF"></stop>
+<stop offset="1" stop-color="#2482F6"></stop>
+</linearGradient>
+</defs>
+</svg>

package/src/NavMenu/index.ts

@@ -1,2 +1,3 @@
 // eslint-disable-next-line no-restricted-exports
 export { default } from './nav-menu';
+export { default as Products } from './products';

package/src/NavMenu/nav-menu-context.tsx

@@ -0,0 +1,30 @@
+import { createContext, useContext } from 'react';
+
+export type NavMenuContextValue = {
+  activeId: string | null;
+  openedIds: string[];
+  hiddenItemCount: number;
+  mode: 'horizontal' | 'vertical' | 'inline';
+  textColor: string;
+  activeTextColor: string;
+  bgColor: string;
+  activate: (id: string) => void;
+  open: (id: string) => void;
+  close: (id: string) => void;
+};
+
+const NavMenuContext = createContext<NavMenuContextValue | null>(null);
+
+export function NavMenuProvider({ value, children }: { value: NavMenuContextValue; children: React.ReactNode }) {
+  return <NavMenuContext.Provider value={value}>{children}</NavMenuContext.Provider>;
+}
+
+export function useNavMenuContext() {
+  const context = useContext(NavMenuContext);
+
+  if (!context) {
+    throw new Error('NavMenuContext is not found');
+  }
+
+  return context;
+}

package/src/NavMenu/nav-menu.tsx

@@ -1,29 +1,11 @@
-import {
-  Children,
-  cloneElement,
-  useEffect,
-  createContext,
-  useContext,
-  useRef,
-  forwardRef,
-  useLayoutEffect,
-  isValidElement,
-} from 'react';
+import { Children, cloneElement, useEffect, useRef, forwardRef, useLayoutEffect, isValidElement } from 'react';
 import { type SxProps } from '@mui/material';
 import clsx from 'clsx';
 import { MoreHoriz as MoreHorizIcon, ExpandMore as ExpandMoreIcon, Menu as MenuIcon } from '@mui/icons-material';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import { useCreation, useMemoizedFn, useReactive, useSize, useThrottleFn } from 'ahooks';
-import { HorizontalStyle, InlineStyle } from './style';
-
-const NavMenuContext = createContext<{
-  activeId: string | null;
-  openedIds: string[];
-  hiddenItemCount: number;
-  mode: 'horizontal' | 'vertical' | 'inline';
-  activate: (id: string) => void;
-  open: (id: string) => void;
-  close: (id: string) => void;
-} | null>(null);
+import { NavMenuProvider, useNavMenuContext } from './nav-menu-context';
+import { NavMenuRoot, NavMenuList, NavMenuItem, NavMenuSub, NavMenuSubList } from './style';
 
 // 过滤 children 中的 Item/Sub, 忽略其它类型的 element
 function filterItems(children: React.ReactNode) {
@@ -48,7 +30,9 @@ export type ItemOptions = {
   id?: string;
   icon?: React.ReactNode;
   label?: React.ReactNode;
+  description?: React.ReactNode;
   active?: boolean;
+  variant?: 'default' | 'panel';
   children?: ItemOptions[];
 };
 
@@ -105,11 +89,25 @@ function NavMenu({
     return {
       ...currentState,
       mode,
+      textColor,
+      activeTextColor,
+      bgColor,
       activate,
       open,
       close,
     };
-  }, [currentState.activeId, currentState.hiddenItemCount, currentState.openedIds, mode, activate, open, close]);
+  }, [
+    currentState.activeId,
+    currentState.hiddenItemCount,
+    currentState.openedIds,
+    mode,
+    textColor,
+    activeTextColor,
+    bgColor,
+    activate,
+    open,
+    close,
+  ]);
 
   const navMenuRef = useRef<HTMLUListElement | null>(null);
   const itemRefs = useRef<HTMLElement[]>([]);
@@ -206,6 +204,7 @@ function NavMenu({
           id={item.id}
           icon={item.icon}
           label={item.label}
+          variant={isTopLevel ? 'default' : 'panel'}
           ref={
             isTopLevel
               ? (el) => {
@@ -213,7 +212,11 @@ function NavMenu({
                 }
               : undefined
           }>
-          {item.children.map((childItem, childIndex: number) => renderItem(childItem, childIndex, false))}
+          {typeof item.children === 'function'
+            ? item.children
+            : item.children.map((childItem, childIndex: number) =>
+                renderItem({ ...childItem, variant: 'panel' }, childIndex, false)
+              )}
         </Sub>
       );
     }
@@ -225,7 +228,9 @@ function NavMenu({
         id={item.id}
         icon={item.icon}
         label={item.label}
+        description={item.description}
         active={item.active}
+        variant={item.variant}
         ref={
           isTopLevel
             ? (el) => {
@@ -241,26 +246,19 @@ function NavMenu({
     ? items?.slice(-currentState.hiddenItemCount).map((item, index) => renderItem(item, index))
     : children?.slice(-currentState.hiddenItemCount);
 
-  const StyledRoot = mode === 'inline' ? InlineStyle : HorizontalStyle;
-
   return (
-    <NavMenuContext.Provider value={contextValue}>
-      <StyledRoot
-        {...rest}
-        className={classes}
-        $textColor={textColor}
-        $activeTextColor={activeTextColor}
-        $bgColor={bgColor}>
-        <ul className="navmenu-root" ref={navMenuRef}>
+    <NavMenuProvider value={contextValue}>
+      <NavMenuRoot {...rest} className={classes} $textColor={textColor} $bgColor={bgColor}>
+        <NavMenuList className={clsx('navmenu-list', `navmenu-list--${mode}`)} ref={navMenuRef}>
           {items ? items.map((item, index) => renderItem(item, index, true)) : renderChildrenWithRef(children || [])}
           {currentState.hiddenItemCount > 0 && (
             <Sub expandIcon={false} icon={icon} label="" ref={moreIconRef} style={style}>
               {content}
             </Sub>
           )}
-        </ul>
-      </StyledRoot>
-    </NavMenuContext.Provider>
+        </NavMenuList>
+      </NavMenuRoot>
+    </NavMenuProvider>
   );
 }
 
@@ -268,16 +266,35 @@ export interface ItemProps extends React.HTMLAttributes<HTMLLIElement> {
   id?: string;
   icon?: React.ReactNode;
   label?: React.ReactNode;
+  description?: React.ReactNode;
   active?: boolean;
+  variant?: 'default' | 'panel';
   onClick?: () => void;
 }
 
-const Item = forwardRef<HTMLLIElement, ItemProps>(
-  ({ id: _id = '', icon = null, label = '', active = false, onClick = null, ...rest }, ref) => {
+export const Item = forwardRef<HTMLLIElement, ItemProps>(
+  (
+    {
+      id: _id = '',
+      icon = null,
+      label = '',
+      description,
+      active = false,
+      variant = 'default',
+      onClick = null,
+      ...rest
+    },
+    ref
+  ) => {
     const id = useUniqueId(_id);
-    const { activeId, activate } = useContext(NavMenuContext) || {};
-    const classes = clsx('navmenu-item', { 'navmenu-item--active': activeId === id }, rest.className);
-
+    const { mode, activeId, activate, activeTextColor } = useNavMenuContext();
+    const classes = clsx(
+      'navmenu-item',
+      { 'navmenu-item--active': activeId === id },
+      `navmenu-item--${mode}`,
+      `navmenu-item--${variant}`,
+      rest.className
+    );
     useEffect(() => {
       if (active) {
         activate?.(id);
@@ -292,28 +309,33 @@ const Item = forwardRef<HTMLLIElement, ItemProps>(
 
     return (
       // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-      <li {...rest} className={classes} onClick={handleClick} ref={ref}>
-        {icon && <span className="navmenu-item-icon">{icon}</span>}
-        <span className="navmenu-item-label">{label}</span>
-      </li>
+      <NavMenuItem {...rest} className={classes} ref={ref} $activeTextColor={activeTextColor} onClick={handleClick}>
+        {icon && <span className="navmenu-item__icon">{icon}</span>}
+        <div className="navmenu-item__content">
+          <span className="navmenu-item__label">
+            {label} <ArrowForwardIcon className="navmenu-item__label-arrow" />
+          </span>
+          {description && <span className="navmenu-item__desc">{description}</span>}
+        </div>
+      </NavMenuItem>
     );
   }
 );
+Item.displayName = 'NavMenu.Item';
 
-export interface SubProps extends React.HTMLAttributes<HTMLLIElement> {
-  id?: string;
-  icon?: React.ReactNode;
-  label?: React.ReactNode;
-  children?: Array<React.ReactElement>;
+export interface SubProps extends Omit<ItemProps, 'children' | 'active'> {
+  children?: Array<React.ReactElement> | ((props: { isOpen: boolean }) => React.ReactElement | null);
   expandIcon?: React.ReactNode | ((props: { isOpen: boolean }) => React.ReactNode);
 }
 
-const Sub = forwardRef<HTMLLIElement, SubProps>(
+export const Sub = forwardRef<HTMLLIElement, SubProps>(
   (
     {
       id: _id = '',
       icon = null,
       label = null,
+      description,
+      variant = 'default',
       children,
       expandIcon = ({ isOpen }) => (
         <ExpandMoreIcon
@@ -327,10 +349,17 @@ const Sub = forwardRef<HTMLLIElement, SubProps>(
     ref
   ) => {
     const id = useUniqueId(_id);
-    const { openedIds, open, close, mode } = useContext(NavMenuContext) || {};
+    const { openedIds, open, close, mode, activeTextColor } = useNavMenuContext();
     const isOpen = openedIds?.includes(id) ?? false;
-    const classes = clsx('navmenu-sub', { 'navmenu-sub--opened': isOpen }, rest.className);
     const isInlineMode = mode === 'inline';
+    const classes = clsx(
+      'navmenu-sub',
+      'navmenu-item',
+      { 'navmenu-item--panel': variant === 'panel' },
+      { 'navmenu-sub--opened': isOpen, 'navmenu-item--inline': isInlineMode },
+      rest.className
+    );
+
     // inline mode 时使用 click 事件控制收缩/伸展子菜单
     const props = isInlineMode
       ? {
@@ -354,21 +383,29 @@ const Sub = forwardRef<HTMLLIElement, SubProps>(
       : {};
 
     return (
-      <li {...rest} className={classes} {...props} ref={ref}>
-        {icon && <span className="navmenu-sub-icon">{icon}</span>}
-        <span className="navmenu-sub-label">{label}</span>
+      <NavMenuSub {...rest} className={classes} {...props} ref={ref} $activeTextColor={activeTextColor}>
+        {icon && <span className="navmenu-item__icon">{icon}</span>}
+        <div className="navmenu-item__content">
+          <span className="navmenu-item__label">{label}</span>
+          {description && <span className="navmenu-item__desc">{description}</span>}
+        </div>
         {expandIcon && (
-          <span className="navmenu-sub-expand-icon">
+          <span className="navmenu-sub__expand-icon">
             {typeof expandIcon === 'function' ? expandIcon({ isOpen }) : expandIcon}
           </span>
         )}
-        <div className="navmenu-sub-container" {...containerProps}>
-          <ul className="navmenu-sub-list">{filterItems(children)}</ul>
+        <div className="navmenu-sub__container" {...containerProps}>
+          {typeof children === 'function' ? (
+            children({ isOpen }) // 自定义渲染
+          ) : (
+            <NavMenuSubList className="navmenu-sub__list">{filterItems(children)}</NavMenuSubList>
+          )}
         </div>
-      </li>
+      </NavMenuSub>
     );
   }
 );
+Sub.displayName = 'NavMenu.Sub';
 
 NavMenu.Item = Item;
 NavMenu.Sub = Sub;