@arcblock/ux 2.10.65 → 2.10.67

package/lib/Header/header.d.ts

@@ -1,55 +1,24 @@
-export default Header;
+import { type Breakpoint } from '@mui/material';
+export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** logo img/svg, 可以包裹一个 a 标签 */
+    logo?: React.ReactNode;
+    /** 相当于 Title, 可以包裹一个 a 标签 */
+    brand?: React.ReactNode;
+    /** brand 右侧的内容区域, 可显示一个 badge 或 tag */
+    brandAddon?: React.ReactNode;
+    /** brand 下方的描述 */
+    description?: React.ReactNode;
+    /** 右侧区域, 可以放置 icons/actions/login 等 */
+    addons?: React.ReactNode;
+    /** logo 左侧内容 */
+    prepend?: React.ReactNode;
+    align?: 'left' | 'right';
+    maxWidth?: Breakpoint | false;
+    homeLink?: string | ((brandContent: React.ReactNode) => React.ReactNode);
+}
 /**
  * Header 组件
  * TODO: Layout/dashboard 可以复用此处的 header
  */
-declare function Header({ logo, brand, brandAddon, description, children, addons, prepend, align, maxWidth, homeLink, ...rest }: {
-    [x: string]: any;
-    logo: any;
-    brand: any;
-    brandAddon: any;
-    description: any;
-    children: any;
-    addons: any;
-    prepend: any;
-    align: any;
-    maxWidth: any;
-    homeLink: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace Header {
-    namespace propTypes {
-        let logo: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        let brand: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        let brandAddon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        let description: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        let addons: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        let prepend: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        let align: PropTypes.Requireable<string>;
-        let maxWidth: PropTypes.Requireable<NonNullable<string | boolean | null | undefined>>;
-        let homeLink: PropTypes.Requireable<NonNullable<string | ((...args: any[]) => any) | null | undefined>>;
-    }
-    namespace defaultProps {
-        let logo_1: null;
-        export { logo_1 as logo };
-        let brand_1: null;
-        export { brand_1 as brand };
-        let brandAddon_1: null;
-        export { brandAddon_1 as brandAddon };
-        let description_1: null;
-        export { description_1 as description };
-        let children_1: null;
-        export { children_1 as children };
-        let addons_1: null;
-        export { addons_1 as addons };
-        let prepend_1: null;
-        export { prepend_1 as prepend };
-        let align_1: string;
-        export { align_1 as align };
-        let maxWidth_1: undefined;
-        export { maxWidth_1 as maxWidth };
-        let homeLink_1: string;
-        export { homeLink_1 as homeLink };
-    }
-}
-import PropTypes from 'prop-types';
+declare function Header({ logo, brand, brandAddon, description, children, addons, prepend, align, maxWidth, homeLink, ...rest }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export default Header;

package/lib/Header/header.js

@@ -1,28 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import PropTypes from 'prop-types';
 import { Box, Container } from '@mui/material';
 import { useRef, useState, useEffect } from 'react';
 import AutoHidden from './auto-hidden';
 import { styled } from '../Theme';
-
 /**
  * Header 组件
  * TODO: Layout/dashboard 可以复用此处的 header
  */
 function Header({
-  logo,
-  brand,
-  brandAddon,
-  description,
-  children,
-  addons,
-  prepend,
-  align,
+  logo = null,
+  brand = null,
+  brandAddon = null,
+  description = null,
+  children = null,
+  addons = null,
+  prepend = null,
+  align = 'left',
   maxWidth,
-  homeLink,
+  homeLink = '/',
   ...rest
 }) {
-  const logoRef = useRef();
+  const logoRef = useRef(null);
   const [brandWrapperMinWidth, setBrandWrapperMinWidth] = useState('0px');
   const style = {
     minWidth: brandWrapperMinWidth
@@ -98,36 +96,6 @@ function Header({
     })
   });
 }
-Header.propTypes = {
-  // logo img/svg, 可以包裹一个 a 标签
-  logo: PropTypes.node,
-  // 相当于 Title, 可以包裹一个 a 标签
-  brand: PropTypes.node,
-  // brand 右侧的内容区域, 可显示一个 badge 或 tag
-  brandAddon: PropTypes.node,
-  // brand 下方的描述
-  description: PropTypes.node,
-  children: PropTypes.node,
-  // 右侧区域, 可以放置 icons/actions/login 等
-  addons: PropTypes.node,
-  // logo 左侧内容
-  prepend: PropTypes.node,
-  align: PropTypes.oneOf(['left', 'right']),
-  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false])]),
-  homeLink: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
-};
-Header.defaultProps = {
-  logo: null,
-  brand: null,
-  brandAddon: null,
-  description: null,
-  children: null,
-  addons: null,
-  prepend: null,
-  align: 'left',
-  maxWidth: undefined,
-  homeLink: '/'
-};
 const Root = styled(Box)`
   position: relative;
   z-index: ${props => props.theme.zIndex.appBar};

package/lib/Header/index.d.ts

@@ -1,2 +1,2 @@
-export { default as Header } from "./header";
-export { default as ResponsiveHeader } from "./responsive-header";
+export { default as Header } from './header';
+export { default as ResponsiveHeader } from './responsive-header';

package/lib/Header/responsive-header.d.ts

@@ -1,4 +1,11 @@
-export default ResponsiveHeader;
+import { type HeaderProps } from './header';
+export interface ResponsiveHeaderProps extends Omit<HeaderProps, 'children'> {
+    menu?: React.ReactNode;
+    children?: React.ReactNode | ((props: {
+        isMobile: boolean;
+        closeMenu: () => void;
+    }) => React.ReactNode);
+}
 /**
  * ResponsiveHeader
  * - 窄屏下显示 burge menu
@@ -6,24 +13,5 @@ export default ResponsiveHeader;
  *
  * 注意: 暂时不要通过 display: none 隐藏 logo, https://blog.patw.me/archives/1820/inline-svg-same-id-and-display-none-issue/
  */
-declare function ResponsiveHeader({ menu, prepend, children, ...rest }: {
-    [x: string]: any;
-    menu: any;
-    prepend: any;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace ResponsiveHeader {
-    let propTypes: any;
-    let defaultProps: {
-        logo: null;
-        brand: null;
-        brandAddon: null;
-        description: null;
-        children: null;
-        addons: null;
-        prepend: null;
-        align: string;
-        maxWidth: undefined;
-        homeLink: string;
-    };
-}
+declare function ResponsiveHeader({ menu, prepend, children, ...rest }: ResponsiveHeaderProps): import("react/jsx-runtime").JSX.Element;
+export default ResponsiveHeader;

package/lib/Header/responsive-header.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import PropTypes from 'prop-types';
 import { useCreation, useReactive } from 'ahooks';
 import MenuIcon from '@mui/icons-material/Menu';
 import CloseIcon from '@mui/icons-material/Close';
@@ -10,7 +9,6 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import Drawer from '@mui/material/Drawer';
 import Header from './header';
 import { styled, useTheme } from '../Theme';
-
 /**
  * ResponsiveHeader
  * - 窄屏下显示 burge menu
@@ -90,7 +88,7 @@ function ResponsiveHeader({
       ModalProps: {
         disablePortal: false,
         keepMounted: true,
-        BackdropComponent: null
+        BackdropComponent: undefined
       },
       anchor: "top",
       sx: {
@@ -110,16 +108,6 @@ function ResponsiveHeader({
     })]
   });
 }
-ResponsiveHeader.propTypes = {
-  ...Header.PropTypes,
-  // 如果是 function, 则
-  // - 会传入一个 isMobile 参数, isMobile 为 true 时, 表示 children 会显示在 menu 中, 可以根据 isMobile 参数调整要渲染的内容, 比如如果 isMobile 为 true 则使用 inline 模式的 NavMenu (适用于移动端)
-  // - 会传入一个 closeMenu 参数, 可以关闭 menu
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
-};
-ResponsiveHeader.defaultProps = {
-  ...Header.defaultProps
-};
 const Root = styled(Header)`
   .header-menu {
     display: none;

package/lib/Icon/image.d.ts

@@ -1,37 +1,9 @@
-declare function ImageIcon({ name, size, alt, color, style, prefix, showBadge, ...rest }: {
-    [x: string]: any;
-    name: any;
-    size: any;
-    alt: any;
-    color: any;
-    style: any;
-    prefix: any;
-    showBadge: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace ImageIcon {
-    namespace propTypes {
-        let name: PropTypes.Validator<string>;
-        let size: PropTypes.Requireable<number>;
-        let color: PropTypes.Requireable<string>;
-        let alt: PropTypes.Requireable<string>;
-        let style: PropTypes.Requireable<object>;
-        let prefix: PropTypes.Requireable<string>;
-        let showBadge: PropTypes.Requireable<boolean>;
-    }
-    namespace defaultProps {
-        let size_1: number;
-        export { size_1 as size };
-        let color_1: string;
-        export { color_1 as color };
-        let alt_1: string;
-        export { alt_1 as alt };
-        let style_1: {};
-        export { style_1 as style };
-        let prefix_1: string;
-        export { prefix_1 as prefix };
-        let showBadge_1: boolean;
-        export { showBadge_1 as showBadge };
-    }
+export interface ImageIconProps extends React.HTMLAttributes<HTMLDivElement> {
+    name: string;
+    size?: number;
+    color?: string;
+    alt?: string;
+    prefix?: string;
+    showBadge?: boolean;
 }
-export default ImageIcon;
-import PropTypes from 'prop-types';
+export default function ImageIcon({ name, size, alt, color, prefix, showBadge, style, ...rest }: ImageIconProps): import("react/jsx-runtime").JSX.Element;

package/lib/Icon/image.js

@@ -1,15 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import PropTypes from 'prop-types';
 import Img from '../Img';
 import { styled } from '../Theme';
 export default function ImageIcon({
   name,
-  size,
-  alt,
-  color,
-  style,
-  prefix,
-  showBadge,
+  size = 36,
+  alt = '',
+  color = '#000000',
+  prefix = '/images',
+  showBadge = false,
+  style = {},
   ...rest
 }) {
   const src = `${prefix}/${name}-${color.replace(/^#/, '')}.png`;
@@ -32,23 +31,6 @@ export default function ImageIcon({
     })]
   });
 }
-ImageIcon.propTypes = {
-  name: PropTypes.string.isRequired,
-  size: PropTypes.number,
-  color: PropTypes.string,
-  alt: PropTypes.string,
-  style: PropTypes.object,
-  prefix: PropTypes.string,
-  showBadge: PropTypes.bool
-};
-ImageIcon.defaultProps = {
-  size: 36,
-  color: '#000000',
-  alt: '',
-  style: {},
-  prefix: '/images',
-  showBadge: false
-};
 const Div = styled('div')`
   position: relative;
   .badge-point {

package/lib/Icon/index.d.ts

@@ -1,2 +1,10 @@
-declare const _default: (props: any) => import("react/jsx-runtime").JSX.Element;
+export interface IconProps extends React.HTMLAttributes<HTMLElement> {
+    name: string;
+    color?: string;
+    size?: number;
+    variant?: 'light' | 'regular' | 'solid';
+    rounded?: boolean;
+    forwardedRef?: React.ForwardedRef<HTMLElement>;
+}
+declare const _default: (props: IconProps & import("react").RefAttributes<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/lib/Icon/index.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import PropTypes from 'prop-types';
 import colors from '../Colors';
 import { styled } from '../Theme';
 import { withDeprecated } from '../Util/deprecate';
@@ -9,16 +8,15 @@ const variants = {
   regular: 'far',
   solid: 'fas'
 };
-
 // eslint-disable-next-line react/prop-types
 function Icon({
   name,
-  color,
-  size,
-  variant,
-  rounded,
-  style,
-  className,
+  color = colors.grey[900],
+  size = 24,
+  variant = 'light',
+  rounded = false,
+  style = {},
+  className = '',
   forwardedRef,
   ...rest
 }) {
@@ -42,23 +40,6 @@ function Icon({
   }
   return content;
 }
-Icon.propTypes = {
-  name: PropTypes.string.isRequired,
-  className: PropTypes.string,
-  color: PropTypes.string,
-  rounded: PropTypes.bool,
-  variant: PropTypes.string,
-  size: PropTypes.number,
-  style: PropTypes.object
-};
-Icon.defaultProps = {
-  rounded: false,
-  variant: 'light',
-  color: colors.grey[900],
-  className: '',
-  size: 24,
-  style: {}
-};
 const Span = styled('span')`
   width: ${props => props.size * 2}px;
   height: ${props => props.size * 2}px;

package/lib/NavMenu/index.d.ts

@@ -1 +1 @@
-export { default } from "./nav-menu";
+export { default } from './nav-menu';

package/lib/NavMenu/nav-menu.d.ts

@@ -1,56 +1,42 @@
-export default NavMenu;
+export type ItemOptions = {
+    id?: string;
+    icon?: React.ReactNode;
+    label?: React.ReactNode;
+    active?: boolean;
+    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;
+}
 /**
  * NavMenu, 导航组件, 可用于 header/footer/sidebar
  */
-declare function NavMenu({ items, mode, children, activeId, textColor, activeTextColor, bgColor, onSelected, ...rest }: {
-    [x: string]: any;
-    items: any;
-    mode: any;
-    children: any;
-    activeId: any;
-    textColor: any;
-    activeTextColor: any;
-    bgColor: any;
-    onSelected: any;
-}): import("react/jsx-runtime").JSX.Element;
+declare function NavMenu({ items, mode, children: _childs, activeId, textColor, activeTextColor, bgColor, onSelected, ...rest }: NavMenuProps): import("react/jsx-runtime").JSX.Element;
 declare namespace NavMenu {
-    export namespace propTypes {
-        let items: PropTypes.Requireable<any[]>;
-        let mode: PropTypes.Requireable<string>;
-        let children: PropTypes.Requireable<any[]>;
-        let activeId: PropTypes.Requireable<string>;
-        let textColor: PropTypes.Requireable<string>;
-        let activeTextColor: PropTypes.Requireable<string>;
-        let bgColor: PropTypes.Requireable<string>;
-        let onSelected: PropTypes.Requireable<(...args: any[]) => any>;
-    }
-    export namespace defaultProps {
-        let items_1: null;
-        export { items_1 as items };
-        let mode_1: string;
-        export { mode_1 as mode };
-        let children_1: null;
-        export { children_1 as children };
-        let activeId_1: null;
-        export { activeId_1 as activeId };
-        let textColor_1: string;
-        export { textColor_1 as textColor };
-        let activeTextColor_1: string;
-        export { activeTextColor_1 as activeTextColor };
-        let bgColor_1: string;
-        export { bgColor_1 as bgColor };
-        let onSelected_1: null;
-        export { onSelected_1 as onSelected };
-    }
-    export { Item };
-    export { Sub };
+    var Item: import("react").ForwardRefExoticComponent<ItemProps & import("react").RefAttributes<HTMLLIElement>>;
+    var Sub: import("react").ForwardRefExoticComponent<SubProps & import("react").RefAttributes<HTMLLIElement>>;
 }
-import PropTypes from 'prop-types';
-/**
- * Item
- */
-declare const Item: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
-/**
- * Sub
- */
-declare const Sub: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+export interface ItemProps extends React.HTMLAttributes<HTMLLIElement> {
+    id?: string;
+    icon?: React.ReactNode;
+    label?: React.ReactNode;
+    active?: boolean;
+    onClick?: () => void;
+}
+export interface SubProps extends React.HTMLAttributes<HTMLLIElement> {
+    id?: string;
+    icon?: React.ReactNode;
+    label?: React.ReactNode;
+    children?: Array<React.ReactElement>;
+    expandIcon?: React.ReactNode | ((props: {
+        isOpen: boolean;
+    }) => React.ReactNode);
+}
+export default NavMenu;