@openedx/paragon 22.18.2 → 22.20.0

package/dist/Alert/index.d.ts

@@ -0,0 +1,36 @@
+import React, { ReactNode, ElementType, FC, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { AlertProps as BaseAlertProps } from 'react-bootstrap';
+import { IconProps } from '../Icon';
+export declare const ALERT_CLOSE_LABEL_TEXT = "Dismiss";
+export type AlertVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light';
+export type BaseProps = Omit<BaseAlertProps, 'children' | 'variant' | 'closeLabel'>;
+export interface AlertProps extends BaseProps {
+    className?: string;
+    bsPrefix?: string;
+    variant?: AlertVariant;
+    children?: ReactNode;
+    icon?: React.ComponentType<IconProps>;
+    show?: boolean;
+    dismissible?: boolean;
+    onClose?: () => void;
+    actions?: React.ReactElement[];
+    stacked?: boolean;
+    closeLabel?: string | ReactNode;
+}
+export interface AlertHeadingProps {
+    as?: ElementType;
+    bsPrefix?: string;
+    children?: ReactNode;
+}
+export interface AlertLinkProps {
+    as?: ElementType;
+    bsPrefix?: string;
+    children?: ReactNode;
+    href?: string;
+}
+export interface AlertComponent extends ForwardRefExoticComponent<AlertProps & RefAttributes<HTMLDivElement>> {
+    Heading: FC<AlertHeadingProps>;
+    Link: FC<AlertLinkProps>;
+}
+declare const Alert: AlertComponent;
+export default Alert;

package/dist/Alert/index.js

@@ -1,16 +1,18 @@
-import React, { useCallback, useEffect, useState } from 'react';
+/* eslint-disable react/require-default-props */
+import React, { useCallback, useEffect, useState, forwardRef, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import BaseAlert from 'react-bootstrap/Alert';
+import { Alert as BaseAlert } from 'react-bootstrap';
 import divWithClassName from 'react-bootstrap/divWithClassName';
 import { FormattedMessage } from 'react-intl';
 import { useMediaQuery } from 'react-responsive';
 import Icon from '../Icon';
 import breakpoints from '../utils/breakpoints';
 import Button from '../Button';
+// @ts-ignore for now - this needs to be converted to TypeScript
 import ActionRow from '../ActionRow';
 export const ALERT_CLOSE_LABEL_TEXT = 'Dismiss';
-const Alert = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const Alert = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
     icon,
@@ -38,7 +40,7 @@ const Alert = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       size: actionButtonSize,
       key: Action.props.children
     };
-    return /*#__PURE__*/React.cloneElement(Action, addtlActionProps);
+    return /*#__PURE__*/cloneElement(Action, addtlActionProps);
   }, []);
   return /*#__PURE__*/React.createElement(BaseAlert, {
     ...props,
@@ -54,7 +56,7 @@ const Alert = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     })
   }, /*#__PURE__*/React.createElement("div", {
     className: "alert-message-content"
-  }, children), (dismissible || actions?.length > 0) && /*#__PURE__*/React.createElement(ActionRow, {
+  }, children), (dismissible || actions && actions.length > 0) && /*#__PURE__*/React.createElement(ActionRow, {
     className: "pgn__alert-actions"
   }, /*#__PURE__*/React.createElement(ActionRow.Spacer, null), dismissible && /*#__PURE__*/React.createElement(Button, {
     size: actionButtonSize,
@@ -82,14 +84,18 @@ function AlertLink(props) {
     ...props
   });
 }
-const commonPropTypes = {
+AlertLink.propTypes = {
+  /** Specifies the base element */
+  as: PropTypes.elementType,
+  /** Overrides underlying component base CSS class name */
+  bsPrefix: PropTypes.string
+};
+AlertHeading.propTypes = {
   /** Specifies the base element */
   as: PropTypes.elementType,
   /** Overrides underlying component base CSS class name */
   bsPrefix: PropTypes.string
 };
-AlertLink.propTypes = commonPropTypes;
-AlertHeading.propTypes = commonPropTypes;
 AlertLink.defaultProps = {
   as: 'a',
   bsPrefix: 'alert-link'
@@ -147,7 +153,10 @@ Alert.defaultProps = {
   onClose: () => {},
   closeLabel: undefined,
   show: true,
-  stacked: false
+  stacked: false,
+  className: undefined,
+  bsPrefix: undefined,
+  variant: undefined
 };
 Alert.Heading = AlertHeading;
 Alert.Link = AlertLink;

package/dist/Alert/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useState","PropTypes","classNames","BaseAlert","divWithClassName","FormattedMessage","useMediaQuery","Icon","breakpoints","Button","ActionRow","ALERT_CLOSE_LABEL_TEXT","Alert","forwardRef","_ref","ref","children","icon","actions","dismissible","onClose","closeLabel","stacked","props","isStacked","setIsStacked","isExtraSmall","maxWidth","extraSmall","actionButtonSize","cloneActionElement","Action","addtlActionProps","size","key","cloneElement","createElement","className","src","length","Spacer","variant","onClick","id","defaultMessage","description","map","DivStyledAsH4","displayName","AlertHeading","Heading","AlertLink","Link","commonPropTypes","as","elementType","bsPrefix","string","propTypes","defaultProps","oneOf","transition","oneOfType","bool","shape","in","appear","node","onEnter","func","onEntered","onEntering","onExit","onExited","onExiting","show","arrayOf","element","undefined"],"sources":["../../src/Alert/index.jsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport BaseAlert from 'react-bootstrap/Alert';\nimport divWithClassName from 'react-bootstrap/divWithClassName';\nimport { FormattedMessage } from 'react-intl';\nimport { useMediaQuery } from 'react-responsive';\nimport Icon from '../Icon';\nimport breakpoints from '../utils/breakpoints';\nimport Button from '../Button';\nimport ActionRow from '../ActionRow';\n\nexport const ALERT_CLOSE_LABEL_TEXT = 'Dismiss';\n\nconst Alert = React.forwardRef(({\n  children,\n  icon,\n  actions,\n  dismissible,\n  onClose,\n  closeLabel,\n  stacked,\n  ...props\n}, ref) => {\n  const [isStacked, setIsStacked] = useState(stacked);\n  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });\n  const actionButtonSize = 'sm';\n\n  useEffect(() => {\n    if (isExtraSmall) {\n      setIsStacked(true);\n    } else {\n      setIsStacked(stacked);\n    }\n  }, [isExtraSmall, stacked]);\n\n  const cloneActionElement = useCallback(\n    (Action) => {\n      const addtlActionProps = { size: actionButtonSize, key: Action.props.children };\n      return React.cloneElement(Action, addtlActionProps);\n    },\n    [],\n  );\n\n  return (\n    <BaseAlert\n      {...props}\n      className={classNames('alert-content', props.className)}\n      ref={ref}\n    >\n      {icon && <Icon src={icon} className=\"alert-icon\" />}\n      <div\n        className={classNames({\n          'pgn__alert-message-wrapper': !isStacked,\n          'pgn__alert-message-wrapper-stacked': isStacked,\n        })}\n      >\n        <div className=\"alert-message-content\">\n          {children}\n        </div>\n        {(dismissible || actions?.length > 0) && (\n          <ActionRow className=\"pgn__alert-actions\">\n            <ActionRow.Spacer />\n            {dismissible && (\n              <Button\n                size={actionButtonSize}\n                variant=\"tertiary\"\n                onClick={onClose}\n              >\n                {closeLabel || (\n                  <FormattedMessage\n                    id=\"pgn.Alert.closeLabel\"\n                    defaultMessage=\"Dismiss\"\n                    description=\"Label of a close button on Alert component\"\n                  />\n                )}\n              </Button>\n            )}\n            {actions && actions.map(cloneActionElement)}\n          </ActionRow>\n        )}\n      </div>\n    </BaseAlert>\n  );\n});\n\n// This is needed to display a default prop for Alert.Heading element\n// Copied from react-bootstrap since BaseAlert.Heading component doesn't have defaultProps,\n// so there seems to be no other way of providing correct default prop for base element\nconst DivStyledAsH4 = divWithClassName('h4');\nDivStyledAsH4.displayName = 'DivStyledAsH4';\n\nfunction AlertHeading(props) {\n  return <BaseAlert.Heading {...props} />;\n}\nfunction AlertLink(props) {\n  return <BaseAlert.Link {...props} />;\n}\n\nconst commonPropTypes = {\n  /** Specifies the base element */\n  as: PropTypes.elementType,\n  /** Overrides underlying component base CSS class name */\n  bsPrefix: PropTypes.string,\n};\n\nAlertLink.propTypes = commonPropTypes;\nAlertHeading.propTypes = commonPropTypes;\n\nAlertLink.defaultProps = {\n  as: 'a',\n  bsPrefix: 'alert-link',\n};\n\nAlertHeading.defaultProps = {\n  as: DivStyledAsH4,\n  bsPrefix: 'alert-heading',\n};\n\nAlert.propTypes = {\n  ...BaseAlert.propTypes,\n  /** Specifies class name to append to the base element */\n  className: PropTypes.string,\n  /** Overrides underlying component base CSS class name */\n  bsPrefix: PropTypes.string,\n  /** Specifies variant to use. */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light']),\n  /**\n   * Animate the entering and exiting of the Alert. `true` will use the `<Fade>` transition,\n   * more detailed customization is also provided.\n   */\n  transition: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({\n    in: PropTypes.bool,\n    appear: PropTypes.bool,\n    children: PropTypes.node,\n    onEnter: PropTypes.func,\n    onEntered: PropTypes.func,\n    onEntering: PropTypes.func,\n    onExit: PropTypes.func,\n    onExited: PropTypes.func,\n    onExiting: PropTypes.func,\n  })]),\n  /** Docstring for the children prop */\n  children: PropTypes.node,\n  /** Docstring for the icon prop... Icon that will be shown in the alert */\n  icon: PropTypes.func,\n  /** Whether the alert is shown. */\n  show: PropTypes.bool,\n  /** Whether the alert is dismissible. Defaults to true. */\n  dismissible: PropTypes.bool,\n  /** Optional callback function for when the alert it dismissed. */\n  onClose: PropTypes.func,\n  /** Optional list of action elements. May include, at most, 2 actions, or 1 if dismissible is true. */\n  actions: PropTypes.arrayOf(PropTypes.element),\n  /** Position of the dismiss and call-to-action buttons. Defaults to ``false``. */\n  stacked: PropTypes.bool,\n  /** Sets the text for alert close button, defaults to 'Dismiss'. */\n  closeLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n};\n\nAlert.defaultProps = {\n  ...BaseAlert.defaultProps,\n  children: undefined,\n  icon: undefined,\n  actions: undefined,\n  dismissible: false,\n  onClose: () => {},\n  closeLabel: undefined,\n  show: true,\n  stacked: false,\n};\n\nAlert.Heading = AlertHeading;\nAlert.Link = AlertLink;\n\nexport default Alert;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useState","forwardRef","cloneElement","PropTypes","classNames","Alert","BaseAlert","divWithClassName","FormattedMessage","useMediaQuery","Icon","breakpoints","Button","ActionRow","ALERT_CLOSE_LABEL_TEXT","_ref","ref","children","icon","actions","dismissible","onClose","closeLabel","stacked","props","isStacked","setIsStacked","isExtraSmall","maxWidth","extraSmall","actionButtonSize","cloneActionElement","Action","addtlActionProps","size","key","createElement","className","src","length","Spacer","variant","onClick","id","defaultMessage","description","map","DivStyledAsH4","displayName","AlertHeading","Heading","AlertLink","Link","propTypes","as","elementType","bsPrefix","string","defaultProps","oneOf","transition","oneOfType","bool","shape","in","appear","node","onEnter","func","onEntered","onEntering","onExit","onExited","onExiting","show","arrayOf","element","undefined"],"sources":["../../src/Alert/index.tsx"],"sourcesContent":["/* eslint-disable react/require-default-props */\nimport React, {\n  useCallback,\n  useEffect,\n  useState,\n  ReactNode,\n  ElementType,\n  forwardRef,\n  FC,\n  ForwardRefExoticComponent,\n  RefAttributes,\n  cloneElement,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport {\n  Alert as BaseAlert,\n  AlertProps as BaseAlertProps,\n} from 'react-bootstrap';\nimport divWithClassName from 'react-bootstrap/divWithClassName';\nimport { FormattedMessage } from 'react-intl';\nimport { useMediaQuery } from 'react-responsive';\nimport Icon, { IconProps } from '../Icon';\nimport breakpoints from '../utils/breakpoints';\nimport Button from '../Button';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ActionRow from '../ActionRow';\n\nexport const ALERT_CLOSE_LABEL_TEXT = 'Dismiss';\n\nexport type AlertVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light';\n\nexport type BaseProps = Omit<BaseAlertProps, 'children' | 'variant' | 'closeLabel'>;\n\nexport interface AlertProps extends BaseProps {\n  className?: string;\n  bsPrefix?: string;\n  variant?: AlertVariant;\n  children?: ReactNode;\n  icon?: React.ComponentType<IconProps>;\n  show?: boolean;\n  dismissible?: boolean;\n  onClose?: () => void;\n  actions?: React.ReactElement[];\n  stacked?: boolean;\n  closeLabel?: string | ReactNode;\n}\n\nexport interface AlertHeadingProps {\n  as?: ElementType;\n  bsPrefix?: string;\n  children?: ReactNode;\n}\n\nexport interface AlertLinkProps {\n  as?: ElementType;\n  bsPrefix?: string;\n  children?: ReactNode;\n  href?: string;\n}\n\nexport interface AlertComponent extends ForwardRefExoticComponent<AlertProps & RefAttributes<HTMLDivElement>> {\n  Heading: FC<AlertHeadingProps>;\n  Link: FC<AlertLinkProps>;\n}\n\nconst Alert = forwardRef<HTMLDivElement, AlertProps>(({\n  children,\n  icon,\n  actions,\n  dismissible,\n  onClose,\n  closeLabel,\n  stacked,\n  ...props\n}, ref) => {\n  const [isStacked, setIsStacked] = useState(stacked);\n  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });\n  const actionButtonSize = 'sm';\n\n  useEffect(() => {\n    if (isExtraSmall) {\n      setIsStacked(true);\n    } else {\n      setIsStacked(stacked);\n    }\n  }, [isExtraSmall, stacked]);\n\n  const cloneActionElement = useCallback(\n    (Action: React.ReactElement) => {\n      const addtlActionProps = { size: actionButtonSize, key: Action.props.children };\n      return cloneElement(Action, addtlActionProps);\n    },\n    [],\n  );\n\n  return (\n    <BaseAlert\n      {...props}\n      className={classNames('alert-content', props.className)}\n      ref={ref}\n    >\n      {icon && <Icon src={icon} className=\"alert-icon\" />}\n      <div\n        className={classNames({\n          'pgn__alert-message-wrapper': !isStacked,\n          'pgn__alert-message-wrapper-stacked': isStacked,\n        })}\n      >\n        <div className=\"alert-message-content\">\n          {children}\n        </div>\n        {(dismissible || (actions && actions.length > 0)) && (\n          <ActionRow className=\"pgn__alert-actions\">\n            <ActionRow.Spacer />\n            {dismissible && (\n              <Button\n                size={actionButtonSize}\n                variant=\"tertiary\"\n                onClick={onClose}\n              >\n                {closeLabel || (\n                  <FormattedMessage\n                    id=\"pgn.Alert.closeLabel\"\n                    defaultMessage=\"Dismiss\"\n                    description=\"Label of a close button on Alert component\"\n                  />\n                )}\n              </Button>\n            )}\n            {actions && actions.map(cloneActionElement)}\n          </ActionRow>\n        )}\n      </div>\n    </BaseAlert>\n  );\n}) as AlertComponent;\n\n// This is needed to display a default prop for Alert.Heading element\n// Copied from react-bootstrap since BaseAlert.Heading component doesn't have defaultProps,\n// so there seems to be no other way of providing correct default prop for base element\nconst DivStyledAsH4 = divWithClassName('h4');\nDivStyledAsH4.displayName = 'DivStyledAsH4';\n\nfunction AlertHeading(props: AlertHeadingProps): JSX.Element {\n  return <BaseAlert.Heading {...props} />;\n}\n\nfunction AlertLink(props: AlertLinkProps): JSX.Element {\n  return <BaseAlert.Link {...props} />;\n}\n\nAlertLink.propTypes = {\n  /** Specifies the base element */\n  as: PropTypes.elementType as PropTypes.Validator<ElementType>,\n  /** Overrides underlying component base CSS class name */\n  bsPrefix: PropTypes.string,\n};\n\nAlertHeading.propTypes = {\n  /** Specifies the base element */\n  as: PropTypes.elementType as PropTypes.Validator<ElementType>,\n  /** Overrides underlying component base CSS class name */\n  bsPrefix: PropTypes.string,\n};\n\nAlertLink.defaultProps = {\n  as: 'a' as ElementType,\n  bsPrefix: 'alert-link',\n};\n\nAlertHeading.defaultProps = {\n  as: DivStyledAsH4,\n  bsPrefix: 'alert-heading',\n};\n\nAlert.propTypes = {\n  ...BaseAlert.propTypes,\n  /** Specifies class name to append to the base element */\n  className: PropTypes.string,\n  /** Overrides underlying component base CSS class name */\n  bsPrefix: PropTypes.string,\n  /** Specifies variant to use. */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'] as AlertVariant[]),\n  /**\n   * Animate the entering and exiting of the Alert. `true` will use the `<Fade>` transition,\n   * more detailed customization is also provided.\n   */\n  transition: PropTypes.oneOfType([\n    PropTypes.bool,\n    PropTypes.shape({\n      in: PropTypes.bool,\n      appear: PropTypes.bool,\n      children: PropTypes.node,\n      onEnter: PropTypes.func,\n      onEntered: PropTypes.func,\n      onEntering: PropTypes.func,\n      onExit: PropTypes.func,\n      onExited: PropTypes.func,\n      onExiting: PropTypes.func,\n    }),\n  ]) as PropTypes.Validator<BaseAlertProps['transition']>,\n  /** Docstring for the children prop */\n  children: PropTypes.node as PropTypes.Validator<ReactNode>,\n  /** Docstring for the icon prop... Icon that will be shown in the alert */\n  icon: PropTypes.func,\n  /** Whether the alert is shown. */\n  show: PropTypes.bool,\n  /** Whether the alert is dismissible. Defaults to true. */\n  dismissible: PropTypes.bool,\n  /** Optional callback function for when the alert it dismissed. */\n  onClose: PropTypes.func,\n  /** Optional list of action elements. May include, at most, 2 actions, or 1 if dismissible is true. */\n  actions: PropTypes.arrayOf(PropTypes.element) as PropTypes.Validator<React.ReactElement[]>,\n  /** Position of the dismiss and call-to-action buttons. Defaults to ``false``. */\n  stacked: PropTypes.bool,\n  /** Sets the text for alert close button, defaults to 'Dismiss'. */\n  closeLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n};\n\nAlert.defaultProps = {\n  ...BaseAlert.defaultProps,\n  children: undefined,\n  icon: undefined,\n  actions: undefined,\n  dismissible: false,\n  onClose: () => {},\n  closeLabel: undefined,\n  show: true,\n  stacked: false,\n  className: undefined,\n  bsPrefix: undefined,\n  variant: undefined,\n};\n\nAlert.Heading = AlertHeading;\nAlert.Link = AlertLink;\n\nexport default Alert;\n"],"mappings":"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","ignoreList":[]}

package/dist/Modal/ModalDialog.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-export declare const MODAL_DIALOG_CLOSE_LABEL = "Close";
 interface Props {
     /** Specifies the content of the dialog */
     children: React.ReactNode;

package/dist/Modal/ModalDialog.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useMediaQuery } from 'react-responsive';
+import { useIntl } from 'react-intl';
 import ModalLayer from './ModalLayer';
 // @ts-ignore for now - this needs to be converted to TypeScript
 import ModalCloseButton from './ModalCloseButton';
@@ -17,7 +18,7 @@ import ModalDialogHero from './ModalDialogHero';
 import Icon from '../Icon';
 import IconButton from '../IconButton';
 import { Close } from '../../icons';
-export const MODAL_DIALOG_CLOSE_LABEL = 'Close';
+import messages from './messages';
 function ModalDialog(_ref) {
   let {
     children,
@@ -27,7 +28,7 @@ function ModalDialog(_ref) {
     size = 'md',
     variant = 'default',
     hasCloseButton = true,
-    closeLabel = MODAL_DIALOG_CLOSE_LABEL,
+    closeLabel,
     isFullscreenScroll = false,
     className,
     isFullscreenOnMobile = false,
@@ -35,6 +36,8 @@ function ModalDialog(_ref) {
     zIndex,
     isOverflowVisible
   } = _ref;
+  const intl = useIntl();
+  const closeButtonText = closeLabel || intl.formatMessage(messages.closeButtonText);
   const isMobile = useMediaQuery({
     query: '(max-width: 767.98px)'
   });
@@ -60,7 +63,7 @@ function ModalDialog(_ref) {
     iconAs: Icon,
     invertColors: variant === 'dark',
     src: Close,
-    alt: closeLabel
+    alt: closeButtonText
   })), children));
 }
 ModalDialog.propTypes = {

package/dist/Modal/ModalDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalDialog.js","names":["React","PropTypes","classNames","useMediaQuery","ModalLayer","ModalCloseButton","ModalDialogHeader","ModalDialogTitle","ModalDialogFooter","ModalDialogBody","ModalDialogHero","Icon","IconButton","Close","MODAL_DIALOG_CLOSE_LABEL","ModalDialog","_ref","children","title","isOpen","onClose","size","variant","hasCloseButton","closeLabel","isFullscreenScroll","className","isFullscreenOnMobile","isBlocking","zIndex","isOverflowVisible","isMobile","query","showFullScreen","createElement","role","as","iconAs","invertColors","src","alt","propTypes","node","isRequired","string","func","bool","oneOf","number","Header","Title","Footer","CloseButton","Body","Hero"],"sources":["../../src/Modal/ModalDialog.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useMediaQuery } from 'react-responsive';\nimport ModalLayer from './ModalLayer';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalCloseButton from './ModalCloseButton';\nimport ModalDialogHeader from './ModalDialogHeader';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalDialogTitle from './ModalDialogTitle';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalDialogFooter from './ModalDialogFooter';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalDialogBody from './ModalDialogBody';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalDialogHero from './ModalDialogHero';\n\nimport Icon from '../Icon';\nimport IconButton from '../IconButton';\nimport { Close } from '../../icons';\n\nexport const MODAL_DIALOG_CLOSE_LABEL = 'Close';\n\ninterface Props {\n  /** Specifies the content of the dialog */\n  children: React.ReactNode;\n  /** The aria-label of the dialog */\n  title: string;\n  /** A callback to close the modal dialog, e.g. when Escape is pressed */\n  onClose: () => void;\n  /** Is the modal dialog open or closed? */\n  isOpen?: boolean;\n  /** The close 'x' icon button in the top right of the dialog box */\n  hasCloseButton?: boolean;\n  /** Size determines the maximum width of the dialog box */\n  size?: 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';\n  /** The visual style of the dialog box */\n  variant?: 'default' | 'warning' | 'danger' | 'success' | 'dark';\n  /** The label supplied to the close icon button if one is rendered */\n  closeLabel?: string;\n  /** Specifies class name to append to the base element */\n  className?: string;\n  /**\n   * Determines where a scrollbar should appear if a modal is too large for the\n   * viewport. When false, the ``ModalDialog``. Body receives a scrollbar, when true\n   * the browser window itself receives the scrollbar.\n   */\n  isFullscreenScroll?: boolean;\n  /** To show full screen view on mobile screens */\n  isFullscreenOnMobile?: boolean;\n  /** Prevent clicking on the backdrop or pressing Esc to close the modal */\n  isBlocking?: boolean;\n  /** Specifies the z-index of the modal */\n  zIndex?: number;\n  /** Specifies whether overflow is visible in the modal */\n  isOverflowVisible: boolean;\n}\n\nfunction ModalDialog({\n  children,\n  title,\n  isOpen = false,\n  onClose,\n  size = 'md',\n  variant = 'default',\n  hasCloseButton = true,\n  closeLabel = MODAL_DIALOG_CLOSE_LABEL,\n  isFullscreenScroll = false,\n  className,\n  isFullscreenOnMobile = false,\n  isBlocking = false,\n  zIndex,\n  isOverflowVisible,\n}: Props) {\n  const isMobile = useMediaQuery({ query: '(max-width: 767.98px)' });\n  const showFullScreen = (isFullscreenOnMobile && isMobile);\n  return (\n    <ModalLayer isOpen={isOpen} onClose={onClose} isBlocking={isBlocking} zIndex={zIndex}>\n      <div\n        role=\"dialog\"\n        aria-label={title}\n        className={classNames(\n          'pgn__modal',\n          {\n            [`pgn__modal-${showFullScreen ? 'fullscreen' : size}`]: size,\n            [`pgn__modal-${variant}`]: variant,\n            'pgn__modal-scroll-fullscreen': isFullscreenScroll,\n            'pgn__modal-visible-overflow': isOverflowVisible,\n          },\n          className,\n        )}\n      >\n        {hasCloseButton && (\n          <div className=\"pgn__modal-close-container\">\n            <ModalCloseButton\n              as={IconButton}\n              iconAs={Icon}\n              invertColors={variant === 'dark'}\n              src={Close}\n              alt={closeLabel}\n            />\n          </div>\n        )}\n        {children}\n      </div>\n    </ModalLayer>\n  );\n}\n\nModalDialog.propTypes = {\n  /**\n   *  Specifies the content of the dialog\n   */\n  children: PropTypes.node.isRequired,\n  /**\n   * The aria-label of the dialog\n   */\n  title: PropTypes.string.isRequired,\n  /**\n   * A callback to close the modal dialog\n   */\n  onClose: PropTypes.func.isRequired,\n  /**\n   * Is the modal dialog open or closed\n   */\n  isOpen: PropTypes.bool,\n  /**\n   * The close 'x' icon button in the top right of the dialog box\n   */\n  hasCloseButton: PropTypes.bool,\n  /**\n   * Sizes determine the maximum width of the dialog box\n   */\n  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'fullscreen']),\n  /**\n   * The visual style of the dialog box\n   */\n  variant: PropTypes.oneOf(['default', 'warning', 'danger', 'success', 'dark']),\n  /**\n   * The label supplied to the close icon button if one is rendered\n   */\n  closeLabel: PropTypes.string,\n  /**\n   *  Specifies class name to append to the base element\n   */\n  className: PropTypes.string,\n  /**\n   * Determines where a scrollbar should appear if a modal is too large for the\n   * viewport. When false, the ``ModalDialog``. Body receives a scrollbar, when true\n   * the browser window itself receives the scrollbar.\n   */\n  isFullscreenScroll: PropTypes.bool,\n  /**\n   * To show full screen view on mobile screens\n   */\n  isFullscreenOnMobile: PropTypes.bool,\n  /**\n   * Prevent clicking on the backdrop or pressing Esc to close the modal\n   */\n  isBlocking: PropTypes.bool,\n  /**\n   * Specifies the z-index of the modal\n   */\n  zIndex: PropTypes.number,\n  /** Specifies whether overflow is visible in the modal */\n  isOverflowVisible: PropTypes.bool.isRequired,\n};\n\nModalDialog.Header = ModalDialogHeader;\nModalDialog.Title = ModalDialogTitle;\nModalDialog.Footer = ModalDialogFooter;\nModalDialog.CloseButton = ModalCloseButton;\nModalDialog.Body = ModalDialogBody;\nModalDialog.Hero = ModalDialogHero;\n\nexport default ModalDialog;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ModalDialog.js","names":["React","PropTypes","classNames","useMediaQuery","useIntl","ModalLayer","ModalCloseButton","ModalDialogHeader","ModalDialogTitle","ModalDialogFooter","ModalDialogBody","ModalDialogHero","Icon","IconButton","Close","messages","ModalDialog","_ref","children","title","isOpen","onClose","size","variant","hasCloseButton","closeLabel","isFullscreenScroll","className","isFullscreenOnMobile","isBlocking","zIndex","isOverflowVisible","intl","closeButtonText","formatMessage","isMobile","query","showFullScreen","createElement","role","as","iconAs","invertColors","src","alt","propTypes","node","isRequired","string","func","bool","oneOf","number","Header","Title","Footer","CloseButton","Body","Hero"],"sources":["../../src/Modal/ModalDialog.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useMediaQuery } from 'react-responsive';\nimport { useIntl } from 'react-intl';\nimport ModalLayer from './ModalLayer';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalCloseButton from './ModalCloseButton';\nimport ModalDialogHeader from './ModalDialogHeader';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalDialogTitle from './ModalDialogTitle';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalDialogFooter from './ModalDialogFooter';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalDialogBody from './ModalDialogBody';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalDialogHero from './ModalDialogHero';\n\nimport Icon from '../Icon';\nimport IconButton from '../IconButton';\nimport { Close } from '../../icons';\nimport messages from './messages';\n\ninterface Props {\n  /** Specifies the content of the dialog */\n  children: React.ReactNode;\n  /** The aria-label of the dialog */\n  title: string;\n  /** A callback to close the modal dialog, e.g. when Escape is pressed */\n  onClose: () => void;\n  /** Is the modal dialog open or closed? */\n  isOpen?: boolean;\n  /** The close 'x' icon button in the top right of the dialog box */\n  hasCloseButton?: boolean;\n  /** Size determines the maximum width of the dialog box */\n  size?: 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';\n  /** The visual style of the dialog box */\n  variant?: 'default' | 'warning' | 'danger' | 'success' | 'dark';\n  /** The label supplied to the close icon button if one is rendered */\n  closeLabel?: string;\n  /** Specifies class name to append to the base element */\n  className?: string;\n  /**\n   * Determines where a scrollbar should appear if a modal is too large for the\n   * viewport. When false, the ``ModalDialog``. Body receives a scrollbar, when true\n   * the browser window itself receives the scrollbar.\n   */\n  isFullscreenScroll?: boolean;\n  /** To show full screen view on mobile screens */\n  isFullscreenOnMobile?: boolean;\n  /** Prevent clicking on the backdrop or pressing Esc to close the modal */\n  isBlocking?: boolean;\n  /** Specifies the z-index of the modal */\n  zIndex?: number;\n  /** Specifies whether overflow is visible in the modal */\n  isOverflowVisible: boolean;\n}\n\nfunction ModalDialog({\n  children,\n  title,\n  isOpen = false,\n  onClose,\n  size = 'md',\n  variant = 'default',\n  hasCloseButton = true,\n  closeLabel,\n  isFullscreenScroll = false,\n  className,\n  isFullscreenOnMobile = false,\n  isBlocking = false,\n  zIndex,\n  isOverflowVisible,\n}: Props) {\n  const intl = useIntl();\n  const closeButtonText = closeLabel || intl.formatMessage(messages.closeButtonText);\n  const isMobile = useMediaQuery({ query: '(max-width: 767.98px)' });\n  const showFullScreen = (isFullscreenOnMobile && isMobile);\n  return (\n    <ModalLayer isOpen={isOpen} onClose={onClose} isBlocking={isBlocking} zIndex={zIndex}>\n      <div\n        role=\"dialog\"\n        aria-label={title}\n        className={classNames(\n          'pgn__modal',\n          {\n            [`pgn__modal-${showFullScreen ? 'fullscreen' : size}`]: size,\n            [`pgn__modal-${variant}`]: variant,\n            'pgn__modal-scroll-fullscreen': isFullscreenScroll,\n            'pgn__modal-visible-overflow': isOverflowVisible,\n          },\n          className,\n        )}\n      >\n        {hasCloseButton && (\n          <div className=\"pgn__modal-close-container\">\n            <ModalCloseButton\n              as={IconButton}\n              iconAs={Icon}\n              invertColors={variant === 'dark'}\n              src={Close}\n              alt={closeButtonText}\n            />\n          </div>\n        )}\n        {children}\n      </div>\n    </ModalLayer>\n  );\n}\n\nModalDialog.propTypes = {\n  /**\n   *  Specifies the content of the dialog\n   */\n  children: PropTypes.node.isRequired,\n  /**\n   * The aria-label of the dialog\n   */\n  title: PropTypes.string.isRequired,\n  /**\n   * A callback to close the modal dialog\n   */\n  onClose: PropTypes.func.isRequired,\n  /**\n   * Is the modal dialog open or closed\n   */\n  isOpen: PropTypes.bool,\n  /**\n   * The close 'x' icon button in the top right of the dialog box\n   */\n  hasCloseButton: PropTypes.bool,\n  /**\n   * Sizes determine the maximum width of the dialog box\n   */\n  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'fullscreen']),\n  /**\n   * The visual style of the dialog box\n   */\n  variant: PropTypes.oneOf(['default', 'warning', 'danger', 'success', 'dark']),\n  /**\n   * The label supplied to the close icon button if one is rendered\n   */\n  closeLabel: PropTypes.string,\n  /**\n   *  Specifies class name to append to the base element\n   */\n  className: PropTypes.string,\n  /**\n   * Determines where a scrollbar should appear if a modal is too large for the\n   * viewport. When false, the ``ModalDialog``. Body receives a scrollbar, when true\n   * the browser window itself receives the scrollbar.\n   */\n  isFullscreenScroll: PropTypes.bool,\n  /**\n   * To show full screen view on mobile screens\n   */\n  isFullscreenOnMobile: PropTypes.bool,\n  /**\n   * Prevent clicking on the backdrop or pressing Esc to close the modal\n   */\n  isBlocking: PropTypes.bool,\n  /**\n   * Specifies the z-index of the modal\n   */\n  zIndex: PropTypes.number,\n  /** Specifies whether overflow is visible in the modal */\n  isOverflowVisible: PropTypes.bool.isRequired,\n};\n\nModalDialog.Header = ModalDialogHeader;\nModalDialog.Title = ModalDialogTitle;\nModalDialog.Footer = ModalDialogFooter;\nModalDialog.CloseButton = ModalCloseButton;\nModalDialog.Body = ModalDialogBody;\nModalDialog.Hero = ModalDialogHero;\n\nexport default ModalDialog;\n"],"mappings":"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","ignoreList":[]}

package/dist/Modal/messages.d.ts

@@ -0,0 +1,8 @@
+declare const messages: {
+    closeButtonText: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default messages;

package/dist/Modal/messages.js

@@ -0,0 +1,10 @@
+import { defineMessages } from 'react-intl';
+const messages = defineMessages({
+  closeButtonText: {
+    id: 'pgn.Modal.closeButon',
+    defaultMessage: 'Close',
+    description: 'Accessible name for the close button in the modal dialog'
+  }
+});
+export default messages;
+//# sourceMappingURL=messages.js.map

package/dist/Modal/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","names":["defineMessages","messages","closeButtonText","id","defaultMessage","description"],"sources":["../../src/Modal/messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nconst messages = defineMessages({\n  closeButtonText: {\n    id: 'pgn.Modal.closeButon',\n    defaultMessage: 'Close',\n    description: 'Accessible name for the close button in the modal dialog',\n  },\n});\n\nexport default messages;\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ,YAAY;AAE3C,MAAMC,QAAQ,GAAGD,cAAc,CAAC;EAC9BE,eAAe,EAAE;IACfC,EAAE,EAAE,sBAAsB;IAC1BC,cAAc,EAAE,OAAO;IACvBC,WAAW,EAAE;EACf;AACF,CAAC,CAAC;AAEF,eAAeJ,QAAQ","ignoreList":[]}

package/dist/index.d.ts

@@ -35,7 +35,7 @@ export { default as Hyperlink } from './Hyperlink';
 export { default as Icon } from './Icon';
 export { default as IconButton, IconButtonWithTooltip } from './IconButton';
 export { default as ModalContext } from './Modal/ModalContext';
-export { default as ModalDialog, MODAL_DIALOG_CLOSE_LABEL } from './Modal/ModalDialog';
+export { default as ModalDialog } from './Modal/ModalDialog';
 export { default as ModalLayer } from './Modal/ModalLayer';
 export { default as Overlay, OverlayTrigger } from './Overlay';
 export { default as Portal } from './Modal/Portal';
@@ -46,13 +46,14 @@ export { default as useToggle, type Toggler, type ToggleHandlers } from './hooks
 export { default as useArrowKeyNavigation, type ArrowKeyNavProps } from './hooks/useArrowKeyNavigationHook';
 export { default as useIndexOfLastVisibleChild } from './hooks/useIndexOfLastVisibleChildHook';
 export { default as useIsVisible } from './hooks/useIsVisibleHook';
+export { default as Alert, ALERT_CLOSE_LABEL_TEXT } from './Alert';
+export { default as breakpoints } from './utils/breakpoints';
 
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 // Things that don't have types
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 export const asInput: any; // from './asInput';
 export const ActionRow: any; // from './ActionRow';
-export const Alert: any, ALERT_CLOSE_LABEL_TEXT: string; // from './Alert';
 export const Annotation: any; // from './Annotation';
 export const Avatar: any; // from './Avatar';
 export const AvatarButton: any; // from './AvatarButton';
@@ -190,7 +191,6 @@ export const Stack: any; // from './Stack';
 export const ToggleButton: any, ToggleButtonGroup: any; // from './ToggleButton';
 export const Sticky: any; // from './Sticky';
 export const SelectableBox: any; // from './SelectableBox';
-export const breakpoints: any; // from './utils/breakpoints';
 export const Variant: any; // from './utils/constants';
 export const
   OverflowScrollContext: any,

package/dist/index.js

@@ -35,7 +35,7 @@ export { default as Hyperlink } from './Hyperlink';
 export { default as Icon } from './Icon';
 export { default as IconButton, IconButtonWithTooltip } from './IconButton';
 export { default as ModalContext } from './Modal/ModalContext';
-export { default as ModalDialog, MODAL_DIALOG_CLOSE_LABEL } from './Modal/ModalDialog';
+export { default as ModalDialog } from './Modal/ModalDialog';
 export { default as ModalLayer } from './Modal/ModalLayer';
 export { default as Overlay, OverlayTrigger } from './Overlay';
 export { default as Portal } from './Modal/Portal';
@@ -46,13 +46,14 @@ export { default as useToggle } from './hooks/useToggleHook';
 export { default as useArrowKeyNavigation } from './hooks/useArrowKeyNavigationHook';
 export { default as useIndexOfLastVisibleChild } from './hooks/useIndexOfLastVisibleChildHook';
 export { default as useIsVisible } from './hooks/useIsVisibleHook';
+export { default as Alert, ALERT_CLOSE_LABEL_TEXT } from './Alert';
+export { default as breakpoints } from './utils/breakpoints';
 
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 // Things that don't have types
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 export { default as asInput } from './asInput';
 export { default as ActionRow } from './ActionRow';
-export { default as Alert, ALERT_CLOSE_LABEL_TEXT } from './Alert';
 export { default as Annotation } from './Annotation';
 export { default as Avatar } from './Avatar';
 export { default as AvatarButton } from './AvatarButton';
@@ -190,7 +191,6 @@ export { default as Stack } from './Stack';
 export { default as ToggleButton, ToggleButtonGroup } from './ToggleButton';
 export { default as Sticky } from './Sticky';
 export { default as SelectableBox } from './SelectableBox';
-export { default as breakpoints } from './utils/breakpoints';
 export { default as Variant } from './utils/constants';
 export {
   OverflowScrollContext,

package/dist/utils/breakpoints.d.ts

@@ -0,0 +1,26 @@
+interface BreakpointRange {
+  minWidth?: number;
+  maxWidth?: number;
+}
+
+interface Breakpoints {
+  extraSmall: BreakpointRange;
+  small: BreakpointRange;
+  medium: BreakpointRange;
+  large: BreakpointRange;
+  extraLarge: BreakpointRange;
+  extraExtraLarge: BreakpointRange;
+}
+
+export const Size: {
+  readonly xs: 'extraSmall';
+  readonly sm: 'small';
+  readonly md: 'medium';
+  readonly lg: 'large';
+  readonly xl: 'extraLarge';
+  readonly xxl: 'extraExtraLarge';
+};
+
+declare const breakpoints: Breakpoints;
+
+export default breakpoints;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "22.18.2",
+  "version": "22.20.0",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/Alert/{Alert.test.jsx → Alert.test.tsx}

@@ -7,10 +7,13 @@ import { Context as ResponsiveContext } from 'react-responsive';
 import { Info } from '../../icons';
 import breakpoints from '../utils/breakpoints';
 import Button from '../Button';
-import Alert from '.';
+import Alert, { AlertProps } from '.';
 
-// eslint-disable-next-line react/prop-types
-function AlertWrapper({ children, ...props }) {
+/** A compile time check. Whatever React elements this wraps won't run at runtime. */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function CompileCheck(_props: { children: React.ReactNode }) { return null; }
+
+function AlertWrapper({ children, ...props }: AlertProps & { children: React.ReactNode }) {
   return (
     <IntlProvider locale="en" messages={{}}>
       <Alert {...props}>
@@ -20,6 +23,33 @@ function AlertWrapper({ children, ...props }) {
   );
 }
 
+describe('Alert component type checking', () => {
+  it('has correct typing', () => {
+    <CompileCheck>
+      <Alert>Basic alert</Alert>
+      <Alert variant="primary">Primary alert</Alert>
+      <Alert icon={Info}>Alert with icon</Alert>
+      <Alert dismissible onClose={() => {}}>Dismissible alert</Alert>
+      <Alert actions={[<Button key="action">Action</Button>]}>Alert with action</Alert>
+      <Alert stacked>Stacked alert</Alert>
+      <Alert closeLabel="Close">Custom close label</Alert>
+      <Alert.Heading>Alert heading</Alert.Heading>
+      <Alert.Link href="#">Alert link</Alert.Link>
+
+      {/* @ts-expect-error Invalid variant */}
+      <Alert variant="invalid" />
+      {/* @ts-expect-error Invalid icon type */}
+      <Alert icon="string" />
+      {/* @ts-expect-error Invalid closeLabel type */}
+      <Alert closeLabel={{}} />
+      {/* @ts-expect-error Invalid Heading props */}
+      <Alert.Heading href="#" />
+      {/* @ts-expect-error Invalid Link props */}
+      <Alert.Link variant="primary" />
+    </CompileCheck>;
+  });
+});
+
 describe('<Alert />', () => {
   it('renders without any props', () => {
     const tree = renderer.create((

package/src/Alert/{index.jsx → index.tsx}

@@ -1,18 +1,70 @@
-import React, { useCallback, useEffect, useState } from 'react';
+/* eslint-disable react/require-default-props */
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+  ReactNode,
+  ElementType,
+  forwardRef,
+  FC,
+  ForwardRefExoticComponent,
+  RefAttributes,
+  cloneElement,
+} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import BaseAlert from 'react-bootstrap/Alert';
+import {
+  Alert as BaseAlert,
+  AlertProps as BaseAlertProps,
+} from 'react-bootstrap';
 import divWithClassName from 'react-bootstrap/divWithClassName';
 import { FormattedMessage } from 'react-intl';
 import { useMediaQuery } from 'react-responsive';
-import Icon from '../Icon';
+import Icon, { IconProps } from '../Icon';
 import breakpoints from '../utils/breakpoints';
 import Button from '../Button';
+// @ts-ignore for now - this needs to be converted to TypeScript
 import ActionRow from '../ActionRow';
 
 export const ALERT_CLOSE_LABEL_TEXT = 'Dismiss';
 
-const Alert = React.forwardRef(({
+export type AlertVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light';
+
+export type BaseProps = Omit<BaseAlertProps, 'children' | 'variant' | 'closeLabel'>;
+
+export interface AlertProps extends BaseProps {
+  className?: string;
+  bsPrefix?: string;
+  variant?: AlertVariant;
+  children?: ReactNode;
+  icon?: React.ComponentType<IconProps>;
+  show?: boolean;
+  dismissible?: boolean;
+  onClose?: () => void;
+  actions?: React.ReactElement[];
+  stacked?: boolean;
+  closeLabel?: string | ReactNode;
+}
+
+export interface AlertHeadingProps {
+  as?: ElementType;
+  bsPrefix?: string;
+  children?: ReactNode;
+}
+
+export interface AlertLinkProps {
+  as?: ElementType;
+  bsPrefix?: string;
+  children?: ReactNode;
+  href?: string;
+}
+
+export interface AlertComponent extends ForwardRefExoticComponent<AlertProps & RefAttributes<HTMLDivElement>> {
+  Heading: FC<AlertHeadingProps>;
+  Link: FC<AlertLinkProps>;
+}
+
+const Alert = forwardRef<HTMLDivElement, AlertProps>(({
   children,
   icon,
   actions,
@@ -35,9 +87,9 @@ const Alert = React.forwardRef(({
   }, [isExtraSmall, stacked]);
 
   const cloneActionElement = useCallback(
-    (Action) => {
+    (Action: React.ReactElement) => {
       const addtlActionProps = { size: actionButtonSize, key: Action.props.children };
-      return React.cloneElement(Action, addtlActionProps);
+      return cloneElement(Action, addtlActionProps);
     },
     [],
   );
@@ -58,7 +110,7 @@ const Alert = React.forwardRef(({
         <div className="alert-message-content">
           {children}
         </div>
-        {(dismissible || actions?.length > 0) && (
+        {(dismissible || (actions && actions.length > 0)) && (
           <ActionRow className="pgn__alert-actions">
             <ActionRow.Spacer />
             {dismissible && (
@@ -82,7 +134,7 @@ const Alert = React.forwardRef(({
       </div>
     </BaseAlert>
   );
-});
+}) as AlertComponent;
 
 // This is needed to display a default prop for Alert.Heading element
 // Copied from react-bootstrap since BaseAlert.Heading component doesn't have defaultProps,
@@ -90,25 +142,30 @@ const Alert = React.forwardRef(({
 const DivStyledAsH4 = divWithClassName('h4');
 DivStyledAsH4.displayName = 'DivStyledAsH4';
 
-function AlertHeading(props) {
+function AlertHeading(props: AlertHeadingProps): JSX.Element {
   return <BaseAlert.Heading {...props} />;
 }
-function AlertLink(props) {
+
+function AlertLink(props: AlertLinkProps): JSX.Element {
   return <BaseAlert.Link {...props} />;
 }
 
-const commonPropTypes = {
+AlertLink.propTypes = {
   /** Specifies the base element */
-  as: PropTypes.elementType,
+  as: PropTypes.elementType as PropTypes.Validator<ElementType>,
   /** Overrides underlying component base CSS class name */
   bsPrefix: PropTypes.string,
 };
 
-AlertLink.propTypes = commonPropTypes;
-AlertHeading.propTypes = commonPropTypes;
+AlertHeading.propTypes = {
+  /** Specifies the base element */
+  as: PropTypes.elementType as PropTypes.Validator<ElementType>,
+  /** Overrides underlying component base CSS class name */
+  bsPrefix: PropTypes.string,
+};
 
 AlertLink.defaultProps = {
-  as: 'a',
+  as: 'a' as ElementType,
   bsPrefix: 'alert-link',
 };
 
@@ -124,24 +181,27 @@ Alert.propTypes = {
   /** Overrides underlying component base CSS class name */
   bsPrefix: PropTypes.string,
   /** Specifies variant to use. */
-  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light']),
+  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'] as AlertVariant[]),
   /**
    * Animate the entering and exiting of the Alert. `true` will use the `<Fade>` transition,
    * more detailed customization is also provided.
    */
-  transition: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
-    in: PropTypes.bool,
-    appear: PropTypes.bool,
-    children: PropTypes.node,
-    onEnter: PropTypes.func,
-    onEntered: PropTypes.func,
-    onEntering: PropTypes.func,
-    onExit: PropTypes.func,
-    onExited: PropTypes.func,
-    onExiting: PropTypes.func,
-  })]),
+  transition: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.shape({
+      in: PropTypes.bool,
+      appear: PropTypes.bool,
+      children: PropTypes.node,
+      onEnter: PropTypes.func,
+      onEntered: PropTypes.func,
+      onEntering: PropTypes.func,
+      onExit: PropTypes.func,
+      onExited: PropTypes.func,
+      onExiting: PropTypes.func,
+    }),
+  ]) as PropTypes.Validator<BaseAlertProps['transition']>,
   /** Docstring for the children prop */
-  children: PropTypes.node,
+  children: PropTypes.node as PropTypes.Validator<ReactNode>,
   /** Docstring for the icon prop... Icon that will be shown in the alert */
   icon: PropTypes.func,
   /** Whether the alert is shown. */
@@ -151,7 +211,7 @@ Alert.propTypes = {
   /** Optional callback function for when the alert it dismissed. */
   onClose: PropTypes.func,
   /** Optional list of action elements. May include, at most, 2 actions, or 1 if dismissible is true. */
-  actions: PropTypes.arrayOf(PropTypes.element),
+  actions: PropTypes.arrayOf(PropTypes.element) as PropTypes.Validator<React.ReactElement[]>,
   /** Position of the dismiss and call-to-action buttons. Defaults to ``false``. */
   stacked: PropTypes.bool,
   /** Sets the text for alert close button, defaults to 'Dismiss'. */
@@ -168,6 +228,9 @@ Alert.defaultProps = {
   closeLabel: undefined,
   show: true,
   stacked: false,
+  className: undefined,
+  bsPrefix: undefined,
+  variant: undefined,
 };
 
 Alert.Heading = AlertHeading;

package/src/Modal/ModalDialog.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useMediaQuery } from 'react-responsive';
+import { useIntl } from 'react-intl';
 import ModalLayer from './ModalLayer';
 // @ts-ignore for now - this needs to be converted to TypeScript
 import ModalCloseButton from './ModalCloseButton';
@@ -18,8 +19,7 @@ import ModalDialogHero from './ModalDialogHero';
 import Icon from '../Icon';
 import IconButton from '../IconButton';
 import { Close } from '../../icons';
-
-export const MODAL_DIALOG_CLOSE_LABEL = 'Close';
+import messages from './messages';
 
 interface Props {
   /** Specifies the content of the dialog */
@@ -64,7 +64,7 @@ function ModalDialog({
   size = 'md',
   variant = 'default',
   hasCloseButton = true,
-  closeLabel = MODAL_DIALOG_CLOSE_LABEL,
+  closeLabel,
   isFullscreenScroll = false,
   className,
   isFullscreenOnMobile = false,
@@ -72,6 +72,8 @@ function ModalDialog({
   zIndex,
   isOverflowVisible,
 }: Props) {
+  const intl = useIntl();
+  const closeButtonText = closeLabel || intl.formatMessage(messages.closeButtonText);
   const isMobile = useMediaQuery({ query: '(max-width: 767.98px)' });
   const showFullScreen = (isFullscreenOnMobile && isMobile);
   return (
@@ -97,7 +99,7 @@ function ModalDialog({
               iconAs={Icon}
               invertColors={variant === 'dark'}
               src={Close}
-              alt={closeLabel}
+              alt={closeButtonText}
             />
           </div>
         )}

package/src/Modal/messages.ts

@@ -0,0 +1,11 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  closeButtonText: {
+    id: 'pgn.Modal.closeButon',
+    defaultMessage: 'Close',
+    description: 'Accessible name for the close button in the modal dialog',
+  },
+});
+
+export default messages;

package/src/Modal/tests/AlertModal.test.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 
+import { IntlProvider } from 'react-intl';
 import AlertModal from '../AlertModal';
 import { Info } from '../../../icons';
 
@@ -37,15 +38,17 @@ describe('<AlertModal />', () => {
 
   it('renders the body when isOpen', () => {
     render(
-      <AlertModal
-        title="some title"
-        isOpen={isOpen}
-        onClose={closeFn}
-        footerNode={<p>footer</p>}
-        isOverflowVisible={false}
-      >
-        <Body />
-      </AlertModal>,
+      <IntlProvider locale="en" messages={{}}>
+        <AlertModal
+          title="some title"
+          isOpen={isOpen}
+          onClose={closeFn}
+          footerNode={<p>footer</p>}
+          isOverflowVisible={false}
+        >
+          <Body />
+        </AlertModal>
+      </IntlProvider>,
     );
 
     const body = screen.getByText('The body of alert.');
@@ -55,16 +58,18 @@ describe('<AlertModal />', () => {
   describe('with variant prop', () => {
     it('renders warning variant', () => {
       render(
-        <AlertModal
-          title="warning"
-          isOpen={isOpen}
-          onClose={closeFn}
-          icon={Info}
-          footerNode={<p>footer</p>}
-          isOverflowVisible={false}
-        >
-          <Body />
-        </AlertModal>,
+        <IntlProvider locale="en" messages={{}}>
+          <AlertModal
+            title="warning"
+            isOpen={isOpen}
+            onClose={closeFn}
+            icon={Info}
+            footerNode={<p>footer</p>}
+            isOverflowVisible={false}
+          >
+            <Body />
+          </AlertModal>
+        </IntlProvider>,
       );
 
       const modalTitle = screen.getByTestId('title-icon');
@@ -73,16 +78,18 @@ describe('<AlertModal />', () => {
 
     it('renders success variant', () => {
       render(
-        <AlertModal
-          title="success"
-          isOpen={isOpen}
-          onClose={closeFn}
-          icon={Info}
-          footerNode={<p>footer</p>}
-          isOverflowVisible={false}
-        >
-          <Body />
-        </AlertModal>,
+        <IntlProvider locale="en" messages={{}}>
+          <AlertModal
+            title="success"
+            isOpen={isOpen}
+            onClose={closeFn}
+            icon={Info}
+            footerNode={<p>footer</p>}
+            isOverflowVisible={false}
+          >
+            <Body />
+          </AlertModal>
+        </IntlProvider>,
       );
 
       const modalTitle = screen.getByTestId('title-icon');
@@ -91,16 +98,18 @@ describe('<AlertModal />', () => {
 
     it('renders danger variant', () => {
       render(
-        <AlertModal
-          title="danger"
-          isOpen={isOpen}
-          onClose={closeFn}
-          icon={Info}
-          footerNode={<p>footer</p>}
-          isOverflowVisible={false}
-        >
-          <Body />
-        </AlertModal>,
+        <IntlProvider locale="en" messages={{}}>
+          <AlertModal
+            title="danger"
+            isOpen={isOpen}
+            onClose={closeFn}
+            icon={Info}
+            footerNode={<p>footer</p>}
+            isOverflowVisible={false}
+          >
+            <Body />
+          </AlertModal>
+        </IntlProvider>,
       );
 
       const modalTitle = screen.getByTestId('title-icon');

package/src/Modal/tests/ModalDialog.test.tsx

@@ -1,33 +1,36 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 
+import { IntlProvider } from 'react-intl';
 import ModalDialog from '../ModalDialog';
 
 describe('ModalDialog', () => {
   it('renders a dialog with aria-label and content', () => {
     const onClose = jest.fn();
     render(
-      <ModalDialog
-        title="My dialog"
-        isOpen
-        onClose={onClose}
-        size="md"
-        variant="default"
-        hasCloseButton
-        isOverflowVisible={false}
-      >
-        <ModalDialog.Header>
-          <ModalDialog.Title>The title</ModalDialog.Title>
-        </ModalDialog.Header>
+      <IntlProvider locale="en" messages={{}}>
+        <ModalDialog
+          title="My dialog"
+          isOpen
+          onClose={onClose}
+          size="md"
+          variant="default"
+          hasCloseButton
+          isOverflowVisible={false}
+        >
+          <ModalDialog.Header>
+            <ModalDialog.Title>The title</ModalDialog.Title>
+          </ModalDialog.Header>
 
-        <ModalDialog.Body>
-          <p>The content</p>
-        </ModalDialog.Body>
+          <ModalDialog.Body>
+            <p>The content</p>
+          </ModalDialog.Body>
 
-        <ModalDialog.Footer>
-          <ModalDialog.CloseButton>Cancel</ModalDialog.CloseButton>
-        </ModalDialog.Footer>
-      </ModalDialog>,
+          <ModalDialog.Footer>
+            <ModalDialog.CloseButton>Cancel</ModalDialog.CloseButton>
+          </ModalDialog.Footer>
+        </ModalDialog>
+      </IntlProvider>,
     );
 
     const dialogNode = screen.getByRole('dialog');
@@ -40,15 +43,17 @@ describe('ModalDialog', () => {
   it('is hidden by default', () => {
     const onClose = jest.fn();
     render(
-      <ModalDialog
-        title="My dialog"
-        onClose={onClose}
-        isOverflowVisible={false}
-      >
-        <ModalDialog.Header><ModalDialog.Title>The title</ModalDialog.Title></ModalDialog.Header>
-        <ModalDialog.Body><p>The hidden content</p></ModalDialog.Body>
-        <ModalDialog.Footer><ModalDialog.CloseButton>Cancel</ModalDialog.CloseButton></ModalDialog.Footer>
-      </ModalDialog>,
+      <IntlProvider locale="en" messages={{}}>
+        <ModalDialog
+          title="My dialog"
+          onClose={onClose}
+          isOverflowVisible={false}
+        >
+          <ModalDialog.Header><ModalDialog.Title>The title</ModalDialog.Title></ModalDialog.Header>
+          <ModalDialog.Body><p>The hidden content</p></ModalDialog.Body>
+          <ModalDialog.Footer><ModalDialog.CloseButton>Cancel</ModalDialog.CloseButton></ModalDialog.Footer>
+        </ModalDialog>
+      </IntlProvider>,
     );
 
     expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
@@ -59,30 +64,32 @@ describe('ModalDialog with Hero', () => {
   it('renders a dialog with aria-label and hero with img', () => {
     const onClose = jest.fn();
     render(
-      <ModalDialog
-        title="My dialog"
-        isOpen
-        onClose={onClose}
-        size="md"
-        variant="default"
-        hasCloseButton
-        isOverflowVisible={false}
-      >
-        <ModalDialog.Hero>
-          <ModalDialog.Hero.Background backgroundSrc="imageurl" />
-          <ModalDialog.Hero.Content data-testid="modal-hero-content">
-            <ModalDialog.Title>The title</ModalDialog.Title>
-          </ModalDialog.Hero.Content>
-        </ModalDialog.Hero>
+      <IntlProvider locale="en" messages={{}}>
+        <ModalDialog
+          title="My dialog"
+          isOpen
+          onClose={onClose}
+          size="md"
+          variant="default"
+          hasCloseButton
+          isOverflowVisible={false}
+        >
+          <ModalDialog.Hero>
+            <ModalDialog.Hero.Background backgroundSrc="imageurl" />
+            <ModalDialog.Hero.Content data-testid="modal-hero-content">
+              <ModalDialog.Title>The title</ModalDialog.Title>
+            </ModalDialog.Hero.Content>
+          </ModalDialog.Hero>
 
-        <ModalDialog.Body>
-          <p>The content</p>
-        </ModalDialog.Body>
+          <ModalDialog.Body>
+            <p>The content</p>
+          </ModalDialog.Body>
 
-        <ModalDialog.Footer>
-          <ModalDialog.CloseButton>Cancel</ModalDialog.CloseButton>
-        </ModalDialog.Footer>
-      </ModalDialog>,
+          <ModalDialog.Footer>
+            <ModalDialog.CloseButton>Cancel</ModalDialog.CloseButton>
+          </ModalDialog.Footer>
+        </ModalDialog>
+      </IntlProvider>,
     );
     const dialogNode = screen.getByRole('dialog');
 

package/src/index.d.ts

@@ -35,7 +35,7 @@ export { default as Hyperlink } from './Hyperlink';
 export { default as Icon } from './Icon';
 export { default as IconButton, IconButtonWithTooltip } from './IconButton';
 export { default as ModalContext } from './Modal/ModalContext';
-export { default as ModalDialog, MODAL_DIALOG_CLOSE_LABEL } from './Modal/ModalDialog';
+export { default as ModalDialog } from './Modal/ModalDialog';
 export { default as ModalLayer } from './Modal/ModalLayer';
 export { default as Overlay, OverlayTrigger } from './Overlay';
 export { default as Portal } from './Modal/Portal';
@@ -46,13 +46,14 @@ export { default as useToggle, type Toggler, type ToggleHandlers } from './hooks
 export { default as useArrowKeyNavigation, type ArrowKeyNavProps } from './hooks/useArrowKeyNavigationHook';
 export { default as useIndexOfLastVisibleChild } from './hooks/useIndexOfLastVisibleChildHook';
 export { default as useIsVisible } from './hooks/useIsVisibleHook';
+export { default as Alert, ALERT_CLOSE_LABEL_TEXT } from './Alert';
+export { default as breakpoints } from './utils/breakpoints';
 
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 // Things that don't have types
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 export const asInput: any; // from './asInput';
 export const ActionRow: any; // from './ActionRow';
-export const Alert: any, ALERT_CLOSE_LABEL_TEXT: string; // from './Alert';
 export const Annotation: any; // from './Annotation';
 export const Avatar: any; // from './Avatar';
 export const AvatarButton: any; // from './AvatarButton';
@@ -190,7 +191,6 @@ export const Stack: any; // from './Stack';
 export const ToggleButton: any, ToggleButtonGroup: any; // from './ToggleButton';
 export const Sticky: any; // from './Sticky';
 export const SelectableBox: any; // from './SelectableBox';
-export const breakpoints: any; // from './utils/breakpoints';
 export const Variant: any; // from './utils/constants';
 export const
   OverflowScrollContext: any,

package/src/index.js

@@ -35,7 +35,7 @@ export { default as Hyperlink } from './Hyperlink';
 export { default as Icon } from './Icon';
 export { default as IconButton, IconButtonWithTooltip } from './IconButton';
 export { default as ModalContext } from './Modal/ModalContext';
-export { default as ModalDialog, MODAL_DIALOG_CLOSE_LABEL } from './Modal/ModalDialog';
+export { default as ModalDialog } from './Modal/ModalDialog';
 export { default as ModalLayer } from './Modal/ModalLayer';
 export { default as Overlay, OverlayTrigger } from './Overlay';
 export { default as Portal } from './Modal/Portal';
@@ -46,13 +46,14 @@ export { default as useToggle } from './hooks/useToggleHook';
 export { default as useArrowKeyNavigation } from './hooks/useArrowKeyNavigationHook';
 export { default as useIndexOfLastVisibleChild } from './hooks/useIndexOfLastVisibleChildHook';
 export { default as useIsVisible } from './hooks/useIsVisibleHook';
+export { default as Alert, ALERT_CLOSE_LABEL_TEXT } from './Alert';
+export { default as breakpoints } from './utils/breakpoints';
 
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 // Things that don't have types
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 export { default as asInput } from './asInput';
 export { default as ActionRow } from './ActionRow';
-export { default as Alert, ALERT_CLOSE_LABEL_TEXT } from './Alert';
 export { default as Annotation } from './Annotation';
 export { default as Avatar } from './Avatar';
 export { default as AvatarButton } from './AvatarButton';
@@ -190,7 +191,6 @@ export { default as Stack } from './Stack';
 export { default as ToggleButton, ToggleButtonGroup } from './ToggleButton';
 export { default as Sticky } from './Sticky';
 export { default as SelectableBox } from './SelectableBox';
-export { default as breakpoints } from './utils/breakpoints';
 export { default as Variant } from './utils/constants';
 export {
   OverflowScrollContext,

package/src/utils/breakpoints.d.ts

@@ -0,0 +1,26 @@
+interface BreakpointRange {
+  minWidth?: number;
+  maxWidth?: number;
+}
+
+interface Breakpoints {
+  extraSmall: BreakpointRange;
+  small: BreakpointRange;
+  medium: BreakpointRange;
+  large: BreakpointRange;
+  extraLarge: BreakpointRange;
+  extraExtraLarge: BreakpointRange;
+}
+
+export const Size: {
+  readonly xs: 'extraSmall';
+  readonly sm: 'small';
+  readonly md: 'medium';
+  readonly lg: 'large';
+  readonly xl: 'extraLarge';
+  readonly xxl: 'extraExtraLarge';
+};
+
+declare const breakpoints: Breakpoints;
+
+export default breakpoints;