From 79d3f39eebc95b9c941e4e457d9c264771edd386 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Wed, 26 Apr 2023 12:06:15 +0100 Subject: [PATCH 01/10] [Select][base] Drop component prop --- docs/data/base/components/select/select.md | 29 ++++++++++------- docs/pages/base/api/select.json | 1 - .../api-docs-base/select/select.json | 1 - packages/mui-base/src/Select/Select.spec.tsx | 31 +++++++++++++++---- packages/mui-base/src/Select/Select.test.tsx | 1 + packages/mui-base/src/Select/Select.tsx | 16 +++------- 6 files changed, 48 insertions(+), 31 deletions(-) diff --git a/docs/data/base/components/select/select.md b/docs/data/base/components/select/select.md index 16e9ee389d8fd3..0f28006e6cdd08 100644 --- a/docs/data/base/components/select/select.md +++ b/docs/data/base/components/select/select.md @@ -112,17 +112,12 @@ Option renders as an `
  • `: ``` -### Slot props +### Custom structure -:::info -The following props are available on all non-utility Base components. -See [Usage](/base/getting-started/usage/) for full details. -::: - -Use the `component` prop to override the root slot with a custom element: +Use the `slots.root` prop to override the root slot with a custom element: ```jsx - ``` Use the `slots` prop to override any interior slots in addition to the root: @@ -131,10 +126,6 @@ Use the `slots` prop to override any interior slots in addition to the root: ``` +#### Usage with TypeScript + +In TypeScript, you can specify the custom component type used in the `slots.root` as a generic to the unstyled component. This way, you can safely provide the custom compoenent's props directly on the compnent: + +```tsx + slots={{ root: CustomComponent }} customProp /> +``` + +The same applies for props specific to custom primitive elements: + +````tsx + slots={{ root: 'button' }} onClick={() => {}} /> + ## Hooks ```js @@ -207,3 +211,4 @@ Unlike the native ` - + + slots={{ + root: CustomComponent, + }} + stringProp="test" + numberProp={0} + /> {/* @ts-expect-error */} - ) => e.currentTarget.checkValidity()} /> - - component="button" + + slots={{ + root: 'button', + }} ref={(elem) => { expectType(elem); }} diff --git a/packages/mui-base/src/Select/Select.test.tsx b/packages/mui-base/src/Select/Select.test.tsx index 460cd929932fbd..72c9c7fb0e9a55 100644 --- a/packages/mui-base/src/Select/Select.test.tsx +++ b/packages/mui-base/src/Select/Select.test.tsx @@ -47,6 +47,7 @@ describe(' -``` - -Use the `slots` prop to override any interior slots in addition to the root: +Use the `slots` prop to override the root or any other interior slot: ```jsx - + slots={{ root: 'a', }} href="#" /> - + slots={{ root: 'button', }} onClick={(e: React.MouseEvent) => e.currentTarget.checkValidity()} /> - + slots={{ root: 'button', }} diff --git a/packages/mui-base/src/Select/Select.tsx b/packages/mui-base/src/Select/Select.tsx index 28175b810325a9..1e53d24570b912 100644 --- a/packages/mui-base/src/Select/Select.tsx +++ b/packages/mui-base/src/Select/Select.tsx @@ -7,10 +7,10 @@ import { SelectPopperSlotProps, SelectProps, SelectRootSlotProps, - SelectTypeMap, + SelectType, } from './Select.types'; import useSelect, { SelectValue } from '../useSelect'; -import { PolymorphicComponent, useSlotProps, WithOptionalOwnerState } from '../utils'; +import { useSlotProps, WithOptionalOwnerState } from '../utils'; import Popper from '../Popper'; import composeClasses from '../composeClasses'; import { getSelectUtilityClass } from './selectClasses'; @@ -248,7 +248,7 @@ const Select = React.forwardRef(function Select< )} ); -}) as PolymorphicComponent>; +}) as SelectType; Select.propTypes /* remove-proptypes */ = { // ----------------------------- Warning -------------------------------- diff --git a/packages/mui-base/src/Select/Select.types.ts b/packages/mui-base/src/Select/Select.types.ts index e7d6aea61f2bb5..6a7262b40119a2 100644 --- a/packages/mui-base/src/Select/Select.types.ts +++ b/packages/mui-base/src/Select/Select.types.ts @@ -1,9 +1,9 @@ import * as React from 'react'; -import { DefaultComponentProps, OverrideProps, Simplify } from '@mui/types'; +import { DefaultComponentProps, Simplify } from '@mui/types'; import { SelectValue, UseSelectButtonSlotProps, UseSelectListboxSlotProps } from '../useSelect'; import { SelectOption } from '../useOption'; import Popper, { PopperProps } from '../Popper'; -import { SlotComponentProps, WithOptionalOwnerState } from '../utils'; +import { PolymorphicProps, SlotComponentProps, WithOptionalOwnerState } from '../utils'; export interface SelectRootSlotPropsOverrides {} export interface SelectListboxSlotPropsOverrides {} @@ -155,12 +155,10 @@ export type SelectProps< OptionValue, Multiple >['defaultComponent'], -> = OverrideProps< +> = PolymorphicProps< SelectTypeMap, RootComponentType -> & { - component?: RootComponentType; -}; +>; // OverridableComponent cannot be used below as Select's props are generic. export interface SelectType { @@ -169,13 +167,7 @@ export interface SelectType { RootComponentType extends React.ElementType, Multiple extends boolean = false, >( - props: { - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: RootComponentType; - } & OverrideProps, RootComponentType>, + props: PolymorphicProps, RootComponentType>, ): JSX.Element | null; ( props: DefaultComponentProps>, From e19c8d99cf9a67071980be703899fec48a382dea Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Fri, 28 Apr 2023 12:38:59 +0100 Subject: [PATCH 05/10] add info to docs --- docs/data/base/components/select/select.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/data/base/components/select/select.md b/docs/data/base/components/select/select.md index ae24d1e1eb7fcd..9b7f97b88d36ed 100644 --- a/docs/data/base/components/select/select.md +++ b/docs/data/base/components/select/select.md @@ -120,6 +120,11 @@ Use the `slots` prop to override the root or any other interior slot: `, groups can be nested. The following demo shows how to group options with the Option Group component: {{"demo": "UnstyledSelectGrouping.js", "defaultCodeOpen": false}} -```` + +``` + +``` From 3001ea18f57e436c62710a4327e471dcc33de62b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Sat, 29 Apr 2023 22:13:00 +0200 Subject: [PATCH 08/10] Remove unnecessary code block --- docs/data/base/components/select/select.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/docs/data/base/components/select/select.md b/docs/data/base/components/select/select.md index 898a82ea64ce35..f0d790808baf0b 100644 --- a/docs/data/base/components/select/select.md +++ b/docs/data/base/components/select/select.md @@ -211,7 +211,3 @@ Unlike the native ` - + slots={{ root: 'a', }} href="#" /> -