[Accordion] Add missing component type (mui#37111)

binh1298 · May 17, 2023 · 81a9f49 · 81a9f49
1 parent 7f34e2a
commit 81a9f49
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 58 deletions.
diff --git a/packages/mui-material/src/Accordion/Accordion.d.ts b/packages/mui-material/src/Accordion/Accordion.d.ts
@@ -1,64 +1,71 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { InternalStandardProps as StandardProps, Theme } from '..';
+import { Theme } from '..';
 import { TransitionProps } from '../transitions/transition';
-import { PaperProps } from '../Paper';
 import { AccordionClasses } from './accordionClasses';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
+import { ExtendPaperTypeMap } from '../Paper/Paper';
 
-export interface AccordionProps extends StandardProps<PaperProps, 'onChange'> {
-  /**
-   * The content of the component.
-   */
-  children: NonNullable<React.ReactNode>;
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<AccordionClasses>;
-  /**
-   * If `true`, expands the accordion by default.
-   * @default false
-   */
-  defaultExpanded?: boolean;
-  /**
-   * If `true`, the component is disabled.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * If `true`, it removes the margin between two expanded accordion items and the increase of height.
-   * @default false
-   */
-  disableGutters?: boolean;
-  /**
-   * If `true`, expands the accordion, otherwise collapse it.
-   * Setting this prop enables control over the accordion.
-   */
-  expanded?: boolean;
-  /**
-   * Callback fired when the expand/collapse state is changed.
-   *
-   * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
-   * @param {boolean} expanded The `expanded` state of the accordion.
-   */
-  onChange?: (event: React.SyntheticEvent, expanded: boolean) => void;
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx?: SxProps<Theme>;
-  /**
-   * The component used for the transition.
-   * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
-   * @default Collapse
-   */
-  TransitionComponent?: React.JSXElementConstructor<
-    TransitionProps & { children?: React.ReactElement<any, any> }
-  >;
-  /**
-   * Props applied to the transition element.
-   * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
-   */
-  TransitionProps?: TransitionProps;
-}
+export type AccordionTypeMap<P = {}, D extends React.ElementType = 'div'> = ExtendPaperTypeMap<
+  {
+    props: P & {
+      /**
+       * The content of the component.
+       */
+      children: NonNullable<React.ReactNode>;
+      /**
+       * Override or extend the styles applied to the component.
+       */
+      classes?: Partial<AccordionClasses>;
+      /**
+       * If `true`, expands the accordion by default.
+       * @default false
+       */
+      defaultExpanded?: boolean;
+      /**
+       * If `true`, the component is disabled.
+       * @default false
+       */
+      disabled?: boolean;
+      /**
+       * If `true`, it removes the margin between two expanded accordion items and the increase of height.
+       * @default false
+       */
+      disableGutters?: boolean;
+      /**
+       * If `true`, expands the accordion, otherwise collapse it.
+       * Setting this prop enables control over the accordion.
+       */
+      expanded?: boolean;
+      /**
+       * Callback fired when the expand/collapse state is changed.
+       *
+       * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
+       * @param {boolean} expanded The `expanded` state of the accordion.
+       */
+      onChange?: (event: React.SyntheticEvent, expanded: boolean) => void;
+      /**
+       * The system prop that allows defining system overrides as well as additional CSS styles.
+       */
+      sx?: SxProps<Theme>;
+      /**
+       * The component used for the transition.
+       * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+       * @default Collapse
+       */
+      TransitionComponent?: React.JSXElementConstructor<
+        TransitionProps & { children?: React.ReactElement<any, any> }
+      >;
+      /**
+       * Props applied to the transition element.
+       * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
+       */
+      TransitionProps?: TransitionProps;
+    };
+    defaultComponent: D;
+  },
+  'onChange' | 'classes'
+>;
 
 /**
  *
@@ -71,4 +78,11 @@ export interface AccordionProps extends StandardProps<PaperProps, 'onChange'> {
  * - [Accordion API](https://mui.com/material-ui/api/accordion/)
  * - inherits [Paper API](https://mui.com/material-ui/api/paper/)
  */
-export default function Accordion(props: AccordionProps): JSX.Element;
+declare const Accordion: OverridableComponent<AccordionTypeMap>;
+
+export type AccordionProps<
+  D extends React.ElementType = AccordionTypeMap['defaultComponent'],
+  P = {},
+> = OverrideProps<AccordionTypeMap<P, D>, D>;
+
+export default Accordion;
diff --git a/packages/mui-material/src/Accordion/Accordion.spec.tsx b/packages/mui-material/src/Accordion/Accordion.spec.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Accordion from '@mui/material/Accordion';
+import { expectType } from '@mui/types';
 
 function testOnChange() {
   function handleAccordionChange(event: React.SyntheticEvent, tabsValue: unknown) {}
@@ -15,3 +16,38 @@ function testOnChange() {
     <div />
   </Accordion>;
 }
+
+const CustomComponent: React.FC<{ prop1: string; prop2: number }> = function CustomComponent() {
+  return <div />;
+};
+
+const requiredProps = {
+  children: <div />,
+};
+
+const AccordionComponentTest = () => {
+  return (
+    <div>
+      <Accordion {...requiredProps} />
+      <Accordion {...requiredProps} component="legend" />
+      <Accordion
+        {...requiredProps}
+        component="a"
+        href="test"
+        onClick={(event) => {
+          expectType<React.MouseEvent<HTMLAnchorElement, MouseEvent>, typeof event>(event);
+        }}
+      />
+
+      {/* @ts-expect-error */}
+      <Accordion {...requiredProps} component="a" incorrectAttribute="url" />
+      {/* @ts-expect-error */}
+      <Accordion {...requiredProps} component="div" href="url" />
+      <Accordion {...requiredProps} component={CustomComponent} prop1="1" prop2={12} />
+      {/* @ts-expect-error */}
+      <Accordion {...requiredProps} component={CustomComponent} prop1="1" />
+      {/* @ts-expect-error */}
+      <Accordion {...requiredProps} component={CustomComponent} prop1="1" prop2="12" />
+    </div>
+  );
+};
diff --git a/packages/mui-material/src/Paper/Paper.d.ts b/packages/mui-material/src/Paper/Paper.d.ts
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { OverridableStringUnion } from '@mui/types';
 import { Theme } from '../styles';
-import { OverrideProps, OverridableComponent } from '../OverridableComponent';
+import { OverrideProps, OverridableComponent, OverridableTypeMap } from '../OverridableComponent';
 import { PaperClasses } from './paperClasses';
 
 export interface PaperPropsVariantOverrides {}
@@ -54,6 +54,11 @@ export interface PaperTypeMap<P = {}, D extends React.ElementType = 'div'> {
  */
 declare const Paper: OverridableComponent<PaperTypeMap>;
 
+export interface ExtendPaperTypeMap<M extends OverridableTypeMap, Keys extends string = ''> {
+  props: M['props'] & Omit<PaperTypeMap['props'], Keys>;
+  defaultComponent: M['defaultComponent'];
+}
+
 export type PaperProps<
   D extends React.ElementType = PaperTypeMap['defaultComponent'],
   P = {},