@openedx/paragon 23.14.2 → 23.14.4

package/src/Button/index.tsx

@@ -1,14 +1,36 @@
 import React from 'react';
-import PropTypes, { type Requireable } from 'prop-types';
 import classNames from 'classnames';
 import BaseButton, { type ButtonProps as BaseButtonProps } from 'react-bootstrap/Button';
 import BaseButtonGroup, { type ButtonGroupProps as BaseButtonGroupProps } from 'react-bootstrap/ButtonGroup';
-import BaseButtonToolbar, { type ButtonToolbarProps } from 'react-bootstrap/ButtonToolbar';
+import BaseButtonToolbar, { type ButtonToolbarProps as BaseButtonToolbarProps } from 'react-bootstrap/ButtonToolbar';
 import type { ComponentWithAsProp } from '../utils/types/bootstrap';
 
 import Icon from '../Icon';
 
-interface ButtonProps extends Omit<BaseButtonProps, 'size'> {
+type BaseVariant = (
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'brand'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'info'
+  | 'dark'
+  | 'light'
+  | 'link'
+);
+
+/**
+ * This was added so these types could be added as a non-breaking change.
+ * @deprecated - remove in Paragon 24
+ */
+type OtherDeprecatedValue = string & {}; // Allow any other string value for now, even though it's invalid
+
+export interface ButtonProps extends Omit<BaseButtonProps, 'size'> {
+  /** Set a custom element for this component (default: `button`, with `type="button"`). */
+  as?: React.ElementType;
+  size?: 'sm' | 'md' | 'lg' | 'inline';
   /**
    * An icon component to render. Example:
    * ```
@@ -25,18 +47,32 @@ interface ButtonProps extends Omit<BaseButtonProps, 'size'> {
    * ```
    */
   iconAfter?: React.ComponentType;
-  size?: 'sm' | 'md' | 'lg' | 'inline';
-}
 
-type ButtonType = ComponentWithAsProp<'button', ButtonProps> & { Deprecated?: any };
+  // The following are the same as in BaseButtonProps, but we re-define them to add documentation.
+  // The upstream type defintions do not have any comments/docs.
+
+  /** Disables the Button, preventing mouse events, even if the underlying component is an `<a>` element */
+  disabled?: boolean;
+  /** Optional: Specify additional class name(s) to apply to the button */
+  className?: string;
+  /** Specifies the text that is displayed within the button. */
+  children: React.ReactNode;
+  /** Specifies variant to use.
+   * Can be one of the base variants: `primary`, `secondary`, `tertiary`, `brand`, `success`, `danger`, `warning`,
+   * `info`, `dark`, `light`, `link`,
+   * as well as one of the customized variants (= base variant prefixed with `inverse-`, `outline-`
+   * or `inverse-outline-`)
+   * */
+  variant?: BaseVariant | `inverse-${BaseVariant}` | `outline-${BaseVariant}` | `inverse-outline-${BaseVariant}` | OtherDeprecatedValue;
+}
 
-const Button: ButtonType = React.forwardRef<HTMLButtonElement, ButtonProps>(({
+const Button: ComponentWithAsProp<'button', ButtonProps> = React.forwardRef(({
   children,
   iconAfter,
   iconBefore,
   size,
   ...props
-}, ref) => (
+}: ButtonProps, ref: React.ForwardedRef<HTMLDivElement>) => (
   <BaseButton
     size={size as 'sm' | 'lg' | undefined} // Bootstrap's <Button> types do not allow 'md' or 'inline', but we do.
     {...props}
@@ -49,107 +85,46 @@ const Button: ButtonType = React.forwardRef<HTMLButtonElement, ButtonProps>(({
   </BaseButton>
 ));
 
-Button.propTypes = {
-  /** Specifies class name to apply to the button */
-  className: PropTypes.string,
-  /** Disables the Button, preventing mouse events, even if the underlying component is an `<a>` element */
-  disabled: PropTypes.bool,
-  /** Specifies the text that is displayed within the button. */
-  children: PropTypes.node.isRequired,
-  /** A function that would specify what the button should do when the `onClick` event is triggered.
-   * For example, the button could launch a `Modal`. The default is an empty function. */
-  onClick: PropTypes.func,
-  /** A function that would specify what the button should do when the `onKeyDown` event is triggered.
-   * For example, this could handle using the `Escape` key to trigger the button's action.
-   * The default is an empty function. */
-  onKeyDown: PropTypes.func,
-  /** Used to set the `type` attribute on the `button` tag.  The default type is `button`. */
-  type: PropTypes.string,
-  /** Specifies variant to use.
-   * Can be on of the base variants: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `dark`,
-   * `light`, `link`
-   *
-   * as well as one of the customized variants (= base variant prefixed with `inverse-`, `outline-`
-   * or `inverse-outline-`)
-   * */
-  variant: PropTypes.string,
-  /** An icon component to render.
-  * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */
-  iconBefore: PropTypes.elementType as Requireable<React.ComponentType>,
-  /** An icon component to render.
-  * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */
-  iconAfter: PropTypes.elementType as Requireable<React.ComponentType>,
-  // The 'as' type casting above is required for TypeScript checking, because the 'PropTypes.elementType' type normally
-  // allows strings as a value (for use cases like 'div') but we don't support that for <Icon />/iconBefore/iconAfter.
-  // The React TypeScript type definitions are more specific (React.ComponentType vs React.ElementType).
-};
-
-Button.defaultProps = {
-  ...Button.defaultProps,
-  children: undefined,
-  className: undefined,
-  iconBefore: undefined,
-  iconAfter: undefined,
-  disabled: false,
-};
-
-// We could just re-export 'ButtonGroup' and 'ButtonToolbar', but we currently
-// override them to add propTypes validation at runtime, since most Paragon
-// consumers aren't using TypeScript yet. We also force ButtonGroup's 'size'
-// prop to accept our custom values of 'md' and 'inline' which are used in
-// Paragon but not used in the base Bootstrap classes.
+// We could just re-export 'ButtonGroup', but we currently override it to
+// force ButtonGroup's 'size' prop to accept our custom values of 'md' and
+// 'inline' which are used in Paragon but not used in the base Bootstrap classes.
 
 interface ButtonGroupProps extends Omit<BaseButtonGroupProps, 'size'> {
+  /** Specifies element type for this component. */
+  as?: React.ElementType;
+  /** An ARIA role describing the button group (default: `group`). */
+  role?: React.AriaRole;
+  /** Specifies the size for all Buttons in the group (default: `md`). */
   size?: 'sm' | 'md' | 'lg' | 'inline';
+  /** Display as a button toggle group (default: `false`). */
+  toggle?: boolean;
+  /** Specifies if the set of Buttons should appear vertically stacked (default: `false`). */
+  vertical?: boolean;
+  /** Overrides underlying component base CSS class name (default: `btn-group`). */
+  bsPrefix?: string;
 }
 
 const ButtonGroup: ComponentWithAsProp<'div', ButtonGroupProps> = (
-  React.forwardRef<HTMLButtonElement, ButtonGroupProps>(({ size, ...props }, ref) => (
+  React.forwardRef(({ size = 'md', ...props }: ButtonGroupProps, ref: React.ForwardedRef<HTMLDivElement>) => (
     <BaseButtonGroup size={size as 'sm' | 'lg'} {...props} ref={ref} />
   ))
 );
 
-ButtonGroup.propTypes = {
-  /** Specifies element type for this component. */
-  as: PropTypes.elementType,
-  /** An ARIA role describing the button group. */
-  role: PropTypes.string,
-  /** Specifies the size for all Buttons in the group. */
-  size: PropTypes.oneOf(['sm', 'md', 'lg', 'inline']),
-  /** Display as a button toggle group. */
-  toggle: PropTypes.bool,
-  /** Specifies if the set of Buttons should appear vertically stacked. */
-  vertical: PropTypes.bool,
-  /** Overrides underlying component base CSS class name */
-  bsPrefix: PropTypes.string,
-};
+// We could just re-export 'ButtonToolbar', but we currently override it to
+// narrow the type of 'role' to valid roles and to document its properties.
 
-ButtonGroup.defaultProps = {
-  as: 'div',
-  role: 'group',
-  toggle: false,
-  vertical: false,
-  bsPrefix: 'btn-group',
-  size: 'md',
-};
+interface ButtonToolbarProps extends BaseButtonToolbarProps {
+  /** An ARIA role describing the button group (default: `toolbar`). */
+  role?: React.AriaRole;
+  /** Overrides underlying component base CSS class name (default: `btn-toolbar`) */
+  bsPrefix?: string;
+}
 
 const ButtonToolbar: ComponentWithAsProp<'div', ButtonToolbarProps> = (
-  React.forwardRef<HTMLButtonElement, ButtonToolbarProps>((props, ref) => (
+  React.forwardRef((props: ButtonToolbarProps, ref: React.ForwardedRef<HTMLDivElement>) => (
     <BaseButtonToolbar {...props} ref={ref} />
   ))
 );
 
-ButtonToolbar.propTypes = {
-  /** An ARIA role describing the button group. */
-  role: PropTypes.string,
-  /** Overrides underlying component base CSS class name */
-  bsPrefix: PropTypes.string,
-};
-
-ButtonToolbar.defaultProps = {
-  role: 'toolbar',
-  bsPrefix: 'btn-toolbar',
-};
-
 export default Button;
 export { ButtonGroup, ButtonToolbar };

package/src/Chip/index.tsx

@@ -1,40 +1,59 @@
 import React, { ForwardedRef, KeyboardEventHandler, MouseEventHandler } from 'react';
-import PropTypes, { type Requireable } from 'prop-types';
 import classNames from 'classnames';
-// @ts-ignore
-import { requiredWhen } from '../utils/propTypes';
-import { STYLE_VARIANTS } from './constants';
 import ChipIcon from './ChipIcon';
+import { STYLE_VARIANTS } from './constants';
 
 export const CHIP_PGN_CLASS = 'pgn__chip';
 
 export interface IChip {
+  /** Specifies the content of the `Chip`. */
   children: React.ReactNode,
+  /** Click handler for the whole `Chip`, has effect only when Chip does not have any interactive icons. */
   onClick?: KeyboardEventHandler & MouseEventHandler,
+  /** Specifies an additional `className` to add to the base element. */
   className?: string,
+  /** The `Chip` style [variant](https://github.com/openedx/paragon/blob/release-23.x/src/Chip/constants.ts) to use. */
   variant?: typeof STYLE_VARIANTS[keyof typeof STYLE_VARIANTS],
+  /**
+   * An icon component to render before the content.
+   * Example import of a Paragon icon component:
+   *
+   * `import { Check } from '@openedx/paragon/icons';`
+   */
   iconBefore?: React.ComponentType,
+  /** Specifies icon alt text. */
   iconBeforeAlt?: string,
+  /**
+   * An icon component to render before after the content.
+   * Example import of a Paragon icon component:
+   *
+   * `import { Check } from '@openedx/paragon/icons';`
+   */
   iconAfter?: React.ComponentType,
+  /** Specifies icon alt text. */
   iconAfterAlt?: string,
+  /** A click handler for the `Chip` icon before. */
   onIconBeforeClick?: KeyboardEventHandler & MouseEventHandler,
+  /** A click handler for the `Chip` icon after. */
   onIconAfterClick?: KeyboardEventHandler & MouseEventHandler,
+  /** Disables the `Chip`. */
   disabled?: boolean,
+  /** Indicates if `Chip` has been selected. */
   isSelected?: boolean,
 }
 
 const Chip = React.forwardRef(({
   children,
   className,
-  variant,
+  variant = 'light',
   iconBefore,
   iconBeforeAlt,
   iconAfter,
   iconAfterAlt,
   onIconBeforeClick,
   onIconAfterClick,
-  disabled,
-  isSelected,
+  disabled = false,
+  isSelected = false,
   onClick,
   ...props
 }: IChip, ref: ForwardedRef<HTMLDivElement>) => {
@@ -92,56 +111,4 @@ const Chip = React.forwardRef(({
   );
 });
 
-Chip.propTypes = {
-  /** Specifies the content of the `Chip`. */
-  // @ts-ignore
-  children: PropTypes.node.isRequired,
-  /** Specifies an additional `className` to add to the base element. */
-  className: PropTypes.string,
-  /** The `Chip` style variant to use. */
-  variant: PropTypes.oneOf(['light', 'dark']),
-  /** Disables the `Chip`. */
-  disabled: PropTypes.bool,
-  /** Click handler for the whole Chip, has effect only when Chip does not have any interactive icons. */
-  onClick: PropTypes.func,
-  /**
-   * An icon component to render before the content.
-   * Example import of a Paragon icon component:
-   *
-   * `import { Check } from '@openedx/paragon/icons';`
-   */
-  iconBefore: PropTypes.elementType as Requireable<React.ComponentType>,
-  /** Specifies icon alt text. */
-  iconBeforeAlt: requiredWhen(PropTypes.string, ['iconBefore', 'onIconBeforeClick']),
-  /** A click handler for the `Chip` icon before. */
-  onIconBeforeClick: PropTypes.func,
-  /**
-   * An icon component to render before after the content.
-   * Example import of a Paragon icon component:
-   *
-   * `import { Check } from '@openedx/paragon/icons';`
-   */
-  iconAfter: PropTypes.elementType as Requireable<React.ComponentType>,
-  /** Specifies icon alt text. */
-  iconAfterAlt: requiredWhen(PropTypes.string, ['iconAfter', 'onIconAfterClick']),
-  /** A click handler for the `Chip` icon after. */
-  onIconAfterClick: PropTypes.func,
-  /** Indicates if `Chip` has been selected. */
-  isSelected: PropTypes.bool,
-};
-
-Chip.defaultProps = {
-  className: undefined,
-  variant: STYLE_VARIANTS.LIGHT,
-  disabled: false,
-  onClick: undefined,
-  iconBefore: undefined,
-  iconAfter: undefined,
-  onIconBeforeClick: undefined,
-  onIconAfterClick: undefined,
-  isSelected: false,
-  iconAfterAlt: undefined,
-  iconBeforeAlt: undefined,
-};
-
 export default Chip;

package/src/CloseButton/index.tsx

@@ -0,0 +1 @@
+export { default } from 'react-bootstrap/CloseButton';

package/src/Collapse/index.tsx

@@ -0,0 +1 @@
+export { default } from 'react-bootstrap/Collapse';

package/src/Fade/index.tsx

@@ -0,0 +1 @@
+export { default } from 'react-bootstrap/Fade';

package/src/Form/FormLabel.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useFormGroupContext } from './FormGroupContext';
 import { FORM_CONTROL_SIZES } from './constants';
@@ -9,6 +8,8 @@ interface Props {
   children: React.ReactNode;
   /** Specifies whether the component should be displayed with inline styling. */
   isInline?: boolean;
+  /** Specifies an additional `className` to add to the base element. */
+  className?: string;
 }
 
 function FormLabel({ children, isInline = false, ...props }: Props & React.ComponentPropsWithoutRef<'label'>) {
@@ -27,13 +28,4 @@ function FormLabel({ children, isInline = false, ...props }: Props & React.Compo
   return React.createElement(componentType, labelProps, children);
 }
 
-FormLabel.propTypes = {
-  /** Specifies class name to append to the base element. */
-  className: PropTypes.string,
-  /** Specifies contents of the component. */
-  children: PropTypes.node.isRequired,
-  /** Specifies whether the component should be displayed with inline styling. */
-  isInline: PropTypes.bool,
-};
-
 export default FormLabel;

package/src/IconButton/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { type Placement } from 'react-bootstrap/Overlay';
 import { OverlayTrigger } from '../Overlay';
@@ -7,6 +6,7 @@ import Tooltip from '../Tooltip';
 import Icon from '../Icon';
 
 interface Props extends React.HTMLAttributes<HTMLButtonElement> {
+  /** Component that renders the icon, currently defaults to `Icon` */
   iconAs?: React.ComponentType<any>,
   /** Additional CSS class[es] to apply to this button */
   className?: string;
@@ -26,33 +26,33 @@ interface Props extends React.HTMLAttributes<HTMLButtonElement> {
   iconClassNames?: string;
   /** Click handler for the button */
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */
+  /** Whether to show the `IconButton` in an active state, whose styling is distinct from default state */
   isActive?: boolean;
   /** @deprecated Using FontAwesome icons is deprecated. Instead, pass iconAs={Icon} src={...} */
   icon?: { prefix?: string; iconName?: string, icon?: any[] },
-  /** Type of button (uses Bootstrap options) */
+  /** Type of button (uses Bootstrap options). */
   variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'light' | 'dark' | 'black' | 'brand';
-  /** size of button to render */
+  /** Size of button to render */
   size?: 'sm' | 'md' | 'inline';
-  /** no children */
+  /** No children */
   children?: never;
 }
 
-const IconButton = React.forwardRef<HTMLButtonElement, Props>(({
+const IconButton = React.forwardRef(({
   className,
   alt,
-  invertColors,
+  invertColors = false,
   icon,
   src,
   iconClassNames,
-  onClick,
-  size,
-  variant,
-  iconAs,
-  isActive,
+  onClick = () => {},
+  size = 'md',
+  variant = 'primary',
+  iconAs = Icon,
+  isActive = false,
   children, // unused, just here because we don't want it to be part of 'attrs'
   ...attrs
-}, ref) => {
+} : Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
   const invert = invertColors ? 'inverse-' : '';
   const activeStyle = isActive ? `${variant}-` : '';
   const IconComponent = iconAs;
@@ -87,58 +87,10 @@ const IconButton = React.forwardRef<HTMLButtonElement, Props>(({
   );
 });
 
-IconButton.defaultProps = {
-  iconAs: Icon,
-  src: undefined,
-  icon: undefined,
-  iconClassNames: undefined,
-  className: undefined,
-  invertColors: false,
-  variant: 'primary',
-  size: 'md',
-  onClick: () => {},
-  isActive: false,
-  children: undefined,
-};
-
-IconButton.propTypes = {
-  /** A custom class name. */
-  className: PropTypes.string,
-  /** Component that renders the icon, currently defaults to `Icon` */
-  iconAs: PropTypes.elementType as any,
-  /** An icon component to render. Example import of a Paragon icon component:
-   * `import { Check } from '@openedx/paragon/icons';`
-   * */
-  src: PropTypes.elementType as any,
-  /** Alt text for your icon. For best practice, avoid using alt text to describe
-   * the image in the `IconButton`. Instead, we recommend describing the function
-   * of the button. */
-  alt: PropTypes.string.isRequired,
-  /** Changes icon styles for dark background */
-  invertColors: PropTypes.bool,
-  /** Accepts a [Paragon icon](https://paragon-openedx.netlify.app/foundations/icons) */
-  icon: PropTypes.shape({
-    prefix: PropTypes.string,
-    iconName: PropTypes.string,
-    // eslint-disable-next-line react/forbid-prop-types
-    icon: PropTypes.array,
-  }) as any,
-  /** Extra class names that will be added to the icon */
-  iconClassNames: PropTypes.string,
-  /** Click handler for the button */
-  onClick: PropTypes.func,
-  /** Type of button (uses Bootstrap options) */
-  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),
-  /** size of button to render */
-  size: PropTypes.oneOf(['sm', 'md', 'inline']),
-  /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */
-  isActive: PropTypes.bool,
-};
-
 interface PropsWithTooltip extends Props {
-  /** choose from https://popper.js.org/docs/v2/constructors/#options */
-  tooltipPlacement: Placement,
-  /** any content to pass to tooltip content area */
+  /** Tooltip placement can be top, left, right etc, choose from https://popper.js.org/docs/v2/constructors/#options */
+  tooltipPlacement?: Placement,
+  /** Any content to pass to tooltip content area */
   tooltipContent: React.ReactNode,
 }
 
@@ -146,7 +98,7 @@ interface PropsWithTooltip extends Props {
  * An icon button wrapped in overlaytrigger to display a tooltip.
  */
 function IconButtonWithTooltip({
-  tooltipPlacement, tooltipContent, ...props
+  tooltipPlacement = 'top', tooltipContent, ...props
 }: PropsWithTooltip) {
   const invert = props.invertColors ? 'inverse-' : '';
   return (
@@ -166,22 +118,6 @@ function IconButtonWithTooltip({
   );
 }
 
-IconButtonWithTooltip.defaultProps = {
-  ...IconButton.defaultProps,
-  tooltipPlacement: 'top',
-};
-
-IconButtonWithTooltip.propTypes = {
-  /** tooltip placement can be top, left, right etc, per https://popper.js.org/docs/v2/constructors/#options  */
-  tooltipPlacement: PropTypes.string,
-  /** any valid JSX or text to be rendered as tooltip contents */
-  tooltipContent: PropTypes.node.isRequired,
-  /** Type of button (uses Bootstrap options) */
-  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),
-  /** Changes icon styles for dark background */
-  invertColors: PropTypes.bool,
-};
-
 (IconButton as any).IconButtonWithTooltip = IconButtonWithTooltip;
 
 export default IconButton as typeof IconButton & {

package/src/Image/index.tsx

@@ -0,0 +1,2 @@
+export { default } from 'react-bootstrap/Image';
+export { default as Figure } from 'react-bootstrap/Figure';

package/src/Media/index.tsx

@@ -0,0 +1 @@
+export { default } from 'react-bootstrap/Media';

package/src/Modal/modal-popup.mdx

@@ -16,7 +16,7 @@ notes: |
 A generic component for creating accessible modal popup objects.
 
 Note that `ModalPopup` expects DOM node, not ref, in order to be able to update when the node changes.
-A proper way to implement this is to use [callback refs](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs) with `useState` hook as in the example below.
+A proper way to implement this is to use [callback refs](https://react.dev/reference/react-dom/components/common#ref-callback) with `useState` hook as in the example below.
 
 ## Basic Usage
 

package/src/ResponsiveEmbed/index.tsx

@@ -0,0 +1 @@
+export { default } from 'react-bootstrap/ResponsiveEmbed';

package/src/Skeleton/index.tsx

@@ -0,0 +1 @@
+export { default, SkeletonTheme } from 'react-loading-skeleton';

package/src/Toast/index.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import BaseToast from 'react-bootstrap/Toast';
 import { useIntl } from 'react-intl';
 
@@ -20,12 +19,31 @@ interface ToastAction {
 }
 
 interface ToastProps {
+  /** A string or an element that is rendered inside the main body of the `Toast`. */
   children: string;
+  /**
+   * A function that is called on close. It can be used to perform
+   * actions upon closing of the `Toast`, such as setting the "show"
+   * element to false.
+   * */
   onClose: () => void;
+  /** Boolean used to control whether the `Toast` shows. */
   show: boolean;
+  /**
+   * Fields used to build optional action button.
+   * `label` is a string rendered inside the button.
+   * `href` is a link that will render the action button as an anchor tag.
+   * `onClick` is a function that is called when the button is clicked.
+   * The full type definition can be seen [here](https://github.com/openedx/paragon/blob/release-23.x/src/Toast/index.tsx#L16)
+   */
   action?: ToastAction;
+  /**
+   * Alt text for the `Toast`'s dismiss button. Defaults to 'Close'.
+   */
   closeLabel?: string;
+  /** Time in milliseconds for which the `Toast` will display. */
   delay?: number;
+  /** Class names for the `BaseToast` component. */
   className?: string;
 }
 
@@ -36,6 +54,7 @@ function Toast({
   closeLabel,
   onClose,
   show,
+  delay = TOAST_DELAY,
   ...rest
 }: ToastProps) {
   const intl = useIntl();
@@ -58,6 +77,7 @@ function Toast({
         onMouseOut={() => setAutoHide(true)}
         onMouseOver={() => setAutoHide(false)}
         show={show}
+        delay={delay}
         {...rest}
       >
         <div className="toast-header">
@@ -90,43 +110,4 @@ function Toast({
   );
 }
 
-Toast.defaultProps = {
-  action: null,
-  closeLabel: undefined,
-  delay: TOAST_DELAY,
-  className: undefined,
-};
-
-Toast.propTypes = {
-  /** A string or an element that is rendered inside the main body of the `Toast`. */
-  children: PropTypes.string.isRequired,
-  /**
-   * A function that is called on close. It can be used to perform
-   * actions upon closing of the `Toast`, such as setting the "show"
-   * element to false.
-   * */
-  onClose: PropTypes.func.isRequired,
-  /** Boolean used to control whether the `Toast` shows */
-  show: PropTypes.bool.isRequired,
-  /**
-   * Fields used to build optional action button.
-   * `label` is a string rendered inside the button.
-   * `href` is a link that will render the action button as an anchor tag.
-   * `onClick` is a function that is called when the button is clicked.
-   */
-  action: PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    href: PropTypes.string,
-    onClick: PropTypes.func,
-  }),
-  /**
-   * Alt text for the `Toast`'s dismiss button. Defaults to 'Close'.
-   */
-  closeLabel: PropTypes.string,
-  /** Time in milliseconds for which the `Toast` will display. */
-  delay: PropTypes.number,
-  /** Class names for the `BaseToast` component */
-  className: PropTypes.string,
-};
-
 export default Toast;

package/src/ToggleButton/index.tsx

@@ -0,0 +1,2 @@
+export { default } from 'react-bootstrap/ToggleButton';
+export { default as ToggleButtonGroup } from 'react-bootstrap/ToggleButtonGroup';