@mui/material 6.0.0-dev.240424162023-9968b4889d → 6.0.0

package/OutlinedInput/outlinedInputClasses.js

@@ -1,9 +1,11 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import { inputBaseClasses } from '../InputBase';
+import { inputBaseClasses } from "../InputBase/index.js";
 export function getOutlinedInputUtilityClass(slot) {
   return generateUtilityClass('MuiOutlinedInput', slot);
 }
-const outlinedInputClasses = _extends({}, inputBaseClasses, generateUtilityClasses('MuiOutlinedInput', ['root', 'notchedOutline', 'input']));
+const outlinedInputClasses = {
+  ...inputBaseClasses,
+  ...generateUtilityClasses('MuiOutlinedInput', ['root', 'notchedOutline', 'input'])
+};
 export default outlinedInputClasses;

package/OverridableComponent.d.ts

@@ -20,8 +20,8 @@ export interface OverridableComponent<TypeMap extends OverridableTypeMap> {
        */
       component: RootComponent;
     } & OverrideProps<TypeMap, RootComponent>,
-  ): JSX.Element | null;
-  (props: DefaultComponentProps<TypeMap>): JSX.Element | null;
+  ): React.JSX.Element | null;
+  (props: DefaultComponentProps<TypeMap>): React.JSX.Element | null;
 }
 
 /**

package/Pagination/Pagination.d.ts

@@ -42,11 +42,15 @@ export interface PaginationProps
    *
    * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
    * @param {string} type The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous' | 'start-ellipsis' | 'end-ellipsis'). Defaults to 'page'.
-   * @param {number} page The page number to format.
-   * @param {bool} selected If true, the current page is selected.
+   * @param {number | null} page The page number to format.
+   * @param {boolean} selected If true, the current page is selected.
    * @returns {string}
    */
-  getItemAriaLabel?: (type: UsePaginationItem['type'], page: number, selected: boolean) => string;
+  getItemAriaLabel?: (
+    type: UsePaginationItem['type'],
+    page: UsePaginationItem['page'],
+    selected: UsePaginationItem['selected'],
+  ) => string;
 
   /**
    * Render the item.
@@ -86,4 +90,4 @@ export interface PaginationProps
  *
  * - [Pagination API](https://mui.com/material-ui/api/pagination/)
  */
-export default function Pagination(props: PaginationProps): JSX.Element;
+export default function Pagination(props: PaginationProps): React.JSX.Element;

package/Pagination/Pagination.js

@@ -1,18 +1,15 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["boundaryCount", "className", "color", "count", "defaultPage", "disabled", "getItemAriaLabel", "hideNextButton", "hidePrevButton", "onChange", "page", "renderItem", "shape", "showFirstButton", "showLastButton", "siblingCount", "size", "variant"];
 import * as React from 'react';
 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 { getPaginationUtilityClass } from "./paginationClasses.js";
+import usePagination from "../usePagination/index.js";
+import PaginationItem from "../PaginationItem/index.js";
+import { styled } from "../zero-styled/index.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -54,35 +51,41 @@ function defaultGetAriaLabel(type, page, selected) {
   return `Go to ${type} page`;
 }
 const Pagination = /*#__PURE__*/React.forwardRef(function Pagination(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiPagination'
   });
   const {
-      boundaryCount = 1,
-      className,
-      color = 'standard',
-      count = 1,
-      defaultPage = 1,
-      disabled = false,
-      getItemAriaLabel = defaultGetAriaLabel,
-      hideNextButton = false,
-      hidePrevButton = false,
-      renderItem = item => /*#__PURE__*/_jsx(PaginationItem, _extends({}, item)),
-      shape = 'circular',
-      showFirstButton = false,
-      showLastButton = false,
-      siblingCount = 1,
-      size = 'medium',
-      variant = 'text'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    boundaryCount = 1,
+    className,
+    color = 'standard',
+    count = 1,
+    defaultPage = 1,
+    disabled = false,
+    getItemAriaLabel = defaultGetAriaLabel,
+    hideNextButton = false,
+    hidePrevButton = false,
+    onChange,
+    page,
+    renderItem = item => /*#__PURE__*/_jsx(PaginationItem, {
+      ...item
+    }),
+    shape = 'circular',
+    showFirstButton = false,
+    showLastButton = false,
+    siblingCount = 1,
+    size = 'medium',
+    variant = 'text',
+    ...other
+  } = props;
   const {
     items
-  } = usePagination(_extends({}, props, {
+  } = usePagination({
+    ...props,
     componentName: 'Pagination'
-  }));
-  const ownerState = _extends({}, props, {
+  });
+  const ownerState = {
+    ...props,
     boundaryCount,
     color,
     count,
@@ -98,28 +101,29 @@ const Pagination = /*#__PURE__*/React.forwardRef(function Pagination(inProps, re
     siblingCount,
     size,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(PaginationRoot, _extends({
+  return /*#__PURE__*/_jsx(PaginationRoot, {
     "aria-label": "pagination navigation",
     className: clsx(classes.root, className),
     ownerState: ownerState,
-    ref: ref
-  }, other, {
+    ref: ref,
+    ...other,
     children: /*#__PURE__*/_jsx(PaginationUl, {
       className: classes.ul,
       ownerState: ownerState,
       children: items.map((item, index) => /*#__PURE__*/_jsx("li", {
-        children: renderItem(_extends({}, item, {
+        children: renderItem({
+          ...item,
           color,
           'aria-label': getItemAriaLabel(item.type, item.page, item.selected),
           shape,
           size,
           variant
-        }))
+        })
       }, index))
     })
-  }));
+  });
 });
 
 // @default tags synced with default values from usePagination
@@ -170,8 +174,8 @@ process.env.NODE_ENV !== "production" ? Pagination.propTypes /* remove-proptypes
    *
    * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
    * @param {string} type The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous' | 'start-ellipsis' | 'end-ellipsis'). Defaults to 'page'.
-   * @param {number} page The page number to format.
-   * @param {bool} selected If true, the current page is selected.
+   * @param {number | null} page The page number to format.
+   * @param {boolean} selected If true, the current page is selected.
    * @returns {string}
    */
   getItemAriaLabel: PropTypes.func,
@@ -193,7 +197,7 @@ process.env.NODE_ENV !== "production" ? Pagination.propTypes /* remove-proptypes
    */
   onChange: PropTypes.func,
   /**
-   * The current page.
+   * The current page. Unlike `TablePagination`, which starts numbering from `0`, this pagination starts from `1`.
    */
   page: integerPropType,
   /**

package/Pagination/index.js

@@ -1,5 +1,5 @@
 'use client';
 
-export { default } from './Pagination';
-export { default as paginationClasses } from './paginationClasses';
-export * from './paginationClasses';
+export { default } from "./Pagination.js";
+export { default as paginationClasses } from "./paginationClasses.js";
+export * from "./paginationClasses.js";

package/PaginationItem/PaginationItem.d.ts

@@ -5,6 +5,7 @@ import { OverridableComponent, OverrideProps } from '@mui/material/OverridableCo
 import { Theme } from '../styles';
 import { UsePaginationItem } from '../usePagination/usePagination';
 import { PaginationItemClasses } from './paginationItemClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export interface PaginationItemPropsVariantOverrides {}
 
@@ -12,7 +13,30 @@ export interface PaginationItemPropsSizeOverrides {}
 
 export interface PaginationItemPropsColorOverrides {}
 
-export interface PaginationItemOwnProps {
+export interface PaginationItemSlots {
+  first?: React.ElementType;
+  last?: React.ElementType;
+  next?: React.ElementType;
+  previous?: React.ElementType;
+}
+
+export type PaginationItemSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  PaginationItemSlots,
+  {
+    first: SlotProps<React.ElementType<React.HTMLProps<HTMLElement>>, {}, PaginationItemOwnerState>;
+    last: SlotProps<React.ElementType<React.HTMLProps<HTMLElement>>, {}, PaginationItemOwnerState>;
+    next: SlotProps<React.ElementType<React.HTMLProps<HTMLElement>>, {}, PaginationItemOwnerState>;
+    previous: SlotProps<
+      React.ElementType<React.HTMLProps<HTMLElement>>,
+      {},
+      PaginationItemOwnerState
+    >;
+  }
+>;
+
+export interface PaginationItemOwnerState extends PaginationItemProps {}
+
+export interface PaginationItemOwnProps extends PaginationItemSlotsAndSlotProps {
   /**
    * Override or extend the styles applied to the component.
    */
@@ -34,6 +58,7 @@ export interface PaginationItemOwnProps {
    * It's recommended to use the `slots` prop instead.
    *
    * @default {}
+   * @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;
@@ -65,19 +90,6 @@ export interface PaginationItemOwnProps {
    * @default 'medium'
    */
   size?: OverridableStringUnion<'small' | 'medium' | 'large', PaginationItemPropsSizeOverrides>;
-  /**
-   * The components used for each slot inside.
-   *
-   * This prop is an alias for the `components` prop, which will be deprecated in the future.
-   *
-   * @default {}
-   */
-  slots?: {
-    first?: React.ElementType;
-    last?: React.ElementType;
-    next?: React.ElementType;
-    previous?: React.ElementType;
-  };
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/PaginationItem/PaginationItem.js

@@ -1,24 +1,23 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "slots", "type", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
 import { useRtl } from '@mui/system/RtlProvider';
-import paginationItemClasses, { getPaginationItemUtilityClass } from './paginationItemClasses';
-import ButtonBase from '../ButtonBase';
-import capitalize from '../utils/capitalize';
-import FirstPageIcon from '../internal/svg-icons/FirstPage';
-import LastPageIcon from '../internal/svg-icons/LastPage';
-import NavigateBeforeIcon from '../internal/svg-icons/NavigateBefore';
-import NavigateNextIcon from '../internal/svg-icons/NavigateNext';
-import { styled, createUseThemeProps } from '../zero-styled';
+import paginationItemClasses, { getPaginationItemUtilityClass } from "./paginationItemClasses.js";
+import ButtonBase from "../ButtonBase/index.js";
+import capitalize from "../utils/capitalize.js";
+import FirstPageIcon from "../internal/svg-icons/FirstPage.js";
+import LastPageIcon from "../internal/svg-icons/LastPage.js";
+import NavigateBeforeIcon from "../internal/svg-icons/NavigateBefore.js";
+import NavigateNextIcon from "../internal/svg-icons/NavigateNext.js";
+import useSlot from "../utils/useSlot.js";
+import { styled } from "../zero-styled/index.js";
+import memoTheme from "../utils/memoTheme.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiPaginationItem');
 const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -54,9 +53,10 @@ const PaginationItemEllipsis = styled('div', {
   name: 'MuiPaginationItem',
   slot: 'Root',
   overridesResolver
-})(({
+})(memoTheme(({
   theme
-}) => _extends({}, theme.typography.body2, {
+}) => ({
+  ...theme.typography.body2,
   borderRadius: 32 / 2,
   textAlign: 'center',
   boxSizing: 'border-box',
@@ -89,14 +89,15 @@ const PaginationItemEllipsis = styled('div', {
       fontSize: theme.typography.pxToRem(15)
     }
   }]
-}));
+})));
 const PaginationItemPage = styled(ButtonBase, {
   name: 'MuiPaginationItem',
   slot: 'Root',
   overridesResolver
-})(({
+})(memoTheme(({
   theme
-}) => _extends({}, theme.typography.body2, {
+}) => ({
+  ...theme.typography.body2,
   borderRadius: 32 / 2,
   textAlign: 'center',
   boxSizing: 'border-box',
@@ -192,7 +193,7 @@ const PaginationItemPage = styled(ButtonBase, {
         }
       }
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value.main && value.dark && value.contrastText).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.dark && value.contrastText).map(([color]) => ({
     props: {
       variant: 'text',
       color
@@ -216,7 +217,7 @@ const PaginationItemPage = styled(ButtonBase, {
         }
       }
     }
-  })), ...Object.entries(theme.palette).filter(([, value]) => value.main && value.light).map(([color]) => ({
+  })), ...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.light).map(([color]) => ({
     props: {
       variant: 'outlined',
       color
@@ -239,12 +240,12 @@ const PaginationItemPage = styled(ButtonBase, {
       }
     }
   }))]
-}));
+})));
 const PaginationItemPageIcon = styled('div', {
   name: 'MuiPaginationItem',
   slot: 'Icon',
   overridesResolver: (props, styles) => styles.icon
-})(({
+})(memoTheme(({
   theme
 }) => ({
   fontSize: theme.typography.pxToRem(20),
@@ -264,28 +265,30 @@ const PaginationItemPageIcon = styled('div', {
       fontSize: theme.typography.pxToRem(22)
     }
   }]
-}));
+})));
 const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiPaginationItem'
   });
   const {
-      className,
-      color = 'standard',
-      component,
-      components = {},
-      disabled = false,
-      page,
-      selected = false,
-      shape = 'circular',
-      size = 'medium',
-      slots = {},
-      type = 'page',
-      variant = 'text'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    color = 'standard',
+    component,
+    components = {},
+    disabled = false,
+    page,
+    selected = false,
+    shape = 'circular',
+    size = 'medium',
+    slots = {},
+    slotProps = {},
+    type = 'page',
+    variant = 'text',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     disabled,
     selected,
@@ -293,39 +296,74 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
     size,
     type,
     variant
-  });
+  };
   const isRtl = useRtl();
   const classes = useUtilityClasses(ownerState);
-  const normalizedIcons = isRtl ? {
-    previous: slots.next || components.next || NavigateNextIcon,
-    next: slots.previous || components.previous || NavigateBeforeIcon,
-    last: slots.first || components.first || FirstPageIcon,
-    first: slots.last || components.last || LastPageIcon
-  } : {
-    previous: slots.previous || components.previous || NavigateBeforeIcon,
-    next: slots.next || components.next || NavigateNextIcon,
-    first: slots.first || components.first || FirstPageIcon,
-    last: slots.last || components.last || LastPageIcon
+  const externalForwardedProps = {
+    slots: {
+      previous: slots.previous ?? components.previous,
+      next: slots.next ?? components.next,
+      first: slots.first ?? components.first,
+      last: slots.last ?? components.last
+    },
+    slotProps
   };
-  const Icon = normalizedIcons[type];
+  const [PreviousSlot, previousSlotProps] = useSlot('previous', {
+    elementType: NavigateBeforeIcon,
+    externalForwardedProps,
+    ownerState
+  });
+  const [NextSlot, nextSlotProps] = useSlot('next', {
+    elementType: NavigateNextIcon,
+    externalForwardedProps,
+    ownerState
+  });
+  const [FirstSlot, firstSlotProps] = useSlot('first', {
+    elementType: FirstPageIcon,
+    externalForwardedProps,
+    ownerState
+  });
+  const [LastSlot, lastSlotProps] = useSlot('last', {
+    elementType: LastPageIcon,
+    externalForwardedProps,
+    ownerState
+  });
+  const rtlAwareType = isRtl ? {
+    previous: 'next',
+    next: 'previous',
+    first: 'last',
+    last: 'first'
+  }[type] : type;
+  const IconSlot = {
+    previous: PreviousSlot,
+    next: NextSlot,
+    first: FirstSlot,
+    last: LastSlot
+  }[rtlAwareType];
+  const iconSlotProps = {
+    previous: previousSlotProps,
+    next: nextSlotProps,
+    first: firstSlotProps,
+    last: lastSlotProps
+  }[rtlAwareType];
   return type === 'start-ellipsis' || type === 'end-ellipsis' ? /*#__PURE__*/_jsx(PaginationItemEllipsis, {
     ref: ref,
     ownerState: ownerState,
     className: clsx(classes.root, className),
     children: "\u2026"
-  }) : /*#__PURE__*/_jsxs(PaginationItemPage, _extends({
+  }) : /*#__PURE__*/_jsxs(PaginationItemPage, {
     ref: ref,
     ownerState: ownerState,
     component: component,
     disabled: disabled,
-    className: clsx(classes.root, className)
-  }, other, {
-    children: [type === 'page' && page, Icon ? /*#__PURE__*/_jsx(PaginationItemPageIcon, {
-      as: Icon,
-      ownerState: ownerState,
-      className: classes.icon
+    className: clsx(classes.root, className),
+    ...other,
+    children: [type === 'page' && page, IconSlot ? /*#__PURE__*/_jsx(PaginationItemPageIcon, {
+      ...iconSlotProps,
+      className: classes.icon,
+      as: IconSlot
     }) : null]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? PaginationItem.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -363,6 +401,7 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes /* remove-propt
    * It's recommended to use the `slots` prop instead.
    *
    * @default {}
+   * @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: PropTypes.shape({
     first: PropTypes.elementType,
@@ -394,11 +433,18 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes /* remove-propt
    * @default 'medium'
    */
   size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    first: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    last: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    next: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    previous: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
   /**
    * The components used for each slot inside.
-   *
-   * This prop is an alias for the `components` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slots: PropTypes.shape({

package/PaginationItem/index.js

@@ -1,5 +1,5 @@
 'use client';
 
-export { default } from './PaginationItem';
-export { default as paginationItemClasses } from './paginationItemClasses';
-export * from './paginationItemClasses';
+export { default } from "./PaginationItem.js";
+export { default as paginationItemClasses } from "./paginationItemClasses.js";
+export * from "./paginationItemClasses.js";

package/PaginationItem/paginationItemClasses.d.ts

@@ -10,21 +10,21 @@ export interface PaginationItemClasses {
     /** Styles applied to the root element if `variant="text"`. */
     text: string;
     /** Styles applied to the root element if `variant="text"` and `color="primary"`.
-     *  @deprecated Combine the [.MuiPaginationItem-text](/material-ui/api/pagination-item/#pagination-item-classes-text) and [.MuiPaginationItem-colorPrimary](/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     *  @deprecated Combine the [.MuiPaginationItem-text](/material-ui/api/pagination-item/#pagination-item-classes-text) and [.MuiPaginationItem-colorPrimary](/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     textPrimary: string;
     /** Styles applied to the root element if `variant="text"` and `color="secondary"`.
-     *  @deprecated Combine the [.MuiPaginationItem-text](/material-ui/api/pagination-item/#pagination-item-classes-text) and [.MuiPaginationItem-colorSecondary](/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     *  @deprecated Combine the [.MuiPaginationItem-text](/material-ui/api/pagination-item/#pagination-item-classes-text) and [.MuiPaginationItem-colorSecondary](/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     textSecondary: string;
     /** Styles applied to the root element if `variant="outlined"`. */
     outlined: string;
     /** Styles applied to the root element if `variant="outlined"` and `color="primary"`.
-     * @deprecated Combine the [.MuiPaginationItem-outlined](/material-ui/api/pagination-item/#pagination-item-classes-outlined) and [.MuiPaginationItem-colorPrimary](/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     * @deprecated Combine the [.MuiPaginationItem-outlined](/material-ui/api/pagination-item/#pagination-item-classes-outlined) and [.MuiPaginationItem-colorPrimary](/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     outlinedPrimary: string;
     /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`.
-     * @deprecated Combine the [.MuiPaginationItem-outlined](/material-ui/api/pagination-item/#pagination-item-classes-outlined) and [.MuiPaginationItem-colorSecondary](/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     * @deprecated Combine the [.MuiPaginationItem-outlined](/material-ui/api/pagination-item/#pagination-item-classes-outlined) and [.MuiPaginationItem-colorSecondary](/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     outlinedSecondary: string;
     /** Styles applied to the root element if `rounded="true"`. */