diff --git a/.changeset/smooth-mayflies-wonder.md b/.changeset/smooth-mayflies-wonder.md new file mode 100644 index 0000000000..41d4ed5fcd --- /dev/null +++ b/.changeset/smooth-mayflies-wonder.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/tabs": patch +--- + +Add tab ref diff --git a/apps/docs/content/docs/components/tabs.mdx b/apps/docs/content/docs/components/tabs.mdx index cc4fe91417..e097008f79 100644 --- a/apps/docs/content/docs/components/tabs.mdx +++ b/apps/docs/content/docs/components/tabs.mdx @@ -276,6 +276,7 @@ You can customize the `Tabs` component by passing custom Tailwind CSS classes to | Attribute | Type | Description | Default | |-------------------------|-------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------| +| tabRef | `RefObject`| 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. | - | diff --git a/packages/components/tabs/__tests__/tabs.test.tsx b/packages/components/tabs/__tests__/tabs.test.tsx index fe7751e443..34fe9b96a5 100644 --- a/packages/components/tabs/__tests__/tabs.test.tsx +++ b/packages/components/tabs/__tests__/tabs.test.tsx @@ -388,4 +388,17 @@ describe("Tabs", () => { expect(input).toHaveValue("23"); }); + + test("should forward ref to the tab item", () => { + const ref = React.createRef(); + + render( + + +
Content 1
+
+
, + ); + expect(ref.current).not.toBeNull(); + }); }); diff --git a/packages/components/tabs/src/base/tab-item-base.ts b/packages/components/tabs/src/base/tab-item-base.ts index f1bd1abb37..f92080f819 100644 --- a/packages/components/tabs/src/base/tab-item-base.ts +++ b/packages/components/tabs/src/base/tab-item-base.ts @@ -1,5 +1,5 @@ import {BaseItem, ItemProps} from "@nextui-org/aria-utils"; -import {ReactNode} from "react"; +import {ReactNode, RefObject} from "react"; interface Props extends Omit, "children" | "title"> { /** * The content of the component. @@ -18,6 +18,8 @@ interface Props extends Omit, "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; } export type TabItemProps = Props; diff --git a/packages/components/tabs/src/tab.tsx b/packages/components/tabs/src/tab.tsx index 1be4868b4e..fe7d25dd40 100644 --- a/packages/components/tabs/src/tab.tsx +++ b/packages/components/tabs/src/tab.tsx @@ -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 (