[OptionUnstyled] Define ownerState and slot props' types (mui#32717)

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import OptionGroupUnstyled, {
+  OptionGroupUnstyledLabelSlotProps,
+  OptionGroupUnstyledListSlotProps,
+  OptionGroupUnstyledRootSlotProps,
+} from '@mui/base/OptionGroupUnstyled';
+
+const Root = React.forwardRef(function Root(
+  props: OptionGroupUnstyledRootSlotProps,
+  ref: React.ForwardedRef<HTMLLIElement>,
+) {
+  return <li {...props} ref={ref} />;
+});
+
+const Label = React.forwardRef(function Label(
+  props: OptionGroupUnstyledLabelSlotProps,
+  ref: React.ForwardedRef<HTMLLIElement>,
+) {
+  return <li {...props} ref={ref} />;
+});
+
+const List = React.forwardRef(function List(
+  props: OptionGroupUnstyledListSlotProps,
+  ref: React.ForwardedRef<HTMLLIElement>,
+) {
+  return <li {...props} ref={ref} />;
+});
+
+const option = <OptionGroupUnstyled components={{ Root, Label, List }} />;

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import composeClasses from '../composeClasses';
 import { getOptionGroupUnstyledUtilityClass } from './optionGroupUnstyledClasses';
-import OptionGroupUnstyledProps from './OptionGroupUnstyledProps';
+import { OptionGroupUnstyledProps } from './OptionGroupUnstyled.types';
 
 function useUtilityClasses(disabled: boolean) {
   const slots = {

packages/mui-base/src/OptionGroupUnstyled/OptionGroupUnstyledProps.ts → packages/mui-base/src/OptionGroupUnstyled/OptionGroupUnstyled.types.ts

@@ -2,7 +2,7 @@ import React from 'react';
 
 export interface OptionGroupUnstyledComponentsPropsOverrides {}
 
-export default interface OptionGroupUnstyledProps {
+export interface OptionGroupUnstyledProps {
   /**
    * The human-readable description of the group.
    */
@@ -41,3 +41,19 @@ export default interface OptionGroupUnstyledProps {
     list?: React.ComponentPropsWithRef<'ul'> & OptionGroupUnstyledComponentsPropsOverrides;
   };
 }
+
+export type OptionGroupUnstyledRootSlotProps = {
+  children?: React.ReactNode;
+  className: string;
+  ref: React.Ref<HTMLLIElement>;
+};
+
+export type OptionGroupUnstyledLabelSlotProps = {
+  children?: React.ReactNode;
+  className: string;
+};
+
+export type OptionGroupUnstyledListSlotProps = {
+  children?: React.ReactNode;
+  className: string;
+};

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

@@ -1,7 +1,6 @@
 export { default } from './OptionGroupUnstyled';
 
-export type { default as OptionGroupUnstyledProps } from './OptionGroupUnstyledProps';
-export * from './OptionGroupUnstyledProps';
+export * from './OptionGroupUnstyled.types';
 
 export { default as optionGroupUnstyledClasses } from './optionGroupUnstyledClasses';
 export * from './optionGroupUnstyledClasses';

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import OptionUnstyled, { OptionUnstyledRootSlotProps } from '@mui/base/OptionUnstyled';
+
+const Root = React.forwardRef(function Root<TValue>(
+  props: OptionUnstyledRootSlotProps<TValue>,
+  ref: React.ForwardedRef<HTMLLIElement>,
+) {
+  const { ownerState, ...other } = props;
+
+  return <li data-selected={ownerState.selected} {...other} ref={ref} />;
+});
+
+const option = <OptionUnstyled value={null} components={{ Root }} />;

packages/mui-base/src/OptionUnstyled/OptionUnstyled.test.tsx

@@ -9,7 +9,14 @@ const dummyGetOptionState = () => ({
   selected: false,
 });
 
-const dummyGetOptionProps = () => ({});
+const dummyGetOptionProps = () => ({
+  'aria-disabled': false,
+  'aria-selected': false,
+  label: '',
+  onClick: () => {},
+  role: 'option',
+  value: '',
+});
 
 describe('OptionUnstyled', () => {
   const mount = createMount();

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

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import { OptionState } from '../ListboxUnstyled';
 import composeClasses from '../composeClasses';
-import OptionUnstyledProps, { OptionUnstyledOwnerState } from './OptionUnstyledProps';
+import { OptionUnstyledProps, OptionUnstyledOwnerState } from './OptionUnstyled.types';
 import { SelectUnstyledContext } from '../SelectUnstyled/SelectUnstyledContext';
 import { getOptionUnstyledUtilityClass } from './optionUnstyledClasses';
 import appendOwnerState from '../utils/appendOwnerState';

packages/mui-base/src/OptionUnstyled/OptionUnstyledProps.ts → packages/mui-base/src/OptionUnstyled/OptionUnstyled.types.ts

@@ -1,9 +1,11 @@
 import React from 'react';
+import { Simplify } from '@mui/types';
 import { OptionState } from '../ListboxUnstyled';
+import { UseSelectOptionSlotProps } from '../SelectUnstyled/useSelect.types';
 
 export interface OptionUnstyledComponentsPropsOverrides {}
 
-export default interface OptionUnstyledProps<TValue> {
+export interface OptionUnstyledProps<TValue> {
   /**
    * The value of the option.
    */
@@ -44,4 +46,13 @@ export default interface OptionUnstyledProps<TValue> {
   label?: string;
 }
 
-export type OptionUnstyledOwnerState<TValue> = OptionUnstyledProps<TValue> & OptionState;
+export type OptionUnstyledOwnerState<TValue> = Simplify<OptionUnstyledProps<TValue> & OptionState>;
+
+export type OptionUnstyledRootSlotProps<TValue> = Simplify<
+  UseSelectOptionSlotProps & {
+    children?: React.ReactNode;
+    className: string;
+    ref: React.Ref<HTMLLIElement>;
+    ownerState: OptionUnstyledOwnerState<TValue>;
+  }
+>;

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

@@ -1,7 +1,6 @@
 export { default } from './OptionUnstyled';
 
-export type { default as OptionUnstyledProps } from './OptionUnstyledProps';
-export * from './OptionUnstyledProps';
+export * from './OptionUnstyled.types';
 
 export { default as optionUnstyledClasses } from './optionUnstyledClasses';
 export * from './optionUnstyledClasses';

packages/mui-base/src/SelectUnstyled/SelectUnstyledContext.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { OptionState } from '../ListboxUnstyled';
-import { SelectOption } from './useSelect.types';
+import { SelectOption, UseSelectOptionSlotProps } from './useSelect.types';
 
 export interface SelectUnstyledContextType {
   getOptionState: (value: SelectOption<any>) => OptionState;
-  getOptionProps: (option: SelectOption<any>) => Record<string, any>;
+  getOptionProps: (option: SelectOption<any>) => UseSelectOptionSlotProps;
   listboxRef: React.RefObject<HTMLElement>;
 }