Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tabs: use correct ariakit type for root component #68207

Merged
merged 1 commit into from
Dec 23, 2024
Merged

Tabs: use correct ariakit type for root component #68207

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions packages/components/src/tabs/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export type TabsProps = {
* `Tabs.Tablist` component and as many instances of the `Tabs.TabPanel`
* components as there are `Tabs.Tab` components.
*/
children: Ariakit.TabProps[ 'children' ];
children: Ariakit.TabProviderProps[ 'children' ];
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now it all makes sense! 👍

/**
* Determines if the tab should be selected when it receives focus. If set to
* `false`, the tab will only be selected upon clicking, not when using arrow
Expand All @@ -33,7 +33,7 @@ export type TabsProps = {
*
* @see https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/
*/
selectOnMove?: Ariakit.TabStoreProps[ 'selectOnMove' ];
selectOnMove?: Ariakit.TabProviderProps[ 'selectOnMove' ];
/**
* The id of the tab whose panel is currently visible.
*
Expand All @@ -44,7 +44,7 @@ export type TabsProps = {
* in "controlled" mode. When in "controlled" mode, the `null` value will
* result in no tabs being selected, and the tablist becoming tabbable.
*/
selectedTabId?: Ariakit.TabStoreProps[ 'selectedId' ];
selectedTabId?: Ariakit.TabProviderProps[ 'selectedId' ];
/**
* The id of the tab whose panel is currently visible.
*
Expand All @@ -55,11 +55,11 @@ export type TabsProps = {
* Note: this prop will be overridden by the `selectedTabId` prop if it is
* provided (meaning the component will be used in "controlled" mode).
*/
defaultTabId?: Ariakit.TabStoreProps[ 'defaultSelectedId' ];
defaultTabId?: Ariakit.TabProviderProps[ 'defaultSelectedId' ];
/**
* The function called when the `selectedTabId` changes.
*/
onSelect?: Ariakit.TabStoreProps[ 'setSelectedId' ];
onSelect?: Ariakit.TabProviderProps[ 'setSelectedId' ];
/**
* The current active tab `id`. The active tab is the tab element within the
* tablist widget that has DOM focus.
Expand All @@ -69,7 +69,7 @@ export type TabsProps = {
* itself will have focus and users will be able to navigate to it using
* arrow keys.activeTabId
*/
activeTabId?: Ariakit.TabStoreProps[ 'activeId' ];
activeTabId?: Ariakit.TabProviderProps[ 'activeId' ];
/**
* The tab id that should be active by default when the composite widget is
* rendered. If `null`, the tablist element itself will have focus
Expand All @@ -79,11 +79,11 @@ export type TabsProps = {
* Note: this prop will be overridden by the `activeTabId` prop if it is
* provided.
*/
defaultActiveTabId?: Ariakit.TabStoreProps[ 'defaultActiveId' ];
defaultActiveTabId?: Ariakit.TabProviderProps[ 'defaultActiveId' ];
/**
* A callback that gets called when the `activeTabId` state changes.
*/
onActiveTabIdChange?: Ariakit.TabStoreProps[ 'setActiveId' ];
onActiveTabIdChange?: Ariakit.TabProviderProps[ 'setActiveId' ];
/**
* Defines the orientation of the tablist and determines which arrow keys
* can be used to move focus:
Expand All @@ -93,7 +93,7 @@ export type TabsProps = {
*
* @default "horizontal"
*/
orientation?: Ariakit.TabStoreProps[ 'orientation' ];
orientation?: Ariakit.TabProviderProps[ 'orientation' ];
};

export type TabListProps = {
Expand Down
Loading