[TabsListUnstyled] Define ownerState and slot props' types

packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.spec.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import TabsListUnstyled, { TabsListUnstyledRootSlotProps } from '@mui/base/TabsListUnstyled';
+
+function Root(props: TabsListUnstyledRootSlotProps) {
+  const { ownerState, ...other } = props;
+  return <div data-orientation={ownerState.orientation} {...other} />;
+}
+
+const styledTabsList = <TabsListUnstyled components={{ Root }} />;

packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.tsx

@@ -3,9 +3,13 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { OverridableComponent } from '@mui/types';
 import composeClasses from '../composeClasses';
-import { appendOwnerState } from '../utils';
+import { appendOwnerState, WithOptionalOwnerState } from '../utils';
 import { getTabsListUnstyledUtilityClass } from './tabsListUnstyledClasses';
-import TabsListUnstyledProps, { TabsListUnstyledTypeMap } from './TabsListUnstyledProps';
+import {
+  TabsListUnstyledProps,
+  TabsListUnstyledRootSlotProps,
+  TabsListUnstyledTypeMap,
+} from './TabsListUnstyled.types';
 import useTabsList from './useTabsList';
 
 const useUtilityClasses = (ownerState: { orientation: 'horizontal' | 'vertical' }) => {
@@ -42,23 +46,20 @@ const TabsListUnstyled = React.forwardRef<unknown, TabsListUnstyledProps>((props
   const classes = useUtilityClasses(ownerState);
 
   const TabsListRoot: React.ElementType = component ?? components.Root ?? 'div';
-  const tabsListRootProps = appendOwnerState(
+  const tabsListRootProps: WithOptionalOwnerState<TabsListUnstyledRootSlotProps> = appendOwnerState(
     TabsListRoot,
-    { ...other, ...componentsProps.root },
+    {
+      ...getRootProps(),
+      ...other,
+      ...componentsProps.root,
+      className: clsx(className, componentsProps.root?.className, classes.root),
+    },
     ownerState,
   );
 
   const processedChildren = processChildren();
 
-  return (
-    <TabsListRoot
-      {...getRootProps()}
-      {...tabsListRootProps}
-      className={clsx(className, componentsProps.root?.className, classes.root)}
-    >
-      {processedChildren}
-    </TabsListRoot>
-  );
+  return <TabsListRoot {...tabsListRootProps}>{processedChildren}</TabsListRoot>;
 }) as OverridableComponent<TabsListUnstyledTypeMap>;
 
 TabsListUnstyled.propTypes /* remove-proptypes */ = {

packages/mui-base/src/TabsListUnstyled/TabsListUnstyledProps.ts → packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.types.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { OverrideProps } from '@mui/types';
+import { UseTabsListRootSlotProps } from './useTabsList.types';
 
 interface TabsListUnstyledComponentsPropsOverrides {}
 
@@ -31,7 +32,7 @@ export interface TabsListUnstyledTypeMap<P = {}, D extends React.ElementType = '
   defaultComponent: D;
 }
 
-type TabsListUnstyledProps<
+export type TabsListUnstyledProps<
   D extends React.ElementType = TabsListUnstyledTypeMap['defaultComponent'],
   P = {},
 > = OverrideProps<TabsListUnstyledTypeMap<P, D>, D> & {
@@ -43,4 +44,12 @@ type TabsListUnstyledProps<
   component?: D;
 };
 
-export default TabsListUnstyledProps;
+export type TabsListUnstyledOwnerState = TabsListUnstyledProps & {
+  isRtl: boolean;
+  orientation: 'horizontal' | 'vertical';
+};
+
+export type TabsListUnstyledRootSlotProps = UseTabsListRootSlotProps & {
+  className?: string;
+  ownerState: TabsListUnstyledOwnerState;
+};

packages/mui-base/src/TabsListUnstyled/index.ts

@@ -1,6 +1,8 @@
 export { default } from './TabsListUnstyled';
+export * from './TabsListUnstyled.types';
+
 export { default as tabsListUnstyledClasses } from './tabsListUnstyledClasses';
 export * from './tabsListUnstyledClasses';
-export type { default as TabsListUnstyledProps } from './TabsListUnstyledProps';
+
 export { default as useTabsList } from './useTabsList';
-export * from './useTabsList';
+export * from './useTabsList.types';

packages/mui-base/src/TabsListUnstyled/useTabsList.ts

@@ -6,6 +6,8 @@ import {
 import { isFragment } from 'react-is';
 import { useTabContext } from '../TabsUnstyled';
 import extractEventHandlers from '../utils/extractEventHandlers';
+import { UseTabsListParameters, UseTabsListRootSlotProps } from './useTabsList.types';
+import { EventHandlers } from '../utils';
 
 const nextItem = (list: Element | null, item: Element | null): Element | null => {
   if (!list) {
@@ -66,18 +68,8 @@ const moveFocus = (
   }
 };
 
-export interface UseTabsListProps {
-  'aria-label'?: string;
-  'aria-labelledby'?: string;
-  /**
-   * The content of the component.
-   */
-  children?: React.ReactNode;
-  ref: React.Ref<unknown>;
-}
-
-const useTabsList = (props: UseTabsListProps) => {
-  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, children, ref } = props;
+const useTabsList = (parameters: UseTabsListParameters) => {
+  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, children, ref } = parameters;
 
   const tabsListRef = React.createRef<any>();
   const handleRef = useForkRef(tabsListRef, ref);
@@ -138,22 +130,24 @@ const useTabsList = (props: UseTabsListProps) => {
       otherHandlers.onKeyDown?.(event);
     };
 
-  const getRootProps = (otherHandlers?: Record<string, React.EventHandler<any>>) => {
-    const propsEventHandlers = extractEventHandlers(props);
+  const getRootProps = <TOther extends EventHandlers = {}>(
+    otherHandlers: TOther = {} as TOther,
+  ): UseTabsListRootSlotProps<TOther> => {
+    const propsEventHandlers = extractEventHandlers(parameters);
     const externalEventHandlers = { ...propsEventHandlers, ...otherHandlers };
 
     const ownEventHandlers = {
       onKeyDown: createHandleKeyDown(externalEventHandlers),
     };
 
-    const mergedEventHandlers: Record<string, React.EventHandler<any>> = {
+    const mergedEventHandlers = {
       ...externalEventHandlers,
       ...ownEventHandlers,
     };
     return {
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
-      'aria-orientation': orientation === 'vertical' ? 'vertical' : null,
+      'aria-orientation': orientation === 'vertical' ? 'vertical' : undefined,
       role: 'tablist',
       ref: handleRef,
       ...mergedEventHandlers,

packages/mui-base/src/TabsListUnstyled/useTabsList.types.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+export interface UseTabsListParameters {
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  ref: React.Ref<unknown>;
+}
+
+export type UseTabsListRootSlotProps<TOther = {}> = TOther & {
+  'aria-label'?: React.AriaAttributes['aria-label'];
+  'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
+  'aria-orientation'?: React.AriaAttributes['aria-orientation'];
+  role: React.AriaRole;
+  ref: React.Ref<any>;
+  onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
+};