fix(system): listbox href issue

.changeset/fast-ladybugs-explode.md

@@ -0,0 +1,6 @@
+---
+"@nextui-org/system": patch
+"@nextui-org/link": patch
+---
+
+Fixed listbox href issue (#3105)

packages/components/link/package.json

@@ -44,7 +44,7 @@
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/use-aria-link": "workspace:*",
-    "@react-aria/link": "3.6.5",
+    "@react-aria/link": "3.7.1",
     "@react-aria/utils": "3.23.2",
     "@react-aria/focus": "3.16.2",
     "@react-types/link": "3.5.3"

packages/components/link/src/use-link.ts

@@ -2,7 +2,7 @@ import type {AriaLinkProps} from "@react-types/link";
 import type {LinkVariantProps} from "@nextui-org/theme";
 
 import {link} from "@nextui-org/theme";
-import {useAriaLink} from "@nextui-org/use-aria-link";
+import {useLink as useAriaLink} from "@react-aria/link";
 import {
   HTMLNextUIProps,
   mapPropsVariants,

packages/core/system/package.json

@@ -59,7 +59,7 @@
     "@react-aria/i18n": "3.10.2",
     "@internationalized/date": "^3.5.2",
     "@react-aria/overlays": "3.21.1",
-    "@react-aria/utils": "3.23.2",
+    "@react-aria/utils": "3.24.1",
     "@react-stately/utils": "3.9.1"
   }
 }

packages/hooks/use-aria-link/package.json

@@ -39,8 +39,8 @@
   "dependencies": {
     "@react-aria/focus": "3.16.2",
     "@react-aria/interactions": "3.21.1",
-    "@react-aria/utils": "3.23.2",
-    "@react-types/link": "3.5.3",
+    "@react-aria/utils": "3.24.1",
+    "@react-types/link": "3.5.5",
     "@react-types/shared": "3.22.1"
   },
   "devDependencies": {

packages/hooks/use-aria-link/src/index.ts

@@ -1,6 +1,12 @@
 import {AriaLinkProps} from "@react-types/link";
 import {DOMAttributes, FocusableElement} from "@react-types/shared";
-import {filterDOMProps, mergeProps, useRouter, shouldClientNavigate} from "@react-aria/utils";
+import {
+  filterDOMProps,
+  mergeProps,
+  useRouter,
+  shouldClientNavigate,
+  useLinkProps,
+} from "@react-aria/utils";
 import {RefObject} from "react";
 import {useFocusable} from "@react-aria/focus";
 import {usePress} from "@react-aria/interactions";
@@ -54,10 +60,11 @@ export function useAriaLink(props: AriaLinkOptions, ref: RefObject<FocusableElem
   let domProps = filterDOMProps(otherProps, {labelable: true, isLink: elementType === "a"});
   let interactionHandlers = mergeProps(focusableProps, pressProps);
   let router = useRouter();
+  let routerLinkProps = useLinkProps(props);
 
   return {
     isPressed, // Used to indicate press state for visual
-    linkProps: mergeProps(domProps, {
+    linkProps: mergeProps(domProps, routerLinkProps, {
       ...interactionHandlers,
       ...linkProps,
       "aria-disabled": isDisabled || undefined,
@@ -75,10 +82,11 @@ export function useAriaLink(props: AriaLinkOptions, ref: RefObject<FocusableElem
           e.currentTarget.href &&
           // If props are applied to a router Link component, it may have already prevented default.
           !e.isDefaultPrevented() &&
-          shouldClientNavigate(e.currentTarget, e)
+          shouldClientNavigate(e.currentTarget, e) &&
+          props.href
         ) {
           e.preventDefault();
-          router.open(e.currentTarget, e);
+          router.open(e.currentTarget, e, props.href, props.routerOptions);
         }
       },
     }),