archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

fix: reverting pr4168 (#4286)

Browse Source 
* 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
This commit is contained in:
Maharshi Alpesh 2024-12-09 20:19:07 +05:30 committed by GitHub
parent 3d782a27de
commit 11eae5cc80
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 42 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.changeset/breezy-bobcats-destroy.md Normal file
View File

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

34
packages/components/listbox/__tests__/listbox.test.tsx
View File

@ -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();

28
packages/components/listbox/src/listbox-item.tsx
View File

@ -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,21 +45,19 @@ const ListboxItem = (props: ListboxItemProps) => {
return (
<Component {...getItemProps()}>
<FragmentWrapper {...fragmentWrapperProps}>
{startContent}
{description ? (
<div {...getWrapperProps()}>
<span {...getLabelProps()}>{rendered}</span>
<span {...getDescriptionProps()}>{description}</span>
</div>
) : (
{startContent}
{description ? (
<div {...getWrapperProps()}>
<span {...getLabelProps()}>{rendered}</span>
)}
{isSelectable && !hideSelectedIcon && (
<span {...getSelectedIconProps()}>{selectedContent}</span>
)}
{endContent}
</FragmentWrapper>
<span {...getDescriptionProps()}>{description}</span>
</div>
) : (
<span {...getLabelProps()}>{rendered}</span>
)}
{isSelectable && !hideSelectedIcon && (
<span {...getSelectedIconProps()}>{selectedContent}</span>
)}
{endContent}
</Component>
);
};

10
packages/components/listbox/src/use-listbox-item.ts
View File

@ -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,

40
packages/components/menu/__tests__/menu.test.tsx
View File

@ -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();

30
packages/components/menu/src/menu-item.tsx
View File

@ -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,22 +48,20 @@ const MenuItem = (props: MenuItemProps) => {
return (
<Component {...getItemProps()}>
<FragmentWrapper {...fragmentWrapperProps}>
{startContent}
{description ? (
<div className={slots.wrapper({class: classNames?.wrapper})}>
<span {...getLabelProps()}>{rendered}</span>
<span {...getDescriptionProps()}>{description}</span>
</div>
) : (
{startContent}
{description ? (
<div className={slots.wrapper({class: classNames?.wrapper})}>
<span {...getLabelProps()}>{rendered}</span>
)}
{shortcut && <kbd {...getKeyboardShortcutProps()}>{shortcut}</kbd>}
{isSelectable && !hideSelectedIcon && (
<span {...getSelectedIconProps()}>{selectedContent}</span>
)}
{endContent}
</FragmentWrapper>
<span {...getDescriptionProps()}>{description}</span>
</div>
) : (
<span {...getLabelProps()}>{rendered}</span>
)}
{shortcut && <kbd {...getKeyboardShortcutProps()}>{shortcut}</kbd>}
{isSelectable && !hideSelectedIcon && (
<span {...getSelectedIconProps()}>{selectedContent}</span>
)}
{endContent}
</Component>
);
};

10
packages/components/menu/src/use-menu-item.ts
View File

@ -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,

21
packages/components/pagination/__tests__/pagination.test.tsx
View File

@ -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} />);

9
packages/components/pagination/src/pagination-item.tsx
View File

@ -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} =
usePaginationItem({...props, ref});
const {Component, children, getItemProps} = usePaginationItem({...props, ref});
return (
<Component {...getItemProps()}>
<FragmentWrapper {...fragmentWrapperProps}>{children}</FragmentWrapper>
</Component>
);
return <Component {...getItemProps()}>{children}</Component>;
});
PaginationItem.displayName = "NextUI.PaginationItem";

11
packages/components/pagination/src/use-pagination-item.ts
View File

@ -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,