@mui/material 6.0.0-alpha.5 → 6.0.0-alpha.7

package/ListSubheader/ListSubheader.js

@@ -7,11 +7,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import capitalize from '../utils/capitalize';
 import { getListSubheaderUtilityClass } from './listSubheaderClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiListSubheader');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -114,7 +114,9 @@ const ListSubheader = /*#__PURE__*/React.forwardRef(function ListSubheader(inPro
     ownerState: ownerState
   }, other));
 });
-ListSubheader.muiSkipListHighlight = true;
+if (ListSubheader) {
+  ListSubheader.muiSkipListHighlight = true;
+}
 process.env.NODE_ENV !== "production" ? ListSubheader.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │

package/Menu/Menu.js

@@ -14,10 +14,11 @@ import HTMLElementType from '@mui/utils/HTMLElementType';
 import { useRtl } from '@mui/system/RtlProvider';
 import MenuList from '../MenuList';
 import Popover, { PopoverPaper } from '../Popover';
-import styled, { rootShouldForwardProp } from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getMenuUtilityClass } from './menuClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiMenu');
 const RTL_ORIGIN = {
   vertical: 'top',
   horizontal: 'right'

package/MenuItem/MenuItem.js

@@ -8,8 +8,8 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
-import styled, { rootShouldForwardProp } from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
+import { styled, createUseThemeProps } from '../zero-styled';
 import ListContext from '../List/ListContext';
 import ButtonBase from '../ButtonBase';
 import useEnhancedEffect from '../utils/useEnhancedEffect';
@@ -19,6 +19,7 @@ import { listItemIconClasses } from '../ListItemIcon';
 import { listItemTextClasses } from '../ListItemText';
 import menuItemClasses, { getMenuItemUtilityClass } from './menuItemClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiMenuItem');
 export const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -46,8 +47,7 @@ const MenuItemRoot = styled(ButtonBase, {
   slot: 'Root',
   overridesResolver
 })(({
-  theme,
-  ownerState
+  theme
 }) => _extends({}, theme.typography.body1, {
   display: 'flex',
   justifyContent: 'flex-start',
@@ -58,14 +58,7 @@ const MenuItemRoot = styled(ButtonBase, {
   paddingTop: 6,
   paddingBottom: 6,
   boxSizing: 'border-box',
-  whiteSpace: 'nowrap'
-}, !ownerState.disableGutters && {
-  paddingLeft: 16,
-  paddingRight: 16
-}, ownerState.divider && {
-  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
-  backgroundClip: 'padding-box'
-}, {
+  whiteSpace: 'nowrap',
   '&:hover': {
     textDecoration: 'none',
     backgroundColor: (theme.vars || theme).palette.action.hover,
@@ -109,21 +102,48 @@ const MenuItemRoot = styled(ButtonBase, {
   },
   [`& .${listItemIconClasses.root}`]: {
     minWidth: 36
-  }
-}, !ownerState.dense && {
-  [theme.breakpoints.up('sm')]: {
-    minHeight: 'auto'
-  }
-}, ownerState.dense && _extends({
-  minHeight: 32,
-  // https://m2.material.io/components/menus#specs > Dense
-  paddingTop: 4,
-  paddingBottom: 4
-}, theme.typography.body2, {
-  [`& .${listItemIconClasses.root} svg`]: {
-    fontSize: '1.25rem'
-  }
-})));
+  },
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.disableGutters,
+    style: {
+      paddingLeft: 16,
+      paddingRight: 16
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.divider,
+    style: {
+      borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
+      backgroundClip: 'padding-box'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.dense,
+    style: {
+      [theme.breakpoints.up('sm')]: {
+        minHeight: 'auto'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.dense,
+    style: _extends({
+      minHeight: 32,
+      // https://m2.material.io/components/menus#specs > Dense
+      paddingTop: 4,
+      paddingBottom: 4
+    }, theme.typography.body2, {
+      [`& .${listItemIconClasses.root} svg`]: {
+        fontSize: '1.25rem'
+      }
+    })
+  }]
+}));
 const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
   const props = useThemeProps({
     props: inProps,

package/NativeSelect/NativeSelectInput.js

@@ -1,7 +1,7 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["className", "disabled", "error", "IconComponent", "inputRef", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -10,7 +10,8 @@ import refType from '@mui/utils/refType';
 import composeClasses from '@mui/utils/composeClasses';
 import capitalize from '../utils/capitalize';
 import nativeSelectClasses, { getNativeSelectUtilityClasses } from './nativeSelectClasses';
-import styled, { rootShouldForwardProp } from '../styles/styled';
+import { styled } from '../zero-styled';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -27,27 +28,23 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getNativeSelectUtilityClasses, classes);
 };
-export const nativeSelectSelectStyles = ({
-  ownerState,
+export const StyledSelectSelect = styled('select')(({
   theme
-}) => _extends({
+}) => ({
+  // Reset
   MozAppearance: 'none',
   // Reset
   WebkitAppearance: 'none',
-  // Reset
   // When interacting quickly, the text can end up selected.
   // Native select can't be selected either.
   userSelect: 'none',
-  borderRadius: 0,
   // Reset
+  borderRadius: 0,
   cursor: 'pointer',
-  '&:focus': _extends({}, theme.vars ? {
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.05)`
-  } : {
-    backgroundColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)'
-  }, {
-    borderRadius: 0 // Reset Chrome style
-  }),
+  '&:focus': {
+    // Reset Chrome style
+    borderRadius: 0
+  },
   // Remove IE11 arrow
   '&::-ms-expand': {
     display: 'none'
@@ -61,25 +58,42 @@ export const nativeSelectSelectStyles = ({
   '&:not([multiple]) option, &:not([multiple]) optgroup': {
     backgroundColor: (theme.vars || theme).palette.background.paper
   },
-  // Bump specificity to allow extending custom inputs
-  '&&&': {
-    paddingRight: 24,
-    minWidth: 16 // So it doesn't collapse.
-  }
-}, ownerState.variant === 'filled' && {
-  '&&&': {
-    paddingRight: 32
-  }
-}, ownerState.variant === 'outlined' && {
-  borderRadius: (theme.vars || theme).shape.borderRadius,
-  '&:focus': {
-    borderRadius: (theme.vars || theme).shape.borderRadius // Reset the reset for Chrome style
-  },
-  '&&&': {
-    paddingRight: 32
-  }
-});
-const NativeSelectSelect = styled('select', {
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.variant !== 'filled' && ownerState.variant !== 'outlined',
+    style: {
+      // Bump specificity to allow extending custom inputs
+      '&&&': {
+        paddingRight: 24,
+        minWidth: 16 // So it doesn't collapse.
+      }
+    }
+  }, {
+    props: {
+      variant: 'filled'
+    },
+    style: {
+      '&&&': {
+        paddingRight: 32
+      }
+    }
+  }, {
+    props: {
+      variant: 'outlined'
+    },
+    style: {
+      borderRadius: (theme.vars || theme).shape.borderRadius,
+      '&:focus': {
+        borderRadius: (theme.vars || theme).shape.borderRadius // Reset the reset for Chrome style
+      },
+      '&&&': {
+        paddingRight: 32
+      }
+    }
+  }]
+}));
+const NativeSelectSelect = styled(StyledSelectSelect, {
   name: 'MuiNativeSelect',
   slot: 'Select',
   shouldForwardProp: rootShouldForwardProp,
@@ -91,31 +105,46 @@ const NativeSelectSelect = styled('select', {
       [`&.${nativeSelectClasses.multiple}`]: styles.multiple
     }];
   }
-})(nativeSelectSelectStyles);
-export const nativeSelectIconStyles = ({
-  ownerState,
+})({});
+export const StyledSelectIcon = styled('svg')(({
   theme
-}) => _extends({
+}) => ({
   // We use a position absolute over a flexbox in order to forward the pointer events
   // to the input and to support wrapping tags..
   position: 'absolute',
   right: 0,
-  top: 'calc(50% - .5em)',
   // Center vertically, height is 1em
-  pointerEvents: 'none',
+  top: 'calc(50% - .5em)',
   // Don't block pointer events on the select under the icon.
+  pointerEvents: 'none',
   color: (theme.vars || theme).palette.action.active,
   [`&.${nativeSelectClasses.disabled}`]: {
     color: (theme.vars || theme).palette.action.disabled
-  }
-}, ownerState.open && {
-  transform: 'rotate(180deg)'
-}, ownerState.variant === 'filled' && {
-  right: 7
-}, ownerState.variant === 'outlined' && {
-  right: 7
-});
-const NativeSelectIcon = styled('svg', {
+  },
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.open,
+    style: {
+      transform: 'rotate(180deg)'
+    }
+  }, {
+    props: {
+      variant: 'filled'
+    },
+    style: {
+      right: 7
+    }
+  }, {
+    props: {
+      variant: 'outlined'
+    },
+    style: {
+      right: 7
+    }
+  }]
+}));
+const NativeSelectIcon = styled(StyledSelectIcon, {
   name: 'MuiNativeSelect',
   slot: 'Icon',
   overridesResolver: (props, styles) => {
@@ -124,7 +153,7 @@ const NativeSelectIcon = styled('svg', {
     } = props;
     return [styles.icon, ownerState.variant && styles[`icon${capitalize(ownerState.variant)}`], ownerState.open && styles.iconOpen];
   }
-})(nativeSelectIconStyles);
+})({});
 
 /**
  * @ignore - internal component.

package/OutlinedInput/NotchedOutline.js

@@ -1,12 +1,13 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _span;
 const _excluded = ["children", "classes", "className", "label", "notched"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import styled, { rootShouldForwardProp } from '../styles/styled';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
+import { styled } from '../zero-styled';
 import { jsx as _jsx } from "react/jsx-runtime";
 const NotchedOutlineRoot = styled('fieldset', {
   shouldForwardProp: rootShouldForwardProp
@@ -29,51 +30,67 @@ const NotchedOutlineRoot = styled('fieldset', {
 const NotchedOutlineLegend = styled('legend', {
   shouldForwardProp: rootShouldForwardProp
 })(({
-  ownerState,
   theme
-}) => _extends({
+}) => ({
   float: 'unset',
   // Fix conflict with bootstrap
   width: 'auto',
   // Fix conflict with bootstrap
-  overflow: 'hidden'
-}, !ownerState.withLabel && {
-  padding: 0,
-  lineHeight: '11px',
-  // sync with `height` in `legend` styles
-  transition: theme.transitions.create('width', {
-    duration: 150,
-    easing: theme.transitions.easing.easeOut
-  })
-}, ownerState.withLabel && _extends({
-  display: 'block',
-  // Fix conflict with normalize.css and sanitize.css
-  padding: 0,
-  height: 11,
-  // sync with `lineHeight` in `legend` styles
-  fontSize: '0.75em',
-  visibility: 'hidden',
-  maxWidth: 0.01,
-  transition: theme.transitions.create('max-width', {
-    duration: 50,
-    easing: theme.transitions.easing.easeOut
-  }),
-  whiteSpace: 'nowrap',
-  '& > span': {
-    paddingLeft: 5,
-    paddingRight: 5,
-    display: 'inline-block',
-    opacity: 0,
-    visibility: 'visible'
-  }
-}, ownerState.notched && {
-  maxWidth: '100%',
-  transition: theme.transitions.create('max-width', {
-    duration: 100,
-    easing: theme.transitions.easing.easeOut,
-    delay: 50
-  })
-})));
+  overflow: 'hidden',
+  // Fix Horizontal scroll when label too long
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.withLabel,
+    style: {
+      padding: 0,
+      lineHeight: '11px',
+      // sync with `height` in `legend` styles
+      transition: theme.transitions.create('width', {
+        duration: 150,
+        easing: theme.transitions.easing.easeOut
+      })
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.withLabel,
+    style: {
+      display: 'block',
+      // Fix conflict with normalize.css and sanitize.css
+      padding: 0,
+      height: 11,
+      // sync with `lineHeight` in `legend` styles
+      fontSize: '0.75em',
+      visibility: 'hidden',
+      maxWidth: 0.01,
+      transition: theme.transitions.create('max-width', {
+        duration: 50,
+        easing: theme.transitions.easing.easeOut
+      }),
+      whiteSpace: 'nowrap',
+      '& > span': {
+        paddingLeft: 5,
+        paddingRight: 5,
+        display: 'inline-block',
+        opacity: 0,
+        visibility: 'visible'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.withLabel && ownerState.notched,
+    style: {
+      maxWidth: '100%',
+      transition: theme.transitions.create('max-width', {
+        duration: 100,
+        easing: theme.transitions.easing.easeOut,
+        delay: 50
+      })
+    }
+  }]
+}));
 
 /**
  * @ignore - internal component.
@@ -107,7 +124,7 @@ export default function NotchedOutline(props) {
     })
   }));
 }
-process.env.NODE_ENV !== "production" ? NotchedOutline.propTypes = {
+process.env.NODE_ENV !== "production" ? NotchedOutline.propTypes /* remove-proptypes */ = {
   /**
    * The content of the component.
    */

package/OutlinedInput/OutlinedInput.js

@@ -10,11 +10,12 @@ import composeClasses from '@mui/utils/composeClasses';
 import NotchedOutline from './NotchedOutline';
 import useFormControl from '../FormControl/useFormControl';
 import formControlState from '../FormControl/formControlState';
-import styled, { rootShouldForwardProp } from '../styles/styled';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
+import { styled, createUseThemeProps } from '../zero-styled';
 import outlinedInputClasses, { getOutlinedInputUtilityClass } from './outlinedInputClasses';
-import InputBase, { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseComponent as InputBaseInput } from '../InputBase/InputBase';
-import useThemeProps from '../styles/useThemeProps';
+import InputBase, { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseInput } from '../InputBase/InputBase';
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiOutlinedInput');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -33,41 +34,75 @@ const OutlinedInputRoot = styled(InputBaseRoot, {
   slot: 'Root',
   overridesResolver: inputBaseRootOverridesResolver
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
   const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
-  return _extends({
+  return {
     position: 'relative',
     borderRadius: (theme.vars || theme).shape.borderRadius,
     [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
       borderColor: (theme.vars || theme).palette.text.primary
     },
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
-        borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
-      }
-    },
     [`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
-      borderColor: (theme.vars || theme).palette[ownerState.color].main,
       borderWidth: 2
     },
-    [`&.${outlinedInputClasses.error} .${outlinedInputClasses.notchedOutline}`]: {
-      borderColor: (theme.vars || theme).palette.error.main
-    },
-    [`&.${outlinedInputClasses.disabled} .${outlinedInputClasses.notchedOutline}`]: {
-      borderColor: (theme.vars || theme).palette.action.disabled
-    }
-  }, ownerState.startAdornment && {
-    paddingLeft: 14
-  }, ownerState.endAdornment && {
-    paddingRight: 14
-  }, ownerState.multiline && _extends({
-    padding: '16.5px 14px'
-  }, ownerState.size === 'small' && {
-    padding: '8.5px 14px'
-  }));
+    variants: [...Object.entries(theme.palette).filter(([, value]) => value.main).map(([color]) => ({
+      props: {
+        color
+      },
+      style: {
+        [`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
+          borderColor: (theme.vars || theme).palette[color].main
+        }
+      }
+    })), {
+      props: {},
+      // to overide the above style
+      style: {
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
+            borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
+          }
+        },
+        [`&.${outlinedInputClasses.error} .${outlinedInputClasses.notchedOutline}`]: {
+          borderColor: (theme.vars || theme).palette.error.main
+        },
+        [`&.${outlinedInputClasses.disabled} .${outlinedInputClasses.notchedOutline}`]: {
+          borderColor: (theme.vars || theme).palette.action.disabled
+        }
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.startAdornment,
+      style: {
+        paddingLeft: 14
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.endAdornment,
+      style: {
+        paddingRight: 14
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.multiline,
+      style: {
+        padding: '16.5px 14px'
+      }
+    }, {
+      props: ({
+        ownerState,
+        size
+      }) => ownerState.multiline && size === 'small',
+      style: {
+        padding: '8.5px 14px'
+      }
+    }]
+  };
 });
 const NotchedOutlineRoot = styled(NotchedOutline, {
   name: 'MuiOutlinedInput',
@@ -86,8 +121,7 @@ const OutlinedInputInput = styled(InputBaseInput, {
   slot: 'Input',
   overridesResolver: inputBaseInputOverridesResolver
 })(({
-  theme,
-  ownerState
+  theme
 }) => _extends({
   padding: '16.5px 14px'
 }, !theme.vars && {
@@ -108,14 +142,36 @@ const OutlinedInputInput = styled(InputBaseInput, {
       caretColor: '#fff'
     }
   }
-}, ownerState.size === 'small' && {
-  padding: '8.5px 14px'
-}, ownerState.multiline && {
-  padding: 0
-}, ownerState.startAdornment && {
-  paddingLeft: 0
-}, ownerState.endAdornment && {
-  paddingRight: 0
+}, {
+  variants: [{
+    props: {
+      size: 'small'
+    },
+    style: {
+      padding: '8.5px 14px'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.multiline,
+    style: {
+      padding: 0
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.startAdornment,
+    style: {
+      paddingLeft: 0
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.endAdornment,
+    style: {
+      paddingRight: 0
+    }
+  }]
 }));
 const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps, ref) {
   var _React$Fragment;
@@ -345,5 +401,7 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes /* remove-propty
    */
   value: PropTypes.any
 } : void 0;
-OutlinedInput.muiName = 'Input';
+if (OutlinedInput) {
+  OutlinedInput.muiName = 'Input';
+}
 export default OutlinedInput;

package/Pagination/Pagination.js

@@ -8,12 +8,12 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import integerPropType from '@mui/utils/integerPropType';
-import useThemeProps from '../styles/useThemeProps';
 import { getPaginationUtilityClass } from './paginationClasses';
 import usePagination from '../usePagination';
 import PaginationItem from '../PaginationItem';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiPagination');
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/PaginationItem/PaginationItem.d.ts

@@ -58,7 +58,7 @@ export interface PaginationItemOwnProps extends PaginationItemSlotsAndSlotProps
    * It's recommended to use the `slots` prop instead.
    *
    * @default {}
-   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   components?: {
     first?: React.ElementType;