diff --git a/packages/mui-base/src/OptionGroupUnstyled/OptionGroupUnstyled.spec.tsx b/packages/mui-base/src/OptionGroupUnstyled/OptionGroupUnstyled.spec.tsx new file mode 100644 index 00000000000000..ff77e66e1e4fb0 --- /dev/null +++ b/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, +) { + return
  • ; +}); + +const Label = React.forwardRef(function Label( + props: OptionGroupUnstyledLabelSlotProps, + ref: React.ForwardedRef, +) { + return
  • ; +}); + +const List = React.forwardRef(function List( + props: OptionGroupUnstyledListSlotProps, + ref: React.ForwardedRef, +) { + return
  • ; +}); + +const option = ; diff --git a/packages/mui-base/src/OptionGroupUnstyled/OptionGroupUnstyled.tsx b/packages/mui-base/src/OptionGroupUnstyled/OptionGroupUnstyled.tsx index 753ef25433675e..8f18d5c3b35e89 100644 --- a/packages/mui-base/src/OptionGroupUnstyled/OptionGroupUnstyled.tsx +++ b/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 = { diff --git a/packages/mui-base/src/OptionGroupUnstyled/OptionGroupUnstyledProps.ts b/packages/mui-base/src/OptionGroupUnstyled/OptionGroupUnstyled.types.ts similarity index 76% rename from packages/mui-base/src/OptionGroupUnstyled/OptionGroupUnstyledProps.ts rename to packages/mui-base/src/OptionGroupUnstyled/OptionGroupUnstyled.types.ts index 5e462b1ffc9e55..2e7fae02ddac14 100644 --- a/packages/mui-base/src/OptionGroupUnstyled/OptionGroupUnstyledProps.ts +++ b/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; +}; + +export type OptionGroupUnstyledLabelSlotProps = { + children?: React.ReactNode; + className: string; +}; + +export type OptionGroupUnstyledListSlotProps = { + children?: React.ReactNode; + className: string; +}; diff --git a/packages/mui-base/src/OptionGroupUnstyled/index.ts b/packages/mui-base/src/OptionGroupUnstyled/index.ts index 97f745fecdc80d..9498b5b2aba064 100644 --- a/packages/mui-base/src/OptionGroupUnstyled/index.ts +++ b/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'; diff --git a/packages/mui-base/src/OptionUnstyled/OptionUnstyled.spec.tsx b/packages/mui-base/src/OptionUnstyled/OptionUnstyled.spec.tsx new file mode 100644 index 00000000000000..c41c427dc2ea98 --- /dev/null +++ b/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( + props: OptionUnstyledRootSlotProps, + ref: React.ForwardedRef, +) { + const { ownerState, ...other } = props; + + return
  • ; +}); + +const option = ; diff --git a/packages/mui-base/src/OptionUnstyled/OptionUnstyled.test.tsx b/packages/mui-base/src/OptionUnstyled/OptionUnstyled.test.tsx index 2110401056fe05..f7b4bc3623a344 100644 --- a/packages/mui-base/src/OptionUnstyled/OptionUnstyled.test.tsx +++ b/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(); diff --git a/packages/mui-base/src/OptionUnstyled/OptionUnstyled.tsx b/packages/mui-base/src/OptionUnstyled/OptionUnstyled.tsx index 5b75d9ad8e039e..969da582c3b240 100644 --- a/packages/mui-base/src/OptionUnstyled/OptionUnstyled.tsx +++ b/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'; diff --git a/packages/mui-base/src/OptionUnstyled/OptionUnstyledProps.ts b/packages/mui-base/src/OptionUnstyled/OptionUnstyled.types.ts similarity index 69% rename from packages/mui-base/src/OptionUnstyled/OptionUnstyledProps.ts rename to packages/mui-base/src/OptionUnstyled/OptionUnstyled.types.ts index 366c5873f059f1..2c81448a5db400 100644 --- a/packages/mui-base/src/OptionUnstyled/OptionUnstyledProps.ts +++ b/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 { +export interface OptionUnstyledProps { /** * The value of the option. */ @@ -44,4 +46,13 @@ export default interface OptionUnstyledProps { label?: string; } -export type OptionUnstyledOwnerState = OptionUnstyledProps & OptionState; +export type OptionUnstyledOwnerState = Simplify & OptionState>; + +export type OptionUnstyledRootSlotProps = Simplify< + UseSelectOptionSlotProps & { + children?: React.ReactNode; + className: string; + ref: React.Ref; + ownerState: OptionUnstyledOwnerState; + } +>; diff --git a/packages/mui-base/src/OptionUnstyled/index.ts b/packages/mui-base/src/OptionUnstyled/index.ts index ae096d9ef42987..71841c1f883e07 100644 --- a/packages/mui-base/src/OptionUnstyled/index.ts +++ b/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'; diff --git a/packages/mui-base/src/SelectUnstyled/SelectUnstyledContext.ts b/packages/mui-base/src/SelectUnstyled/SelectUnstyledContext.ts index ee6ebad5ff3465..4ebdcc60e85caf 100644 --- a/packages/mui-base/src/SelectUnstyled/SelectUnstyledContext.ts +++ b/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) => OptionState; - getOptionProps: (option: SelectOption) => Record; + getOptionProps: (option: SelectOption) => UseSelectOptionSlotProps; listboxRef: React.RefObject; }