@arcblock/ux 2.11.31 → 2.11.33

package/lib/Layout/dashboard/external-link.d.ts

@@ -1,14 +1,13 @@
-import { Link as RouterLink } from 'react-router-dom';
-interface ExternalLinkProps extends React.ComponentProps<typeof RouterLink> {
-    routerLinkComponent: React.ElementType;
-    to: string | object;
+import { type NavLinkRenderProps, Link as RouterLink, NavLink as RouterNavLink } from 'react-router-dom';
+type RouterLinkProps = React.ComponentProps<typeof RouterLink>;
+type RouterNavLinkProps = React.ComponentProps<typeof RouterNavLink>;
+export interface LinkProps extends RouterLinkProps {
     external?: false | true;
 }
-export interface LinkProps extends Omit<ExternalLinkProps, 'routerLinkComponent'> {
-}
 export declare function Link(props: LinkProps): import("react/jsx-runtime").JSX.Element;
-export interface NavLinkProps extends Omit<ExternalLinkProps, 'routerLinkComponent' | 'className'> {
-    className?: string | (() => string);
+export interface NavLinkProps extends Omit<RouterNavLinkProps, 'className'> {
+    className?: string | ((props: Partial<NavLinkRenderProps>) => string | undefined);
+    external?: false | true;
 }
 export declare function NavLink({ className, ...rest }: NavLinkProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/Layout/dashboard/external-link.js

@@ -9,17 +9,25 @@ function ExternalLink({
   ...rest
 }) {
   if (external) {
-    return /*#__PURE__*/_jsx("a", {
-      href: to,
+    return (
+      /*#__PURE__*/
+      // @ts-expect-error
+      _jsx("a", {
+        href: to,
+        ...rest,
+        children: children
+      })
+    );
+  }
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    _jsx(RouterLinkComponent, {
+      to: to,
       ...rest,
       children: children
-    });
-  }
-  return /*#__PURE__*/_jsx(RouterLinkComponent, {
-    to: to,
-    ...rest,
-    children: children
-  });
+    })
+  );
 }
 export function Link(props) {
   return /*#__PURE__*/_jsx(ExternalLink, {
@@ -32,7 +40,7 @@ export function NavLink({
   ...rest
 }) {
   // NavLink#className 支持 function
-  const classes = typeof className === 'function' ? className() : className;
+  const classes = rest.external && typeof className === 'function' ? className({}) : className;
   return /*#__PURE__*/_jsx(ExternalLink, {
     routerLinkComponent: RouterNavLink,
     className: classes,

package/lib/Layout/dashboard/sidebar.js

@@ -23,8 +23,10 @@ function renderItem(item, index) {
     children: /*#__PURE__*/_jsxs(NavLink, {
       external: external,
       to: url,
-      className: () => clsx('layout-sidebar-link', {
-        'layout-sidebar-link--active': external ? active : false
+      className: ({
+        isActive
+      }) => clsx('layout-sidebar-link', {
+        'layout-sidebar-link--active': external ? active : isActive
       }),
       children: [icon && /*#__PURE__*/_jsx("span", {
         className: `layout-sidebar-icon ${showBadge ? 'layout-sidebar-badge' : ''}`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.11.31",
+  "version": "2.11.33",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -68,12 +68,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "31368d3bf32245481ff96e7946ade7062df01e6e",
+  "gitHead": "96db26b284912b24165e233da62fb5e50091bf41",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.11.31",
-    "@arcblock/nft-display": "^2.11.31",
-    "@arcblock/react-hooks": "^2.11.31",
+    "@arcblock/icons": "^2.11.33",
+    "@arcblock/nft-display": "^2.11.33",
+    "@arcblock/react-hooks": "^2.11.33",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/Layout/dashboard/external-link.tsx

@@ -1,11 +1,17 @@
-import PropTypes from 'prop-types';
-import { Link as RouterLink, NavLink as RouterNavLink } from 'react-router-dom';
+import { type NavLinkRenderProps, Link as RouterLink, NavLink as RouterNavLink } from 'react-router-dom';
 
-interface ExternalLinkProps extends React.ComponentProps<typeof RouterLink> {
-  routerLinkComponent: React.ElementType;
-  to: string | object;
+type RouterLinkProps = React.ComponentProps<typeof RouterLink>;
+type RouterNavLinkProps = React.ComponentProps<typeof RouterNavLink>;
+type ExternalLinkProps = {
   external?: false | true;
-}
+} & (
+  | ({
+      routerLinkComponent: typeof RouterLink;
+    } & RouterLinkProps)
+  | ({
+      routerLinkComponent: typeof RouterNavLink;
+    } & RouterNavLinkProps)
+);
 
 // 包裹 router Link/NavLink 组件, 支持 external link (external 为 true 时渲染为 a 标签)
 function ExternalLink({
@@ -17,30 +23,37 @@ function ExternalLink({
 }: ExternalLinkProps) {
   if (external) {
     return (
-      <a href={to as string} {...rest}>
+      // @ts-expect-error
+      <a href={to} {...rest}>
+        {/* @ts-expect-error */}
         {children}
       </a>
     );
   }
   return (
+    // @ts-ignore
     <RouterLinkComponent to={to} {...rest}>
+      {/* @ts-expect-error */}
       {children}
     </RouterLinkComponent>
   );
 }
 
-export interface LinkProps extends Omit<ExternalLinkProps, 'routerLinkComponent'> {}
+export interface LinkProps extends RouterLinkProps {
+  external?: false | true;
+}
 
 export function Link(props: LinkProps) {
   return <ExternalLink routerLinkComponent={RouterLink} {...props} />;
 }
 
-export interface NavLinkProps extends Omit<ExternalLinkProps, 'routerLinkComponent' | 'className'> {
-  className?: string | (() => string);
+export interface NavLinkProps extends Omit<RouterNavLinkProps, 'className'> {
+  className?: string | ((props: Partial<NavLinkRenderProps>) => string | undefined);
+  external?: false | true;
 }
 
 export function NavLink({ className = '', ...rest }: NavLinkProps) {
   // NavLink#className 支持 function
-  const classes = typeof className === 'function' ? className() : className;
+  const classes = rest.external && typeof className === 'function' ? className({}) : className;
   return <ExternalLink routerLinkComponent={RouterNavLink} className={classes} {...rest} />;
 }

package/src/Layout/dashboard/sidebar.tsx

@@ -28,7 +28,9 @@ function renderItem(item: LinkItem, index: number) {
       <NavLink
         external={external}
         to={url}
-        className={() => clsx('layout-sidebar-link', { 'layout-sidebar-link--active': external ? active : false })}>
+        className={({ isActive }) =>
+          clsx('layout-sidebar-link', { 'layout-sidebar-link--active': external ? active : isActive })
+        }>
         {icon && <span className={`layout-sidebar-icon ${showBadge ? 'layout-sidebar-badge' : ''}`}>{icon}</span>}
         <Typography component="span" className="layout-sidebar-link-text">
           {title}