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

feat: add tab ref (#3974)

Browse Source 
* feat: add tab ref

* feat: add changeset
This commit is contained in:
winches 2024-11-04 23:05:47 +08:00 committed by GitHub
parent cb1b3135bc
commit 7c2c9c4875
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 25 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/smooth-mayflies-wonder.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/tabs": patch
---
Add tab ref

1
apps/docs/content/docs/components/tabs.mdx
View File

@ -276,6 +276,7 @@ You can customize the `Tabs` component by passing custom Tailwind CSS classes to
| Attribute | Type | Description | Default |
|-------------------------|-------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------|
| tabRef | `RefObject<HTMLButtonElement>`| A ref to the tab item. | - |
| children\* | `ReactNode` | The content of the tab. | - |
| title | `ReactNode` | The title of the tab. | - |
| titleValue | `string` | A string representation of the item's contents. Use this when the `title` is not readable. | - |

13
packages/components/tabs/__tests__/tabs.test.tsx
View File

@ -388,4 +388,17 @@ describe("Tabs", () => {
expect(input).toHaveValue("23");
});
test("should forward ref to the tab item", () => {
const ref = React.createRef<HTMLButtonElement>();
render(
<Tabs aria-label="Tabs static test">
<Tab key="item1" tabRef={ref} title="Item 1">
<div>Content 1</div>
</Tab>
</Tabs>,
);
expect(ref.current).not.toBeNull();
});
});

4
packages/components/tabs/src/base/tab-item-base.ts
View File

@ -1,5 +1,5 @@
import {BaseItem, ItemProps} from "@nextui-org/aria-utils";
import {ReactNode} from "react";
import {ReactNode, RefObject} from "react";
interface Props<T extends object = {}> extends Omit<ItemProps<"button", T>, "children" | "title"> {
/**
* The content of the component.
@ -18,6 +18,8 @@ interface Props<T extends object = {}> extends Omit<ItemProps<"button", T>, "chi
isDisabled?: boolean;
/** Whether the tab selection should occur on press up instead of press down. */
shouldSelectOnPressUp?: boolean;
/** A ref to the tab item. */
tabRef?: RefObject<HTMLButtonElement>;
}
export type TabItemProps<T extends object = {}> = Props<T>;

5
packages/components/tabs/src/tab.tsx
View File

@ -1,7 +1,7 @@
import type {TabItemProps as BaseTabItemProps} from "./base/tab-item-base";
import {forwardRef} from "@nextui-org/system";
import {useDOMRef, filterDOMProps} from "@nextui-org/react-utils";
import {useDOMRef, filterDOMProps, mergeRefs} from "@nextui-org/react-utils";
import {clsx, dataAttr} from "@nextui-org/shared-utils";
import {chain, mergeProps} from "@react-aria/utils";
import scrollIntoView from "scroll-into-view-if-needed";
@ -44,6 +44,7 @@ const Tab = forwardRef<"button", TabItemProps>((props, ref) => {
disableCursorAnimation,
shouldSelectOnPressUp,
onClick,
tabRef,
...otherProps
} = props;
@ -94,7 +95,7 @@ const Tab = forwardRef<"button", TabItemProps>((props, ref) => {
return (
<Component
ref={domRef}
ref={mergeRefs(domRef, tabRef)}
data-disabled={dataAttr(isDisabledItem)}
data-focus={dataAttr(isFocused)}
data-focus-visible={dataAttr(isFocusVisible)}