From 0254d0a46215661eb90ec299598da2d8b776c2da Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Mon, 12 Aug 2024 16:20:45 -0400 Subject: [PATCH] Improve child prop type check --- packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx | 6 ++++-- packages/mui-joy/src/Card/Card.tsx | 6 ++++-- packages/mui-joy/src/ListItem/ListItem.tsx | 4 ++-- packages/mui-joy/src/ModalDialog/ModalDialog.tsx | 6 ++++-- .../mui-joy/src/ToggleButtonGroup/ToggleButtonGroup.tsx | 6 ++++-- packages/mui-system/src/Grid/createGrid.tsx | 2 +- 6 files changed, 19 insertions(+), 11 deletions(-) diff --git a/packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx b/packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx index b0c4f85dfb5c12..a9af27749a00b1 100644 --- a/packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx +++ b/packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx @@ -18,6 +18,7 @@ import ButtonGroupContext from './ButtonGroupContext'; import useSlot from '../utils/useSlot'; import buttonClasses from '../Button/buttonClasses'; import iconButtonClasses from '../IconButton/iconButtonClasses'; +import { DividerProps } from '../Divider'; const useUtilityClasses = (ownerState: ButtonGroupOwnerState) => { const { size, variant, color, orientation } = ownerState; @@ -236,10 +237,11 @@ const ButtonGroup = React.forwardRef(function ButtonGroup(inProps, ref) { } const extraProps: Record = {}; if (isMuiElement(child, ['Divider'])) { - extraProps.inset = (child.props as any).inset ?? 'context'; + const childProps = child.props as DividerProps; + extraProps.inset = childProps?.inset ?? 'context'; const dividerOrientation = orientation === 'vertical' ? 'horizontal' : 'vertical'; - extraProps.orientation = (child.props as any).orientation ?? dividerOrientation; + extraProps.orientation = childProps?.orientation ?? dividerOrientation; extraProps.role = 'presentation'; extraProps.component = 'span'; } diff --git a/packages/mui-joy/src/Card/Card.tsx b/packages/mui-joy/src/Card/Card.tsx index 77e9432a4a63a2..7ee7eda5de52d1 100644 --- a/packages/mui-joy/src/Card/Card.tsx +++ b/packages/mui-joy/src/Card/Card.tsx @@ -15,6 +15,7 @@ import { getCardUtilityClass } from './cardClasses'; import { CardProps, CardOwnerState, CardTypeMap } from './CardProps'; import { resolveSxValue } from '../styles/styleUtils'; import useSlot from '../utils/useSlot'; +import { DividerProps } from '../Divider'; const useUtilityClasses = (ownerState: CardOwnerState) => { const { size, variant, color, orientation } = ownerState; @@ -166,10 +167,11 @@ const Card = React.forwardRef(function Card(inProps, ref) { } const extraProps: Record = {}; if (isMuiElement(child, ['Divider'])) { - extraProps.inset = (child.props as any)?.inset ?? 'context'; + const childProps = child.props as DividerProps; + extraProps.inset = childProps?.inset ?? 'context'; const dividerOrientation = orientation === 'vertical' ? 'horizontal' : 'vertical'; - extraProps.orientation = (child.props as any)?.orientation ?? dividerOrientation; + extraProps.orientation = childProps?.orientation ?? dividerOrientation; } if (index === 0) { extraProps['data-first-child'] = ''; diff --git a/packages/mui-joy/src/ListItem/ListItem.tsx b/packages/mui-joy/src/ListItem/ListItem.tsx index 6158ea5cc8f60c..00c73d6a801214 100644 --- a/packages/mui-joy/src/ListItem/ListItem.tsx +++ b/packages/mui-joy/src/ListItem/ListItem.tsx @@ -11,7 +11,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/base/composeClas import { styled, useThemeProps } from '../styles'; import useSlot from '../utils/useSlot'; -import { ListItemOwnerState, ListItemTypeMap } from './ListItemProps'; +import { ListItemOwnerState, ListItemProps, ListItemTypeMap } from './ListItemProps'; import listItemClasses, { getListItemUtilityClass } from './listItemClasses'; import NestedListContext from '../List/NestedListContext'; import RowListContext from '../List/RowListContext'; @@ -256,7 +256,7 @@ const ListItem = React.forwardRef(function ListItem(inProps, ref) { ...(index === 0 && { 'data-first-child': '' }), ...(isMuiElement(child, ['ListItem']) && { // The ListItem of ListItem should not be 'li' - component: (child.props as any).component || 'div', + component: (child.props as ListItemProps)?.component || 'div', }), }) : child, diff --git a/packages/mui-joy/src/ModalDialog/ModalDialog.tsx b/packages/mui-joy/src/ModalDialog/ModalDialog.tsx index 0b26984bbb84fe..633ee0ee3b2d2f 100644 --- a/packages/mui-joy/src/ModalDialog/ModalDialog.tsx +++ b/packages/mui-joy/src/ModalDialog/ModalDialog.tsx @@ -18,6 +18,7 @@ import ModalDialogSizeContext from './ModalDialogSizeContext'; import ModalDialogVariantColorContext from './ModalDialogVariantColorContext'; import useSlot from '../utils/useSlot'; import { StyledCardRoot } from '../Card/Card'; +import { DividerProps } from '../Divider'; const useUtilityClasses = (ownerState: ModalDialogOwnerState) => { const { variant, color, size, layout } = ownerState; @@ -195,10 +196,11 @@ const ModalDialog = React.forwardRef(function ModalDialog(inProps, ref) { } const extraProps: Record = {}; if (isMuiElement(child, ['Divider'])) { - extraProps.inset = (child.props as any).inset ?? 'context'; + const childProps = child.props as DividerProps; + extraProps.inset = childProps?.inset ?? 'context'; const dividerOrientation = orientation === 'vertical' ? 'horizontal' : 'vertical'; - extraProps.orientation = (child.props as any).orientation ?? dividerOrientation; + extraProps.orientation = childProps?.orientation ?? dividerOrientation; } if (index === 0) { extraProps['data-first-child'] = ''; diff --git a/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroup.tsx b/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroup.tsx index f456f03495002f..82b747a653e911 100644 --- a/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroup.tsx +++ b/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroup.tsx @@ -21,6 +21,7 @@ import useSlot from '../utils/useSlot'; import { StyledButtonGroup } from '../ButtonGroup/ButtonGroup'; import ButtonGroupContext from '../ButtonGroup/ButtonGroupContext'; import ToggleButtonGroupContext from './ToggleButtonGroupContext'; +import { DividerProps } from '../Divider'; interface InternalChangeEventHandler { (event: React.MouseEvent, value: Value | Array | null): void; @@ -161,10 +162,11 @@ const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup< } const extraProps: Record = {}; if (isMuiElement(child, ['Divider'])) { - extraProps.inset = (child.props as any).inset ?? 'context'; + const childProps = child.props as DividerProps; + extraProps.inset = childProps?.inset ?? 'context'; const dividerOrientation = orientation === 'vertical' ? 'horizontal' : 'vertical'; - extraProps.orientation = (child.props as any).orientation ?? dividerOrientation; + extraProps.orientation = childProps?.orientation ?? dividerOrientation; extraProps.role = 'presentation'; extraProps.component = 'span'; } diff --git a/packages/mui-system/src/Grid/createGrid.tsx b/packages/mui-system/src/Grid/createGrid.tsx index 4fb1ed788d94a2..0f43262e5ffc7a 100644 --- a/packages/mui-system/src/Grid/createGrid.tsx +++ b/packages/mui-system/src/Grid/createGrid.tsx @@ -171,7 +171,7 @@ export default function createGrid( {React.Children.map(children, (child) => { if (React.isValidElement(child) && isMuiElement(child, ['Grid'])) { return React.cloneElement(child, { - unstable_level: (child.props as any).unstable_level ?? level + 1, + unstable_level: (child.props as GridProps)?.unstable_level ?? level + 1, } as GridProps); } return child;