Fix type issue when rendering an anchor

docs/data/base/components/tabs/UnstyledTabsRouting.tsx

@@ -51,20 +51,14 @@ function MyTabs() {
       <TabsList>
         <Tab
           value="/inbox/:id"
-          render={(props) => <Link {...(props as any)} to="/inbox/1" />}
+          render={(props) => <Link {...props} to="/inbox/1" />}
         >
           Inbox
         </Tab>
-        <Tab
-          value="/drafts"
-          render={(props) => <Link {...(props as any)} to="/drafts" />}
-        >
+        <Tab value="/drafts" render={(props) => <Link {...props} to="/drafts" />}>
           Drafts
         </Tab>
-        <Tab
-          value="/trash"
-          render={(props) => <Link {...(props as any)} to="/trash" />}
-        >
+        <Tab value="/trash" render={(props) => <Link {...props} to="/trash" />}>
           Trash
         </Tab>
       </TabsList>

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<string | number>) {
@@ -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',
   });
 

packages/mui-base/src/utils/BaseUI.types.ts

@@ -1,3 +1,5 @@
+import * as React from 'react';
+
 export type BaseUIEvent<E extends React.SyntheticEvent<Element, Event>> = E & {
   preventBaseUIHandler: () => void;
 };
@@ -29,16 +31,17 @@ export type ComponentRenderFn<Props, State> = (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<ElementType extends React.ElementType, OwnerState> = Omit<
-  WithBaseUIEvent<React.ComponentPropsWithoutRef<ElementType>>,
-  'className'
-> & {
+export type BaseUIComponentProps<
+  ElementType extends React.ElementType,
+  OwnerState,
+  RenderFunctionProps = React.HTMLAttributes<any>,
+> = Omit<WithBaseUIEvent<React.ComponentPropsWithoutRef<ElementType>>, 'className'> & {
   /**
    * Class names applied to the element or a function that returns them based on the component's state.
    */
   className?: string | ((state: OwnerState) => string);
   /**
    * A function to customize rendering of the component.
    */
-  render?: ComponentRenderFn<React.ComponentPropsWithRef<ElementType>, OwnerState>;
+  render?: ComponentRenderFn<RenderFunctionProps, OwnerState>;
 };

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 <button {...props} />;
+    return <button type="button" {...props} />;
   },
   div: (props: React.ComponentPropsWithRef<'div'>) => {
     return <div {...props} />;