@openedx/paragon 23.14.1 → 23.14.3

package/src/DataTable/index.jsx

@@ -49,6 +49,7 @@ function DataTable({
   EmptyTableComponent,
   manualSelectColumn,
   showFiltersInSidebar,
+  filtersTitle,
   dataViewToggleOptions,
   disableElevation,
   isLoading,
@@ -215,6 +216,7 @@ function DataTable({
     manualSelectColumn,
     maxSelectedRows,
     onMaxSelectedRows,
+    filtersTitle,
     ...selectionProps,
     ...selectionActions,
     ...props,
@@ -222,7 +224,7 @@ function DataTable({
 
   return (
     <DataTableContext.Provider value={enhancedInstance}>
-      <DataTableLayout>
+      <DataTableLayout filtersTitle={filtersTitle}>
         <div className={classNames('pgn__data-table-wrapper', {
           'hide-shadow': !!disableElevation,
         })}
@@ -264,6 +266,7 @@ DataTable.defaultProps = {
   FilterStatusComponent: FilterStatus,
   RowStatusComponent: RowStatus,
   showFiltersInSidebar: false,
+  filtersTitle: undefined,
   dataViewToggleOptions: {
     isDataViewToggleEnabled: false,
     onDataViewToggle: () => {},
@@ -425,6 +428,8 @@ DataTable.propTypes = {
   children: PropTypes.node,
   /** If true filters will be shown on sidebar instead */
   showFiltersInSidebar: PropTypes.bool,
+  /** Title of the filters section */
+  filtersTitle: PropTypes.string,
   /** options for data view toggle */
   dataViewToggleOptions: PropTypes.shape({
     /** Whether to show a toggle button group which allows view switching between card and table views */

package/src/DataTable/{messages.js → messages.ts}

@@ -6,6 +6,11 @@ const messages = defineMessages({
     defaultMessage: 'table pagination',
     description: 'Accessibile name for the navigation element of a pagination component',
   },
+  filtersDropdownTitle: {
+    id: 'pgn.DataTable.filtersDropdownTitle',
+    defaultMessage: 'Filters',
+    description: 'Title of the filters dropdown',
+  },
 });
 
 export default messages;

package/src/DataTable/tests/DataTable.test.jsx

@@ -8,6 +8,7 @@ import DataTable from '..';
 import DataTableContext from '../DataTableContext';
 import { TextFilter } from '../..';
 import { SELECT_ALL_TEST_ID } from '../selection/data/constants';
+import messages from '../messages';
 
 const additionalColumns = [
   {
@@ -162,6 +163,55 @@ describe('<DataTable />', () => {
     expect(screen.getByText('Action')).toBeInTheDocument();
     expect(screen.getByText('More')).toBeInTheDocument();
   });
+
+  it('displays the custom filters title in the sidebar', () => {
+    render(
+      <DataTableWrapper
+        showFiltersInSidebar
+        filtersTitle="Refine Your Search"
+        isFilterable
+        defaultColumnValues={{ Filter: TextFilter }}
+        {...props}
+      />,
+    );
+    expect(screen.getByRole('heading', { name: 'Refine Your Search' })).toBeInTheDocument();
+  });
+
+  it('displays the default filters title in the sidebar', () => {
+    render(
+      <DataTableWrapper
+        showFiltersInSidebar
+        isFilterable
+        defaultColumnValues={{ Filter: TextFilter }}
+        {...props}
+      />,
+    );
+    expect(screen.getByRole('heading', { name: messages.filtersDropdownTitle.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('displays the custom filters title in the filters dropdown', () => {
+    render(
+      <DataTableWrapper
+        filtersTitle="Refine Your Search"
+        isFilterable
+        defaultColumnValues={{ Filter: TextFilter }}
+        {...props}
+      />,
+    );
+    expect(screen.getByRole('button', { name: 'Refine Your Search' })).toBeInTheDocument();
+  });
+
+  it('displays the default filters title in the filters dropdown', () => {
+    render(
+      <DataTableWrapper
+        isFilterable
+        defaultColumnValues={{ Filter: TextFilter }}
+        {...props}
+      />,
+    );
+    expect(screen.getByRole('button', { name: messages.filtersDropdownTitle.defaultMessage })).toBeInTheDocument();
+  });
+
   it('calls useTable with the data and columns', () => {
     const spy = jest.spyOn(reactTable, 'useTable');
     render(<DataTableWrapper {...props} />);
@@ -213,7 +263,7 @@ describe('<DataTable />', () => {
       fetchData: jest.fn(),
     };
     render(<DataTableWrapper {...propsWithSelection} />);
-    const filtersButton = screen.getByRole('button', { name: 'Filters' });
+    const filtersButton = screen.getByRole('button', { name: messages.filtersDropdownTitle.defaultMessage });
 
     await userEvent.click(filtersButton);
 

package/src/DataTable/tests/DropdownFilters.test.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { IntlProvider } from 'react-intl';
 
 import DropdownFilters from '../DropdownFilters';
 import { useWindowSize } from '../..';
 import DataTableContext from '../DataTableContext';
+import messages from '../messages';
 
 jest.mock('../../hooks/useWindowSizeHook');
 
@@ -31,9 +33,11 @@ const instance = {
 // eslint-disable-next-line react/prop-types
 function DropdownFiltersWrapper({ value = instance, props }) {
   return (
-    <DataTableContext.Provider value={value}>
-      <DropdownFilters {...props} />
-    </DataTableContext.Provider>
+    <IntlProvider locale="en">
+      <DataTableContext.Provider value={value}>
+        <DropdownFilters {...props} />
+      </DataTableContext.Provider>
+    </IntlProvider>
   );
 }
 
@@ -56,7 +60,7 @@ describe('<DropdownFilters />', () => {
       // filter should be rendered in the dropdown, so should not be present before
       // clicking the button.
       expect(screen.queryByText('Occupation filter')).toBeNull();
-      const filtersButton = screen.getByRole('button', { name: /Filters/i });
+      const filtersButton = screen.getByRole('button', { name: messages.filtersDropdownTitle.defaultMessage });
       await userEvent.click(filtersButton);
       expect(screen.getByText('Occupation filter')).toBeInTheDocument();
     });
@@ -65,7 +69,7 @@ describe('<DropdownFilters />', () => {
       useWindowSize.mockReturnValue({ width: 800 });
       render(<DropdownFiltersWrapper />);
       expect(screen.queryByText('DOB filter')).toBeNull();
-      const filtersButton = screen.getByRole('button', { name: /Filters/i });
+      const filtersButton = screen.getByRole('button', { name: messages.filtersDropdownTitle.defaultMessage });
       await userEvent.click(filtersButton);
       expect(screen.queryByText('DOB filter')).toBeNull();
     });
@@ -74,7 +78,7 @@ describe('<DropdownFilters />', () => {
       useWindowSize.mockReturnValue({ width: 800 });
       render(<DropdownFiltersWrapper value={{ columns: [instance.columns[1]] }} />);
       expect(screen.getByText('Occupation filter')).toBeInTheDocument();
-      expect(screen.queryByRole('button', { name: /Filters/i })).toBeNull();
+      expect(screen.queryByRole('button', { name: messages.filtersDropdownTitle.defaultMessage })).toBeNull();
     });
   });
 
@@ -88,7 +92,7 @@ describe('<DropdownFilters />', () => {
     it('renders all filters in the dropdown', async () => {
       useWindowSize.mockReturnValue({ width: 500 });
       render(<DropdownFiltersWrapper />);
-      const filtersButton = screen.getByRole('button', { name: /Filters/i });
+      const filtersButton = screen.getByRole('button', { name: messages.filtersDropdownTitle.defaultMessage });
       await userEvent.click(filtersButton);
       expect(screen.getByText('Bears filter')).toBeInTheDocument();
       expect(screen.getByText('Occupation filter')).toBeInTheDocument();

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/ModalDialog.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useMediaQuery } from 'react-responsive';
 import { useIntl } from 'react-intl';
@@ -52,7 +51,12 @@ interface Props {
   isBlocking?: boolean;
   /** Specifies the z-index of the modal */
   zIndex?: number;
-  /** Specifies whether overflow is visible in the modal */
+  /**
+   * Specifies whether overflow content inside the modal should be visible.
+   * - `true` - content that exceeds the modal boundaries will remain visible outside the modal's main viewport,
+   * rather than being clipped or hidden.
+   * - `false` - any overflow content will be clipped to fit within the modal's dimensions.
+   */
   isOverflowVisible: boolean;
 }
 
@@ -109,70 +113,6 @@ function ModalDialog({
   );
 }
 
-ModalDialog.propTypes = {
-  /**
-   *  Specifies the content of the dialog
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * The aria-label of the dialog
-   */
-  title: PropTypes.string.isRequired,
-  /**
-   * A callback to close the modal dialog
-   */
-  onClose: PropTypes.func.isRequired,
-  /**
-   * Is the modal dialog open or closed
-   */
-  isOpen: PropTypes.bool,
-  /**
-   * The close 'x' icon button in the top right of the dialog box
-   */
-  hasCloseButton: PropTypes.bool,
-  /**
-   * Sizes determine the maximum width of the dialog box
-   */
-  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'fullscreen']),
-  /**
-   * The visual style of the dialog box
-   */
-  variant: PropTypes.oneOf(['default', 'warning', 'danger', 'success', 'dark']),
-  /**
-   * The label supplied to the close icon button if one is rendered
-   */
-  closeLabel: PropTypes.string,
-  /**
-   *  Specifies class name to append to the base element
-   */
-  className: PropTypes.string,
-  /**
-   * Determines where a scrollbar should appear if a modal is too large for the
-   * viewport. When false, the ``ModalDialog``. Body receives a scrollbar, when true
-   * the browser window itself receives the scrollbar.
-   */
-  isFullscreenScroll: PropTypes.bool,
-  /**
-   * To show full screen view on mobile screens
-   */
-  isFullscreenOnMobile: PropTypes.bool,
-  /**
-   * Prevent clicking on the backdrop or pressing Esc to close the modal
-   */
-  isBlocking: PropTypes.bool,
-  /**
-   * Specifies the z-index of the modal
-   */
-  zIndex: PropTypes.number,
-  /**
-   * Specifies whether overflow content inside the modal should be visible.
-   * - `true` - content that exceeds the modal boundaries will remain visible outside the modal's main viewport,
-   * rather than being clipped or hidden.
-   * - `false` - any overflow content will be clipped to fit within the modal's dimensions.
-   */
-  isOverflowVisible: PropTypes.bool.isRequired,
-};
-
 ModalDialog.Header = ModalDialogHeader;
 ModalDialog.Title = ModalDialogTitle;
 ModalDialog.Footer = ModalDialogFooter;

package/src/Modal/ModalLayer.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import { FocusOn } from 'react-focus-on';
 import Portal from './Portal';
 import { ModalContextProvider } from './ModalContext';
@@ -18,19 +17,11 @@ function ModalBackdrop({ onClick }: { onClick?: () => void }) {
   );
 }
 
-ModalBackdrop.propTypes = {
-  onClick: PropTypes.func,
-};
-
 // istanbul ignore next
 function ModalContentContainer({ children = null }: { children?: React.ReactNode }) {
   return <div className="pgn__modal-content-container">{children}</div>;
 }
 
-ModalContentContainer.propTypes = {
-  children: PropTypes.node,
-};
-
 interface Props {
   /** Specifies the contents of the modal */
   children: React.ReactNode;
@@ -94,18 +85,5 @@ function ModalLayer({
   );
 }
 
-ModalLayer.propTypes = {
-  /** Specifies the contents of the modal */
-  children: PropTypes.node.isRequired,
-  /** A callback function for when the modal is dismissed */
-  onClose: PropTypes.func.isRequired,
-  /** Is the modal dialog open or closed */
-  isOpen: PropTypes.bool.isRequired,
-  /** Prevent clicking on the backdrop or pressing Esc to close the modal */
-  isBlocking: PropTypes.bool,
-  /** Specifies the z-index of the modal */
-  zIndex: PropTypes.number,
-};
-
 export { ModalBackdrop, ModalContentContainer };
 export default ModalLayer;

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/ProductTour/ProductTour.test.jsx

@@ -231,7 +231,6 @@ describe('<ProductTour />', () => {
 
         // Verify no Checkpoints have rendered
         expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-        expect(handleEnd).toHaveBeenCalledTimes(1);
         expect(customOnEnd).not.toHaveBeenCalled();
       });
 

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/Spinner/{index.jsx → index.tsx}

@@ -1,13 +1,20 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import BaseSpinner from 'react-bootstrap/Spinner';
+import BaseSpinner, { type SpinnerProps as BaseSpinnerProps } from 'react-bootstrap/Spinner';
 
+interface SpinnerProps extends BaseSpinnerProps {
+  /** Optionally specify additional CSS classes to give this spinner's `<div>`. */
+  className?: string;
+  /** Specifies the screen reader content for a11y. */
+  screenReaderText?: React.ReactNode;
+}
+
+/** A spinning animation that indicates loading. */
 const Spinner = React.forwardRef(({
   className,
   screenReaderText,
   ...attrs
-}, ref) => {
+}: SpinnerProps, ref: React.ForwardedRef<HTMLDivElement>) => {
   const spinnerProps = {
     ...attrs,
     className: classNames('pgn__spinner', className),
@@ -20,16 +27,4 @@ const Spinner = React.forwardRef(({
   );
 });
 
-Spinner.propTypes = {
-  /** Specifies the class name for the component. */
-  className: PropTypes.string,
-  /** Specifies the screen reader content for a11y. */
-  screenReaderText: PropTypes.node,
-};
-
-Spinner.defaultProps = {
-  className: undefined,
-  screenReaderText: undefined,
-};
-
 export default Spinner;

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;