@arcblock/ux 3.4.14 → 3.5.0

package/src/NavMenu/images/blocklet-store.svg

@@ -1 +0,0 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.171 36a3.067 3.067 0 0 1-2.24-.923C6.312 34.46 6 33.72 6 32.857V14c0-.864.31-1.604.932-2.22a3.067 3.067 0 0 1 2.24-.923h3.17c0-2.174.773-4.027 2.32-5.559C16.206 3.766 18.076 3 20.27 3c2.194 0 4.063.766 5.61 2.298 1.545 1.532 2.318 3.385 2.318 5.56h3.171a3.07 3.07 0 0 1 2.24.922c.621.616.931 1.356.931 2.22v18.857c0 .864-.31 1.604-.931 2.22a3.067 3.067 0 0 1-2.24.923H9.171zm6.343-25.143h9.513c0-1.31-.463-2.422-1.387-3.34-.925-.916-2.049-1.374-3.37-1.374-1.321 0-2.444.458-3.37 1.375-.924.917-1.386 2.03-1.386 3.34zM20.23 23.43c1.955 0 3.726-.642 5.311-1.925 1.586-1.284 2.366-2.724 2.34-4.322a1.62 1.62 0 0 0-.437-1.14 1.445 1.445 0 0 0-1.11-.47c-.37 0-.7.117-.99.353-.291.236-.503.59-.635 1.06a4.367 4.367 0 0 1-1.705 2.397c-.845.602-1.77.904-2.774.904-1.005 0-1.936-.302-2.795-.904-.859-.602-1.42-1.401-1.685-2.396-.132-.498-.33-.858-.594-1.08a1.428 1.428 0 0 0-.952-.335c-.449 0-.825.158-1.13.472a1.58 1.58 0 0 0-.455 1.14c0 1.597.78 3.037 2.339 4.32 1.559 1.284 3.316 1.926 5.272 1.926z" fill="url(#a)"/><defs><linearGradient id="a" x1="12.342" y1="13.214" x2="36.685" y2="39.361" gradientUnits="userSpaceOnUse"><stop stop-color="#FF73B2"/><stop offset=".333" stop-color="#E9ED7D"/><stop offset=".557" stop-color="#74E583"/><stop offset="1" stop-color="#01ACC8"/></linearGradient></defs></svg>

package/src/NavMenu/images/creator-studio.svg

@@ -1 +0,0 @@
-<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><rect width="98" height="98" rx="16" transform="matrix(1 0 0 -1 11 109)" fill="url(#b)"/><g filter="url(#c)"><path d="M60 80V40c-11.04 0-20 8.96-20 20s8.96 20 20 20z" fill="#fff" fill-opacity=".36" shape-rendering="crispEdges"/></g><path d="M60 100c-22.08 0-40-17.92-40-40s17.92-40 40-40 40 17.92 40 40-17.92 40-40 40zm0-60c-11.04 0-20 8.96-20 20s8.96 20 20 20 20-8.96 20-20-8.96-20-20-20z" fill="url(#d)" style="mix-blend-mode:plus-lighter"/></g><defs><linearGradient id="b" x1="7.273" y1="7.273" x2="90.152" y2="90.152" gradientUnits="userSpaceOnUse"><stop stop-color="#2563EB"/><stop offset=".333" stop-color="#2998FF"/><stop offset=".667" stop-color="#48E0A1"/><stop offset="1" stop-color="#9BEF2F"/></linearGradient><linearGradient id="d" x1="60" y1="100" x2="60" y2="20" gradientUnits="userSpaceOnUse"><stop stop-color="#C4C4C4"/><stop offset="1" stop-color="#7D7D7D"/></linearGradient><clipPath id="a"><rect width="98" height="98" rx="16" transform="matrix(1 0 0 -1 11 109)" fill="#fff"/></clipPath><filter id="c" x="-20" y="-20" width="140" height="160" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImageFix" stdDeviation="30"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_3296_9356"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dx="20"/><feGaussianBlur stdDeviation="20"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0.404508 0 0 0 0 0.283156 0 0 0 0.2 0"/><feBlend in2="effect1_backgroundBlur_3296_9356" result="effect2_dropShadow_3296_9356"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dx="10"/><feGaussianBlur stdDeviation="10"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0.404508 0 0 0 0 0.283156 0 0 0 0.05 0"/><feBlend in2="effect2_dropShadow_3296_9356" result="effect3_dropShadow_3296_9356"/><feBlend in="SourceGraphic" in2="effect3_dropShadow_3296_9356" result="shape"/></filter></defs></svg>

package/src/NavMenu/images/did-wallet.svg

@@ -1 +0,0 @@
-<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="9" y="9" width="102" height="102" rx="12" fill="url(#a)"/><mask id="b" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="9" y="9" width="102" height="102"><rect x="9" y="9" width="102" height="102" rx="12" fill="#fff"/></mask><g mask="url(#b)"><rect x="9" y="9" width="102" height="102" rx="12" fill="url(#c)"/><path d="M20.22 32.269a7.969 7.969 0 0 1 7.969-7.969H91.81a7.969 7.969 0 0 1 7.969 7.969V71.41a7.969 7.969 0 0 1-7.969 7.97H28.19a7.969 7.969 0 0 1-7.969-7.97V32.27z" fill="#9FCBFF"/><path d="M17.16 38.389a7.969 7.969 0 0 1 7.969-7.969H94.87a7.969 7.969 0 0 1 7.969 7.969V82.12a7.969 7.969 0 0 1-7.969 7.969H25.13a7.969 7.969 0 0 1-7.969-7.969V38.39z" fill="url(#d)"/><path d="M9 80.145 111 60.51V99c0 6.627-5.373 12-12 12H21c-6.627 0-12-5.373-12-12V80.145z" fill="url(#e)"/></g><path fill-rule="evenodd" clip-rule="evenodd" d="M21.84 54.153V39.44h7.781a3.791 3.791 0 0 1 3.528 3.782v7.138a3.791 3.791 0 0 1-3.791 3.792H21.84zM38.041 39.44h-2.02v14.734h2.02V39.441zm-14.18 12.691v-10.68h5.497c.978 0 1.77.793 1.77 1.771v7.138a1.77 1.77 0 0 1-1.77 1.771H23.86zm17.018-12.69v14.71h7.518a3.791 3.791 0 0 0 3.791-3.79v-7.139a3.791 3.791 0 0 0-3.528-3.782h-7.78zm13.88 3.413h2.259v2.259h-2.259v-2.259zm2.259 5.647h-2.259v2.259h2.259v-2.259zM42.9 41.452v10.68h5.497a1.77 1.77 0 0 0 1.77-1.77v-7.139a1.77 1.77 0 0 0-1.77-1.77H42.9z" fill="#4598FA"/><path fill-rule="evenodd" clip-rule="evenodd" d="M92.652 87.208v9.266l-.82.474 1.448.837.821-.474v-10.94l-6.945-4.01h-6.461v18.96h6.46l1.778-1.026-1.45-.837-.715.414h-4.624V83.81h4.624l5.884 3.397zm.96-4.846-1.774 1.025 1.449.836.714-.412h4.624v16.06H94l-5.884-3.397v-9.266l.823-.475-1.45-.837-.823.476V97.31l6.707 3.872c.156.09.334.138.515.138h6.185V82.36h-6.461z" fill="#fff"/><defs><linearGradient id="a" x1="9" y1="9" x2="9" y2="111" gradientUnits="userSpaceOnUse"><stop stop-color="#4F9DF6"/><stop offset="1" stop-color="#0A79F8"/></linearGradient><linearGradient id="c" x1="9" y1="9" x2="9" y2="111" gradientUnits="userSpaceOnUse"><stop stop-color="#4F9DF6"/><stop offset="1" stop-color="#0A79F8"/></linearGradient><linearGradient id="d" x1="17.16" y1="30.42" x2="17.16" y2="90.09" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#ECEFFF"/></linearGradient><linearGradient id="e" x1="20.156" y1="77.531" x2="26.73" y2="110.104" gradientUnits="userSpaceOnUse"><stop offset=".007" stop-color="#77B2F6"/><stop offset=".206" stop-color="#4F9DF6"/><stop offset="1" stop-color="#4598FA"/></linearGradient></defs></svg>

package/src/NavMenu/images/did.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 90 65" xmlns="http://www.w3.org/2000/svg"><path d="M79.425.7c5.688 0 10.3 4.612 10.3 10.3v43.234c0 5.689-4.612 10.3-10.3 10.3H11.156c-5.688 0-10.3-4.611-10.3-10.3v-.215h4.6v.215a5.7 5.7 0 0 0 5.7 5.7h68.269a5.7 5.7 0 0 0 5.7-5.7V11a5.7 5.7 0 0 0-5.7-5.7H11.156a5.7 5.7 0 0 0-5.7 5.7v.49h-4.6V11C.856 5.312 5.468.7 11.156.7h68.269zM11.293 17.691c2.945 0 5.495.62 7.65 1.86 2.182 1.211 3.879 2.929 5.088 5.154 1.21 2.225 1.814 4.845 1.814 7.86 0 2.985-.604 5.577-1.814 7.774a12.78 12.78 0 0 1-5.088 5.112c-2.155 1.211-4.706 1.818-7.65 1.818H1V17.69h10.293zM35.206 47.27h-5.324V17.69h5.324v29.58zm15.677-29.58c2.944 0 5.494.62 7.65 1.86 2.182 1.21 3.878 2.929 5.087 5.154 1.21 2.225 1.815 4.846 1.815 7.86 0 2.985-.606 5.577-1.815 7.774a12.78 12.78 0 0 1-5.087 5.112c-2.156 1.211-4.706 1.818-7.65 1.818H40.59V17.69h10.293zm22.595 19.066a2.98 2.98 0 1 1-.001 5.958 2.98 2.98 0 0 1 .001-5.958zM6.325 42.494h4.812c2.97 0 5.257-.874 6.861-2.62 1.604-1.775 2.405-4.211 2.405-7.31 0-3.126-.801-5.591-2.405-7.394-1.604-1.803-3.89-2.704-6.861-2.704H6.324v20.028zm39.59 0h4.81c2.971 0 5.26-.873 6.863-2.62 1.603-1.775 2.405-4.211 2.405-7.31 0-3.126-.801-5.591-2.405-7.394-1.604-1.803-3.892-2.704-6.862-2.704h-4.81v20.028zm27.564-19.637a2.978 2.978 0 1 1 0 5.957 2.978 2.978 0 0 1 0-5.957z" fill="currentColor"/></svg>

package/src/NavMenu/images/nft-studio.svg

@@ -1 +0,0 @@
-<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity=".8" d="M14.291 102.867c0 3.431 3.59 5.18 5.74 2.796l54.861-60.857-15.332-31.49H14.291v89.551z" fill="url(#a)"/><path opacity=".8" d="M105.709 17.849c0-3.429-3.585-5.178-5.736-2.8l-54.87 60.709 15.337 31.489h45.269V17.849z" fill="url(#b)"/><path opacity=".8" d="m105.709 107.247-45.867-93.93h-45.55l46.148 93.93h45.269z" fill="url(#c)"/><defs><linearGradient id="a" x1="58.95" y1="13.563" x2="1.148" y2="99.881" gradientUnits="userSpaceOnUse"><stop stop-color="#FF44B4"/><stop offset="1" stop-color="#FFAB48"/></linearGradient><linearGradient id="b" x1="105.788" y1="13.563" x2="48.861" y2="100.72" gradientUnits="userSpaceOnUse"><stop stop-color="#44B3FF"/><stop offset="1" stop-color="#A448FF"/></linearGradient><linearGradient id="c" x1="38.636" y1="11.296" x2="95.518" y2="102.845" gradientUnits="userSpaceOnUse"><stop stop-color="#FF44A9"/><stop offset="1" stop-color="#7452FA"/></linearGradient></defs></svg>

package/src/NavMenu/images/vc.svg

@@ -1 +0,0 @@
-<svg width="76" height="76" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 15a2 2 0 0 0-2 2v3.176H0V17a6 6 0 0 1 6-6h63.23a6 6 0 0 1 6 6v42.069a6 6 0 0 1-6 6H6a6 6 0 0 1-6-6v-2.945h4v2.945a2 2 0 0 0 2 2h63.23a2 2 0 0 0 2-2V17a2 2 0 0 0-2-2H6z" fill="#4598FA"/><circle cx="32" cy="31" r="10" stroke="#4598FA" stroke-width="4"/><path d="m40.688 48.384 5.602 5.602 10.343-10.343m-6.966-5.073c3.253 0 5.891-3.166 5.891-7.07 0-3.905-2.638-7.07-5.891-7.07M32 41h-7.147a7 7 0 0 0-7 7v7.065" stroke="#4598FA" stroke-width="4"/></svg>

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

@@ -1 +0,0 @@
-<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="120" height="120"><path fill="#fff" d="M0 0h119.883v119.883H0z"/></mask><g mask="url(#a)"><path d="M62.025 14.05A5.05 5.05 0 0 1 67.075 9h23.988a5.05 5.05 0 0 1 5.05 5.05v60.6a5.05 5.05 0 0 1-5.05 5.05H67.075a5.05 5.05 0 0 1-5.05-5.05v-60.6z" fill="url(#b)"/><path d="M24.15 32.987a5.05 5.05 0 0 1 5.05-5.05h40.4a5.05 5.05 0 0 1 5.05 5.05V74.65a5.05 5.05 0 0 1-5.05 5.05H29.2a5.05 5.05 0 0 1-5.05-5.05V32.987z" fill="url(#c)"/><g filter="url(#d)"><path d="M16.575 64.55c0-5.578 4.522-10.1 10.1-10.1h64.388c5.578 0 10.1 4.522 10.1 10.1V99.9c0 5.578-4.522 10.1-10.1 10.1H26.675c-5.578 0-10.1-4.522-10.1-10.1V64.55z" fill="url(#e)"/></g><g filter="url(#f)"><path d="M10.263 55.712a7.575 7.575 0 0 1 7.575-7.575H99.9a7.575 7.575 0 0 1 7.575 7.575v10.1a7.575 7.575 0 0 1-7.575 7.575H17.838a7.575 7.575 0 0 1-7.575-7.575v-10.1z" fill="url(#g)"/></g><circle cx="58.869" cy="87.906" r="6.944" fill="#6BADFF"/></g><defs><linearGradient id="b" x1="86.013" y1="9" x2="86.644" y2="46.875" gradientUnits="userSpaceOnUse"><stop stop-color="#FF7575"/><stop offset="1" stop-color="#C91C1C"/></linearGradient><linearGradient id="c" x1="49.4" y1="56.975" x2="49.4" y2="27.938" gradientUnits="userSpaceOnUse"><stop stop-color="#ED7F1A"/><stop offset="1" stop-color="#FFE074"/></linearGradient><linearGradient id="e" x1="16.575" y1="75.281" x2="101.163" y2="114.419" gradientUnits="userSpaceOnUse"><stop stop-color="#54A0FD"/><stop offset="1" stop-color="#136EDE"/></linearGradient><linearGradient id="g" x1="16.575" y1="55.712" x2="58.789" y2="111.945" gradientUnits="userSpaceOnUse"><stop stop-color="#83BAFF"/><stop offset="1" stop-color="#2482F6"/></linearGradient><filter id="d" x="16.575" y="54.45" width="86.587" height="57.55" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feMorphology radius="4" in="SourceAlpha" result="effect1_innerShadow_3296_9286"/><feOffset dx="2" dy="2"/><feGaussianBlur stdDeviation="3"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/><feBlend in2="shape" result="effect1_innerShadow_3296_9286"/></filter><filter id="f" x="10.263" y="48.138" width="99.212" height="27.25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feMorphology radius="4" in="SourceAlpha" result="effect1_innerShadow_3296_9286"/><feOffset dx="2" dy="2"/><feGaussianBlur stdDeviation="3"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/><feBlend in2="shape" result="effect1_innerShadow_3296_9286"/></filter></defs></svg>

package/src/NavMenu/index.ts

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

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

@@ -1,30 +0,0 @@
-import { createContext, use } 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 value={value}>{children}</NavMenuContext>;
-}
-
-export function useNavMenuContext() {
-  const context = use(NavMenuContext);
-
-  if (!context) {
-    throw new Error('NavMenuContext is not found');
-  }
-
-  return context;
-}

package/src/NavMenu/nav-menu.tsx

@@ -1,441 +0,0 @@
-import { Children, cloneElement, useEffect, useRef, useLayoutEffect, isValidElement } from 'react';
-import { ClickAwayListener, type SxProps } from '@mui/material';
-import clsx from 'clsx';
-import {
-  MoreHoriz as MoreHorizIcon,
-  ExpandMore as ExpandMoreIcon,
-  Menu as MenuIcon,
-  ArrowForward as ArrowForwardIcon,
-} from '@mui/icons-material';
-import { useCreation, useMemoizedFn, useReactive, useSize, useThrottleFn } from 'ahooks';
-import noop from 'lodash/noop';
-import { NavMenuProvider, useNavMenuContext } from './nav-menu-context';
-import { NavMenuRoot, NavMenuItem, NavMenuSub, NavMenuSubList, NavMenuStyled } from './style';
-import { SubContainer } from './sub-container';
-import { useTheme } from '../Theme';
-
-// 过滤 children 中的 Item/Sub, 忽略其它类型的 element
-function filterItems(children: React.ReactNode) {
-  if (children) {
-    // eslint-disable-next-line no-use-before-define
-    return Children.toArray(children).filter((child) => {
-      if (!isValidElement(child)) {
-        return false;
-      }
-      return child.type === Item || child.type === Sub;
-    }) as React.ReactElement<any>[];
-  }
-  return null;
-}
-
-function useUniqueId(id?: string) {
-  const _id = useRef(id || `navmenu-item-id-${Math.random().toString(36).slice(2)}`);
-  return _id.current;
-}
-
-export type ItemOptions = {
-  id?: string;
-  icon?: React.ReactNode;
-  label?: React.ReactNode;
-  description?: React.ReactNode;
-  active?: boolean;
-  variant?: 'default' | 'panel';
-  children?: ItemOptions[];
-};
-
-export interface NavMenuProps extends React.HTMLAttributes<HTMLElement> {
-  items?: ItemOptions[];
-  mode?: 'horizontal' | 'vertical' | 'inline';
-  children?: React.ReactNode;
-  activeId?: string | null;
-  textColor?: string;
-  activeTextColor?: string;
-  bgColor?: string;
-  onSelected?: (id: string) => void;
-  sx?: SxProps;
-}
-
-/**
- * NavMenu, 导航组件, 可用于 header/footer/sidebar
- */
-function NavMenu({
-  items = [],
-  mode = 'horizontal',
-  children: _childs = null,
-  activeId = null,
-  // eslint-disable-next-line react/require-default-props
-  textColor,
-  // eslint-disable-next-line react/require-default-props
-  activeTextColor,
-  // eslint-disable-next-line react/require-default-props
-  bgColor,
-  onSelected = undefined,
-  ...rest
-}: NavMenuProps) {
-  const theme = useTheme();
-  const $textColor = useCreation(() => theme.palette.text.secondary, [theme]);
-  const $activeTextColor = useCreation(() => theme.palette.text.primary, [theme]);
-  const $bgColor = useCreation(() => theme.palette.background.default, [theme]);
-  // eslint-disable-next-line no-param-reassign
-  const children = filterItems(_childs);
-  if (!items?.length && !children?.length) {
-    throw new Error("One of 'items' or 'children' is required by NavMenu component.");
-  }
-  const currentState = useReactive({
-    activeId,
-    openedIds: [] as string[],
-    hiddenItemCount: 0,
-  });
-
-  const activate = useMemoizedFn((id) => {
-    currentState.activeId = id;
-    onSelected?.(id);
-  });
-  const open = useMemoizedFn((id: string) => {
-    currentState.openedIds.push(id);
-  });
-  const close = useMemoizedFn((id) => {
-    currentState.openedIds = currentState.openedIds.filter((item) => item !== id);
-  });
-
-  const contextValue = useCreation(() => {
-    return {
-      ...currentState,
-      mode,
-      textColor: $textColor,
-      activeTextColor: $activeTextColor,
-      bgColor: $bgColor,
-      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[]>([]);
-  const moreIconRef = useRef<HTMLLIElement | null>(null);
-  const containerWidth = useRef(0);
-  const isAllItemsHidden = currentState.hiddenItemCount === itemRefs.current?.length;
-  const style = isAllItemsHidden ? { marginLeft: '0px' } : undefined;
-
-  const icon = useCreation(() => {
-    return isAllItemsHidden ? <MenuIcon /> : <MoreHorizIcon />;
-  }, [isAllItemsHidden]);
-
-  const renderChildrenWithRef = (childrenElement: React.ReactElement<any>[]) => {
-    return Children.map(childrenElement, (child, index) => {
-      return cloneElement(child, {
-        ref: (el: HTMLElement) => {
-          itemRefs.current[index] = el;
-        },
-      });
-    });
-  };
-
-  const containerSize = useSize(navMenuRef.current);
-
-  const { run: checkItemsFit } = useThrottleFn(
-    useMemoizedFn(() => {
-      let totalWidthUsed = 0;
-      let newHiddenCount = 0;
-      let leftAllHidden = false;
-      const moreIconWidth = moreIconRef.current
-        ? moreIconRef.current.offsetWidth + parseFloat(window.getComputedStyle(moreIconRef.current).marginLeft)
-        : 0;
-
-      itemRefs.current.forEach((item, index) => {
-        if (item) {
-          item.style.display = 'flex';
-          const marginLeft = index > 0 ? parseFloat(window.getComputedStyle(item).marginLeft) : 0;
-          const currentItemWidth = item.offsetWidth + marginLeft;
-
-          if (containerWidth.current - moreIconWidth >= totalWidthUsed + currentItemWidth && !leftAllHidden) {
-            totalWidthUsed += currentItemWidth;
-          } else {
-            item.style.display = 'none';
-            leftAllHidden = true;
-            newHiddenCount++;
-          }
-        }
-      });
-
-      if (newHiddenCount !== currentState.hiddenItemCount) {
-        currentState.hiddenItemCount = newHiddenCount;
-      }
-    }),
-    { wait: 100 }
-  );
-
-  useLayoutEffect(() => {
-    containerWidth.current = containerSize?.width || navMenuRef.current?.clientWidth || 0;
-    if (mode === 'horizontal') {
-      checkItemsFit();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [containerSize?.width, mode]);
-
-  useEffect(() => {
-    if (mode === 'horizontal') {
-      checkItemsFit();
-      window.addEventListener('resize', checkItemsFit);
-
-      return () => {
-        window.removeEventListener('resize', checkItemsFit);
-      };
-    }
-    return undefined;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mode, items]);
-
-  useEffect(() => {
-    // NavMenu#activeId 和 Item#active prop 都可以用来控制激活状态 (一般不会混用这两种方式)
-    // 如果未传入 NavMenu#activeId, 应该避免设置一个空值的 activeId 状态 (会与 Item#active 冲突)
-    if (activeId !== undefined && activeId !== null) {
-      currentState.activeId = activeId;
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activeId]);
-
-  const classes = clsx('navmenu', `navmenu--${mode}`, rest.className);
-
-  const renderItem = (item: ItemOptions, index: number, level = 0) => {
-    const isTopLevel = level === 0;
-
-    if (item?.children) {
-      // 只渲染两级子菜单
-      if (level > 0) {
-        return null;
-      }
-
-      // 对于 Sub 组件，如果它是顶级组件，则包含 ref
-      return (
-        <Sub
-          key={item.id}
-          id={item.id}
-          icon={item.icon}
-          label={item.label}
-          variant={isTopLevel ? 'default' : 'panel'}
-          ref={
-            isTopLevel
-              ? (el: HTMLElement) => {
-                  itemRefs.current[index] = el!;
-                }
-              : undefined
-          }>
-          {typeof item.children === 'function'
-            ? item.children
-            : item.children.map((childItem, childIndex: number) =>
-                renderItem({ ...childItem, variant: 'panel' }, childIndex, level + 1)
-              )}
-        </Sub>
-      );
-    }
-
-    // 顶级 Item 组件总是包含 ref
-    return (
-      <Item
-        key={item.id}
-        id={item.id}
-        icon={item.icon}
-        label={item.label}
-        description={item.description}
-        active={item.active}
-        variant={item.variant}
-        ref={
-          isTopLevel
-            ? (el: HTMLElement) => {
-                itemRefs.current[index] = el!;
-              }
-            : undefined
-        }
-      />
-    );
-  };
-
-  const content = items
-    ? items?.slice(-currentState.hiddenItemCount).map((item, index) => renderItem(item, index, 1))
-    : children?.slice(-currentState.hiddenItemCount);
-
-  // 当前展开的子菜单
-  // const openedId = currentState.openedIds[0];
-
-  return (
-    <NavMenuProvider value={contextValue}>
-      <NavMenuStyled {...rest} className={classes} $textColor={$textColor} $bgColor={$bgColor}>
-        <NavMenuRoot className={clsx('navmenu-root', `navmenu-root--${mode}`)} ref={navMenuRef}>
-          {items ? items.map((item, index) => renderItem(item, index)) : renderChildrenWithRef(children || [])}
-          {currentState.hiddenItemCount > 0 && (
-            <Sub expandIcon={false} icon={icon} label="" ref={moreIconRef} style={style}>
-              {content}
-            </Sub>
-          )}
-        </NavMenuRoot>
-      </NavMenuStyled>
-    </NavMenuProvider>
-  );
-}
-
-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;
-}
-
-export function Item({
-  ref = undefined,
-  id: _id = '',
-  icon = null,
-  label = '',
-  description = undefined,
-  active = false,
-  variant = 'default',
-  onClick = noop,
-  ...rest
-}: ItemProps & {
-  ref?: React.Ref<unknown>;
-}) {
-  const id = useUniqueId(_id);
-  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);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [active]);
-
-  const handleClick = () => {
-    onClick?.();
-    activate?.(id);
-  };
-
-  return (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    <NavMenuItem
-      {...rest}
-      className={classes}
-      ref={ref as React.Ref<HTMLLIElement>}
-      $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 Omit<ItemProps, 'children' | 'active'> {
-  children?: Array<React.ReactElement<any> | null> | ((props: { isOpen: boolean }) => React.ReactElement<any> | null);
-  expandIcon?: React.ReactNode | ((props: { isOpen: boolean }) => React.ReactNode);
-}
-
-export function Sub({
-  ref = undefined,
-  id: _id = '',
-  icon = null,
-  label = null,
-  description,
-  variant = 'default',
-  children = undefined,
-
-  expandIcon = ({ isOpen }) => (
-    <ExpandMoreIcon
-      style={{
-        transform: `rotate(${isOpen ? 180 : 0}deg)`,
-      }}
-    />
-  ),
-
-  ...rest
-}: SubProps & {
-  ref?: React.Ref<unknown>;
-}) {
-  const id = useUniqueId(_id);
-  const { openedIds, open, close, mode, activeTextColor } = useNavMenuContext();
-  const isOpen = openedIds?.includes(id) ?? false;
-  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
-  );
-
-  // 统一使用 click 事件控制收缩/伸展子菜单
-  const props = {
-    onClick: () => {
-      if (openedIds?.includes(id)) {
-        close?.(id);
-      } else {
-        open?.(id);
-      }
-    },
-  };
-  // inline mode, 避免点击子菜单项时触发父菜单的 open/close
-  const containerProps = isInlineMode ? { onClick: (e: React.MouseEvent) => e.stopPropagation() } : {};
-  const menu = (
-    <NavMenuSub
-      {...rest}
-      className={classes}
-      {...props}
-      ref={ref as React.Ref<HTMLLIElement>}
-      $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">
-          {typeof expandIcon === 'function' ? expandIcon({ isOpen }) : expandIcon}
-        </span>
-      )}
-      <SubContainer inline={isInlineMode} {...containerProps}>
-        {typeof children === 'function' ? (
-          children({ isOpen }) // 自定义渲染
-        ) : (
-          <NavMenuSubList className="navmenu-sub__list">{filterItems(children)}</NavMenuSubList>
-        )}
-      </SubContainer>
-    </NavMenuSub>
-  );
-
-  if (isInlineMode) {
-    return menu;
-  }
-
-  return <ClickAwayListener onClickAway={() => close?.(id)}>{menu}</ClickAwayListener>;
-}
-Sub.displayName = 'NavMenu.Sub';
-
-NavMenu.Item = Item;
-NavMenu.Sub = Sub;
-
-export default NavMenu;