fix(link): warning onClick removed (#1432)

.changeset/new-phones-swim.md

@@ -0,0 +1,6 @@
+---
+"@nextui-org/use-aria-link": patch
+"@nextui-org/link": patch
+---
+
+Interal hook created to control the link events

package.json

@@ -64,7 +64,7 @@
     "@commitlint/cli": "^17.2.0",
     "@commitlint/config-conventional": "^17.2.0",
     "@react-bootstrap/babel-preset": "^2.1.0",
-    "@react-types/link": "^3.3.3",
+    "@react-types/link": "^3.4.4",
     "@react-types/shared": "^3.19.0",
     "@swc-node/jest": "^1.5.2",
     "@swc/core": "^1.3.35",

packages/components/link/package.json

@@ -40,6 +40,7 @@
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
+    "@nextui-org/use-aria-link": "workspace:*",
     "@nextui-org/system": "workspace:*",
     "@nextui-org/theme": "workspace:*",
     "@react-aria/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 {useLink as useAriaLink} from "@react-aria/link";
+import {useAriaLink} from "@nextui-org/use-aria-link";
 import {HTMLNextUIProps, mapPropsVariants, PropGetter} from "@nextui-org/system";
 import {useDOMRef} from "@nextui-org/react-utils";
 import {useFocusRing} from "@react-aria/focus";

packages/hooks/use-aria-link/README.md

@@ -0,0 +1,24 @@
+# @nextui-org/use-aria-link
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+yarn add @nextui-org/use-aria-link
+# or
+npm i @nextui-org/use-aria-link
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md)
+for details.
+
+## Licence
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE).

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

@@ -0,0 +1,59 @@
+{
+  "name": "@nextui-org/use-aria-link",
+  "version": "2.0.11",
+  "description": "Internal hook to handle link a11y and events, this is based on react-aria link hook but without the onClick warning",
+  "keywords": [
+    "use-aria-link"
+  ],
+  "author": "Junior Garcia <jrgarciadev@gmail.com>",
+  "homepage": "https://nextui.org",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nextui-org/nextui.git",
+    "directory": "packages/hooks/use-aria-link"
+  },
+  "bugs": {
+    "url": "https://github.com/nextui-org/nextui/issues"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "yarn build:fast -- --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "dependencies": {
+    "@react-types/link": "^3.4.4",
+    "@react-types/shared": "^3.19.0",
+    "@react-aria/utils": "^3.19.0",
+    "@react-aria/focus": "^3.14.0",
+    "@react-aria/interactions": "^3.17.0"
+  },
+  "devDependencies": {
+    "clean-package": "2.2.0",
+    "react": "^18.0.0"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  }
+}

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

@@ -0,0 +1,72 @@
+import {AriaLinkProps} from "@react-types/link";
+import {DOMAttributes, FocusableElement} from "@react-types/shared";
+import {filterDOMProps, mergeProps} from "@react-aria/utils";
+import {RefObject} from "react";
+import {useFocusable} from "@react-aria/focus";
+import {usePress} from "@react-aria/interactions";
+
+export interface AriaLinkOptions extends AriaLinkProps {
+  /** Indicates the element that represents the current item within a container or set of related elements. */
+  "aria-current"?: DOMAttributes["aria-current"];
+  /** Whether the link is disabled. */
+  isDisabled?: boolean;
+  /**
+   * The HTML element used to render the link, e.g. 'a', or 'span'.
+   * @default 'a'
+   */
+  elementType?: string;
+}
+
+export interface LinkAria {
+  /** Props for the link element. */
+  linkProps: DOMAttributes;
+  /** Whether the link is currently pressed. */
+  isPressed: boolean;
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a link component.
+ * A link allows a user to navigate to another page or resource within a web page
+ * or application.
+ */
+export function useAriaLink(props: AriaLinkOptions, ref: RefObject<FocusableElement>): LinkAria {
+  let {
+    elementType = "a",
+    onPress,
+    onPressStart,
+    onPressEnd,
+    // @ts-ignore
+    onClick: deprecatedOnClick,
+    isDisabled,
+    ...otherProps
+  } = props;
+
+  let linkProps: DOMAttributes = {};
+
+  if (elementType !== "a") {
+    linkProps = {
+      role: "link",
+      tabIndex: !isDisabled ? 0 : undefined,
+    };
+  }
+  let {focusableProps} = useFocusable(props, ref);
+  let {pressProps, isPressed} = usePress({onPress, onPressStart, onPressEnd, isDisabled, ref});
+  let domProps = filterDOMProps(otherProps, {labelable: true});
+  let interactionHandlers = mergeProps(focusableProps, pressProps);
+
+  return {
+    isPressed, // Used to indicate press state for visual
+    linkProps: mergeProps(domProps, {
+      ...interactionHandlers,
+      ...linkProps,
+      "aria-disabled": isDisabled || undefined,
+      "aria-current": props["aria-current"],
+      onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {
+        pressProps.onClick?.(e);
+        if (deprecatedOnClick) {
+          deprecatedOnClick(e);
+        }
+      },
+    }),
+  };
+}

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

@@ -0,0 +1,4 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": ["src", "index.ts"]
+}

pnpm-lock.yaml

@@ -55,8 +55,8 @@ importers:
         specifier: ^2.1.0
         version: 2.1.0
       '@react-types/link':
-        specifier: ^3.3.3
+        specifier: ^3.4.4
-        version: 3.4.3(react@18.2.0)
+        version: 3.4.4(react@18.2.0)
       '@react-types/shared':
         specifier: ^3.19.0
         version: 3.19.0(react@18.2.0)
@@ -1163,6 +1163,9 @@ importers:
       '@nextui-org/theme':
         specifier: workspace:*
         version: link:../../core/theme
+      '@nextui-org/use-aria-link':
+        specifier: workspace:*
+        version: link:../../hooks/use-aria-link
       '@react-aria/focus':
         specifier: ^3.14.0
         version: 3.14.0(react@18.2.0)
@@ -2228,6 +2231,31 @@ importers:
         specifier: ^18.2.0
         version: 18.2.0
 
+  packages/hooks/use-aria-link:
+    dependencies:
+      '@react-aria/focus':
+        specifier: ^3.14.0
+        version: 3.14.0(react@18.2.0)
+      '@react-aria/interactions':
+        specifier: ^3.17.0
+        version: 3.17.0(react@18.2.0)
+      '@react-aria/utils':
+        specifier: ^3.19.0
+        version: 3.19.0(react@18.2.0)
+      '@react-types/link':
+        specifier: ^3.4.4
+        version: 3.4.4(react@18.2.0)
+      '@react-types/shared':
+        specifier: ^3.19.0
+        version: 3.19.0(react@18.2.0)
+    devDependencies:
+      clean-package:
+        specifier: 2.2.0
+        version: 2.2.0
+      react:
+        specifier: ^18.2.0
+        version: 18.2.0
+
   packages/hooks/use-aria-modal-overlay:
     dependencies:
       '@react-aria/overlays':
@@ -9551,16 +9579,6 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@react-types/link@3.4.3(react@18.2.0):
-    resolution: {integrity: sha512-opKfkcaeV0cir64jPcy7DS0BrmdfuWMjua+MSeNv7FfT/b65rFgPfAOKZcvLWDsaxT5HYb7pivYPBfjKqHsQKw==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-    dependencies:
-      '@react-aria/interactions': 3.17.0(react@18.2.0)
-      '@react-types/shared': 3.19.0(react@18.2.0)
-      react: 18.2.0
-    dev: true
-
   /@react-types/link@3.4.4(react@18.2.0):
     resolution: {integrity: sha512-/FnKf7W6nCNZ2E96Yo1gaX63eSxERmtovQbkRRdsgPLfgRcqzQIVzQtNJThIbVNncOnAw3qvIyhrS0weUTFacQ==}
     peerDependencies:
@@ -9569,7 +9587,6 @@ packages:
       '@react-aria/interactions': 3.17.0(react@18.2.0)
       '@react-types/shared': 3.19.0(react@18.2.0)
       react: 18.2.0
-    dev: false
 
   /@react-types/menu@3.9.3(react@18.2.0):
     resolution: {integrity: sha512-0dgIIM9z3hzjFltT+1/L8Hj3oDEcdYkexQhaA+jv6xBHUI5Bqs4SaJAeSGrGz5u6tsrHBPEgf/TLk9Dg9c7XMA==}