@openedx/paragon 22.18.2 → 22.19.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/index.d.ts

@@ -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

@@ -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.19.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/index.d.ts

@@ -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

@@ -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;