init project

packages/mui-material/src/PaginationItem/PaginationItem.d.ts

@@ -0,0 +1,182 @@
+import * as React from 'react';
+import { OverridableStringUnion } from '@mui/types';
+import { SxProps } from '@mui/system';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
+import { Theme } from '../styles';
+import { UsePaginationItem } from '../usePagination/usePagination';
+import { PaginationItemClasses } from './paginationItemClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
+
+export interface PaginationItemPropsVariantOverrides {}
+
+export interface PaginationItemPropsSizeOverrides {}
+
+export interface PaginationItemPropsColorOverrides {}
+
+export interface PaginationItemFirstSlotPropsOverrides {}
+export interface PaginationItemLastSlotPropsOverrides {}
+export interface PaginationItemNextSlotPropsOverrides {}
+export interface PaginationItemPreviousSlotPropsOverrides {}
+
+export interface PaginationItemSlots {
+  /**
+   * The component that renders the first page slot.
+   * @default FirstPageIcon
+   */
+  first: React.ElementType;
+  /**
+   * The component that renders the last page slot.
+   * @default LastPageIcon
+   */
+  last: React.ElementType;
+  /**
+   * The component that renders the next page slot.
+   * @default NavigateNextIcon
+   */
+  next: React.ElementType;
+  /**
+   * The component that renders the previous page slot.
+   * @default NavigateBeforeIcon
+   */
+  previous: React.ElementType;
+}
+
+export type PaginationItemSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  PaginationItemSlots,
+  {
+    /**
+     * Props forwarded to the first page slot.
+     */
+    first: SlotProps<
+      React.ElementType<React.HTMLProps<HTMLElement>>,
+      PaginationItemFirstSlotPropsOverrides,
+      PaginationItemOwnerState
+    >;
+    /**
+     * Props forwarded to the last page slot.
+     */
+    last: SlotProps<
+      React.ElementType<React.HTMLProps<HTMLElement>>,
+      PaginationItemLastSlotPropsOverrides,
+      PaginationItemOwnerState
+    >;
+    /**
+     * Props forwarded to the next page slot.
+     */
+    next: SlotProps<
+      React.ElementType<React.HTMLProps<HTMLElement>>,
+      PaginationItemNextSlotPropsOverrides,
+      PaginationItemOwnerState
+    >;
+    /**
+     * Props forwarded to the previous page slot.
+     */
+    previous: SlotProps<
+      React.ElementType<React.HTMLProps<HTMLElement>>,
+      PaginationItemPreviousSlotPropsOverrides,
+      PaginationItemOwnerState
+    >;
+  }
+>;
+
+export interface PaginationItemOwnerState extends PaginationItemProps {}
+
+export interface PaginationItemOwnProps extends PaginationItemSlotsAndSlotProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<PaginationItemClasses>;
+  /**
+   * The active color.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'standard'
+   */
+  color?: OverridableStringUnion<
+    'standard' | 'primary' | 'secondary',
+    PaginationItemPropsColorOverrides
+  >;
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
+   * @default {}
+   * @deprecated use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  components?: {
+    first?: React.ElementType;
+    last?: React.ElementType;
+    next?: React.ElementType;
+    previous?: React.ElementType;
+  };
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * The current page number.
+   */
+  page?: React.ReactNode;
+  /**
+   * If `true` the pagination item is selected.
+   * @default false
+   */
+  selected?: boolean;
+  /**
+   * The shape of the pagination item.
+   * @default 'circular'
+   */
+  shape?: 'circular' | 'rounded';
+  /**
+   * The size of the component.
+   * @default 'medium'
+   */
+  size?: OverridableStringUnion<'small' | 'medium' | 'large', PaginationItemPropsSizeOverrides>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The type of pagination item.
+   * @default 'page'
+   */
+  type?: UsePaginationItem['type'];
+  /**
+   * The variant to use.
+   * @default 'text'
+   */
+  variant?: OverridableStringUnion<'text' | 'outlined', PaginationItemPropsVariantOverrides>;
+}
+
+export interface PaginationItemTypeMap<
+  AdditionalProps = {},
+  RootComponent extends React.ElementType = 'div',
+> {
+  props: AdditionalProps & PaginationItemOwnProps;
+  defaultComponent: RootComponent;
+}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Pagination](https://mui.com/material-ui/react-pagination/)
+ *
+ * API:
+ *
+ * - [PaginationItem API](https://mui.com/material-ui/api/pagination-item/)
+ * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
+ */
+declare const PaginationItem: OverridableComponent<PaginationItemTypeMap>;
+
+export type PaginationItemProps<
+  RootComponent extends React.ElementType = PaginationItemTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<PaginationItemTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+
+export default PaginationItem;

packages/mui-material/src/PaginationItem/PaginationItem.js

@@ -0,0 +1,538 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import composeClasses from '@mui/utils/composeClasses';
+import { useRtl } from '@mui/system/RtlProvider';
+import paginationItemClasses, { getPaginationItemUtilityClass } from './paginationItemClasses';
+import ButtonBase from '../ButtonBase';
+import capitalize from '../utils/capitalize';
+import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter';
+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 useSlot from '../utils/useSlot';
+import { styled } from '../zero-styled';
+import memoTheme from '../utils/memoTheme';
+import { useDefaultProps } from '../DefaultPropsProvider';
+
+const overridesResolver = (props, styles) => {
+  const { ownerState } = props;
+
+  return [
+    styles.root,
+    styles[ownerState.variant],
+    styles[`size${capitalize(ownerState.size)}`],
+    ownerState.variant === 'text' && styles[`text${capitalize(ownerState.color)}`],
+    ownerState.variant === 'outlined' && styles[`outlined${capitalize(ownerState.color)}`],
+    ownerState.shape === 'rounded' && styles.rounded,
+    ownerState.type === 'page' && styles.page,
+    (ownerState.type === 'start-ellipsis' || ownerState.type === 'end-ellipsis') && styles.ellipsis,
+    (ownerState.type === 'previous' || ownerState.type === 'next') && styles.previousNext,
+    (ownerState.type === 'first' || ownerState.type === 'last') && styles.firstLast,
+  ];
+};
+
+const useUtilityClasses = (ownerState) => {
+  const { classes, color, disabled, selected, size, shape, type, variant } = ownerState;
+
+  const slots = {
+    root: [
+      'root',
+      `size${capitalize(size)}`,
+      variant,
+      shape,
+      color !== 'standard' && `color${capitalize(color)}`,
+      color !== 'standard' && `${variant}${capitalize(color)}`,
+      disabled && 'disabled',
+      selected && 'selected',
+      {
+        page: 'page',
+        first: 'firstLast',
+        last: 'firstLast',
+        'start-ellipsis': 'ellipsis',
+        'end-ellipsis': 'ellipsis',
+        previous: 'previousNext',
+        next: 'previousNext',
+      }[type],
+    ],
+    icon: ['icon'],
+  };
+
+  return composeClasses(slots, getPaginationItemUtilityClass, classes);
+};
+
+const PaginationItemEllipsis = styled('div', {
+  name: 'MuiPaginationItem',
+  slot: 'Root',
+  overridesResolver,
+})(
+  memoTheme(({ theme }) => ({
+    ...theme.typography.body2,
+    borderRadius: 32 / 2,
+    textAlign: 'center',
+    boxSizing: 'border-box',
+    minWidth: 32,
+    padding: '0 6px',
+    margin: '0 3px',
+    color: (theme.vars || theme).palette.text.primary,
+    height: 'auto',
+    [`&.${paginationItemClasses.disabled}`]: {
+      opacity: (theme.vars || theme).palette.action.disabledOpacity,
+    },
+    variants: [
+      {
+        props: { size: 'small' },
+        style: {
+          minWidth: 26,
+          borderRadius: 26 / 2,
+          margin: '0 1px',
+          padding: '0 4px',
+        },
+      },
+      {
+        props: { size: 'large' },
+        style: {
+          minWidth: 40,
+          borderRadius: 40 / 2,
+          padding: '0 10px',
+          fontSize: theme.typography.pxToRem(15),
+        },
+      },
+    ],
+  })),
+);
+
+const PaginationItemPage = styled(ButtonBase, {
+  name: 'MuiPaginationItem',
+  slot: 'Root',
+  overridesResolver,
+})(
+  memoTheme(({ theme }) => ({
+    ...theme.typography.body2,
+    borderRadius: 32 / 2,
+    textAlign: 'center',
+    boxSizing: 'border-box',
+    minWidth: 32,
+    height: 32,
+    padding: '0 6px',
+    margin: '0 3px',
+    color: (theme.vars || theme).palette.text.primary,
+    [`&.${paginationItemClasses.focusVisible}`]: {
+      backgroundColor: (theme.vars || theme).palette.action.focus,
+    },
+    [`&.${paginationItemClasses.disabled}`]: {
+      opacity: (theme.vars || theme).palette.action.disabledOpacity,
+    },
+    transition: theme.transitions.create(['color', 'background-color'], {
+      duration: theme.transitions.duration.short,
+    }),
+    '&:hover': {
+      backgroundColor: (theme.vars || theme).palette.action.hover,
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent',
+      },
+    },
+    [`&.${paginationItemClasses.selected}`]: {
+      backgroundColor: (theme.vars || theme).palette.action.selected,
+      '&:hover': {
+        backgroundColor: theme.alpha(
+          (theme.vars || theme).palette.action.selected,
+          `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.hoverOpacity}`,
+        ),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: (theme.vars || theme).palette.action.selected,
+        },
+      },
+      [`&.${paginationItemClasses.focusVisible}`]: {
+        backgroundColor: theme.alpha(
+          (theme.vars || theme).palette.action.selected,
+          `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.focusOpacity}`,
+        ),
+      },
+      [`&.${paginationItemClasses.disabled}`]: {
+        opacity: 1,
+        color: (theme.vars || theme).palette.action.disabled,
+        backgroundColor: (theme.vars || theme).palette.action.selected,
+      },
+    },
+    variants: [
+      {
+        props: { size: 'small' },
+        style: {
+          minWidth: 26,
+          height: 26,
+          borderRadius: 26 / 2,
+          margin: '0 1px',
+          padding: '0 4px',
+        },
+      },
+      {
+        props: { size: 'large' },
+        style: {
+          minWidth: 40,
+          height: 40,
+          borderRadius: 40 / 2,
+          padding: '0 10px',
+          fontSize: theme.typography.pxToRem(15),
+        },
+      },
+      {
+        props: { shape: 'rounded' },
+        style: {
+          borderRadius: (theme.vars || theme).shape.borderRadius,
+        },
+      },
+      {
+        props: { variant: 'outlined' },
+        style: {
+          border: theme.vars
+            ? `1px solid ${theme.alpha(theme.vars.palette.common.onBackground, 0.23)}`
+            : `1px solid ${
+                theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
+              }`,
+          [`&.${paginationItemClasses.selected}`]: {
+            [`&.${paginationItemClasses.disabled}`]: {
+              borderColor: (theme.vars || theme).palette.action.disabledBackground,
+              color: (theme.vars || theme).palette.action.disabled,
+            },
+          },
+        },
+      },
+      {
+        props: { variant: 'text' },
+        style: {
+          [`&.${paginationItemClasses.selected}`]: {
+            [`&.${paginationItemClasses.disabled}`]: {
+              color: (theme.vars || theme).palette.action.disabled,
+            },
+          },
+        },
+      },
+      ...Object.entries(theme.palette)
+        .filter(createSimplePaletteValueFilter(['dark', 'contrastText']))
+        .map(([color]) => ({
+          props: { variant: 'text', color },
+          style: {
+            [`&.${paginationItemClasses.selected}`]: {
+              color: (theme.vars || theme).palette[color].contrastText,
+              backgroundColor: (theme.vars || theme).palette[color].main,
+              '&:hover': {
+                backgroundColor: (theme.vars || theme).palette[color].dark,
+                // Reset on touch devices, it doesn't add specificity
+                '@media (hover: none)': {
+                  backgroundColor: (theme.vars || theme).palette[color].main,
+                },
+              },
+              [`&.${paginationItemClasses.focusVisible}`]: {
+                backgroundColor: (theme.vars || theme).palette[color].dark,
+              },
+              [`&.${paginationItemClasses.disabled}`]: {
+                color: (theme.vars || theme).palette.action.disabled,
+              },
+            },
+          },
+        })),
+      ...Object.entries(theme.palette)
+        .filter(createSimplePaletteValueFilter(['light']))
+        .map(([color]) => ({
+          props: { variant: 'outlined', color },
+          style: {
+            [`&.${paginationItemClasses.selected}`]: {
+              color: (theme.vars || theme).palette[color].main,
+              border: `1px solid ${theme.alpha((theme.vars || theme).palette[color].main, 0.5)}`,
+              backgroundColor: theme.alpha(
+                (theme.vars || theme).palette[color].main,
+                (theme.vars || theme).palette.action.activatedOpacity,
+              ),
+              '&:hover': {
+                backgroundColor: theme.alpha(
+                  (theme.vars || theme).palette[color].main,
+                  `${(theme.vars || theme).palette.action.activatedOpacity} + ${(theme.vars || theme).palette.action.focusOpacity}`,
+                ),
+                // Reset on touch devices, it doesn't add specificity
+                '@media (hover: none)': {
+                  backgroundColor: 'transparent',
+                },
+              },
+              [`&.${paginationItemClasses.focusVisible}`]: {
+                backgroundColor: theme.alpha(
+                  (theme.vars || theme).palette[color].main,
+                  `${(theme.vars || theme).palette.action.activatedOpacity} + ${(theme.vars || theme).palette.action.focusOpacity}`,
+                ),
+              },
+            },
+          },
+        })),
+    ],
+  })),
+);
+
+const PaginationItemPageIcon = styled('div', {
+  name: 'MuiPaginationItem',
+  slot: 'Icon',
+})(
+  memoTheme(({ theme }) => ({
+    fontSize: theme.typography.pxToRem(20),
+    margin: '0 -8px',
+    variants: [
+      {
+        props: { size: 'small' },
+        style: {
+          fontSize: theme.typography.pxToRem(18),
+        },
+      },
+      {
+        props: { size: 'large' },
+        style: {
+          fontSize: theme.typography.pxToRem(22),
+        },
+      },
+    ],
+  })),
+);
+
+const PaginationItem = React.forwardRef(function PaginationItem(inProps, ref) {
+  const props = useDefaultProps({ props: inProps, name: 'MuiPaginationItem' });
+  const {
+    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,
+    shape,
+    size,
+    type,
+    variant,
+  };
+
+  const isRtl = useRtl();
+  const classes = useUtilityClasses(ownerState);
+
+  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 [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' ? (
+    <PaginationItemEllipsis
+      ref={ref}
+      ownerState={ownerState}
+      className={clsx(classes.root, className)}
+    >
+      …
+    </PaginationItemEllipsis>
+  ) : (
+    <PaginationItemPage
+      ref={ref}
+      ownerState={ownerState}
+      component={component}
+      disabled={disabled}
+      className={clsx(classes.root, className)}
+      {...other}
+    >
+      {type === 'page' && page}
+      {IconSlot ? (
+        <PaginationItemPageIcon {...iconSlotProps} className={classes.icon} as={IconSlot} />
+      ) : null}
+    </PaginationItemPage>
+  );
+});
+
+PaginationItem.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The active color.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'standard'
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['primary', 'secondary', 'standard']),
+    PropTypes.string,
+  ]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
+   * @default {}
+   * @deprecated use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  components: PropTypes.shape({
+    first: PropTypes.elementType,
+    last: PropTypes.elementType,
+    next: PropTypes.elementType,
+    previous: PropTypes.elementType,
+  }),
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  /**
+   * The current page number.
+   */
+  page: PropTypes.node,
+  /**
+   * If `true` the pagination item is selected.
+   * @default false
+   */
+  selected: PropTypes.bool,
+  /**
+   * The shape of the pagination item.
+   * @default 'circular'
+   */
+  shape: PropTypes.oneOf(['circular', 'rounded']),
+  /**
+   * The size of the component.
+   * @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.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    first: PropTypes.elementType,
+    last: PropTypes.elementType,
+    next: PropTypes.elementType,
+    previous: PropTypes.elementType,
+  }),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+    PropTypes.func,
+    PropTypes.object,
+  ]),
+  /**
+   * The type of pagination item.
+   * @default 'page'
+   */
+  type: PropTypes.oneOf([
+    'end-ellipsis',
+    'first',
+    'last',
+    'next',
+    'page',
+    'previous',
+    'start-ellipsis',
+  ]),
+  /**
+   * The variant to use.
+   * @default 'text'
+   */
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['outlined', 'text']),
+    PropTypes.string,
+  ]),
+};
+
+export default PaginationItem;

packages/mui-material/src/PaginationItem/PaginationItem.test.js

@@ -0,0 +1,285 @@
+import { expect } from 'chai';
+import { createRenderer, screen } from '@mui/internal-test-utils';
+import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';
+import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import PaginationItem, { paginationItemClasses as classes } from '@mui/material/PaginationItem';
+import ButtonBase from '@mui/material/ButtonBase';
+import RtlProvider from '@mui/system/RtlProvider';
+import describeConformance from '../../test/describeConformance';
+
+describe('<PaginationItem />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<PaginationItem />, () => ({
+    classes,
+    inheritComponent: ButtonBase,
+    render,
+    muiName: 'MuiPaginationItem',
+    refInstanceof: window.HTMLButtonElement,
+    testVariantProps: { variant: 'foo' },
+    testStateOverrides: { prop: 'variant', value: 'outlined', styleKey: 'outlined' },
+    testLegacyComponentsProp: true,
+    slots: {
+      first: {},
+      last: {},
+      previous: {},
+      next: {},
+    },
+    skip: [
+      'componentProp',
+      'componentsProp',
+      // uses non-standard camel-case fields in `components`
+      'slotsProp',
+      'slotPropsProp',
+      'slotPropsCallback', // not supported yet
+      'slotPropsCallbackWithPropsAsOwnerState', // not supported yet
+    ],
+  }));
+
+  it('should render', () => {
+    const { container } = render(<PaginationItem />);
+    expect(container.firstChild).to.have.class(classes.root);
+  });
+
+  it('should add the `selected` class to the root element if `selected={true}`', () => {
+    render(<PaginationItem selected />);
+
+    expect(screen.getByRole('button')).to.have.class(classes.selected);
+  });
+
+  it('should add the `colorPrimary` class to the root element if `color="primary"`', () => {
+    render(<PaginationItem color="primary" />);
+
+    expect(screen.getByRole('button')).to.have.class(classes.colorPrimary);
+  });
+
+  it('should add the `colorSecondary` class to the root element if `color="secondary"`', () => {
+    render(<PaginationItem color="secondary" />);
+
+    expect(screen.getByRole('button')).to.have.class(classes.colorSecondary);
+  });
+
+  describe('prop: disabled', () => {
+    it('should add the `disabled` class to the root element if `disabled={true}`', () => {
+      render(<PaginationItem disabled />);
+
+      expect(screen.getByRole('button')).to.have.class(classes.disabled);
+    });
+
+    it('should render a disabled button if `disabled={true}`', () => {
+      render(<PaginationItem disabled />);
+
+      expect(screen.getByRole('button')).to.have.property('disabled', true);
+    });
+  });
+
+  it('should render a small button', () => {
+    render(
+      <PaginationItem data-testid="root" size="small" page={1}>
+        Hello World
+      </PaginationItem>,
+    );
+
+    const root = screen.getByTestId('root');
+    expect(root).to.have.class(classes.root);
+    expect(root).to.have.class(classes.sizeSmall);
+    expect(root).not.to.have.class(classes.sizeLarge);
+  });
+
+  it('should render a large button', () => {
+    render(
+      <PaginationItem data-testid="root" size="large" page={1}>
+        Hello World
+      </PaginationItem>,
+    );
+
+    const root = screen.getByTestId('root');
+    expect(root).to.have.class(classes.root);
+    expect(root).not.to.have.class(classes.sizeSmall);
+    expect(root).to.have.class(classes.sizeLarge);
+  });
+
+  it('should render a first-last button', () => {
+    render(
+      <PaginationItem data-testid="root" page={1} type={'first'}>
+        Hello World
+      </PaginationItem>,
+    );
+
+    expect(screen.getByRole('button')).to.have.class(classes.firstLast);
+  });
+
+  it('should render a previous-next button', () => {
+    render(
+      <PaginationItem data-testid="root" page={1} type={'previous'}>
+        Hello World
+      </PaginationItem>,
+    );
+
+    expect(screen.getByRole('button')).to.have.class(classes.previousNext);
+  });
+
+  // describeConformance in it's current form is not able to test slots prop when slots are rendered conditionally. Hence below tests are added in this file.
+  describe('prop: slots, slotProps, components', () => {
+    function CustomPreviousIcon(props) {
+      return <ArrowBackIcon data-testid={props['data-testid'] ?? 'custom-previous'} />;
+    }
+
+    function CustomNextIcon(props) {
+      return <ArrowForwardIcon data-testid={props['data-testid'] ?? 'custom-next'} />;
+    }
+
+    function CustomFirstIcon(props) {
+      return <KeyboardDoubleArrowLeftIcon data-testid={props['data-testid'] ?? 'custom-first'} />;
+    }
+
+    function CustomLastIcon(props) {
+      return <KeyboardDoubleArrowRightIcon data-testid={props['data-testid'] ?? 'custom-last'} />;
+    }
+
+    it('icons passed in slots prop should override default icons', () => {
+      const slots = {
+        previous: CustomPreviousIcon,
+        next: CustomNextIcon,
+        first: CustomFirstIcon,
+        last: CustomLastIcon,
+      };
+
+      ['first', 'previous', 'next', 'last'].forEach((slot) => {
+        render(<PaginationItem page={1} slots={slots} type={slot} />);
+
+        expect(screen.getByTestId(`custom-${slot}`)).not.to.equal(null);
+      });
+    });
+
+    it('slotProps should be applied to icons passed in slots prop', () => {
+      const slots = {
+        previous: CustomPreviousIcon,
+        next: CustomNextIcon,
+        first: CustomFirstIcon,
+        last: CustomLastIcon,
+      };
+
+      const slotProps = {
+        previous: { 'data-testid': 'slot-previous' },
+        next: { 'data-testid': 'slot-next' },
+        first: { 'data-testid': 'slot-first' },
+        last: { 'data-testid': 'slot-last' },
+      };
+
+      ['first', 'previous', 'next', 'last'].forEach((slot) => {
+        render(<PaginationItem page={1} slotProps={slotProps} slots={slots} type={slot} />);
+
+        expect(screen.getByTestId(`slot-${slot}`)).not.to.equal(null);
+      });
+    });
+
+    it('icons passed in slots should override icons passed in components prop', () => {
+      const slots = {
+        previous: CustomPreviousIcon,
+        next: CustomNextIcon,
+        first: CustomFirstIcon,
+        last: CustomLastIcon,
+      };
+
+      const slotProps = {
+        previous: { 'data-testid': 'slot-previous' },
+        next: { 'data-testid': 'slot-next' },
+        first: { 'data-testid': 'slot-first' },
+        last: { 'data-testid': 'slot-last' },
+      };
+
+      const components = {
+        previous: CustomPreviousIcon,
+        next: CustomNextIcon,
+        first: CustomFirstIcon,
+        last: CustomLastIcon,
+      };
+
+      ['first', 'previous', 'next', 'last'].forEach((slot) => {
+        render(
+          <PaginationItem
+            page={1}
+            slotProps={slotProps}
+            components={components}
+            slots={slots}
+            type={slot}
+          />,
+        );
+
+        expect(screen.getByTestId(`slot-${slot}`)).not.to.equal(null);
+        expect(screen.queryByTestId(`custom-${slot}`)).to.equal(null);
+      });
+    });
+
+    it('should apply slotProps to icons passed in slots prop', () => {
+      const slotProps = {
+        previous: { 'data-testid': 'component-previous' },
+        next: { 'data-testid': 'component-next' },
+        first: { 'data-testid': 'component-first' },
+        last: { 'data-testid': 'component-last' },
+      };
+
+      const components = {
+        previous: CustomPreviousIcon,
+        next: CustomNextIcon,
+        first: CustomFirstIcon,
+        last: CustomLastIcon,
+      };
+
+      ['first', 'previous', 'next', 'last'].forEach((slot) => {
+        render(
+          <PaginationItem page={1} slotProps={slotProps} components={components} type={slot} />,
+        );
+
+        expect(screen.getByTestId(`component-${slot}`)).not.to.equal(null);
+        expect(screen.queryByTestId(`custom-${slot}`)).to.equal(null);
+      });
+    });
+
+    it('slotProps should override internal props', () => {
+      const slotProps = {
+        previous: { 'data-testid': 'component-previous' },
+        next: { 'data-testid': 'component-next' },
+        first: { 'data-testid': 'component-first' },
+        last: { 'data-testid': 'component-last' },
+      };
+
+      ['first', 'previous', 'next', 'last'].forEach((slot) => {
+        render(<PaginationItem page={1} slotProps={slotProps} type={slot} />);
+
+        expect(screen.getByTestId(`component-${slot}`)).not.to.equal(null);
+      });
+    });
+
+    it('should take RtlProvider into account when provided and apply slotProps to slots accordingly', () => {
+      const slots = {
+        previous: CustomPreviousIcon,
+        next: CustomNextIcon,
+        first: CustomFirstIcon,
+        last: CustomLastIcon,
+      };
+
+      const slotProps = {
+        previous: { 'data-testid': 'slot-previous' },
+        next: { 'data-testid': 'slot-next' },
+        first: { 'data-testid': 'slot-first' },
+        last: { 'data-testid': 'slot-last' },
+      };
+
+      render(
+        <RtlProvider>
+          <PaginationItem page={1} slotProps={slotProps} slots={slots} type={'previous'} />
+          <PaginationItem page={1} slotProps={slotProps} slots={slots} type={'first'} />
+        </RtlProvider>,
+      );
+
+      expect(screen.queryByTestId('slot-next')).not.to.equal(null);
+      expect(screen.queryByTestId('slot-previous')).to.equal(null);
+      expect(screen.queryByTestId('slot-last')).not.to.equal(null);
+      expect(screen.queryByTestId('slot-first')).to.equal(null);
+    });
+  });
+});

packages/mui-material/src/PaginationItem/index.d.ts

@@ -0,0 +1,5 @@
+export { default } from './PaginationItem';
+export * from './PaginationItem';
+
+export { default as paginationItemClasses } from './paginationItemClasses';
+export * from './paginationItemClasses';

packages/mui-material/src/PaginationItem/index.js

@@ -0,0 +1,4 @@
+export { default } from './PaginationItem';
+
+export { default as paginationItemClasses } from './paginationItemClasses';
+export * from './paginationItemClasses';

packages/mui-material/src/PaginationItem/paginationItemClasses.ts

@@ -0,0 +1,84 @@
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+
+export interface PaginationItemClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `type="page"`. */
+  page: string;
+  /** Styles applied to the root element if `size="small"`. */
+  sizeSmall: string;
+  /** Styles applied to the root element if `size="large"`. */
+  sizeLarge: string;
+  /** 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-MuiPaginationItem-text) and [.MuiPaginationItem-colorPrimary](/material-ui/api/pagination-item/#pagination-item-classes-MuiPaginationItem-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-MuiPaginationItem-text) and [.MuiPaginationItem-colorSecondary](/material-ui/api/pagination-item/#pagination-item-classes-MuiPaginationItem-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-MuiPaginationItem-outlined) and [.MuiPaginationItem-colorPrimary](/material-ui/api/pagination-item/#pagination-item-classes-MuiPaginationItem-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-MuiPaginationItem-outlined) and [.MuiPaginationItem-colorSecondary](/material-ui/api/pagination-item/#pagination-item-classes-MuiPaginationItem-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"`. */
+  rounded: string;
+  /** Styles applied to the root element if `type="start-ellipsis"` or `type="end-ellipsis"`. */
+  ellipsis: string;
+  /** Styles applied to the root element if `type="first"` or type="last". */
+  firstLast: string;
+  /** Styles applied to the root element if `type="previous"` or type="next". */
+  previousNext: string;
+  /** State class applied to the root element if keyboard focused. */
+  focusVisible: string;
+  /** State class applied to the root element if `disabled={true}`. */
+  disabled: string;
+  /** State class applied to the root element if `selected={true}`. */
+  selected: string;
+  /** Styles applied to the icon to display. */
+  icon: string;
+  /** Styles applied to the root element if `color="primary"`. */
+  colorPrimary: string;
+  /** Styles applied to the root element if `color="secondary"`. */
+  colorSecondary: string;
+}
+
+export type PaginationItemClassKey = keyof PaginationItemClasses;
+
+export function getPaginationItemUtilityClass(slot: string): string {
+  return generateUtilityClass('MuiPaginationItem', slot);
+}
+
+const paginationItemClasses: PaginationItemClasses = generateUtilityClasses('MuiPaginationItem', [
+  'root',
+  'page',
+  'sizeSmall',
+  'sizeLarge',
+  'text',
+  'textPrimary',
+  'textSecondary',
+  'outlined',
+  'outlinedPrimary',
+  'outlinedSecondary',
+  'rounded',
+  'ellipsis',
+  'firstLast',
+  'previousNext',
+  'focusVisible',
+  'disabled',
+  'selected',
+  'icon',
+  'colorPrimary',
+  'colorSecondary',
+]);
+
+export default paginationItemClasses;