refactor: use onPress event instead (component-wise) (#4354)

* refactor: use onPress event instead

* chore(changeset): add changeset

* refactor(button): remove duplicate test case

* refactor(link): remove duplicate test case

* chore: add back onClick test case

* chore(menu): keep onClick test case

* chore: keep the original order

Author: wingkwong

.changeset/two-ghosts-search.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/alert": patch
+---
+
+replace decrepate onClick in Alert

packages/components/alert/src/alert.tsx

@@ -73,7 +73,7 @@ const Alert = forwardRef<"div", AlertProps>((props, ref) => {
           aria-label="Close"
           radius="full"
           variant="light"
-          onClick={handleClose}
+          onPress={handleClose}
           {...(getCloseButtonProps() as ButtonProps)}
         >
           <CloseIcon height={20} width={20} />

packages/components/button/__tests__/button-group.test.tsx

@@ -26,7 +26,7 @@ describe("ButtonGroup", () => {
     const handler = jest.fn();
     const wrapper = render(
       <ButtonGroup isDisabled={true}>
-        <Button disableRipple data-testid="button-test" onClick={handler}>
+        <Button disableRipple data-testid="button-test" onPress={handler}>
           action
         </Button>
       </ButtonGroup>,

packages/components/button/stories/button.stories.tsx

@@ -82,7 +82,7 @@ const StateTemplate = (args: ButtonProps) => {
       {...args}
       aria-label={isOpen ? "Close" : "Open"}
       aria-pressed={isOpen}
-      onClick={handlePress}
+      onPress={handlePress}
     >
       {isOpen ? "Close" : "Open"}
     </Button>

packages/components/card/__tests__/card.test.tsx

@@ -41,15 +41,15 @@ describe("Card", () => {
     expect(onPress).toHaveBeenCalled();
   });
 
-  it("should trigger onClick function", async () => {
-    const onClick = jest.fn();
-    const {getByRole} = render(<Card disableRipple isPressable onClick={onClick} />);
+  it("should trigger onPress function", async () => {
+    const onPress = jest.fn();
+    const {getByRole} = render(<Card disableRipple isPressable onPress={onPress} />);
 
     const button = getByRole("button");
 
     await user.click(button);
 
-    expect(onClick).toHaveBeenCalled();
+    expect(onPress).toHaveBeenCalled();
   });
 
   it("should render correctly when nested", () => {

packages/components/dropdown/stories/dropdown.stories.tsx

@@ -148,7 +148,7 @@ const Template = ({
       <Button>{label}</Button>
     </DropdownTrigger>
     <DropdownMenu aria-label="Actions" color={color} variant={variant}>
-      <DropdownItem key="new" onClick={() => alert("New file")}>
+      <DropdownItem key="new" onPress={() => alert("New file")}>
         New file
       </DropdownItem>
       <DropdownItem key="copy">Copy link</DropdownItem>

packages/components/link/stories/link.stories.tsx

@@ -58,7 +58,7 @@ const PressableTemplate = (args: LinkProps) => {
   };
 
   return (
-    <Link {...args} onClick={handlePress}>
+    <Link {...args} onPress={handlePress}>
       {isOpen ? "Open" : "Close"}
     </Link>
   );

packages/components/listbox/stories/listbox.stories.tsx

@@ -174,7 +174,7 @@ const Template = ({color, variant, ...args}: ListboxProps) => (
     onAction={(key: Key) => alert(key)}
     {...args}
   >
-    <ListboxItem key="new" onClick={() => alert("[onClick] New file")}>
+    <ListboxItem key="new" onPress={() => alert("[onPress] New file")}>
       New file
     </ListboxItem>
     <ListboxItem key="copy">Copy link</ListboxItem>

packages/components/menu/stories/menu.stories.tsx

@@ -45,7 +45,7 @@ const defaultProps = {
 
 const Template = ({color, variant, ...args}: MenuProps) => (
   <Menu aria-label="Actions" color={color} variant={variant} onAction={alert} {...args}>
-    <MenuItem key="new" onClick={() => alert("[onClick] New file")}>
+    <MenuItem key="new" onPress={() => alert("[onPress] New file")}>
       New file
     </MenuItem>
     <MenuItem key="copy">Copy link</MenuItem>