init project

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

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { SlotProps, CreateSlotsAndSlotProps } from '../utils/types';
+import { Theme } from '../styles';
+import {
+  ButtonBaseProps,
+  ButtonBaseTypeMap,
+  ExtendButtonBase,
+  ExtendButtonBaseTypeMap,
+} from '../ButtonBase';
+import { OverrideProps } from '../OverridableComponent';
+import { CardActionAreaClasses } from './cardActionAreaClasses';
+
+export interface CardActionAreaSlots {
+  /**
+   * The component that renders the root.
+   * @default ButtonBase
+   */
+  root: React.ElementType;
+  /**
+   * The component that renders the focusHighlight.
+   * @default span
+   */
+  focusHighlight: React.ElementType;
+}
+
+export type CardActionAreaSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  CardActionAreaSlots,
+  {
+    /**
+     * Props forwarded to the root slot.
+     * By default, the available props are based on the span element.
+     */
+    root: SlotProps<React.ElementType<ButtonBaseProps>, {}, CardActionAreaOwnerState>;
+    /**
+     * Props forwarded to the focusHighlight slot.
+     * By default, the available props are based on the span element.
+     */
+    focusHighlight: SlotProps<'span', {}, CardActionAreaOwnerState>;
+  }
+>;
+
+export interface CardActionAreaOwnerState
+  extends Omit<CardActionAreaProps, 'slots' | 'slotProps'> {}
+
+export interface CardActionAreaOwnProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<CardActionAreaClasses>;
+  focusVisibleClassName?: string;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
+export type CardActionAreaTypeMap<
+  AdditionalProps,
+  RootComponent extends React.ElementType,
+> = ExtendButtonBaseTypeMap<{
+  props: AdditionalProps & CardActionAreaOwnProps & CardActionAreaSlotsAndSlotProps;
+  defaultComponent: RootComponent;
+}>;
+
+/**
+ *
+ * Demos:
+ *
+ * - [Card](https://mui.com/material-ui/react-card/)
+ *
+ * API:
+ *
+ * - [CardActionArea API](https://mui.com/material-ui/api/card-action-area/)
+ * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
+ */
+declare const CardActionArea: ExtendButtonBase<
+  CardActionAreaTypeMap<{}, ButtonBaseTypeMap['defaultComponent']>
+>;
+
+export type CardActionAreaProps<
+  RootComponent extends React.ElementType = ButtonBaseTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<CardActionAreaTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+
+export default CardActionArea;

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

@@ -0,0 +1,163 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import composeClasses from '@mui/utils/composeClasses';
+import { styled } from '../zero-styled';
+import memoTheme from '../utils/memoTheme';
+import { useDefaultProps } from '../DefaultPropsProvider';
+import cardActionAreaClasses, { getCardActionAreaUtilityClass } from './cardActionAreaClasses';
+import ButtonBase from '../ButtonBase';
+import useSlot from '../utils/useSlot';
+
+const useUtilityClasses = (ownerState) => {
+  const { classes } = ownerState;
+
+  const slots = {
+    root: ['root'],
+    focusHighlight: ['focusHighlight'],
+  };
+
+  return composeClasses(slots, getCardActionAreaUtilityClass, classes);
+};
+
+const CardActionAreaRoot = styled(ButtonBase, {
+  name: 'MuiCardActionArea',
+  slot: 'Root',
+})(
+  memoTheme(({ theme }) => ({
+    display: 'block',
+    textAlign: 'inherit',
+    borderRadius: 'inherit', // for Safari to work https://github.com/mui/material-ui/issues/36285.
+    width: '100%',
+    [`&:hover .${cardActionAreaClasses.focusHighlight}`]: {
+      opacity: (theme.vars || theme).palette.action.hoverOpacity,
+      '@media (hover: none)': {
+        opacity: 0,
+      },
+    },
+    [`&.${cardActionAreaClasses.focusVisible} .${cardActionAreaClasses.focusHighlight}`]: {
+      opacity: (theme.vars || theme).palette.action.focusOpacity,
+    },
+  })),
+);
+
+const CardActionAreaFocusHighlight = styled('span', {
+  name: 'MuiCardActionArea',
+  slot: 'FocusHighlight',
+})(
+  memoTheme(({ theme }) => ({
+    overflow: 'hidden',
+    pointerEvents: 'none',
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    borderRadius: 'inherit',
+    opacity: 0,
+    backgroundColor: 'currentcolor',
+    transition: theme.transitions.create('opacity', {
+      duration: theme.transitions.duration.short,
+    }),
+  })),
+);
+
+const CardActionArea = React.forwardRef(function CardActionArea(inProps, ref) {
+  const props = useDefaultProps({ props: inProps, name: 'MuiCardActionArea' });
+  const {
+    children,
+    className,
+    focusVisibleClassName,
+    slots = {},
+    slotProps = {},
+    ...other
+  } = props;
+
+  const ownerState = props;
+  const classes = useUtilityClasses(ownerState);
+
+  const externalForwardedProps = {
+    slots,
+    slotProps,
+  };
+
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: CardActionAreaRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other,
+    },
+    shouldForwardComponentProp: true,
+    ownerState,
+    ref,
+    className: clsx(classes.root, className),
+    additionalProps: {
+      focusVisibleClassName: clsx(focusVisibleClassName, classes.focusVisible),
+    },
+  });
+
+  const [FocusHighlightSlot, focusHighlightProps] = useSlot('focusHighlight', {
+    elementType: CardActionAreaFocusHighlight,
+    externalForwardedProps,
+    ownerState,
+    ref,
+    className: classes.focusHighlight,
+  });
+
+  return (
+    <RootSlot {...rootProps}>
+      {children}
+      <FocusHighlightSlot {...focusHighlightProps} />
+    </RootSlot>
+  );
+});
+
+CardActionArea.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`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * @ignore
+   */
+  focusVisibleClassName: PropTypes.string,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    focusHighlight: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    focusHighlight: PropTypes.elementType,
+    root: 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,
+  ]),
+};
+
+export default CardActionArea;

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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { createRenderer } from '@mui/internal-test-utils';
+import CardActionArea, { cardActionAreaClasses as classes } from '@mui/material/CardActionArea';
+import ButtonBase from '@mui/material/ButtonBase';
+import describeConformance from '../../test/describeConformance';
+
+const CustomButtonBase = React.forwardRef(({ focusVisibleClassName, ...props }, ref) => {
+  return <ButtonBase {...props} ref={ref} />;
+});
+
+describe('<CardActionArea />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<CardActionArea />, () => ({
+    classes,
+    inheritComponent: ButtonBase,
+    render,
+    muiName: 'MuiCardActionArea',
+    testDeepOverrides: { slotName: 'focusHighlight', slotClassName: classes.focusHighlight },
+    testVariantProps: { variant: 'foo' },
+    refInstanceof: window.HTMLButtonElement,
+    skip: ['componentProp', 'componentsProp'],
+    slots: {
+      root: {
+        expectedClassName: classes.root,
+        testWithElement: CustomButtonBase,
+      },
+      focusHighlight: {
+        expectedClassName: classes.focusHighlight,
+      },
+    },
+  }));
+});

packages/mui-material/src/CardActionArea/cardActionAreaClasses.ts

@@ -0,0 +1,25 @@
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+
+export interface CardActionAreaClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** State class applied to the ButtonBase root element if the action area is keyboard focused. */
+  focusVisible: string;
+  /** Styles applied to the overlay that covers the action area when it is keyboard focused. */
+  focusHighlight: string;
+}
+
+export type CardActionAreaClassKey = keyof CardActionAreaClasses;
+
+export function getCardActionAreaUtilityClass(slot: string): string {
+  return generateUtilityClass('MuiCardActionArea', slot);
+}
+
+const cardActionAreaClasses: CardActionAreaClasses = generateUtilityClasses('MuiCardActionArea', [
+  'root',
+  'focusVisible',
+  'focusHighlight',
+]);
+
+export default cardActionAreaClasses;

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

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

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

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