@arcblock/ux 2.10.65 → 2.10.67

package/lib/NavMenu/nav-menu.js

@@ -1,17 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, cloneElement, useEffect, createContext, useContext, useRef, forwardRef, useLayoutEffect } from 'react';
-import PropTypes from 'prop-types';
+/* eslint-disable no-unused-vars */
+import { Children, cloneElement, useEffect, createContext, useContext, useRef, forwardRef, useLayoutEffect, isValidElement } from 'react';
 import clsx from 'clsx';
 import { MoreHoriz as MoreHorizIcon, ExpandMore as ExpandMoreIcon, Menu as MenuIcon } from '@mui/icons-material';
 import { useCreation, useMemoizedFn, useReactive, useSize, useThrottleFn } from 'ahooks';
 import { HorizontalStyle, InlineStyle } from './style';
-const NavMenuContext = /*#__PURE__*/createContext();
+const NavMenuContext = /*#__PURE__*/createContext(null);
 
 // 过滤 children 中的 Item/Sub, 忽略其它类型的 element
 function filterItems(children) {
   if (children) {
     // eslint-disable-next-line no-use-before-define
-    return Children.toArray(children).filter(child => child.type === Item || child.type === Sub);
+    return Children.toArray(children).filter(child => {
+      if (! /*#__PURE__*/isValidElement(child)) {
+        return false;
+      }
+      return child.type === Item || child.type === Sub;
+    });
   }
   return null;
 }
@@ -19,23 +24,22 @@ function useUniqueId(id) {
   const _id = useRef(id || `navmenu-item-id-${Math.random().toString(36).slice(2)}`);
   return _id.current;
 }
-
 /**
  * NavMenu, 导航组件, 可用于 header/footer/sidebar
  */
 function NavMenu({
-  items,
-  mode,
-  children,
-  activeId,
-  textColor,
-  activeTextColor,
-  bgColor,
+  items = [],
+  mode = 'horizontal',
+  children: _childs = null,
+  activeId = null,
+  textColor = '#9397a1',
+  activeTextColor = '#25292f',
+  bgColor = '#fff',
   onSelected,
   ...rest
 }) {
   // eslint-disable-next-line no-param-reassign
-  children = filterItems(children);
+  const children = filterItems(_childs);
   if (!items?.length && !children?.length) {
     throw new Error("One of 'items' or 'children' is required by NavMenu component.");
   }
@@ -63,9 +67,9 @@ function NavMenu({
       close
     };
   }, [currentState.activeId, currentState.hiddenItemCount, currentState.openedIds, mode, activate, open, close]);
-  const navMenuRef = useRef();
+  const navMenuRef = useRef(null);
   const itemRefs = useRef([]);
-  const moreIconRef = useRef();
+  const moreIconRef = useRef(null);
   const isAllItemsHidden = currentState.hiddenItemCount === itemRefs.current?.length;
   const style = isAllItemsHidden ? {
     marginLeft: '0px'
@@ -175,7 +179,7 @@ function NavMenu({
       children: /*#__PURE__*/_jsxs("ul", {
         className: "navmenu-root",
         ref: navMenuRef,
-        children: [items ? items.map((item, index) => renderItem(item, index, true)) : renderChildrenWithRef(children), currentState.hiddenItemCount > 0 && /*#__PURE__*/_jsx(Sub, {
+        children: [items ? items.map((item, index) => renderItem(item, index, true)) : renderChildrenWithRef(children || []), currentState.hiddenItemCount > 0 && /*#__PURE__*/_jsx(Sub, {
           expandIcon: false,
           icon: icon,
           label: "",
@@ -187,57 +191,31 @@ function NavMenu({
     })
   });
 }
-NavMenu.propTypes = {
-  items: PropTypes.array,
-  // 默认水平方向布局,
-  // inline 模式: 垂直布局, 且通过 click 事件来收缩/伸展子菜单, 适用于移动端
-  mode: PropTypes.oneOf(['horizontal', 'vertical', 'inline']),
-  children: PropTypes.array,
-  activeId: PropTypes.string,
-  textColor: PropTypes.string,
-  activeTextColor: PropTypes.string,
-  bgColor: PropTypes.string,
-  onSelected: PropTypes.func
-};
-NavMenu.defaultProps = {
-  items: null,
-  mode: 'horizontal',
-  children: null,
-  activeId: null,
-  textColor: '#9397a1',
-  activeTextColor: '#25292f',
-  bgColor: '#fff',
-  onSelected: null
-};
-
-/**
- * Item
- */
 const Item = /*#__PURE__*/forwardRef(({
-  id: _id,
-  icon,
-  label,
-  active,
-  onClick,
+  id: _id = '',
+  icon = null,
+  label = '',
+  active = false,
+  onClick = null,
   ...rest
 }, ref) => {
   const id = useUniqueId(_id);
   const {
     activeId,
     activate
-  } = useContext(NavMenuContext);
+  } = useContext(NavMenuContext) || {};
   const classes = clsx('navmenu-item', {
     'navmenu-item--active': activeId === id
   }, rest.className);
   useEffect(() => {
     if (active) {
-      activate(id);
+      activate?.(id);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [active]);
   const handleClick = () => {
     onClick?.();
-    activate(id);
+    activate?.(id);
   };
   return (
     /*#__PURE__*/
@@ -257,30 +235,18 @@ const Item = /*#__PURE__*/forwardRef(({
     })
   );
 });
-Item.propTypes = {
-  id: PropTypes.string,
-  icon: PropTypes.element,
-  label: PropTypes.node,
-  active: PropTypes.bool,
-  onClick: PropTypes.func
-};
-Item.defaultProps = {
-  id: null,
-  icon: null,
-  label: '',
-  active: false,
-  onClick: null
-};
-
-/**
- * Sub
- */
 const Sub = /*#__PURE__*/forwardRef(({
-  id: _id,
-  icon,
-  label,
+  id: _id = '',
+  icon = null,
+  label = null,
   children,
-  expandIcon,
+  expandIcon = ({
+    isOpen
+  }) => /*#__PURE__*/_jsx(ExpandMoreIcon, {
+    style: {
+      transform: `rotate(${isOpen ? 180 : 0}deg)`
+    }
+  }),
   ...rest
 }, ref) => {
   const id = useUniqueId(_id);
@@ -289,8 +255,8 @@ const Sub = /*#__PURE__*/forwardRef(({
     open,
     close,
     mode
-  } = useContext(NavMenuContext);
-  const isOpen = openedIds.includes(id);
+  } = useContext(NavMenuContext) || {};
+  const isOpen = openedIds?.includes(id) ?? false;
   const classes = clsx('navmenu-sub', {
     'navmenu-sub--opened': isOpen
   }, rest.className);
@@ -298,15 +264,15 @@ const Sub = /*#__PURE__*/forwardRef(({
   // inline mode 时使用 click 事件控制收缩/伸展子菜单
   const props = isInlineMode ? {
     onClick: () => {
-      if (openedIds.includes(id)) {
-        close(id);
+      if (openedIds?.includes(id)) {
+        close?.(id);
       } else {
-        open(id);
+        open?.(id);
       }
     }
   } : {
-    onMouseEnter: () => open(id),
-    onMouseLeave: () => close(id)
+    onMouseEnter: () => open?.(id),
+    onMouseLeave: () => close?.(id)
   };
   // inline mode, 避免点击子菜单项时触发父菜单的 open/close
   const containerProps = isInlineMode ? {
@@ -325,9 +291,9 @@ const Sub = /*#__PURE__*/forwardRef(({
       children: label
     }), expandIcon && /*#__PURE__*/_jsx("span", {
       className: "navmenu-sub-expand-icon",
-      children: expandIcon?.({
+      children: typeof expandIcon === 'function' ? expandIcon({
         isOpen
-      }) || expandIcon
+      }) : expandIcon
     }), /*#__PURE__*/_jsx("div", {
       className: "navmenu-sub-container",
       ...containerProps,
@@ -338,27 +304,6 @@ const Sub = /*#__PURE__*/forwardRef(({
     })]
   });
 });
-Sub.propTypes = {
-  id: PropTypes.string,
-  icon: PropTypes.element,
-  label: PropTypes.node.isRequired,
-  children: PropTypes.array.isRequired,
-  expandIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
-};
-Sub.defaultProps = {
-  id: null,
-  icon: null,
-  // eslint-disable-next-line react/prop-types
-  expandIcon: ({
-    isOpen
-  }) => {
-    return /*#__PURE__*/_jsx(ExpandMoreIcon, {
-      style: {
-        transform: `rotate(${isOpen ? 180 : 0}deg)`
-      }
-    });
-  }
-};
 NavMenu.Item = Item;
 NavMenu.Sub = Sub;
 export default NavMenu;

package/lib/NavMenu/style.d.ts

@@ -1,2 +1,8 @@
-export const HorizontalStyle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement>, {}, {}>;
-export const InlineStyle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement>, {}, {}>;
+type NavMenuBaseProps = {
+    $bgColor: string;
+    $textColor: string;
+    $activeTextColor: string;
+};
+export declare const HorizontalStyle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & NavMenuBaseProps & import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement>, {}, {}>;
+export declare const InlineStyle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & NavMenuBaseProps & import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement>, {}, {}>;
+export {};

package/lib/NavMenu/style.js

@@ -1,5 +1,7 @@
 import { styled } from '../Theme';
-const NavMenuBase = styled('nav')`
+const NavMenuBase = styled('nav', {
+  shouldForwardProp: prop => prop !== '$bgColor' && prop !== '$textColor' && prop !== '$activeTextColor'
+})`
   background-color: ${props => props.$bgColor};
   font-size: 16px;
   // width: 100%;

package/lib/PageScroller/index.d.ts

@@ -1,2 +1,14 @@
-declare const _default: (props: any) => import("react/jsx-runtime").JSX.Element;
+declare const _default: (props: {
+    animationTimer: any;
+    blockScrollDown: any;
+    blockScrollUp: any;
+    children: any;
+    height: any;
+    width: any;
+    customPageNumber: any;
+    onScrollUnavailable: any;
+    onChange: any;
+    renderAllPagesOnFirstRender: any;
+    transitionTimingFunction: any;
+}) => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/lib/Passport/passport.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from 'prop-types';
 import upperFirst from 'lodash/upperFirst';
 import { Box } from '@mui/material';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import RevokeIcon from '@arcblock/icons/lib/RevokeIcon';
 import NFTDisplay from '../NFTDisplay';
+import { useLocaleContext } from '../Locale/context';
 export default function Passport({
   passport,
   user,

package/lib/PricingTable/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: (props: any) => import("react/jsx-runtime").JSX.Element;
+declare const _default: (props: {
+    plans: any;
+}) => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/lib/RelativeTime/index.d.ts

@@ -8,7 +8,7 @@ declare function RelativeTime({ value, locale, withoutSuffix, from, to, type, tz
     type: any;
     tz: any;
     relativeRange: any;
-}): import("react/jsx-runtime").JSX.Element | "-";
+}): "-" | import("react/jsx-runtime").JSX.Element;
 declare namespace RelativeTime {
     namespace propTypes {
         let value: PropTypes.Validator<NonNullable<NonNullable<string | number | null | undefined>>>;

package/lib/Screenshot/BaseScreenshot/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styled } from '@arcblock/ux/lib/Theme';
 import PropTypes from 'prop-types';
 import phone from './shells/Phone';
 import macbook from './shells/Macbook';
+import { styled } from '../../Theme';
 const map = {
   phone,
   macbook

package/lib/SplitButton/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import MenuItem, { MenuItemProps } from '@mui/material/MenuItem';
 import { ButtonGroupProps } from '@mui/material/ButtonGroup';
 import { ButtonProps } from '@mui/material/Button';
@@ -11,24 +10,6 @@ export interface SplitButtonProps extends Omit<ButtonGroupProps, 'children'> {
 }
 declare function SplitButton(props: SplitButtonProps): import("react/jsx-runtime").JSX.Element;
 declare namespace SplitButton {
-    var propTypes: {
-        size: PropTypes.Requireable<string>;
-        color: PropTypes.Requireable<string>;
-        menu: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        variant: PropTypes.Requireable<string>;
-        onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        menuButtonProps: PropTypes.Requireable<object>;
-    };
-    var defaultProps: {
-        size: string;
-        color: string;
-        menu: never[];
-        children: null;
-        variant: string;
-        onClick: (...args: any[]) => void;
-        menuButtonProps: {};
-    };
     var Item: import("@mui/material").ExtendButtonBase<import("@mui/material/MenuItem").MenuItemTypeMap<{}, "li">>;
 }
 export default SplitButton;

package/lib/SplitButton/index.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState, useRef, isValidElement, createElement as _createElement } from 'react';
-import PropTypes from 'prop-types';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import Popper from '@mui/material/Popper';
 import Paper from '@mui/material/Paper';
@@ -13,13 +12,13 @@ import noop from 'lodash/noop';
 import { styled } from '../Theme';
 export default function SplitButton(props) {
   const {
-    size,
-    color,
-    menu,
-    children,
-    variant,
-    onClick,
-    menuButtonProps,
+    size = 'medium',
+    color = 'primary',
+    menu = [],
+    children = null,
+    variant = 'contained',
+    onClick = noop,
+    menuButtonProps = {},
     ...rest
   } = props;
   const [open, setOpen] = useState(false);
@@ -79,25 +78,6 @@ export default function SplitButton(props) {
     })]
   });
 }
-SplitButton.propTypes = {
-  size: PropTypes.string,
-  color: PropTypes.string,
-  menu: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),
-  // 也可以是用于渲染主按钮的 function
-  children: PropTypes.node,
-  variant: PropTypes.oneOf(['outlined', 'contained']),
-  onClick: PropTypes.func,
-  menuButtonProps: PropTypes.object
-};
-SplitButton.defaultProps = {
-  size: 'medium',
-  color: 'primary',
-  menu: [],
-  children: null,
-  variant: 'contained',
-  onClick: noop,
-  menuButtonProps: {}
-};
 SplitButton.Item = MenuItem;
 const StyledButtonGroup = styled(ButtonGroup)`
   > .MuiButtonBase-root:last-of-type {

package/lib/TextCollapse/index.d.ts

@@ -1,2 +1,11 @@
-declare const _default: (props: any) => import("react/jsx-runtime").JSX.Element;
+declare const _default: (props: {
+    [x: string]: any;
+    children: any;
+    startChars: any;
+    endChars: any;
+    scaleFactor: any;
+    maxWidth: any;
+    style: any;
+    fontType: any;
+}) => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/lib/Theme/index.d.ts

@@ -1,14 +1,6 @@
-export * from "./theme";
-export { default as ThemeProvider } from "./theme-provider";
-export { useTheme };
-/**
- * @typedef {import('@mui/material/styles').Theme} Theme
- * @typedef {import('@mui/material/styles').CreateMUIStyled<Theme>} Styled
- */
-/**
- * @type {Styled}
- */
-export const styled: Styled;
-export type Theme = import("@mui/material/styles").Theme;
-export type Styled = import("@mui/material/styles").CreateMUIStyled<Theme>;
+import { CreateMUIStyled, Theme } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
+export * from './theme';
+export { default as ThemeProvider } from './theme-provider';
+export { useTheme };
+export declare const styled: CreateMUIStyled<Theme>;

package/lib/Theme/index.js

@@ -1,22 +1,15 @@
+/* eslint-disable no-unused-vars */
+
 import { styled as muiStyled, useTheme } from '@mui/material/styles';
 export * from './theme';
 export { default as ThemeProvider } from './theme-provider';
 export { useTheme };
 const isTransientProp = prop => prop.startsWith('$');
-
-/**
- * @typedef {import('@mui/material/styles').Theme} Theme
- * @typedef {import('@mui/material/styles').CreateMUIStyled<Theme>} Styled
- */
-
-/**
- * @type {Styled}
- */
-export const styled = (component, options = {}) => {
+export const styled = (component, options) => {
   return muiStyled(component, {
     ...options,
     shouldForwardProp: prop => {
-      if (options.shouldForwardProp) {
+      if (options?.shouldForwardProp) {
         return options.shouldForwardProp(prop) && !isTransientProp(prop);
       }
       return !isTransientProp(prop);

package/lib/Theme/theme-provider.d.ts

@@ -1,25 +1,23 @@
+import PropTypes from 'prop-types';
+import { Theme } from '@mui/material/styles';
 /**
  * 默认的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider
  */
-declare function ThemeProvider({ children, theme, injectFirst }: {
-    children: any;
-    theme: any;
-    injectFirst: any;
+declare function ThemeProvider({ children, theme, injectFirst, }: {
+    children: React.ReactNode;
+    theme: Theme;
+    injectFirst: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace ThemeProvider {
-    namespace propTypes {
-        let children: PropTypes.Requireable<any>;
-        let theme: PropTypes.Requireable<any>;
-        let injectFirst: PropTypes.Requireable<boolean>;
-    }
-    namespace defaultProps {
-        let children_1: null;
-        export { children_1 as children };
-        export { defaultTheme as theme };
-        let injectFirst_1: boolean;
-        export { injectFirst_1 as injectFirst };
-    }
+    var propTypes: {
+        children: PropTypes.Requireable<any>;
+        theme: PropTypes.Requireable<any>;
+        injectFirst: PropTypes.Requireable<boolean>;
+    };
+    var defaultProps: {
+        children: null;
+        theme: Theme;
+        injectFirst: boolean;
+    };
 }
 export default ThemeProvider;
-import PropTypes from 'prop-types';
-declare const defaultTheme: import("@mui/material/styles").Theme;

package/lib/Theme/theme.d.ts

@@ -1,17 +1,43 @@
-export function create({ mode, pageWidth, palette, typography, overrides, ...rest }?: {
+import { Components, type Theme, type ThemeOptions } from '@mui/material/styles';
+import { Typography, TypographyOptions } from '@mui/material/styles/createTypography';
+import '@fontsource/inter/latin-300.css';
+import '@fontsource/inter/latin-400.css';
+import '@fontsource/inter/latin-500.css';
+import '@fontsource/inter/latin-700.css';
+import '@fontsource/inter/latin-ext-300.css';
+import '@fontsource/inter/latin-ext-400.css';
+import '@fontsource/inter/latin-ext-500.css';
+import '@fontsource/inter/latin-ext-700.css';
+declare module '@mui/material/styles/createTheme' {
+    interface Theme {
+        mode?: string;
+        themeName?: string;
+        pageWidth?: string;
+        colors?: Record<string, string>;
+        typography: Typography & {
+            useNextVariants: boolean;
+            color: Record<string, string>;
+            button: {
+                fontWeight?: number;
+            };
+        };
+    }
+    interface ThemeOptions {
+        mode?: string;
+        themeName?: string;
+        pageWidth?: string;
+        colors?: Record<string, string>;
+    }
+}
+export declare const create: ({ mode, pageWidth, typography, overrides, palette, components, ...rest }?: {
     mode?: string;
     pageWidth?: string;
-    palette?: import("@mui/material/styles").PaletteOptions;
-    typography?: TypographyVariantsOptions;
+    typography?: TypographyOptions;
     overrides?: Components<Omit<Theme, "components">>;
-}): Theme;
-export function createTheme({ mode, pageWidth, palette, typography, overrides, ...rest }?: {
+} & ThemeOptions) => Theme;
+export declare const createTheme: ({ mode, pageWidth, typography, overrides, palette, components, ...rest }?: {
     mode?: string;
     pageWidth?: string;
-    palette?: import("@mui/material/styles").PaletteOptions;
-    typography?: TypographyVariantsOptions;
+    typography?: TypographyOptions;
     overrides?: Components<Omit<Theme, "components">>;
-}): Theme;
-export type Theme = import("@mui/material/styles").Theme;
-export type TypographyVariantsOptions = import("@mui/material/styles").TypographyVariantsOptions;
-export type Components = import("@mui/material/styles").Components;
+} & ThemeOptions) => Theme;

package/lib/Theme/theme.js

@@ -1,3 +1,5 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-shadow */
 // https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
 import { createTheme as _createTheme, responsiveFontSizes } from '@mui/material/styles';
 // 为了避免加载全量的字体导致打包后体积太大，目前只选择了 latin 语系的字体
@@ -11,11 +13,7 @@ import '@fontsource/inter/latin-ext-500.css';
 import '@fontsource/inter/latin-ext-700.css';
 import colors from '../Colors';
 
-/**
- * @typedef {import('@mui/material/styles').Theme} Theme
- * @typedef {import('@mui/material/styles').TypographyVariantsOptions} TypographyVariantsOptions
- * @typedef {import('@mui/material/styles').Components} Components
- */
+// 扩展 Theme 和 ThemeOptions 接口
 
 const muiDarkTheme = _createTheme({
   palette: {
@@ -24,24 +22,15 @@ const muiDarkTheme = _createTheme({
 });
 
 // https://material-ui.com/customization/default-theme/
-/**
- * @description
- * @export
- * @param {{
- *  mode?: string,
- *  pageWidth?: string,
- *  palette?: import('@mui/material/styles').PaletteOptions,
- *  typography?: TypographyVariantsOptions,
- *  overrides?: Components<Omit<Theme, 'components'>>,
- * }} options
- * @return {Theme}
- */
 export const create = ({
   mode = 'light',
   pageWidth = 'md',
-  palette,
   typography,
-  overrides = {},
+  /** @deprecated 使用 components 替代 */
+  overrides,
+  // original theme options
+  palette,
+  components,
   ...rest
 } = {}) => {
   // palette 考虑 light & dark mode, dark mode 需要持续完善
@@ -124,11 +113,13 @@ export const create = ({
           }
         }
       },
-      ...overrides
+      ...overrides,
+      ...components
     },
     pageWidth,
-    // TODO: 过时的 colors, 需要各项目负责人检查项目中是否使用 "theme.colors", 如果有需要清除,
-    //       可以从 Colors 模块/theme.palette/mui colors 中取值
+    /**
+     * @deprecated 应使用 theme.palette 中的颜色
+     */
     colors: {
       white: '#FFFFFF',
       dark: '#4A707C',