diff --git a/docs/data/base/components/tabs/UnstyledTabsRouting.tsx b/docs/data/base/components/tabs/UnstyledTabsRouting.tsx index 05ab105aa9..754b431410 100644 --- a/docs/data/base/components/tabs/UnstyledTabsRouting.tsx +++ b/docs/data/base/components/tabs/UnstyledTabsRouting.tsx @@ -51,20 +51,14 @@ function MyTabs() { } + render={(props) => } > Inbox - } - > + }> Drafts - } - > + }> Trash diff --git a/packages/mui-base/src/useTab/useTab.ts b/packages/mui-base/src/useTab/useTab.ts index 4b9b19a32d..e457d6e404 100644 --- a/packages/mui-base/src/useTab/useTab.ts +++ b/packages/mui-base/src/useTab/useTab.ts @@ -8,7 +8,6 @@ import { useListItem } from '../useList'; import { useButton } from '../useButton'; import { TabMetadata } from '../useTabs'; import { combineHooksSlotProps } from '../utils/combineHooksSlotProps'; -import { useTabsListContext } from '../Tabs/TabsList/TabsListContext'; import { mergeReactProps } from '../utils/mergeReactProps'; function tabValueGenerator(otherTabValues: Set) { @@ -32,7 +31,6 @@ function useTab(parameters: UseTabParameters): UseTabReturnValue { const id = useId(idParam); const { value: selectedValue, getTabPanelId, orientation } = useTabsContext(); - const { activateOnFocus } = useTabsListContext(); const tabMetadata = React.useMemo(() => ({ disabled, ref: tabRef, id }), [disabled, tabRef, id]); @@ -48,7 +46,7 @@ function useTab(parameters: UseTabParameters): UseTabReturnValue { const { getRootProps: getButtonProps, rootRef: buttonRefHandler } = useButton({ disabled, - focusableWhenDisabled: !activateOnFocus, + focusableWhenDisabled: true, type: 'button', }); diff --git a/packages/mui-base/src/utils/BaseUI.types.ts b/packages/mui-base/src/utils/BaseUI.types.ts index 93c2b033d7..ae0046ce5b 100644 --- a/packages/mui-base/src/utils/BaseUI.types.ts +++ b/packages/mui-base/src/utils/BaseUI.types.ts @@ -1,3 +1,5 @@ +import * as React from 'react'; + export type BaseUIEvent> = E & { preventBaseUIHandler: () => void; }; @@ -29,10 +31,11 @@ export type ComponentRenderFn = (props: Props, state: State) => Re * Props shared by all Base UI components. * Contains `className` (string or callback taking the component's state as an argument) and `render` (function to customize rendering). */ -export type BaseUIComponentProps = Omit< - WithBaseUIEvent>, - 'className' -> & { +export type BaseUIComponentProps< + ElementType extends React.ElementType, + OwnerState, + RenderFunctionProps = React.HTMLAttributes, +> = Omit>, 'className'> & { /** * Class names applied to the element or a function that returns them based on the component's state. */ @@ -40,5 +43,5 @@ export type BaseUIComponentProps, OwnerState>; + render?: ComponentRenderFn; }; diff --git a/packages/mui-base/src/utils/defaultRenderFunctions.tsx b/packages/mui-base/src/utils/defaultRenderFunctions.tsx index e7df117f0b..37d5f0dd75 100644 --- a/packages/mui-base/src/utils/defaultRenderFunctions.tsx +++ b/packages/mui-base/src/utils/defaultRenderFunctions.tsx @@ -2,8 +2,7 @@ import * as React from 'react'; export const defaultRenderFunctions = { button: (props: React.ComponentPropsWithRef<'button'>) => { - // eslint-disable-next-line react/button-has-type - return