refactor(types): standardize and cleanup types (react-bootstrap#5672)

Author: kyletsang

src/AbstractNav.tsx

@@ -31,7 +31,7 @@ const propTypes = {
 };
 
 // TODO: is this correct?
-interface AbstractNavProps {
+interface AbstractNavProps extends React.HTMLAttributes<HTMLElement> {
   activeKey?: any;
   as?: React.ElementType;
   getControlledId?: any;
@@ -42,9 +42,10 @@ interface AbstractNavProps {
   role?: string;
 }
 
-type AbstractNav = BsPrefixRefForwardingComponent<'ul', AbstractNavProps>;
-
-const AbstractNav: AbstractNav = React.forwardRef(
+const AbstractNav: BsPrefixRefForwardingComponent<
+  'ul',
+  AbstractNavProps
+> = React.forwardRef<HTMLElement, AbstractNavProps>(
   (
     {
       // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
@@ -54,7 +55,7 @@ const AbstractNav: AbstractNav = React.forwardRef(
       role,
       onKeyDown,
       ...props
-    }: AbstractNavProps,
+    },
     ref,
   ) => {
     // A ref and forceUpdate for refocus, b/c we only want to trigger when needed

src/AbstractNavItem.tsx

@@ -9,25 +9,17 @@ import SelectableContext, { makeEventKey } from './SelectableContext';
 import { BsPrefixRefForwardingComponent } from './helpers';
 
 // TODO: check this
-interface AbstractNavItemProps {
+export interface AbstractNavItemProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
   active?: boolean;
   as: React.ElementType;
-  className?: string;
   disabled?: boolean;
   eventKey?: any; // TODO: especially fix this
   href?: string;
-  role?: string;
-  id?: string;
   tabIndex?: number;
-  onClick?: (e: any) => void;
   onSelect?: (navKey: string, e: any) => void;
 }
 
-type AbstractNavItem = BsPrefixRefForwardingComponent<
-  'div',
-  AbstractNavItemProps
->;
-
 const propTypes = {
   id: PropTypes.string,
   active: PropTypes.bool,
@@ -49,17 +41,12 @@ const defaultProps = {
   disabled: false,
 };
 
-const AbstractNavItem: AbstractNavItem = React.forwardRef(
+const AbstractNavItem: BsPrefixRefForwardingComponent<
+  'div',
+  AbstractNavItemProps
+> = React.forwardRef<HTMLElement, AbstractNavItemProps>(
   (
-    {
-      active,
-      className,
-      eventKey,
-      onSelect,
-      onClick,
-      as: Component,
-      ...props
-    }: AbstractNavItemProps,
+    { active, className, eventKey, onSelect, onClick, as: Component, ...props },
     ref,
   ) => {
     const navKey = makeEventKey(eventKey, props.href);

src/Accordion.tsx

@@ -24,14 +24,6 @@ export interface AccordionProps
   flush?: boolean;
 }
 
-type Accordion = BsPrefixRefForwardingComponent<'div', AccordionProps> & {
-  Button: typeof AccordionButton;
-  Collapse: typeof AccordionCollapse;
-  Item: typeof AccordionItem;
-  Header: typeof AccordionHeader;
-  Body: typeof AccordionBody;
-};
-
 const propTypes = {
   /** Set a custom element for this component */
   as: PropTypes.elementType,
@@ -45,13 +37,14 @@ const propTypes = {
   /** The default active key that is expanded on start */
   defaultActiveKey: PropTypes.string,
 
-  /**
-   * Renders accordion edge-to-edge with its parent container
-   */
+  /** Renders accordion edge-to-edge with its parent container */
   flush: PropTypes.bool,
 };
 
-const Accordion = (React.forwardRef((props: AccordionProps, ref) => {
+const Accordion: BsPrefixRefForwardingComponent<
+  'div',
+  AccordionProps
+> = React.forwardRef<HTMLElement, AccordionProps>((props, ref) => {
   const {
     // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
     as: Component = 'div',
@@ -86,14 +79,15 @@ const Accordion = (React.forwardRef((props: AccordionProps, ref) => {
       </Component>
     </AccordionContext.Provider>
   );
-}) as unknown) as Accordion;
+});
 
 Accordion.displayName = 'Accordion';
 Accordion.propTypes = propTypes;
-Accordion.Button = AccordionButton;
-Accordion.Collapse = AccordionCollapse;
-Accordion.Item = AccordionItem;
-Accordion.Header = AccordionHeader;
-Accordion.Body = AccordionBody;
 
-export default Accordion;
+export default Object.assign(Accordion, {
+  Button: AccordionButton,
+  Collapse: AccordionCollapse,
+  Item: AccordionItem,
+  Header: AccordionHeader,
+  Body: AccordionBody,
+});

src/AccordionBody.tsx

@@ -13,8 +13,6 @@ export interface AccordionBodyProps
   extends BsPrefixPropsWithChildren,
     React.HTMLAttributes<HTMLElement> {}
 
-type AccordionBody = BsPrefixRefForwardingComponent<'div', AccordionBodyProps>;
-
 const propTypes = {
   /** Set a custom element for this component */
   as: PropTypes.elementType,
@@ -23,15 +21,18 @@ const propTypes = {
   bsPrefix: PropTypes.string,
 };
 
-const AccordionBody: AccordionBody = React.forwardRef(
+const AccordionBody: BsPrefixRefForwardingComponent<
+  'div',
+  AccordionBodyProps
+> = React.forwardRef<HTMLElement, AccordionBodyProps>(
   (
     {
       // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
       as: Component = 'div',
       bsPrefix,
       className,
       ...props
-    }: AccordionBodyProps,
+    },
     ref,
   ) => {
     bsPrefix = useBootstrapPrefix(bsPrefix, 'accordion-body');

src/AccordionButton.tsx

@@ -15,11 +15,6 @@ export interface AccordionButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     BsPrefixPropsWithChildren {}
 
-type AccordionButton = BsPrefixRefForwardingComponent<
-  'div',
-  AccordionButtonProps
->;
-
 const propTypes = {
   /** Set a custom element for this component */
   as: PropTypes.elementType,
@@ -49,7 +44,10 @@ export function useAccordionButton(
   };
 }
 
-const AccordionButton: AccordionButton = React.forwardRef(
+const AccordionButton: BsPrefixRefForwardingComponent<
+  'div',
+  AccordionButtonProps
+> = React.forwardRef<HTMLButtonElement, AccordionButtonProps>(
   (
     {
       // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
@@ -59,7 +57,7 @@ const AccordionButton: AccordionButton = React.forwardRef(
       children,
       onClick,
       ...props
-    }: AccordionButtonProps,
+    },
     ref,
   ) => {
     bsPrefix = useBootstrapPrefix(bsPrefix, 'accordion-button');

src/AccordionCollapse.tsx

@@ -15,11 +15,6 @@ export interface AccordionCollapseProps
   eventKey: string;
 }
 
-type AccordionCollapse = BsPrefixRefForwardingComponent<
-  'div',
-  AccordionCollapseProps
->;
-
 const propTypes = {
   /**
    * A key that corresponds to the toggler that triggers this collapse's expand or collapse.
@@ -30,17 +25,11 @@ const propTypes = {
   children: PropTypes.element.isRequired,
 };
 
-const AccordionCollapse: AccordionCollapse = React.forwardRef<typeof Collapse>(
-  (
-    {
-      bsPrefix,
-      className,
-      children,
-      eventKey,
-      ...props
-    }: AccordionCollapseProps,
-    ref,
-  ) => {
+const AccordionCollapse: BsPrefixRefForwardingComponent<
+  'div',
+  AccordionCollapseProps
+> = React.forwardRef<typeof Collapse, AccordionCollapseProps>(
+  ({ bsPrefix, className, children, eventKey, ...props }, ref) => {
     const { activeEventKey } = useContext(AccordionContext);
     bsPrefix = useBootstrapPrefix(bsPrefix, 'accordion-collapse');
 

src/AccordionHeader.tsx

@@ -12,11 +12,6 @@ export interface AccordionHeaderProps
   extends BsPrefixPropsWithChildren,
     React.HTMLAttributes<HTMLElement> {}
 
-type AccordionHeader = BsPrefixRefForwardingComponent<
-  'h2',
-  AccordionHeaderProps
->;
-
 const propTypes = {
   /** Set a custom element for this component */
   as: PropTypes.elementType,
@@ -28,7 +23,10 @@ const propTypes = {
   onClick: PropTypes.func,
 };
 
-const AccordionHeader: AccordionHeader = React.forwardRef(
+const AccordionHeader: BsPrefixRefForwardingComponent<
+  'h2',
+  AccordionHeaderProps
+> = React.forwardRef<HTMLElement, AccordionHeaderProps>(
   (
     {
       // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
@@ -38,7 +36,7 @@ const AccordionHeader: AccordionHeader = React.forwardRef(
       children,
       onClick,
       ...props
-    }: AccordionHeaderProps,
+    },
     ref,
   ) => {
     bsPrefix = useBootstrapPrefix(bsPrefix, 'accordion-header');

src/AccordionItem.tsx

@@ -16,8 +16,6 @@ export interface AccordionItemProps
   eventKey: string;
 }
 
-type AccordionItem = BsPrefixRefForwardingComponent<'div', AccordionItemProps>;
-
 const propTypes = {
   /** Set a custom element for this component */
   as: PropTypes.elementType,
@@ -32,7 +30,10 @@ const propTypes = {
   eventKey: PropTypes.string.isRequired,
 };
 
-const AccordionItem: AccordionItem = React.forwardRef(
+const AccordionItem: BsPrefixRefForwardingComponent<
+  'div',
+  AccordionItemProps
+> = React.forwardRef<HTMLElement, AccordionItemProps>(
   (
     {
       // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
@@ -41,7 +42,7 @@ const AccordionItem: AccordionItem = React.forwardRef(
       className,
       eventKey,
       ...props
-    }: AccordionItemProps,
+    },
     ref,
   ) => {
     bsPrefix = useBootstrapPrefix(bsPrefix, 'accordion-item');

src/Alert.tsx

@@ -13,7 +13,7 @@ import createWithBsPrefix from './createWithBsPrefix';
 import SafeAnchor from './SafeAnchor';
 import { TransitionType } from './helpers';
 
-export interface AlertProps extends React.HTMLProps<HTMLDivElement> {
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   bsPrefix?: string;
   variant?: Variant;
   dismissible?: boolean;
@@ -35,11 +35,6 @@ const AlertLink = createWithBsPrefix('alert-link', {
   Component: SafeAnchor,
 });
 
-type Alert = React.ForwardRefExoticComponent<AlertProps> & {
-  Link: typeof AlertLink;
-  Heading: typeof AlertHeading;
-};
-
 const propTypes = {
   /**
    * @default 'alert'
@@ -97,7 +92,7 @@ const defaultProps = {
   closeLabel: 'Close alert',
 };
 
-const Alert = (React.forwardRef<HTMLDivElement, AlertProps>(
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
   (uncontrolledProps: AlertProps, ref) => {
     const {
       bsPrefix,
@@ -153,12 +148,13 @@ const Alert = (React.forwardRef<HTMLDivElement, AlertProps>(
       </Transition>
     );
   },
-) as unknown) as Alert;
+);
 
 Alert.displayName = 'Alert';
-Alert.defaultProps = defaultProps as any;
+Alert.defaultProps = defaultProps;
 Alert.propTypes = propTypes;
-Alert.Link = AlertLink;
-Alert.Heading = AlertHeading;
 
-export default Alert;
+export default Object.assign(Alert, {
+  Link: AlertLink,
+  Heading: AlertHeading,
+});