@arcblock/ux 2.13.70 → 3.0.0

package/src/Locale/context.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-prototype-builtins */
-import { createContext, useState, useEffect, useContext, useRef, useCallback, ReactNode } from 'react';
+import { createContext, useState, useEffect, use, useRef, useCallback, ReactNode } from 'react';
 import get from 'lodash/get';
 import Cookie from 'js-cookie';
 
@@ -149,7 +149,7 @@ function LocaleProvider({
 }
 
 function useLocaleContext() {
-  const context = useContext(LocaleContext);
+  const context = use(LocaleContext);
   return context;
 }
 

package/src/Locale/selector.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-no-bind */
-import React, { useState, useContext, useRef, useMemo } from 'react';
+import React, { useState, use, useRef, useMemo } from 'react';
 import {
   Button,
   Typography,
@@ -14,10 +14,9 @@ import {
 import { Icon as IconifyIcon } from '@iconify/react';
 import CheckIcon from '@iconify-icons/material-symbols/check';
 import LanguageIcon from 'iconify-icons-material-symbols-400/language';
-import noop from 'lodash/noop';
 
 import { LocaleContext } from './context';
-import { styled, useTheme } from '../Theme';
+import { styled } from '../Theme';
 import type { Locale } from '../type';
 import { mergeSx } from '../Util/style';
 
@@ -31,20 +30,10 @@ export interface LocaleSelectorProps extends Omit<React.HTMLAttributes<HTMLDivEl
 }
 
 export default function LocaleSelector(props: LocaleSelectorProps) {
-  const {
-    showText = true,
-    popperProps = {},
-    popperType = 'click',
-    icon: Icon,
-    size = 24,
-    onChange = noop,
-    ...rest
-  } = props;
-  const { locale, changeLocale, languages } = useContext(LocaleContext);
+  const { showText = true, popperProps = {}, popperType = 'click', icon: Icon, size = 24, ...rest } = props;
+  const { locale, changeLocale, languages } = use(LocaleContext);
   const anchorEl = useRef<HTMLButtonElement>(null);
   const [open, setOpen] = useState(false);
-  const theme = useTheme();
-  const dark = theme?.palette?.mode === 'dark';
 
   const onSelect = (newLocale: Locale) => {
     changeLocale(newLocale);
@@ -88,9 +77,14 @@ export default function LocaleSelector(props: LocaleSelectorProps) {
   }, [Icon, size]);
 
   return (
+    // @ts-ignore
     <Wrapper {...rest} {...handleEventProps}>
       <ButtonComponent ref={anchorEl} className="trigger" role="button" aria-label="Locale selector button">
-        <Box display="flex" alignItems="center">
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+          }}>
           {renderIcon}
 
           {showText ? (
@@ -102,7 +96,6 @@ export default function LocaleSelector(props: LocaleSelectorProps) {
           )}
         </Box>
       </ButtonComponent>
-
       <Popper
         open={open}
         anchorEl={anchorEl.current}

package/src/Logo/Logo.stories.jsx

@@ -0,0 +1,23 @@
+export { default as DarkMode } from './demo/dark-mode';
+export { default as DarkModeLogoOnly } from './demo/dark-mode-logo-only';
+export { default as DarkModeHorizontal } from './demo/dark-mode-horizontal';
+export { default as WithStyling } from './demo/with-styling';
+export { default as LightMode } from './demo/light-mode';
+export { default as LightModeLogoOnly } from './demo/light-mode-logo-only';
+export { default as LightModeHorizontal } from './demo/light-mode-horizontal';
+
+export default {
+  title: 'ArcBlock/Logo',
+
+  parameters: {
+    docs: {
+      description: {
+        component: 'Arcblock Logo',
+      },
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/E8TSBWCOyXzETmVOjzbqvw/ArcBlock-UI-Kit?node-id=2412%3A11100',
+    },
+  },
+};

package/src/Metric/Metric.stories.jsx

@@ -0,0 +1,29 @@
+import { Box, Container } from '@mui/material';
+import { ThemeProvider } from '../Theme';
+import { ThemeModeToggle } from '../Config';
+
+export { default as Basic } from './demo/basic';
+export { default as HtmlValueAndName } from './demo/html-value-and-name';
+
+export default {
+  title: 'Data Display/Metric',
+  parameters: {
+    docs: {
+      description: {
+        component: 'The Metric component is usually used to display statistics on dashboard pages.',
+      },
+    },
+  },
+  decorators: [
+    (StoryFn) => (
+      <ThemeProvider prefer="system">
+        <Container>
+          <Box sx={{ mb: 2 }}>
+            <ThemeModeToggle />
+          </Box>
+          <StoryFn />
+        </Container>
+      </ThemeProvider>
+    ),
+  ],
+};

package/src/NFTDisplay/NFTDisplay.stories.jsx

@@ -0,0 +1,30 @@
+export { default as Basic } from './demo/basic';
+export { default as FixedSize } from './demo/fixed-size';
+export { default as Inset } from './demo/inset';
+export { default as AspectRatio } from './demo/aspect-ratio';
+export { default as NftTypeUrl } from './demo/nft-type-url';
+export { default as MinimumLoadingTime } from './demo/minimum-loading-time';
+export { default as WithForeignObject } from './demo/with-foreign-object';
+export { default as NftTypeSvg } from './demo/nft-type-svg';
+export { default as CustomLoading } from './demo/custom-loading';
+export { default as SvgValidation } from './demo/svg-validation';
+export { default as BrokenImage } from './demo/broken-image';
+export { default as PreferredSvgEmbedderProp } from './demo/preferred-svg-embedder-prop';
+export { default as ImageFilter } from './demo/image-filter';
+
+/**
+ * @type { import('@storybook/react-vite').Story}
+ */
+export default {
+  title: 'Data Display/NFTDisplay',
+  argTypes: {
+    imageFilter: {
+      control: 'object',
+      defaultValue: {
+        imageFilter: 'resize',
+        w: '500',
+        f: 'webp',
+      },
+    },
+  },
+};

package/src/NFTDisplay/broken.tsx

@@ -1,4 +1,4 @@
-import Box from '@mui/material/Box';
+import { Box } from '@mui/material';
 import { styled } from '../Theme';
 
 import NFTBroken from './NFTBroken.svg?react';

package/src/NFTDisplay/displayApi.ts

@@ -1,4 +1,5 @@
 import axios, { AxiosAdapter, type AxiosResponse } from 'axios';
+// eslint-disable-next-line import/extensions
 import adapter from 'axios/lib/adapters/xhr.js';
 
 const cache = new Map();

package/src/NFTDisplay/index.tsx

@@ -100,7 +100,6 @@ function NFTDisplay({
   );
 
   const parsed = useRef<Record<string, any>>({});
-
   try {
     // 如果是 raw data 先解析
     if (typeof data === 'string') {

package/src/NavMenu/NavMenu.stories.jsx

@@ -0,0 +1,17 @@
+export { default as BasicRouterLink } from './demo/basic-router-link';
+export { default as NestedNavigation } from './demo/nested-navigation';
+export { default as ActiveState } from './demo/active-state';
+export { default as UseItemsProp } from './demo/use-items-prop';
+export { default as LabelIconOnly } from './demo/label-icon-only';
+export { default as InlineMode } from './demo/inline-mode';
+
+export default {
+  title: 'Navigation/NavMenu',
+  parameters: {
+    docs: {
+      description: {
+        component: 'The NavMenu component is used to provide a means to navigate through an app or website.',
+      },
+    },
+  },
+};

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

@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react';
+import { createContext, use } from 'react';
 
 export type NavMenuContextValue = {
   activeId: string | null;
@@ -16,11 +16,11 @@ export type NavMenuContextValue = {
 const NavMenuContext = createContext<NavMenuContextValue | null>(null);
 
 export function NavMenuProvider({ value, children }: { value: NavMenuContextValue; children: React.ReactNode }) {
-  return <NavMenuContext.Provider value={value}>{children}</NavMenuContext.Provider>;
+  return <NavMenuContext value={value}>{children}</NavMenuContext>;
 }
 
 export function useNavMenuContext() {
-  const context = useContext(NavMenuContext);
+  const context = use(NavMenuContext);
 
   if (!context) {
     throw new Error('NavMenuContext is not found');

package/src/NavMenu/nav-menu.tsx

@@ -1,9 +1,14 @@
-import { Children, cloneElement, useEffect, useRef, forwardRef, useLayoutEffect, isValidElement } from 'react';
+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 } from '@mui/icons-material';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+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';
@@ -18,7 +23,7 @@ function filterItems(children: React.ReactNode) {
         return false;
       }
       return child.type === Item || child.type === Sub;
-    }) as React.ReactElement[];
+    }) as React.ReactElement<any>[];
   }
   return null;
 }
@@ -125,7 +130,7 @@ function NavMenu({
     return isAllItemsHidden ? <MenuIcon /> : <MoreHorizIcon />;
   }, [isAllItemsHidden]);
 
-  const renderChildrenWithRef = (childrenElement: React.ReactElement[]) => {
+  const renderChildrenWithRef = (childrenElement: React.ReactElement<any>[]) => {
     return Children.map(childrenElement, (child, index) => {
       return cloneElement(child, {
         ref: (el: HTMLElement) => {
@@ -220,7 +225,7 @@ function NavMenu({
           variant={isTopLevel ? 'default' : 'panel'}
           ref={
             isTopLevel
-              ? (el) => {
+              ? (el: HTMLElement) => {
                   itemRefs.current[index] = el!;
                 }
               : undefined
@@ -246,7 +251,7 @@ function NavMenu({
         variant={item.variant}
         ref={
           isTopLevel
-            ? (el) => {
+            ? (el: HTMLElement) => {
                 itemRefs.current[index] = el!;
               }
             : undefined
@@ -260,7 +265,7 @@ function NavMenu({
     : children?.slice(-currentState.hiddenItemCount);
 
   // 当前展开的子菜单
-  const openedId = currentState.openedIds[0];
+  // const openedId = currentState.openedIds[0];
 
   return (
     <NavMenuProvider value={contextValue}>
@@ -288,135 +293,143 @@ export interface ItemProps extends React.HTMLAttributes<HTMLLIElement> {
   onClick?: () => void;
 }
 
-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 { 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?.();
+export function Item({
+  ref,
+  id: _id = '',
+  icon = null,
+  label = '',
+  description,
+  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]);
 
-    return (
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-      <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>
-    );
-  }
-);
+  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 | null> | ((props: { isOpen: boolean }) => React.ReactElement | null);
+  children?: Array<React.ReactElement<any> | null> | ((props: { isOpen: boolean }) => React.ReactElement<any> | null);
   expandIcon?: React.ReactNode | ((props: { isOpen: boolean }) => React.ReactNode);
 }
 
-export const Sub = forwardRef<HTMLLIElement, SubProps>(
-  (
-    {
-      id: _id = '',
-      icon = null,
-      label = null,
-      description,
-      variant = 'default',
-      children,
-      expandIcon = ({ isOpen }) => (
-        <ExpandMoreIcon
-          style={{
-            transform: `rotate(${isOpen ? 180 : 0}deg)`,
-          }}
-        />
-      ),
-      ...rest
-    },
-    ref
-  ) => {
-    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
-    );
+export function Sub({
+  ref,
+  id: _id = '',
+  icon = null,
+  label = null,
+  description,
+  variant = 'default',
+  children,
+
+  expandIcon = ({ isOpen }) => (
+    <ExpandMoreIcon
+      style={{
+        transform: `rotate(${isOpen ? 180 : 0}deg)`,
+      }}
+    />
+  ),
 
-    // 统一使用 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} $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>
-    );
+  ...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
+  );
 
-    if (isInlineMode) {
-      return menu;
-    }
+  // 统一使用 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>
+  );
 
-    return <ClickAwayListener onClickAway={() => close?.(id)}>{menu}</ClickAwayListener>;
+  if (isInlineMode) {
+    return menu;
   }
-);
+
+  return <ClickAwayListener onClickAway={() => close?.(id)}>{menu}</ClickAwayListener>;
+}
 Sub.displayName = 'NavMenu.Sub';
 
 NavMenu.Item = Item;

package/src/NavMenu/products.tsx

@@ -437,7 +437,13 @@ export default function Products({ className, isOpen, ...rest }: ProductsProps)
         <SubItemGroup key={group.label} label={group.label}>
           <Grid container columnSpacing={1} rowSpacing={1}>
             {group.children.map((item) => (
-              <Grid item xs={12} md={6} lg={4} key={item.description}>
+              <Grid
+                key={item.description}
+                size={{
+                  xs: 12,
+                  md: 6,
+                  lg: 4,
+                }}>
                 <Item variant="panel" style={{ padding: '8px' }} {...item} />
               </Grid>
             ))}

package/src/NavMenu/style.ts

@@ -8,7 +8,7 @@ type NavMenuProps = {
 // .navmenu
 export const NavMenuStyled = styled('nav', {
   shouldForwardProp: (prop) => prop !== '$bgColor' && prop !== '$textColor',
-})<NavMenuProps>(({ $bgColor, $textColor, theme }) => ({
+})<NavMenuProps>(({ $textColor, theme }) => ({
   position: 'relative',
   padding: '0 16px',
   minWidth: '50px',

package/src/PageScroller/index.tsx

@@ -35,7 +35,7 @@ export interface PageScrollerProps {
   animationTimer?: number;
   blockScrollDown?: false | true;
   blockScrollUp?: false | true;
-  children?: React.ReactElement | React.ReactElement[];
+  children?: React.ReactElement<any> | React.ReactElement<any>[];
   height?: number | string;
   width?: number | string;
   customPageNumber?: number;
@@ -62,7 +62,7 @@ function PageScroller({
   const [componentsToRenderLength, setComponentsToRenderLength] = useState(DEFAULT_COMPONENTS_TO_RENDER_LENGTH);
   const prevComponentIndex = usePrevious(componentIndex);
   const pageContainer = useRef<HTMLDivElement>(null);
-  const children = Children.toArray(_children) as React.ReactElement[];
+  const children = Children.toArray(_children) as React.ReactElement<any>[];
 
   const addNextComponent = useCallback(
     (componentsToRenderOnMountLength?: number) => {

package/src/PageScroller/story/PageScroller.stories.jsx

@@ -0,0 +1,18 @@
+import FullPage from './FullPage';
+import PageContain from './PageContain';
+
+export default {
+  title: 'Deprecated/PageScroller',
+};
+
+export function _FullPage() {
+  return <FullPage />;
+}
+
+_FullPage.storyName = 'full page';
+
+export function _PageContain() {
+  return <PageContain />;
+}
+
+_PageContain.storyName = 'page contain';

package/src/PageScroller/usePrevValue.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 
 export default function usePrevious<T>(value: T) {
-  const ref = useRef<T>();
+  const ref = useRef<T>(undefined);
 
   useEffect(() => {
     ref.current = value;

package/src/PhoneInput/PhoneInput.stories.jsx

@@ -0,0 +1,12 @@
+export { default as Basic } from './demo/basic';
+
+export default {
+  title: 'Data Display/PhoneInput',
+  parameters: {
+    docs: {
+      description: {
+        component: 'Used to input phone number with country code.',
+      },
+    },
+  },
+};