fix: reverting pr4168 (#4286)

* Revert "chore: adding the tests"

This reverts commit bd28852a484fb9f6a7dd18b8fc75fe1dae6d2779.

* Revert "fix(items): items in list should wrapped in li in case of a"

This reverts commit 57fb87abb0c3775bf408aef80f0afc8fb1ca9265.

* chore: adding the changeset

.changeset/breezy-bobcats-destroy.md

@@ -0,0 +1,7 @@
+---
+"@nextui-org/pagination": patch
+"@nextui-org/listbox": patch
+"@nextui-org/menu": patch
+---
+
+Reverts the PR-4168 (#4256, #4246, #4244)

packages/components/listbox/__tests__/listbox.test.tsx

@@ -124,40 +124,6 @@ describe("Listbox", () => {
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it("should not have anchor tag when href prop is not passed", () => {
-    render(
-      <Listbox disallowEmptySelection aria-label="Actions" selectionMode="multiple">
-        <ListboxItem key="new">New file</ListboxItem>
-        <ListboxItem key="copy">Copy link</ListboxItem>
-        <ListboxItem key="edit">Edit file</ListboxItem>
-      </Listbox>,
-    );
-
-    let anchorTag = document.getElementsByTagName("a")[0];
-
-    expect(anchorTag).toBeFalsy();
-  });
-
-  it("should have anchor tag when href prop is passed", () => {
-    const href = "http://www.nextui.org/";
-
-    render(
-      <Listbox disallowEmptySelection aria-label="Actions" selectionMode="multiple">
-        <ListboxItem key="new" href={href}>
-          New file
-        </ListboxItem>
-        <ListboxItem key="copy">Copy link</ListboxItem>
-        <ListboxItem key="edit">Edit file</ListboxItem>
-      </Listbox>,
-    );
-
-    let anchorTag = document.getElementsByTagName("a")[0];
-
-    expect(anchorTag).toBeTruthy();
-
-    expect(anchorTag).toHaveProperty("href", href);
-  });
-
   it("should work with single selection (controlled)", async () => {
     let onSelectionChange = jest.fn();
 

packages/components/listbox/src/listbox-item.tsx

@@ -12,7 +12,6 @@ export interface ListboxItemProps<T extends object = object>
 const ListboxItem = (props: ListboxItemProps) => {
   const {
     Component,
-    FragmentWrapper,
     rendered,
     description,
     isSelectable,
@@ -23,7 +22,6 @@ const ListboxItem = (props: ListboxItemProps) => {
     endContent,
     hideSelectedIcon,
     disableAnimation,
-    fragmentWrapperProps,
     getItemProps,
     getLabelProps,
     getWrapperProps,
@@ -47,7 +45,6 @@ const ListboxItem = (props: ListboxItemProps) => {
 
   return (
     <Component {...getItemProps()}>
-      <FragmentWrapper {...fragmentWrapperProps}>
       {startContent}
       {description ? (
         <div {...getWrapperProps()}>
@@ -61,7 +58,6 @@ const ListboxItem = (props: ListboxItemProps) => {
         <span {...getSelectedIconProps()}>{selectedContent}</span>
       )}
       {endContent}
-      </FragmentWrapper>
     </Component>
   );
 };

packages/components/listbox/src/use-listbox-item.ts

@@ -1,7 +1,7 @@
 import type {ListboxItemBaseProps} from "./base/listbox-item-base";
 import type {MenuItemVariantProps} from "@nextui-org/theme";
 
-import {useMemo, useRef, useCallback, Fragment} from "react";
+import {useMemo, useRef, useCallback} from "react";
 import {listboxItem} from "@nextui-org/theme";
 import {
   HTMLNextUIProps,
@@ -50,7 +50,6 @@ export function useListboxItem<T extends object>(originalProps: UseListboxItemPr
     shouldHighlightOnFocus,
     hideSelectedIcon = false,
     isReadOnly = false,
-    href,
     ...otherProps
   } = props;
 
@@ -59,12 +58,9 @@ export function useListboxItem<T extends object>(originalProps: UseListboxItemPr
 
   const domRef = useRef<HTMLLIElement>(null);
 
-  const Component = as || "li";
+  const Component = as || (originalProps.href ? "a" : "li");
   const shouldFilterDOMProps = typeof Component === "string";
 
-  const FragmentWrapper = href ? "a" : Fragment;
-  const fragmentWrapperProps = href ? {href} : {};
-
   const {rendered, key} = item;
 
   const isDisabled = state.disabledKeys.has(key) || originalProps.isDisabled;
@@ -173,7 +169,6 @@ export function useListboxItem<T extends object>(originalProps: UseListboxItemPr
 
   return {
     Component,
-    FragmentWrapper,
     domRef,
     slots,
     classNames,
@@ -187,7 +182,6 @@ export function useListboxItem<T extends object>(originalProps: UseListboxItemPr
     selectedIcon,
     hideSelectedIcon,
     disableAnimation,
-    fragmentWrapperProps,
     getItemProps,
     getLabelProps,
     getWrapperProps,

packages/components/menu/__tests__/menu.test.tsx

@@ -125,46 +125,6 @@ describe("Menu", () => {
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it("should not have anchor tag when href prop is not passed", () => {
-    render(
-      <Menu disallowEmptySelection aria-label="Actions" selectionMode="multiple">
-        <MenuItem key="new">New file</MenuItem>
-        <MenuItem key="copy">Copy link</MenuItem>
-        <MenuItem key="edit">Edit file</MenuItem>
-        <MenuItem key="delete" color="danger">
-          Delete file
-        </MenuItem>
-      </Menu>,
-    );
-
-    let anchorTag = document.getElementsByTagName("a")[0];
-
-    expect(anchorTag).toBeFalsy();
-  });
-
-  it("should have anchor tag when href prop is passed", () => {
-    const href = "http://www.nextui.org/";
-
-    render(
-      <Menu disallowEmptySelection aria-label="Actions" selectionMode="multiple">
-        <MenuItem key="new" href={href}>
-          New file
-        </MenuItem>
-        <MenuItem key="copy">Copy link</MenuItem>
-        <MenuItem key="edit">Edit file</MenuItem>
-        <MenuItem key="delete" color="danger">
-          Delete file
-        </MenuItem>
-      </Menu>,
-    );
-
-    let anchorTag = document.getElementsByTagName("a")[0];
-
-    expect(anchorTag).toBeTruthy();
-
-    expect(anchorTag).toHaveProperty("href", href);
-  });
-
   it("should work with single selection (controlled)", async () => {
     let onSelectionChange = jest.fn();
 

packages/components/menu/src/menu-item.tsx

@@ -12,7 +12,6 @@ export interface MenuItemProps<T extends object = object>
 const MenuItem = (props: MenuItemProps) => {
   const {
     Component,
-    FragmentWrapper,
     slots,
     classNames,
     rendered,
@@ -26,7 +25,6 @@ const MenuItem = (props: MenuItemProps) => {
     endContent,
     disableAnimation,
     hideSelectedIcon,
-    fragmentWrapperProps,
     getItemProps,
     getLabelProps,
     getDescriptionProps,
@@ -50,7 +48,6 @@ const MenuItem = (props: MenuItemProps) => {
 
   return (
     <Component {...getItemProps()}>
-      <FragmentWrapper {...fragmentWrapperProps}>
       {startContent}
       {description ? (
         <div className={slots.wrapper({class: classNames?.wrapper})}>
@@ -65,7 +62,6 @@ const MenuItem = (props: MenuItemProps) => {
         <span {...getSelectedIconProps()}>{selectedContent}</span>
       )}
       {endContent}
-      </FragmentWrapper>
     </Component>
   );
 };

packages/components/menu/src/use-menu-item.ts

@@ -2,7 +2,7 @@ import type {MenuItemBaseProps} from "./base/menu-item-base";
 import type {MenuItemVariantProps} from "@nextui-org/theme";
 import type {Node} from "@react-types/shared";
 
-import {useMemo, useRef, useCallback, Fragment} from "react";
+import {useMemo, useRef, useCallback} from "react";
 import {menuItem} from "@nextui-org/theme";
 import {
   HTMLNextUIProps,
@@ -59,7 +59,6 @@ export function useMenuItem<T extends object>(originalProps: UseMenuItemProps<T>
     isReadOnly = false,
     closeOnSelect,
     onClose,
-    href,
     ...otherProps
   } = props;
 
@@ -68,12 +67,9 @@ export function useMenuItem<T extends object>(originalProps: UseMenuItemProps<T>
 
   const domRef = useRef<HTMLLIElement>(null);
 
-  const Component = as || "li";
+  const Component = as || (otherProps?.href ? "a" : "li");
   const shouldFilterDOMProps = typeof Component === "string";
 
-  const FragmentWrapper = href ? "a" : Fragment;
-  const fragmentWrapperProps = href ? {href} : {};
-
   const {rendered, key} = item;
 
   const isDisabledProp = state.disabledKeys.has(key) || originalProps.isDisabled;
@@ -198,7 +194,6 @@ export function useMenuItem<T extends object>(originalProps: UseMenuItemProps<T>
 
   return {
     Component,
-    FragmentWrapper,
     domRef,
     slots,
     classNames,
@@ -212,7 +207,6 @@ export function useMenuItem<T extends object>(originalProps: UseMenuItemProps<T>
     endContent,
     selectedIcon,
     disableAnimation,
-    fragmentWrapperProps,
     getItemProps,
     getLabelProps,
     hideSelectedIcon,

packages/components/pagination/__tests__/pagination.test.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import {render} from "@testing-library/react";
 
-import {Pagination, PaginationItem} from "../src";
+import {Pagination} from "../src";
 
 describe("Pagination", () => {
   it("should render correctly", () => {
@@ -37,25 +37,6 @@ describe("Pagination", () => {
     expect(prevButton).toBeNull();
   });
 
-  it("should not have anchor tag when href prop is not passed", () => {
-    render(<PaginationItem />);
-    let anchorTag = document.getElementsByTagName("a")[0];
-
-    expect(anchorTag).toBeFalsy();
-  });
-
-  it("should have anchor tag when href prop is passed", () => {
-    const href = "http://www.nextui.org/";
-
-    render(<PaginationItem href={href} />);
-
-    let anchorTag = document.getElementsByTagName("a")[0];
-
-    expect(anchorTag).toBeTruthy();
-
-    expect(anchorTag).toHaveProperty("href", href);
-  });
-
   it("should show dots when total is greater than 10", () => {
     const wrapper = render(<Pagination total={10} />);
 

packages/components/pagination/src/pagination-item.tsx

@@ -5,14 +5,9 @@ import {usePaginationItem, UsePaginationItemProps} from "./use-pagination-item";
 export interface PaginationItemProps extends UsePaginationItemProps {}
 
 const PaginationItem = forwardRef<"li", PaginationItemProps>((props, ref) => {
-  const {Component, FragmentWrapper, fragmentWrapperProps, children, getItemProps} =
+  const {Component, children, getItemProps} = usePaginationItem({...props, ref});
-    usePaginationItem({...props, ref});
 
-  return (
+  return <Component {...getItemProps()}>{children}</Component>;
-    <Component {...getItemProps()}>
-      <FragmentWrapper {...fragmentWrapperProps}>{children}</FragmentWrapper>
-    </Component>
-  );
 });
 
 PaginationItem.displayName = "NextUI.PaginationItem";

packages/components/pagination/src/use-pagination-item.ts

@@ -2,7 +2,7 @@ import type {Ref} from "react";
 import type {HTMLNextUIProps, PropGetter} from "@nextui-org/system";
 import type {LinkDOMProps, PressEvent} from "@react-types/shared";
 
-import {Fragment, useMemo} from "react";
+import {useMemo} from "react";
 import {PaginationItemValue} from "@nextui-org/use-pagination";
 import {clsx, dataAttr} from "@nextui-org/shared-utils";
 import {chain, mergeProps, shouldClientNavigate, useRouter} from "@react-aria/utils";
@@ -64,13 +64,10 @@ export function usePaginationItem(props: UsePaginationItemProps) {
   } = props;
 
   const isLink = !!props?.href;
-  const Component = as || "li";
+  const Component = as || isLink ? "a" : "li";
   const shouldFilterDOMProps = typeof Component === "string";
-
-  const FragmentWrapper = isLink ? "a" : Fragment;
-  const fragmentWrapperProps = isLink ? {href: props.href} : {};
-
   const domRef = useDOMRef(ref);
+
   const router = useRouter();
 
   const ariaLabel = useMemo(
@@ -132,8 +129,6 @@ export function usePaginationItem(props: UsePaginationItemProps) {
 
   return {
     Component,
-    FragmentWrapper,
-    fragmentWrapperProps,
     children,
     ariaLabel,
     isFocused,