TabsListUnstyled types

mui · May 27, 2022 · b4bc1f3 · b4bc1f3
1 parent 4f4fc54
commit b4bc1f3
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 17 deletions.
diff --git a/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.spec.tsx b/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 }} />;
diff --git a/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.tsx b/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 */ = {

diff --git a/...TabsListUnstyled/TabsListUnstyledProps.ts → ...absListUnstyled/TabsListUnstyled.types.ts b/...TabsListUnstyled/TabsListUnstyledProps.ts → ...absListUnstyled/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;
+};
diff --git a/packages/mui-base/src/TabsListUnstyled/index.ts b/packages/mui-base/src/TabsListUnstyled/index.ts
@@ -1,5 +1,5 @@
 export { default } from './TabsListUnstyled';
-export type { default as TabsListUnstyledProps } from './TabsListUnstyledProps';
+export * from './TabsListUnstyled.types';
 
 export { default as tabsListUnstyledClasses } from './tabsListUnstyledClasses';
 export * from './tabsListUnstyledClasses';

diff --git a/packages/mui-base/src/TabsListUnstyled/useTabsList.types.ts b/packages/mui-base/src/TabsListUnstyled/useTabsList.types.ts
@@ -15,6 +15,6 @@ export type UseTabsListRootSlotProps<TOther = {}> = TOther & {
   'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
   'aria-orientation'?: React.AriaAttributes['aria-orientation'];
   role: React.AriaRole;
-  ref: React.Ref<unknown>;
+  ref: React.Ref<any>;
   onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
 };