sync: release-23.x to next

src/Alert/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/require-default-props */
 import React, {
   useCallback,
   useEffect,

src/Card/BaseCard.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import type { ComponentWithAsProp, BsPropsWithAs } from '../utils/types/bootstrap';
@@ -28,12 +27,19 @@ const textVariants = [
 type ColorVariant = typeof colorVariants[number];
 type TextVariant = typeof textVariants[number];
 interface Props extends BsPropsWithAs {
+  /** Prefix for component CSS classes. */
   prefix?: string;
+  /** Background color of the card. */
   bgColor?: ColorVariant;
+  /** Text color of the card. */
   textColor?: ColorVariant | TextVariant;
+  /** Border color of the card. */
   borderColor?: ColorVariant;
+  /** Determines whether the card should render its children inside a `CardBody` wrapper. */
   hasBody?: boolean;
+  /** Additional CSS class names to apply to the card element. */
   className?: string;
+  /** The content to render inside the card. */
   children: React.ReactNode;
 }
 type BaseCardType = ComponentWithAsProp<'div', Props>;
@@ -69,24 +75,4 @@ const BaseCard : BaseCardType = React.forwardRef<HTMLDivElement, Props>(
   },
 );
 
-/* eslint-disable react/require-default-props */
-BaseCard.propTypes = {
-  /** Prefix for component CSS classes. */
-  prefix: PropTypes.string,
-  /** Background color of the card. */
-  bgColor: PropTypes.oneOf(colorVariants),
-  /** Text color of the card. */
-  textColor: PropTypes.oneOf([...colorVariants, ...textVariants]),
-  /** Border color of the card. */
-  borderColor: PropTypes.oneOf(colorVariants),
-  /** Determines whether the card should render its children inside a `CardBody` wrapper. */
-  hasBody: PropTypes.bool,
-  /** Set a custom element for this component. */
-  as: PropTypes.elementType,
-  /** Additional CSS class names to apply to the card element. */
-  className: PropTypes.string,
-  /** The content to render inside the card. */
-  children: PropTypes.node,
-};
-
 export default BaseCard;

src/Chip/ChipIcon.tsx

@@ -1,22 +1,30 @@
 import React, { KeyboardEventHandler, MouseEventHandler } from 'react';
-import PropTypes from 'prop-types';
 import Icon from '../Icon';
 import IconButton from '../IconButton';
 import { STYLE_VARIANTS } from './constants';
 
 export type ChipIconProps = {
-  className: string,
-  src: React.ComponentType,
-  variant: typeof STYLE_VARIANTS[keyof typeof STYLE_VARIANTS],
-  disabled?: boolean,
+  /** Additional CSS class name(s) to append to the base element. */
+  className: string;
+  /** The icon component to render. */
+  src: React.ComponentType;
+  /** The visual style variant of the chip icon. */
+  variant?: typeof STYLE_VARIANTS[keyof typeof STYLE_VARIANTS];
+  /** Whether the icon is in a disabled state. */
+  disabled?: boolean;
 } & (
   // Either _both_ onClick and alt are provided, or neither is:
-  | { onClick: KeyboardEventHandler<HTMLButtonElement> & MouseEventHandler<HTMLButtonElement>, alt: string }
-  | { onClick?: undefined, alt?: undefined }
+  | {
+    /** Callback for click and keyboard events on the icon button. */
+    onClick: KeyboardEventHandler<HTMLButtonElement> & MouseEventHandler<HTMLButtonElement>;
+    /** Accessible label for the icon button. Required when `onClick` is provided. */
+    alt: string;
+  }
+  | { onClick?: undefined; alt?: undefined }
 );
 
 function ChipIcon({
-  className, src, onClick, alt, variant, disabled,
+  className, src, onClick, alt, variant = STYLE_VARIANTS.LIGHT, disabled = false,
 }: ChipIconProps) {
   if (onClick) {
     return (
@@ -35,20 +43,4 @@ function ChipIcon({
   return <Icon src={src} className={className} size="sm" />;
 }
 
-ChipIcon.propTypes = {
-  className: PropTypes.string.isRequired,
-  src: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
-  onClick: PropTypes.func,
-  alt: PropTypes.string,
-  variant: PropTypes.string,
-  disabled: PropTypes.bool,
-};
-
-ChipIcon.defaultProps = {
-  onClick: undefined,
-  alt: undefined,
-  variant: STYLE_VARIANTS.LIGHT,
-  disabled: false,
-};
-
 export default ChipIcon;

src/Chip/index.tsx

@@ -83,8 +83,10 @@ const Chip = React.forwardRef(({
         <ChipIcon
           className={`${CHIP_PGN_CLASS}__icon-before`}
           src={iconBefore}
-          onClick={onIconBeforeClick}
-          alt={iconBeforeAlt}
+          /* The following two props should only be passed if _both_ are defined, but we haven't been checking that nor
+             enforcing it at runtime, so doing so now would be a breaking change. Hence the `!` */
+          onClick={onIconBeforeClick!}
+          alt={iconBeforeAlt!}
           variant={variant}
           disabled={disabled}
         />
@@ -101,8 +103,10 @@ const Chip = React.forwardRef(({
         <ChipIcon
           className={`${CHIP_PGN_CLASS}__icon-after`}
           src={iconAfter}
-          onClick={onIconAfterClick}
-          alt={iconAfterAlt}
+          /* The following two props should only be passed if _both_ are defined, but we haven't been checking that nor
+             enforcing it at runtime, so doing so now would be a breaking change. Hence the `!` */
+          onClick={onIconAfterClick!}
+          alt={iconAfterAlt!}
           variant={variant}
           disabled={disabled}
         />

src/Modal/ModalDialogHeader.tsx

@@ -1,21 +1,23 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import type { ComponentWithAsProp } from '../utils/types/bootstrap';
 
 export interface Props {
+  /** Specifies the base element. */
   as?: string;
+  /** Specifies the contents of the header. */
   children: React.ReactNode;
+  /** Specifies class name to append to the base element. */
   className?: string;
 }
 
 type HeaderType = ComponentWithAsProp<'div', Props>;
 
-const ModalDialogHeader: HeaderType = React.forwardRef<HTMLDivElement, Props>(({
+const ModalDialogHeader: HeaderType = React.forwardRef(({
   as = 'div',
   children,
   ...props
-}, ref) => (
+}: Props, ref: React.ForwardedRef<HTMLDivElement>) => (
   React.createElement(
     as,
     {
@@ -27,18 +29,4 @@ const ModalDialogHeader: HeaderType = React.forwardRef<HTMLDivElement, Props>(({
   )
 ));
 
-ModalDialogHeader.propTypes = {
-  /** Specifies the base element */
-  as: PropTypes.elementType,
-  /** Specifies the contents of the header */
-  children: PropTypes.node.isRequired,
-  /** Specifies class name to append to the base element */
-  className: PropTypes.string,
-};
-
-ModalDialogHeader.defaultProps = {
-  as: 'div',
-  className: '',
-};
-
 export default ModalDialogHeader;