@openedx/paragon 22.8.1 → 22.9.0

package/dist/hooks/useArrowKeyNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useArrowKeyNavigation.js","names":["useRef","useEffect","handleEnter","_ref","event","currentIndex","activeElement","click","preventDefault","handleArrowKey","_ref2","availableElements","focus","nextElement","key","length","_availableElements","_slicedToArray","handleEvents","_ref3","_ref3$ignoredKeys","ignoredKeys","parentNode","_ref3$selectors","selectors","includes","_document","document","contains","querySelectorAll","Array","from","findIndex","availableElement","useArrowKeyNavigation","props","_ref4","eventHandler","current","addEventListener","removeEventListener"],"sources":["../../src/hooks/useArrowKeyNavigation.jsx"],"sourcesContent":["import { useRef, useEffect } from 'react';\n\n/**\n * A React hook to enable arrow key navigation on a component.\n */\n\nfunction handleEnter({ event, currentIndex, activeElement }) {\n  if (currentIndex === -1) { return; }\n  activeElement.click();\n  event.preventDefault();\n}\n\nfunction handleArrowKey({ event, currentIndex, availableElements }) {\n  // If the focus isn't in the container, focus on the first thing\n  if (currentIndex === -1) { availableElements[0].focus(); }\n\n  // Move the focus up or down. Wrap around ends of list.\n  let nextElement;\n\n  if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n    nextElement = availableElements[(currentIndex + 1) % availableElements.length];\n  }\n  if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n    nextElement = currentIndex - 1 < 0\n      ? availableElements[currentIndex - 1 + availableElements.length]\n      : availableElements[currentIndex - 1];\n  }\n  if (event.key === 'End') {\n    nextElement = availableElements[availableElements.length - 1];\n  }\n  if (event.key === 'Home') {\n    [nextElement] = availableElements;\n  }\n\n  // eslint-disable-next-line no-unused-expressions\n  nextElement && nextElement.focus();\n  event.preventDefault();\n}\n\n/**\n * Implement arrow key navigation for the given parentNode\n */\nfunction handleEvents({\n  event,\n  ignoredKeys = [],\n  parentNode,\n  selectors = 'a,button,input',\n}) {\n  if (!parentNode) { return; }\n\n  const { key } = event;\n\n  if (!['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft', 'Enter', 'Home', 'End'].includes(key)\n      || ignoredKeys.includes(key)) {\n    return;\n  }\n\n  const { activeElement } = document;\n\n  // If we're not inside the container, don't do anything\n  if (!parentNode.contains(activeElement)) { return; }\n\n  // Get the list of elements we're allowed to scroll through\n  const availableElements = parentNode.querySelectorAll(selectors);\n\n  // No elements are available to loop through.\n  if (!availableElements.length) { return; }\n\n  // Which index is currently selected\n  const currentIndex = Array.from(availableElements).findIndex(\n    (availableElement) => availableElement === activeElement,\n  );\n\n  if (key === 'Enter') {\n    handleEnter({ event, currentIndex, activeElement });\n  }\n  handleArrowKey({ event, currentIndex, availableElements });\n}\n\nexport default function useArrowKeyNavigation(props) {\n  const { selectors, ignoredKeys } = props || {};\n  const parentNode = useRef();\n\n  useEffect(() => {\n    const eventHandler = (event) => {\n      handleEvents({\n        event, ignoredKeys, parentNode: parentNode.current, selectors,\n      });\n    };\n\n    document.addEventListener('keydown', eventHandler);\n\n    return () => document.removeEventListener('keydown', eventHandler);\n  }, [ignoredKeys, selectors]);\n\n  return parentNode;\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"useArrowKeyNavigation.js","names":["useRef","useEffect","handleEnter","_ref","event","currentIndex","activeElement","click","preventDefault","handleArrowKey","_ref2","_nextElement","availableElements","focus","nextElement","key","length","_availableElements","_slicedToArray","handleEvents","_ref3","_ref3$ignoredKeys","ignoredKeys","parentNode","_ref3$selectors","selectors","includes","_document","document","contains","querySelectorAll","Array","from","findIndex","availableElement","useArrowKeyNavigation","props","_ref4","eventHandler","current","addEventListener","removeEventListener"],"sources":["../../src/hooks/useArrowKeyNavigation.jsx"],"sourcesContent":["import { useRef, useEffect } from 'react';\n\n/**\n * A React hook to enable arrow key navigation on a component.\n */\n\nfunction handleEnter({ event, currentIndex, activeElement }) {\n  if (currentIndex === -1) { return; }\n  activeElement.click();\n  event.preventDefault();\n}\n\nfunction handleArrowKey({ event, currentIndex, availableElements }) {\n  // If the focus isn't in the container, focus on the first thing\n  if (currentIndex === -1) { availableElements[0].focus(); }\n\n  // Move the focus up or down. Wrap around ends of list.\n  let nextElement;\n\n  if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n    nextElement = availableElements[(currentIndex + 1) % availableElements.length];\n  }\n  if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n    nextElement = currentIndex - 1 < 0\n      ? availableElements[currentIndex - 1 + availableElements.length]\n      : availableElements[currentIndex - 1];\n  }\n  if (event.key === 'End') {\n    nextElement = availableElements[availableElements.length - 1];\n  }\n  if (event.key === 'Home') {\n    [nextElement] = availableElements;\n  }\n\n  nextElement?.focus();\n  event.preventDefault();\n}\n\n/**\n * Implement arrow key navigation for the given parentNode\n */\nfunction handleEvents({\n  event,\n  ignoredKeys = [],\n  parentNode,\n  selectors = 'a,button,input',\n}) {\n  if (!parentNode) { return; }\n\n  const { key } = event;\n\n  if (!['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft', 'Enter', 'Home', 'End'].includes(key)\n      || ignoredKeys.includes(key)) {\n    return;\n  }\n\n  const { activeElement } = document;\n\n  // If we're not inside the container, don't do anything\n  if (!parentNode.contains(activeElement)) { return; }\n\n  // Get the list of elements we're allowed to scroll through\n  const availableElements = parentNode.querySelectorAll(selectors);\n\n  // No elements are available to loop through.\n  if (!availableElements.length) { return; }\n\n  // Which index is currently selected\n  const currentIndex = Array.from(availableElements).findIndex(\n    (availableElement) => availableElement === activeElement,\n  );\n\n  if (key === 'Enter') {\n    handleEnter({ event, currentIndex, activeElement });\n  }\n  handleArrowKey({ event, currentIndex, availableElements });\n}\n\nexport default function useArrowKeyNavigation(props) {\n  const { selectors, ignoredKeys } = props || {};\n  const parentNode = useRef();\n\n  useEffect(() => {\n    const eventHandler = (event) => {\n      handleEvents({\n        event, ignoredKeys, parentNode: parentNode.current, selectors,\n      });\n    };\n\n    document.addEventListener('keydown', eventHandler);\n\n    return () => document.removeEventListener('keydown', eventHandler);\n  }, [ignoredKeys, selectors]);\n\n  return parentNode;\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/index.d.ts

@@ -12,7 +12,11 @@ export { default as Container, ContainerSize } from './Container';
 export { default as Hyperlink, HYPER_LINK_EXTERNAL_LINK_ALT_TEXT, HYPER_LINK_EXTERNAL_LINK_TITLE } 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 ModalLayer } from './Modal/ModalLayer';
 export { default as Overlay, OverlayTrigger } from './Overlay';
+export { default as Portal } from './Modal/Portal';
 export { default as Tooltip } from './Tooltip';
 
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
@@ -39,7 +43,9 @@ export const
 export const
   Carousel: any, CarouselItem: any, CAROUSEL_NEXT_LABEL_TEXT: any, CAROUSEL_PREV_LABEL_TEXT: any;
 // from './Carousel';
+/** @deprecated Replaced by `Form.Checkbox`. */
 export const CheckBox: any; // from './CheckBox';
+/** @deprecated Replaced by `Form.Checkbox` and `Form.CheckboxSet`. */
 export const CheckBoxGroup: any; // from './CheckBoxGroup';
 export const CloseButton: any; // from './CloseButton';
 export const Layout: any, Col: any, Row: any; // from './Layout';
@@ -53,6 +59,7 @@ export const
   SplitButton: any;
 // from './Dropdown';
 export const Fade: any; // from './Fade';
+/** @deprecated */
 export const Fieldset: any; // from './Fieldset';
 export const
   Form: any,
@@ -77,28 +84,30 @@ export const
   InputGroup: any;
 // from './Form';
 export const IconButtonToggle: any; // from './IconButtonToggle';
+/** @deprecated Replaced by `Form.Control`. */
 export const Input: any; // from './Input';
+/** @deprecated Replaced by `Form.Control`. */
 export const InputSelect: any; // from './InputSelect';
+/** @deprecated Replaced by `Form.Control`. */
 export const InputText: any; // from './InputText';
 export const Image: any, Figure; // from './Image';
+/** @deprecated */
 export const ListBox: any; // from './ListBox';
+/** @deprecated */
 export const ListBoxOption: any; // from './ListBoxOption';
 export const MailtoLink: any, MAIL_TO_LINK_EXTERNAL_LINK_ALTERNATIVE_TEXT: string, MAIL_TO_LINK_EXTERNAL_LINK_TITLE: string; // from './MailtoLink';
 export const Media: any; // from './Media';
 export const Menu: any; // from './Menu';
 export const MenuItem: any; // from './Menu/MenuItem';
 export const SelectMenu: any, SELECT_MENU_DEFAULT_MESSAGE: string; // from './Menu/SelectMenu';
+/** @deprecated Use `ModalDialog` instead. */
 export const Modal: any; // from './Modal';
 export const ModalCloseButton: any; // from './Modal/ModalCloseButton';
 export const FullscreenModal: any, FULLSCREEN_MODAL_CLOSE_LABEL: string; // from './Modal/FullscreenModal';
 export const MarketingModal: any; // from './Modal/MarketingModal';
 export const StandardModal: any, STANDARD_MODAL_CLOSE_LABEL: string; // from './Modal/StandardModal';
 export const AlertModal: any; // from './Modal/AlertModal';
-export const ModalLayer: any; // from './Modal/ModalLayer';
-export const ModalDialog: any, MODAL_DIALOG_CLOSE_LABEL: string; // from './Modal/ModalDialog';
 export const ModalPopup: any; // from './Modal/ModalPopup';
-export const ModalContext: any; // from './Modal/ModalContext';
-export const Portal: any; // from './Modal/Portal';
 export const PopperElement: any; // from './Modal/PopperElement';
 
 export const
@@ -122,6 +131,7 @@ export const
 export const Popover: any, PopoverTitle: any, PopoverContent: any; // from './Popover';
 export const ProgressBar: any; // from './ProgressBar';
 export const ProductTour: any; // from './ProductTour';
+/** @deprecated Replaced by `Form.Radio` and `Form.RadioSet`. */
 export const RadioButtonGroup: any, RadioButton: any; // from './RadioButtonGroup';
 export const ResponsiveEmbed: any; // from './ResponsiveEmbed';
 export const
@@ -135,7 +145,9 @@ export const Sheet: any; // from './Sheet';
 export const Spinner: any; // from './Spinner';
 export const Stepper: any; // from './Stepper';
 export const StatefulButton: any; // from './StatefulButton';
+/** @deprecated Replaced by `Alert`. */
 export const StatusAlert: any; // from './StatusAlert';
+/** @deprecated Replaced by `DataTable`. */
 export const Table: any; // from './Table';
 export const
   Tabs: any,
@@ -144,8 +156,10 @@ export const
   TabContent: any,
   TabPane: any;
 // from './Tabs';
+/** @deprecated Replaced by `Form.Control`. */
 export const TextArea: any; // from './TextArea';
 export const Toast: any, TOAST_CLOSE_LABEL_TEXT: string, TOAST_DELAY: number; // from './Toast';
+/** @deprecated Replaced by `Form.Group`. */
 export const ValidationFormGroup: any; // from './ValidationFormGroup';
 export const TransitionReplace: any; // from './TransitionReplace';
 export const ValidationMessage: any; // from './ValidationMessage';

package/dist/index.js

@@ -8,10 +8,15 @@ export { default as Bubble } from './Bubble';
 export { default as Button, ButtonGroup, ButtonToolbar } from './Button';
 export { default as Chip, CHIP_PGN_CLASS } from './Chip';
 export { default as ChipCarousel } from './ChipCarousel';
+export { default as Container } from './Container';
 export { default as Hyperlink, HYPER_LINK_EXTERNAL_LINK_ALT_TEXT, HYPER_LINK_EXTERNAL_LINK_TITLE } 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 ModalLayer } from './Modal/ModalLayer';
 export { default as Overlay, OverlayTrigger } from './Overlay';
+export { default as Portal } from './Modal/Portal';
 export { default as Tooltip } from './Tooltip';
 
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
@@ -38,10 +43,11 @@ export {
 export {
   default as Carousel, CarouselItem, CAROUSEL_NEXT_LABEL_TEXT, CAROUSEL_PREV_LABEL_TEXT,
 } from './Carousel';
+/** @deprecated Replaced by `Form.Checkbox`. */
 export { default as CheckBox } from './CheckBox';
+/** @deprecated Replaced by `Form.Checkbox` and `Form.CheckboxSet`. */
 export { default as CheckBoxGroup } from './CheckBoxGroup';
 export { default as CloseButton } from './CloseButton';
-export { default as Container } from './Container';
 export { default as Layout, Col, Row } from './Layout';
 export { default as Collapse } from './Collapse';
 export { default as Collapsible } from './Collapsible';
@@ -53,6 +59,7 @@ export {
   SplitButton,
 } from './Dropdown';
 export { default as Fade } from './Fade';
+/** @deprecated */
 export { default as Fieldset } from './Fieldset';
 export {
   default as Form,
@@ -77,28 +84,30 @@ export {
   InputGroup,
 } from './Form';
 export { default as IconButtonToggle } from './IconButtonToggle';
+/** @deprecated Replaced by `Form.Control`. */
 export { default as Input } from './Input';
+/** @deprecated Replaced by `Form.Control`. */
 export { default as InputSelect } from './InputSelect';
+/** @deprecated Replaced by `Form.Control`. */
 export { default as InputText } from './InputText';
 export { default as Image, Figure } from './Image';
+/** @deprecated */
 export { default as ListBox } from './ListBox';
+/** @deprecated */
 export { default as ListBoxOption } from './ListBoxOption';
 export { default as MailtoLink, MAIL_TO_LINK_EXTERNAL_LINK_ALTERNATIVE_TEXT, MAIL_TO_LINK_EXTERNAL_LINK_TITLE } from './MailtoLink';
 export { default as Media } from './Media';
 export { default as Menu } from './Menu';
 export { default as MenuItem } from './Menu/MenuItem';
 export { default as SelectMenu, SELECT_MENU_DEFAULT_MESSAGE } from './Menu/SelectMenu';
+/** @deprecated Use `ModalDialog` instead. */
 export { default as Modal } from './Modal';
 export { default as ModalCloseButton } from './Modal/ModalCloseButton';
 export { default as FullscreenModal, FULLSCREEN_MODAL_CLOSE_LABEL } from './Modal/FullscreenModal';
 export { default as MarketingModal } from './Modal/MarketingModal';
 export { default as StandardModal, STANDARD_MODAL_CLOSE_LABEL } from './Modal/StandardModal';
 export { default as AlertModal } from './Modal/AlertModal';
-export { default as ModalLayer } from './Modal/ModalLayer';
-export { default as ModalDialog, MODAL_DIALOG_CLOSE_LABEL } from './Modal/ModalDialog';
 export { default as ModalPopup } from './Modal/ModalPopup';
-export { default as ModalContext } from './Modal/ModalContext';
-export { default as Portal } from './Modal/Portal';
 export { default as PopperElement } from './Modal/PopperElement';
 
 export {
@@ -122,6 +131,7 @@ export {
 export { default as Popover, PopoverTitle, PopoverContent } from './Popover';
 export { default as ProgressBar } from './ProgressBar';
 export { default as ProductTour } from './ProductTour';
+/** @deprecated Replaced by `Form.Radio` and `Form.RadioSet`. */
 export { default as RadioButtonGroup, RadioButton } from './RadioButtonGroup';
 export { default as ResponsiveEmbed } from './ResponsiveEmbed';
 export {
@@ -135,7 +145,9 @@ export { default as Sheet } from './Sheet';
 export { default as Spinner } from './Spinner';
 export { default as Stepper } from './Stepper';
 export { default as StatefulButton } from './StatefulButton';
+/** @deprecated Replaced by `Alert`. */
 export { default as StatusAlert } from './StatusAlert';
+/** @deprecated Replaced by `DataTable`. */
 export { default as Table } from './Table';
 export {
   default as Tabs,
@@ -144,8 +156,10 @@ export {
   TabContent,
   TabPane,
 } from './Tabs';
+/** @deprecated Replaced by `Form.Control`. */
 export { default as TextArea } from './TextArea';
 export { default as Toast, TOAST_CLOSE_LABEL_TEXT, TOAST_DELAY } from './Toast';
+/** @deprecated Replaced by `Form.Group`. */
 export { default as ValidationFormGroup } from './ValidationFormGroup';
 export { default as TransitionReplace } from './TransitionReplace';
 export { default as ValidationMessage } from './ValidationMessage';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "22.8.1",
+  "version": "22.9.0",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -95,7 +95,7 @@
     "@babel/preset-env": "^7.16.8",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@edx/eslint-config": "^3.2.0",
+    "@edx/eslint-config": "^4.2.0",
     "@edx/stylelint-config-edx": "^2.3.0",
     "@edx/typescript-config": "^1.0.1",
     "@formatjs/cli": "^5.0.2",

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

@@ -8,6 +8,13 @@ import DataTableContext from '../../DataTableContext';
 import * as selectActions from '../data/actions';
 import { getRowIds } from '../data/helpers';
 
+function DataTableContextChild() {
+  const contextValue = useContext(DataTableContext);
+  return (
+    <div className="context-value" data-contextvalue={contextValue} />
+  );
+}
+
 // eslint-disable-next-line react/prop-types
 function ControlledSelectHeaderWrapper({ tableProps, selectProps, ...rest }) {
   return (
@@ -18,13 +25,6 @@ function ControlledSelectHeaderWrapper({ tableProps, selectProps, ...rest }) {
   );
 }
 
-function DataTableContextChild() {
-  const contextValue = useContext(DataTableContext);
-  return (
-    <div className="context-value" data-contextvalue={contextValue} />
-  );
-}
-
 const mockToggleAllPageRowsSelectedProps = jest.fn();
 const rows = [{ id: 1 }, { id: 2 }];
 const tableProps = {

package/src/Modal/{ModalContext.jsx → ModalContext.tsx}

@@ -1,14 +1,29 @@
 import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
 
-const ModalContext = React.createContext({
+interface ContextData {
+  onClose: () => void;
+  isOpen: boolean;
+  isBlocking: boolean;
+}
+
+const ModalContext = React.createContext<ContextData>({
   onClose: () => {},
+  isOpen: false,
+  isBlocking: false,
 });
 
 function ModalContextProvider({
-  onClose, isOpen, isBlocking, children,
+  onClose,
+  isOpen,
+  isBlocking = false,
+  children = null,
+}: {
+  onClose: () => void;
+  isOpen: boolean;
+  isBlocking?: boolean;
+  children?: React.ReactNode;
 }) {
-  const modalContextValue = useMemo(
+  const modalContextValue = useMemo<ContextData>(
     () => ({ onClose, isOpen, isBlocking }),
     [onClose, isOpen, isBlocking],
   );
@@ -20,17 +35,5 @@ function ModalContextProvider({
   );
 }
 
-ModalContextProvider.propTypes = {
-  children: PropTypes.node,
-  onClose: PropTypes.func.isRequired,
-  isBlocking: PropTypes.bool,
-  isOpen: PropTypes.bool.isRequired,
-};
-
-ModalContextProvider.defaultProps = {
-  children: null,
-  isBlocking: false,
-};
-
 export { ModalContextProvider };
 export default ModalContext;

package/src/Modal/{ModalDialog.jsx → ModalDialog.tsx}

@@ -3,11 +3,16 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useMediaQuery } from 'react-responsive';
 import ModalLayer from './ModalLayer';
+// @ts-ignore for now - this needs to be converted to TypeScript
 import ModalCloseButton from './ModalCloseButton';
 import ModalDialogHeader from './ModalDialogHeader';
+// @ts-ignore for now - this needs to be converted to TypeScript
 import ModalDialogTitle from './ModalDialogTitle';
+// @ts-ignore for now - this needs to be converted to TypeScript
 import ModalDialogFooter from './ModalDialogFooter';
+// @ts-ignore for now - this needs to be converted to TypeScript
 import ModalDialogBody from './ModalDialogBody';
+// @ts-ignore for now - this needs to be converted to TypeScript
 import ModalDialogHero from './ModalDialogHero';
 
 import Icon from '../Icon';
@@ -16,22 +21,57 @@ import { Close } from '../../icons';
 
 export const MODAL_DIALOG_CLOSE_LABEL = 'Close';
 
+interface Props {
+  /** Specifies the content of the dialog */
+  children: React.ReactNode;
+  /** The aria-label of the dialog */
+  title: string;
+  /** A callback to close the modal dialog, e.g. when Escape is pressed */
+  onClose: () => void;
+  /** Is the modal dialog open or closed? */
+  isOpen?: boolean;
+  /** The close 'x' icon button in the top right of the dialog box */
+  hasCloseButton?: boolean;
+  /** Size determines the maximum width of the dialog box */
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';
+  /** The visual style of the dialog box */
+  variant?: 'default' | 'warning' | 'danger' | 'success' | 'dark';
+  /** The label supplied to the close icon button if one is rendered */
+  closeLabel?: string;
+  /** Specifies class name to append to the base element */
+  className?: string;
+  /**
+   * Determines where a scrollbar should appear if a modal is too large for the
+   * viewport. When false, the ``ModalDialog``. Body receives a scrollbar, when true
+   * the browser window itself receives the scrollbar.
+   */
+  isFullscreenScroll?: boolean;
+  /** To show full screen view on mobile screens */
+  isFullscreenOnMobile?: boolean;
+  /** Prevent clicking on the backdrop or pressing Esc to close the modal */
+  isBlocking?: boolean;
+  /** Specifies the z-index of the modal */
+  zIndex?: number;
+  /** Specifies whether overflow is visible in the modal */
+  isOverflowVisible?: boolean;
+}
+
 function ModalDialog({
   children,
   title,
-  isOpen,
+  isOpen = false,
   onClose,
-  size,
-  variant,
-  hasCloseButton,
-  closeLabel,
-  isFullscreenScroll,
+  size = 'md',
+  variant = 'default',
+  hasCloseButton = true,
+  closeLabel = MODAL_DIALOG_CLOSE_LABEL,
+  isFullscreenScroll = false,
   className,
-  isFullscreenOnMobile,
-  isBlocking,
+  isFullscreenOnMobile = false,
+  isBlocking = false,
   zIndex,
-  isOverflowVisible,
-}) {
+  isOverflowVisible = true,
+}: Props) {
   const isMobile = useMediaQuery({ query: '(max-width: 767.98px)' });
   const showFullScreen = (isFullscreenOnMobile && isMobile);
   return (
@@ -126,20 +166,6 @@ ModalDialog.propTypes = {
   isOverflowVisible: PropTypes.bool,
 };
 
-ModalDialog.defaultProps = {
-  isOpen: false,
-  hasCloseButton: true,
-  size: 'md',
-  variant: 'default',
-  closeLabel: MODAL_DIALOG_CLOSE_LABEL,
-  className: undefined,
-  isFullscreenScroll: false,
-  isFullscreenOnMobile: false,
-  isBlocking: false,
-  zIndex: undefined,
-  isOverflowVisible: true,
-};
-
 ModalDialog.Header = ModalDialogHeader;
 ModalDialog.Title = ModalDialogTitle;
 ModalDialog.Footer = ModalDialogFooter;

package/src/Modal/{ModalDialogHeader.jsx → ModalDialogHeader.tsx}

@@ -1,21 +1,32 @@
+/* eslint-disable react/require-default-props */
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import type { ComponentWithAsProp } from '../utils/types/bootstrap';
 
-function ModalDialogHeader({
-  as,
+export interface Props {
+  as?: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+type HeaderType = ComponentWithAsProp<'div', Props>;
+
+const ModalDialogHeader: HeaderType = React.forwardRef<HTMLDivElement, Props>(({
+  as = 'div',
   children,
   ...props
-}) {
-  return React.createElement(
+}, ref) => (
+  React.createElement(
     as,
     {
       ...props,
+      ref,
       className: classNames('pgn__modal-header', props.className),
     },
     children,
-  );
-}
+  )
+));
 
 ModalDialogHeader.propTypes = {
   /** Specifies the base element */
@@ -26,9 +37,4 @@ ModalDialogHeader.propTypes = {
   className: PropTypes.string,
 };
 
-ModalDialogHeader.defaultProps = {
-  as: 'div',
-  className: undefined,
-};
-
 export default ModalDialogHeader;

package/src/Modal/{ModalLayer.jsx → ModalLayer.tsx}

@@ -6,7 +6,7 @@ import Portal from './Portal';
 import { ModalContextProvider } from './ModalContext';
 
 // istanbul ignore next
-function ModalBackdrop({ onClick }) {
+function ModalBackdrop({ onClick }: { onClick?: () => void }) {
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div
@@ -22,12 +22,8 @@ ModalBackdrop.propTypes = {
   onClick: PropTypes.func,
 };
 
-ModalBackdrop.defaultProps = {
-  onClick: undefined,
-};
-
 // istanbul ignore next
-function ModalContentContainer({ children }) {
+function ModalContentContainer({ children = null }: { children?: React.ReactNode }) {
   return <div className="pgn__modal-content-container">{children}</div>;
 }
 
@@ -35,9 +31,18 @@ ModalContentContainer.propTypes = {
   children: PropTypes.node,
 };
 
-ModalContentContainer.defaultProps = {
-  children: null,
-};
+interface Props {
+  /** Specifies the contents of the modal */
+  children: React.ReactNode;
+  /** A callback function for when the modal is dismissed */
+  onClose: () => void;
+  /** Is the modal dialog open or closed */
+  isOpen: boolean;
+  /** Prevent clicking on the backdrop or pressing Esc to close the modal */
+  isBlocking?: boolean;
+  /** Specifies the z-index of the modal */
+  zIndex?: number;
+}
 
 /**
  * The ModalLayer should be used for any component that wishes to engage the user
@@ -46,8 +51,8 @@ ModalContentContainer.defaultProps = {
  * component is that if a modal object is visible then it is "enabled"
  */
 function ModalLayer({
-  children, onClose, isOpen, isBlocking, zIndex,
-}) {
+  children, onClose, isOpen, isBlocking = false, zIndex,
+}: Props) {
   useEffect(() => {
     if (isOpen) {
       document.body.classList.add('pgn__hidden-scroll-padding-right');
@@ -63,7 +68,7 @@ function ModalLayer({
     return null;
   }
 
-  const handleClose = isBlocking ? null : onClose;
+  const handleClose = isBlocking ? undefined : onClose;
 
   return (
     <ModalContextProvider onClose={onClose} isOpen={isOpen} isBlocking={isBlocking}>
@@ -102,10 +107,5 @@ ModalLayer.propTypes = {
   zIndex: PropTypes.number,
 };
 
-ModalLayer.defaultProps = {
-  isBlocking: false,
-  zIndex: undefined,
-};
-
 export { ModalBackdrop, ModalContentContainer };
 export default ModalLayer;

package/src/Modal/{Portal.jsx → Portal.tsx}

@@ -1,9 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
 
-class Portal extends React.Component {
-  constructor(props) {
+interface Props {
+  children: React.ReactNode;
+}
+
+class Portal extends React.Component<Props> {
+  private rootName: string;
+
+  private rootElement: HTMLElement | null;
+
+  constructor(props: Props) {
     super(props);
     this.rootName = 'paragon-portal-root';
     // istanbul ignore if
@@ -31,8 +38,4 @@ class Portal extends React.Component {
   }
 }
 
-Portal.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
 export default Portal;

package/src/Modal/tests/{ModalDialog.test.jsx → ModalDialog.test.tsx}

@@ -3,16 +3,6 @@ import { render, screen } from '@testing-library/react';
 
 import ModalDialog from '../ModalDialog';
 
-jest.mock('../ModalLayer', () => function ModalLayerMock(props) {
-  // eslint-disable-next-line react/prop-types
-  const { children, ...otherProps } = props;
-  return (
-    <modal-layer {...otherProps}>
-      {children}
-    </modal-layer>
-  );
-});
-
 describe('ModalDialog', () => {
   it('renders a dialog with aria-label and content', () => {
     const onClose = jest.fn();
@@ -45,6 +35,22 @@ describe('ModalDialog', () => {
     expect(dialogNode).toHaveAttribute('aria-label', 'My dialog');
     expect(screen.getByText('The content')).toBeInTheDocument();
   });
+
+  it('is hidden by default', () => {
+    const onClose = jest.fn();
+    render(
+      <ModalDialog
+        title="My dialog"
+        onClose={onClose}
+      >
+        <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>,
+    );
+
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
 });
 
 describe('ModalDialog with Hero', () => {

package/src/Modal/tests/{ModalLayer.test.jsx → ModalLayer.test.tsx}

@@ -6,12 +6,11 @@ import userEvent from '@testing-library/user-event';
 import ModalLayer from '../ModalLayer';
 
 /* eslint-disable react/prop-types */
-jest.mock('../Portal', () => function PortalMock(props) {
+jest.mock('../Portal', () => function PortalMock(props: any) {
   const { children, ...otherProps } = props;
   return (
-    <paragon-portal {...otherProps}>
-      {children}
-    </paragon-portal>
+    // @ts-ignore this fake element. (Property 'paragon-portal' does not exist on type 'JSX.IntrinsicElements')
+    <paragon-portal {...otherProps}>{children}</paragon-portal>
   );
 });
 
@@ -19,6 +18,7 @@ jest.mock('react-focus-on', () => ({
   FocusOn: jest.fn().mockImplementation((props) => {
     const { children, ...otherProps } = props;
     return (
+      // @ts-ignore this fake element. (Property 'focus-on' does not exist on type 'JSX.IntrinsicElements')
       <focus-on data-testid="focus-on" {...otherProps}>{children}</focus-on>
     );
   }),
@@ -117,7 +117,7 @@ describe('<ModalLayer />', () => {
       );
       expect(FocusOn).toHaveBeenCalledWith(
         expect.objectContaining({
-          onEscapeKey: null,
+          onEscapeKey: undefined,
         }),
         // note: this 2nd function argument represents the
         // `refOrContext` (in this case, the context value