@openedx/paragon 22.8.0 → 22.9.0

package/dist/Card/index.scss

@@ -353,6 +353,8 @@ a.pgn__card {
       bottom: #{-$card-logo-bottom-offset};
       width: $card-logo-width;
       height: $card-logo-height;
+      object-fit: scale-down;
+      object-position: center center;
       border-radius: $card-logo-border-radius;
       box-shadow: $level-1-box-shadow;
       padding: map_get($spacers, 2);

package/dist/Modal/ModalContext.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface ContextData {
+    onClose: () => void;
+    isOpen: boolean;
+    isBlocking: boolean;
+}
+declare const ModalContext: React.Context<ContextData>;
+declare function ModalContextProvider({ onClose, isOpen, isBlocking, children, }: {
+    onClose: () => void;
+    isOpen: boolean;
+    isBlocking?: boolean;
+    children?: React.ReactNode;
+}): React.JSX.Element;
+export { ModalContextProvider };
+export default ModalContext;

package/dist/Modal/ModalContext.js

@@ -1,13 +1,16 @@
 import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
 var ModalContext = /*#__PURE__*/React.createContext({
-  onClose: function onClose() {}
+  onClose: function onClose() {},
+  isOpen: false,
+  isBlocking: false
 });
 function ModalContextProvider(_ref) {
   var onClose = _ref.onClose,
     isOpen = _ref.isOpen,
-    isBlocking = _ref.isBlocking,
-    children = _ref.children;
+    _ref$isBlocking = _ref.isBlocking,
+    isBlocking = _ref$isBlocking === void 0 ? false : _ref$isBlocking,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children;
   var modalContextValue = useMemo(function () {
     return {
       onClose: onClose,
@@ -19,16 +22,6 @@ function ModalContextProvider(_ref) {
     value: modalContextValue
   }, children);
 }
-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;
 //# sourceMappingURL=ModalContext.js.map

package/dist/Modal/ModalContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContext.js","names":["React","useMemo","PropTypes","ModalContext","createContext","onClose","ModalContextProvider","_ref","isOpen","isBlocking","children","modalContextValue","createElement","Provider","value","propTypes","node","func","isRequired","bool","defaultProps"],"sources":["../../src/Modal/ModalContext.jsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport PropTypes from 'prop-types';\n\nconst ModalContext = React.createContext({\n  onClose: () => {},\n});\n\nfunction ModalContextProvider({\n  onClose, isOpen, isBlocking, children,\n}) {\n  const modalContextValue = useMemo(\n    () => ({ onClose, isOpen, isBlocking }),\n    [onClose, isOpen, isBlocking],\n  );\n\n  return (\n    <ModalContext.Provider value={modalContextValue}>\n      {children}\n    </ModalContext.Provider>\n  );\n}\n\nModalContextProvider.propTypes = {\n  children: PropTypes.node,\n  onClose: PropTypes.func.isRequired,\n  isBlocking: PropTypes.bool,\n  isOpen: PropTypes.bool.isRequired,\n};\n\nModalContextProvider.defaultProps = {\n  children: null,\n  isBlocking: false,\n};\n\nexport { ModalContextProvider };\nexport default ModalContext;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,OAAOC,SAAS,MAAM,YAAY;AAElC,IAAMC,YAAY,gBAAGH,KAAK,CAACI,aAAa,CAAC;EACvCC,OAAO,EAAE,SAAAA,QAAA,EAAM,CAAC;AAClB,CAAC,CAAC;AAEF,SAASC,oBAAoBA,CAAAC,IAAA,EAE1B;EAAA,IADDF,OAAO,GAAAE,IAAA,CAAPF,OAAO;IAAEG,MAAM,GAAAD,IAAA,CAANC,MAAM;IAAEC,UAAU,GAAAF,IAAA,CAAVE,UAAU;IAAEC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;EAErC,IAAMC,iBAAiB,GAAGV,OAAO,CAC/B;IAAA,OAAO;MAAEI,OAAO,EAAPA,OAAO;MAAEG,MAAM,EAANA,MAAM;MAAEC,UAAU,EAAVA;IAAW,CAAC;EAAA,CAAC,EACvC,CAACJ,OAAO,EAAEG,MAAM,EAAEC,UAAU,CAC9B,CAAC;EAED,oBACET,KAAA,CAAAY,aAAA,CAACT,YAAY,CAACU,QAAQ;IAACC,KAAK,EAAEH;EAAkB,GAC7CD,QACoB,CAAC;AAE5B;AAEAJ,oBAAoB,CAACS,SAAS,GAAG;EAC/BL,QAAQ,EAAER,SAAS,CAACc,IAAI;EACxBX,OAAO,EAAEH,SAAS,CAACe,IAAI,CAACC,UAAU;EAClCT,UAAU,EAAEP,SAAS,CAACiB,IAAI;EAC1BX,MAAM,EAAEN,SAAS,CAACiB,IAAI,CAACD;AACzB,CAAC;AAEDZ,oBAAoB,CAACc,YAAY,GAAG;EAClCV,QAAQ,EAAE,IAAI;EACdD,UAAU,EAAE;AACd,CAAC;AAED,SAASH,oBAAoB;AAC7B,eAAeH,YAAY","ignoreList":[]}
+{"version":3,"file":"ModalContext.js","names":["React","useMemo","ModalContext","createContext","onClose","isOpen","isBlocking","ModalContextProvider","_ref","_ref$isBlocking","_ref$children","children","modalContextValue","createElement","Provider","value"],"sources":["../../src/Modal/ModalContext.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\ninterface ContextData {\n  onClose: () => void;\n  isOpen: boolean;\n  isBlocking: boolean;\n}\n\nconst ModalContext = React.createContext<ContextData>({\n  onClose: () => {},\n  isOpen: false,\n  isBlocking: false,\n});\n\nfunction ModalContextProvider({\n  onClose,\n  isOpen,\n  isBlocking = false,\n  children = null,\n}: {\n  onClose: () => void;\n  isOpen: boolean;\n  isBlocking?: boolean;\n  children?: React.ReactNode;\n}) {\n  const modalContextValue = useMemo<ContextData>(\n    () => ({ onClose, isOpen, isBlocking }),\n    [onClose, isOpen, isBlocking],\n  );\n\n  return (\n    <ModalContext.Provider value={modalContextValue}>\n      {children}\n    </ModalContext.Provider>\n  );\n}\n\nexport { ModalContextProvider };\nexport default ModalContext;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAQtC,IAAMC,YAAY,gBAAGF,KAAK,CAACG,aAAa,CAAc;EACpDC,OAAO,EAAE,SAAAA,QAAA,EAAM,CAAC,CAAC;EACjBC,MAAM,EAAE,KAAK;EACbC,UAAU,EAAE;AACd,CAAC,CAAC;AAEF,SAASC,oBAAoBA,CAAAC,IAAA,EAU1B;EAAA,IATDJ,OAAO,GAAAI,IAAA,CAAPJ,OAAO;IACPC,MAAM,GAAAG,IAAA,CAANH,MAAM;IAAAI,eAAA,GAAAD,IAAA,CACNF,UAAU;IAAVA,UAAU,GAAAG,eAAA,cAAG,KAAK,GAAAA,eAAA;IAAAC,aAAA,GAAAF,IAAA,CAClBG,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,IAAI,GAAAA,aAAA;EAOf,IAAME,iBAAiB,GAAGX,OAAO,CAC/B;IAAA,OAAO;MAAEG,OAAO,EAAPA,OAAO;MAAEC,MAAM,EAANA,MAAM;MAAEC,UAAU,EAAVA;IAAW,CAAC;EAAA,CAAC,EACvC,CAACF,OAAO,EAAEC,MAAM,EAAEC,UAAU,CAC9B,CAAC;EAED,oBACEN,KAAA,CAAAa,aAAA,CAACX,YAAY,CAACY,QAAQ;IAACC,KAAK,EAAEH;EAAkB,GAC7CD,QACoB,CAAC;AAE5B;AAEA,SAASJ,oBAAoB;AAC7B,eAAeL,YAAY","ignoreList":[]}

package/dist/Modal/ModalDialog.d.ts

@@ -0,0 +1,105 @@
+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;
+    /** 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;
+}
+declare function ModalDialog({ children, title, isOpen, onClose, size, variant, hasCloseButton, closeLabel, isFullscreenScroll, className, isFullscreenOnMobile, isBlocking, zIndex, isOverflowVisible, }: Props): React.JSX.Element;
+declare namespace ModalDialog {
+    var propTypes: {
+        /**
+         *  Specifies the content of the dialog
+         */
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        /**
+         * The aria-label of the dialog
+         */
+        title: PropTypes.Validator<string>;
+        /**
+         * A callback to close the modal dialog
+         */
+        onClose: PropTypes.Validator<(...args: any[]) => any>;
+        /**
+         * Is the modal dialog open or closed
+         */
+        isOpen: PropTypes.Requireable<boolean>;
+        /**
+         * The close 'x' icon button in the top right of the dialog box
+         */
+        hasCloseButton: PropTypes.Requireable<boolean>;
+        /**
+         * Sizes determine the maximum width of the dialog box
+         */
+        size: PropTypes.Requireable<string>;
+        /**
+         * The visual style of the dialog box
+         */
+        variant: PropTypes.Requireable<string>;
+        /**
+         * The label supplied to the close icon button if one is rendered
+         */
+        closeLabel: PropTypes.Requireable<string>;
+        /**
+         *  Specifies class name to append to the base element
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Determines where a scrollbar should appear if a modal is too large for the
+         * viewport. When false, the ``ModalDialog``. Body receives a scrollbar, when true
+         * the browser window itself receives the scrollbar.
+         */
+        isFullscreenScroll: PropTypes.Requireable<boolean>;
+        /**
+         * To show full screen view on mobile screens
+         */
+        isFullscreenOnMobile: PropTypes.Requireable<boolean>;
+        /**
+         * Prevent clicking on the backdrop or pressing Esc to close the modal
+         */
+        isBlocking: PropTypes.Requireable<boolean>;
+        /**
+         * Specifies the z-index of the modal
+         */
+        zIndex: PropTypes.Requireable<number>;
+        /** Specifies whether overflow is visible in the modal */
+        isOverflowVisible: PropTypes.Requireable<boolean>;
+    };
+    var Header: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("./ModalDialogHeader").Props>;
+    var Title: any;
+    var Footer: any;
+    var CloseButton: any;
+    var Body: any;
+    var Hero: any;
+}
+export default ModalDialog;

package/dist/Modal/ModalDialog.js

@@ -7,11 +7,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';
 import IconButton from '../IconButton';
@@ -21,18 +26,27 @@ function ModalDialog(_ref) {
   var _classNames;
   var children = _ref.children,
     title = _ref.title,
-    isOpen = _ref.isOpen,
+    _ref$isOpen = _ref.isOpen,
+    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
     onClose = _ref.onClose,
-    size = _ref.size,
-    variant = _ref.variant,
-    hasCloseButton = _ref.hasCloseButton,
-    closeLabel = _ref.closeLabel,
-    isFullscreenScroll = _ref.isFullscreenScroll,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    _ref$hasCloseButton = _ref.hasCloseButton,
+    hasCloseButton = _ref$hasCloseButton === void 0 ? true : _ref$hasCloseButton,
+    _ref$closeLabel = _ref.closeLabel,
+    closeLabel = _ref$closeLabel === void 0 ? MODAL_DIALOG_CLOSE_LABEL : _ref$closeLabel,
+    _ref$isFullscreenScro = _ref.isFullscreenScroll,
+    isFullscreenScroll = _ref$isFullscreenScro === void 0 ? false : _ref$isFullscreenScro,
     className = _ref.className,
-    isFullscreenOnMobile = _ref.isFullscreenOnMobile,
-    isBlocking = _ref.isBlocking,
+    _ref$isFullscreenOnMo = _ref.isFullscreenOnMobile,
+    isFullscreenOnMobile = _ref$isFullscreenOnMo === void 0 ? false : _ref$isFullscreenOnMo,
+    _ref$isBlocking = _ref.isBlocking,
+    isBlocking = _ref$isBlocking === void 0 ? false : _ref$isBlocking,
     zIndex = _ref.zIndex,
-    isOverflowVisible = _ref.isOverflowVisible;
+    _ref$isOverflowVisibl = _ref.isOverflowVisible,
+    isOverflowVisible = _ref$isOverflowVisibl === void 0 ? true : _ref$isOverflowVisibl;
   var isMobile = useMediaQuery({
     query: '(max-width: 767.98px)'
   });
@@ -114,19 +128,6 @@ ModalDialog.propTypes = {
   /** Specifies whether overflow is visible in the modal */
   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/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","_classNames","children","title","isOpen","onClose","size","variant","hasCloseButton","closeLabel","isFullscreenScroll","className","isFullscreenOnMobile","isBlocking","zIndex","isOverflowVisible","isMobile","query","showFullScreen","createElement","role","_defineProperty","concat","as","iconAs","invertColors","src","alt","propTypes","node","isRequired","string","func","bool","oneOf","number","defaultProps","undefined","Header","Title","Footer","CloseButton","Body","Hero"],"sources":["../../src/Modal/ModalDialog.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useMediaQuery } from 'react-responsive';\nimport ModalLayer from './ModalLayer';\nimport ModalCloseButton from './ModalCloseButton';\nimport ModalDialogHeader from './ModalDialogHeader';\nimport ModalDialogTitle from './ModalDialogTitle';\nimport ModalDialogFooter from './ModalDialogFooter';\nimport ModalDialogBody from './ModalDialogBody';\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\nfunction ModalDialog({\n  children,\n  title,\n  isOpen,\n  onClose,\n  size,\n  variant,\n  hasCloseButton,\n  closeLabel,\n  isFullscreenScroll,\n  className,\n  isFullscreenOnMobile,\n  isBlocking,\n  zIndex,\n  isOverflowVisible,\n}) {\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,\n};\n\nModalDialog.defaultProps = {\n  isOpen: false,\n  hasCloseButton: true,\n  size: 'md',\n  variant: 'default',\n  closeLabel: MODAL_DIALOG_CLOSE_LABEL,\n  className: undefined,\n  isFullscreenScroll: false,\n  isFullscreenOnMobile: false,\n  isBlocking: false,\n  zIndex: undefined,\n  isOverflowVisible: true,\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","ModalLayer","ModalCloseButton","ModalDialogHeader","ModalDialogTitle","ModalDialogFooter","ModalDialogBody","ModalDialogHero","Icon","IconButton","Close","MODAL_DIALOG_CLOSE_LABEL","ModalDialog","_ref","_classNames","children","title","_ref$isOpen","isOpen","onClose","_ref$size","size","_ref$variant","variant","_ref$hasCloseButton","hasCloseButton","_ref$closeLabel","closeLabel","_ref$isFullscreenScro","isFullscreenScroll","className","_ref$isFullscreenOnMo","isFullscreenOnMobile","_ref$isBlocking","isBlocking","zIndex","_ref$isOverflowVisibl","isOverflowVisible","isMobile","query","showFullScreen","createElement","role","_defineProperty","concat","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 = true,\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,\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/ModalDialogHeader.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ComponentWithAsProp } from '../utils/types/bootstrap';
+export interface Props {
+    as?: string;
+    children: React.ReactNode;
+    className?: string;
+}
+type HeaderType = ComponentWithAsProp<'div', Props>;
+declare const ModalDialogHeader: HeaderType;
+export default ModalDialogHeader;

package/dist/Modal/ModalDialogHeader.js

@@ -7,17 +7,20 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/* eslint-disable react/require-default-props */
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-function ModalDialogHeader(_ref) {
-  var as = _ref.as,
+var ModalDialogHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$as = _ref.as,
+    as = _ref$as === void 0 ? 'div' : _ref$as,
     children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(as, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
     className: classNames('pgn__modal-header', props.className)
   }), children);
-}
+});
 ModalDialogHeader.propTypes = {
   /** Specifies the base element */
   as: PropTypes.elementType,
@@ -26,9 +29,5 @@ ModalDialogHeader.propTypes = {
   /** Specifies class name to append to the base element */
   className: PropTypes.string
 };
-ModalDialogHeader.defaultProps = {
-  as: 'div',
-  className: undefined
-};
 export default ModalDialogHeader;
 //# sourceMappingURL=ModalDialogHeader.js.map

package/dist/Modal/ModalDialogHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalDialogHeader.js","names":["React","PropTypes","classNames","ModalDialogHeader","_ref","as","children","props","_objectWithoutProperties","_excluded","createElement","_objectSpread","className","propTypes","elementType","node","isRequired","string","defaultProps","undefined"],"sources":["../../src/Modal/ModalDialogHeader.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nfunction ModalDialogHeader({\n  as,\n  children,\n  ...props\n}) {\n  return React.createElement(\n    as,\n    {\n      ...props,\n      className: classNames('pgn__modal-header', props.className),\n    },\n    children,\n  );\n}\n\nModalDialogHeader.propTypes = {\n  /** Specifies the base element */\n  as: PropTypes.elementType,\n  /** Specifies the contents of the header */\n  children: PropTypes.node.isRequired,\n  /** Specifies class name to append to the base element */\n  className: PropTypes.string,\n};\n\nModalDialogHeader.defaultProps = {\n  as: 'div',\n  className: undefined,\n};\n\nexport default ModalDialogHeader;\n"],"mappings":";;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,iBAAiBA,CAAAC,IAAA,EAIvB;EAAA,IAHDC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IACFC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACLC,KAAK,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EAER,oBAAOT,KAAK,CAACU,aAAa,CACxBL,EAAE,EAAAM,aAAA,CAAAA,aAAA,KAEGJ,KAAK;IACRK,SAAS,EAAEV,UAAU,CAAC,mBAAmB,EAAEK,KAAK,CAACK,SAAS;EAAC,IAE7DN,QACF,CAAC;AACH;AAEAH,iBAAiB,CAACU,SAAS,GAAG;EAC5B;EACAR,EAAE,EAAEJ,SAAS,CAACa,WAAW;EACzB;EACAR,QAAQ,EAAEL,SAAS,CAACc,IAAI,CAACC,UAAU;EACnC;EACAJ,SAAS,EAAEX,SAAS,CAACgB;AACvB,CAAC;AAEDd,iBAAiB,CAACe,YAAY,GAAG;EAC/Bb,EAAE,EAAE,KAAK;EACTO,SAAS,EAAEO;AACb,CAAC;AAED,eAAehB,iBAAiB","ignoreList":[]}
+{"version":3,"file":"ModalDialogHeader.js","names":["React","PropTypes","classNames","ModalDialogHeader","forwardRef","_ref","ref","_ref$as","as","children","props","_objectWithoutProperties","_excluded","createElement","_objectSpread","className","propTypes","elementType","node","isRequired","string"],"sources":["../../src/Modal/ModalDialogHeader.tsx"],"sourcesContent":["/* eslint-disable react/require-default-props */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport type { ComponentWithAsProp } from '../utils/types/bootstrap';\n\nexport interface Props {\n  as?: string;\n  children: React.ReactNode;\n  className?: string;\n}\n\ntype HeaderType = ComponentWithAsProp<'div', Props>;\n\nconst ModalDialogHeader: HeaderType = React.forwardRef<HTMLDivElement, Props>(({\n  as = 'div',\n  children,\n  ...props\n}, ref) => (\n  React.createElement(\n    as,\n    {\n      ...props,\n      ref,\n      className: classNames('pgn__modal-header', props.className),\n    },\n    children,\n  )\n));\n\nModalDialogHeader.propTypes = {\n  /** Specifies the base element */\n  as: PropTypes.elementType,\n  /** Specifies the contents of the header */\n  children: PropTypes.node.isRequired,\n  /** Specifies class name to append to the base element */\n  className: PropTypes.string,\n};\n\nexport default ModalDialogHeader;\n"],"mappings":";;;;;;;;;AAAA;AACA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAWnC,IAAMC,iBAA6B,gBAAGH,KAAK,CAACI,UAAU,CAAwB,UAAAC,IAAA,EAI3EC,GAAG;EAAA,IAAAC,OAAA,GAAAF,IAAA,CAHJG,EAAE;IAAFA,EAAE,GAAAD,OAAA,cAAG,KAAK,GAAAA,OAAA;IACVE,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IACLC,KAAK,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA;EAAA,oBAERZ,KAAK,CAACa,aAAa,CACjBL,EAAE,EAAAM,aAAA,CAAAA,aAAA,KAEGJ,KAAK;IACRJ,GAAG,EAAHA,GAAG;IACHS,SAAS,EAAEb,UAAU,CAAC,mBAAmB,EAAEQ,KAAK,CAACK,SAAS;EAAC,IAE7DN,QACF,CAAC;AAAA,CACF,CAAC;AAEFN,iBAAiB,CAACa,SAAS,GAAG;EAC5B;EACAR,EAAE,EAAEP,SAAS,CAACgB,WAAW;EACzB;EACAR,QAAQ,EAAER,SAAS,CAACiB,IAAI,CAACC,UAAU;EACnC;EACAJ,SAAS,EAAEd,SAAS,CAACmB;AACvB,CAAC;AAED,eAAejB,iBAAiB","ignoreList":[]}

package/dist/Modal/ModalLayer.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+declare function ModalBackdrop({ onClick }: {
+    onClick?: () => void;
+}): React.JSX.Element;
+declare namespace ModalBackdrop {
+    var propTypes: {
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+declare function ModalContentContainer({ children }: {
+    children?: React.ReactNode;
+}): React.JSX.Element;
+declare namespace ModalContentContainer {
+    var propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+}
+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
+ * in a "mode" where a layer on top of the application is interactive while the
+ * rest of the application is made non-interactive. The assumption made by this
+ * component is that if a modal object is visible then it is "enabled"
+ */
+declare function ModalLayer({ children, onClose, isOpen, isBlocking, zIndex, }: Props): React.JSX.Element | null;
+declare namespace ModalLayer {
+    var propTypes: {
+        /** Specifies the contents of the modal */
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        /** A callback function for when the modal is dismissed */
+        onClose: PropTypes.Validator<(...args: any[]) => any>;
+        /** Is the modal dialog open or closed */
+        isOpen: PropTypes.Validator<boolean>;
+        /** Prevent clicking on the backdrop or pressing Esc to close the modal */
+        isBlocking: PropTypes.Requireable<boolean>;
+        /** Specifies the z-index of the modal */
+        zIndex: PropTypes.Requireable<number>;
+    };
+}
+export { ModalBackdrop, ModalContentContainer };
+export default ModalLayer;

package/dist/Modal/ModalLayer.js

@@ -22,13 +22,11 @@ function ModalBackdrop(_ref) {
 ModalBackdrop.propTypes = {
   onClick: PropTypes.func
 };
-ModalBackdrop.defaultProps = {
-  onClick: undefined
-};
 
 // istanbul ignore next
 function ModalContentContainer(_ref2) {
-  var children = _ref2.children;
+  var _ref2$children = _ref2.children,
+    children = _ref2$children === void 0 ? null : _ref2$children;
   return /*#__PURE__*/React.createElement("div", {
     className: "pgn__modal-content-container"
   }, children);
@@ -36,10 +34,6 @@ function ModalContentContainer(_ref2) {
 ModalContentContainer.propTypes = {
   children: PropTypes.node
 };
-ModalContentContainer.defaultProps = {
-  children: null
-};
-
 /**
  * The ModalLayer should be used for any component that wishes to engage the user
  * in a "mode" where a layer on top of the application is interactive while the
@@ -50,7 +44,8 @@ function ModalLayer(_ref3) {
   var children = _ref3.children,
     onClose = _ref3.onClose,
     isOpen = _ref3.isOpen,
-    isBlocking = _ref3.isBlocking,
+    _ref3$isBlocking = _ref3.isBlocking,
+    isBlocking = _ref3$isBlocking === void 0 ? false : _ref3$isBlocking,
     zIndex = _ref3.zIndex;
   useEffect(function () {
     if (isOpen) {
@@ -65,7 +60,7 @@ function ModalLayer(_ref3) {
   if (!isOpen) {
     return null;
   }
-  var handleClose = isBlocking ? null : onClose;
+  var handleClose = isBlocking ? undefined : onClose;
   return /*#__PURE__*/React.createElement(ModalContextProvider, {
     onClose: onClose,
     isOpen: isOpen,
@@ -93,10 +88,6 @@ ModalLayer.propTypes = {
   /** Specifies the z-index of the modal */
   zIndex: PropTypes.number
 };
-ModalLayer.defaultProps = {
-  isBlocking: false,
-  zIndex: undefined
-};
 export { ModalBackdrop, ModalContentContainer };
 export default ModalLayer;
 //# sourceMappingURL=ModalLayer.js.map

package/dist/Modal/ModalLayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalLayer.js","names":["React","useEffect","classNames","PropTypes","FocusOn","Portal","ModalContextProvider","ModalBackdrop","_ref","onClick","createElement","className","onKeyDown","propTypes","func","defaultProps","undefined","ModalContentContainer","_ref2","children","node","ModalLayer","_ref3","onClose","isOpen","isBlocking","zIndex","document","body","classList","add","remove","handleClose","allowPinchZoom","scrollLock","enabled","onEscapeKey","onClickOutside","concat","isRequired","bool","number"],"sources":["../../src/Modal/ModalLayer.jsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport { FocusOn } from 'react-focus-on';\nimport Portal from './Portal';\nimport { ModalContextProvider } from './ModalContext';\n\n// istanbul ignore next\nfunction ModalBackdrop({ onClick }) {\n  return (\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    <div\n      className=\"pgn__modal-backdrop\"\n      onClick={onClick}\n      onKeyDown={onClick}\n      data-testid=\"modal-backdrop\"\n    />\n  );\n}\n\nModalBackdrop.propTypes = {\n  onClick: PropTypes.func,\n};\n\nModalBackdrop.defaultProps = {\n  onClick: undefined,\n};\n\n// istanbul ignore next\nfunction ModalContentContainer({ children }) {\n  return <div className=\"pgn__modal-content-container\">{children}</div>;\n}\n\nModalContentContainer.propTypes = {\n  children: PropTypes.node,\n};\n\nModalContentContainer.defaultProps = {\n  children: null,\n};\n\n/**\n * The ModalLayer should be used for any component that wishes to engage the user\n * in a \"mode\" where a layer on top of the application is interactive while the\n * rest of the application is made non-interactive. The assumption made by this\n * component is that if a modal object is visible then it is \"enabled\"\n */\nfunction ModalLayer({\n  children, onClose, isOpen, isBlocking, zIndex,\n}) {\n  useEffect(() => {\n    if (isOpen) {\n      document.body.classList.add('pgn__hidden-scroll-padding-right');\n    } else {\n      document.body.classList.remove('pgn__hidden-scroll-padding-right');\n    }\n    return () => {\n      document.body.classList.remove('pgn__hidden-scroll-padding-right');\n    };\n  }, [isOpen]);\n\n  if (!isOpen) {\n    return null;\n  }\n\n  const handleClose = isBlocking ? null : onClose;\n\n  return (\n    <ModalContextProvider onClose={onClose} isOpen={isOpen} isBlocking={isBlocking}>\n      <Portal>\n        <FocusOn\n          allowPinchZoom\n          scrollLock\n          enabled={isOpen}\n          onEscapeKey={handleClose}\n          onClickOutside={handleClose}\n          className={classNames(\n            'pgn__modal-layer',\n            zIndex ? `zindex-${zIndex}` : '',\n          )}\n        >\n          <ModalContentContainer>\n            <ModalBackdrop onClick={handleClose} />\n            {children}\n          </ModalContentContainer>\n        </FocusOn>\n      </Portal>\n    </ModalContextProvider>\n  );\n}\n\nModalLayer.propTypes = {\n  /** Specifies the contents of the modal */\n  children: PropTypes.node.isRequired,\n  /** A callback function for when the modal is dismissed */\n  onClose: PropTypes.func.isRequired,\n  /** Is the modal dialog open or closed */\n  isOpen: PropTypes.bool.isRequired,\n  /** Prevent clicking on the backdrop or pressing Esc to close the modal */\n  isBlocking: PropTypes.bool,\n  /** Specifies the z-index of the modal */\n  zIndex: PropTypes.number,\n};\n\nModalLayer.defaultProps = {\n  isBlocking: false,\n  zIndex: undefined,\n};\n\nexport { ModalBackdrop, ModalContentContainer };\nexport default ModalLayer;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ModalLayer.js","names":["React","useEffect","classNames","PropTypes","FocusOn","Portal","ModalContextProvider","ModalBackdrop","_ref","onClick","createElement","className","onKeyDown","propTypes","func","ModalContentContainer","_ref2","_ref2$children","children","node","ModalLayer","_ref3","onClose","isOpen","_ref3$isBlocking","isBlocking","zIndex","document","body","classList","add","remove","handleClose","undefined","allowPinchZoom","scrollLock","enabled","onEscapeKey","onClickOutside","concat","isRequired","bool","number"],"sources":["../../src/Modal/ModalLayer.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport { FocusOn } from 'react-focus-on';\nimport Portal from './Portal';\nimport { ModalContextProvider } from './ModalContext';\n\n// istanbul ignore next\nfunction ModalBackdrop({ onClick }: { onClick?: () => void }) {\n  return (\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    <div\n      className=\"pgn__modal-backdrop\"\n      onClick={onClick}\n      onKeyDown={onClick}\n      data-testid=\"modal-backdrop\"\n    />\n  );\n}\n\nModalBackdrop.propTypes = {\n  onClick: PropTypes.func,\n};\n\n// istanbul ignore next\nfunction ModalContentContainer({ children = null }: { children?: React.ReactNode }) {\n  return <div className=\"pgn__modal-content-container\">{children}</div>;\n}\n\nModalContentContainer.propTypes = {\n  children: PropTypes.node,\n};\n\ninterface Props {\n  /** Specifies the contents of the modal */\n  children: React.ReactNode;\n  /** A callback function for when the modal is dismissed */\n  onClose: () => void;\n  /** Is the modal dialog open or closed */\n  isOpen: 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}\n\n/**\n * The ModalLayer should be used for any component that wishes to engage the user\n * in a \"mode\" where a layer on top of the application is interactive while the\n * rest of the application is made non-interactive. The assumption made by this\n * component is that if a modal object is visible then it is \"enabled\"\n */\nfunction ModalLayer({\n  children, onClose, isOpen, isBlocking = false, zIndex,\n}: Props) {\n  useEffect(() => {\n    if (isOpen) {\n      document.body.classList.add('pgn__hidden-scroll-padding-right');\n    } else {\n      document.body.classList.remove('pgn__hidden-scroll-padding-right');\n    }\n    return () => {\n      document.body.classList.remove('pgn__hidden-scroll-padding-right');\n    };\n  }, [isOpen]);\n\n  if (!isOpen) {\n    return null;\n  }\n\n  const handleClose = isBlocking ? undefined : onClose;\n\n  return (\n    <ModalContextProvider onClose={onClose} isOpen={isOpen} isBlocking={isBlocking}>\n      <Portal>\n        <FocusOn\n          allowPinchZoom\n          scrollLock\n          enabled={isOpen}\n          onEscapeKey={handleClose}\n          onClickOutside={handleClose}\n          className={classNames(\n            'pgn__modal-layer',\n            zIndex ? `zindex-${zIndex}` : '',\n          )}\n        >\n          <ModalContentContainer>\n            <ModalBackdrop onClick={handleClose} />\n            {children}\n          </ModalContentContainer>\n        </FocusOn>\n      </Portal>\n    </ModalContextProvider>\n  );\n}\n\nModalLayer.propTypes = {\n  /** Specifies the contents of the modal */\n  children: PropTypes.node.isRequired,\n  /** A callback function for when the modal is dismissed */\n  onClose: PropTypes.func.isRequired,\n  /** Is the modal dialog open or closed */\n  isOpen: PropTypes.bool.isRequired,\n  /** Prevent clicking on the backdrop or pressing Esc to close the modal */\n  isBlocking: PropTypes.bool,\n  /** Specifies the z-index of the modal */\n  zIndex: PropTypes.number,\n};\n\nexport { ModalBackdrop, ModalContentContainer };\nexport default ModalLayer;\n"],"mappings":"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","ignoreList":[]}

package/dist/Modal/Portal.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface Props {
+    children: React.ReactNode;
+}
+declare class Portal extends React.Component<Props> {
+    private rootName;
+    private rootElement;
+    constructor(props: Props);
+    render(): React.ReactPortal | null;
+}
+export default Portal;

package/dist/Modal/Portal.js

@@ -2,8 +2,6 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -11,9 +9,11 @@ function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) ===
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React from 'react';
 import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
 var Portal = /*#__PURE__*/function (_React$Component) {
   _inherits(Portal, _React$Component);
   var _super = _createSuper(Portal);
@@ -21,6 +21,8 @@ var Portal = /*#__PURE__*/function (_React$Component) {
     var _this;
     _classCallCheck(this, Portal);
     _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "rootName", void 0);
+    _defineProperty(_assertThisInitialized(_this), "rootElement", void 0);
     _this.rootName = 'paragon-portal-root';
     // istanbul ignore if
     if (typeof document === 'undefined') {
@@ -47,8 +49,5 @@ var Portal = /*#__PURE__*/function (_React$Component) {
   }]);
   return Portal;
 }(React.Component);
-Portal.propTypes = {
-  children: PropTypes.node.isRequired
-};
 export default Portal;
 //# sourceMappingURL=Portal.js.map

package/dist/Modal/Portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.js","names":["React","ReactDOM","PropTypes","Portal","_React$Component","_inherits","_super","_createSuper","props","_this","_classCallCheck","call","rootName","document","rootElement","getElementById","createElement","setAttribute","body","appendChild","_createClass","key","value","render","createPortal","children","Component","propTypes","node","isRequired"],"sources":["../../src/Modal/Portal.jsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\n\nclass Portal extends React.Component {\n  constructor(props) {\n    super(props);\n    this.rootName = 'paragon-portal-root';\n    // istanbul ignore if\n    if (typeof document === 'undefined') {\n      this.rootElement = null;\n    } else if (document.getElementById(this.rootName)) {\n      this.rootElement = document.getElementById(this.rootName);\n    } else {\n      const rootElement = document.createElement('div');\n      rootElement.setAttribute('id', this.rootName);\n      this.rootElement = document.body.appendChild(rootElement);\n    }\n  }\n\n  render() {\n    // istanbul ignore else\n    if (this.rootElement) {\n      return ReactDOM.createPortal(\n        this.props.children,\n        this.rootElement,\n      );\n    }\n    // istanbul ignore next\n    return null;\n  }\n}\n\nPortal.propTypes = {\n  children: PropTypes.node.isRequired,\n};\n\nexport default Portal;\n"],"mappings":";;;;;;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,QAAQ,MAAM,WAAW;AAChC,OAAOC,SAAS,MAAM,YAAY;AAAC,IAE7BC,MAAM,0BAAAC,gBAAA;EAAAC,SAAA,CAAAF,MAAA,EAAAC,gBAAA;EAAA,IAAAE,MAAA,GAAAC,YAAA,CAAAJ,MAAA;EACV,SAAAA,OAAYK,KAAK,EAAE;IAAA,IAAAC,KAAA;IAAAC,eAAA,OAAAP,MAAA;IACjBM,KAAA,GAAAH,MAAA,CAAAK,IAAA,OAAMH,KAAK;IACXC,KAAA,CAAKG,QAAQ,GAAG,qBAAqB;IACrC;IACA,IAAI,OAAOC,QAAQ,KAAK,WAAW,EAAE;MACnCJ,KAAA,CAAKK,WAAW,GAAG,IAAI;IACzB,CAAC,MAAM,IAAID,QAAQ,CAACE,cAAc,CAACN,KAAA,CAAKG,QAAQ,CAAC,EAAE;MACjDH,KAAA,CAAKK,WAAW,GAAGD,QAAQ,CAACE,cAAc,CAACN,KAAA,CAAKG,QAAQ,CAAC;IAC3D,CAAC,MAAM;MACL,IAAME,WAAW,GAAGD,QAAQ,CAACG,aAAa,CAAC,KAAK,CAAC;MACjDF,WAAW,CAACG,YAAY,CAAC,IAAI,EAAER,KAAA,CAAKG,QAAQ,CAAC;MAC7CH,KAAA,CAAKK,WAAW,GAAGD,QAAQ,CAACK,IAAI,CAACC,WAAW,CAACL,WAAW,CAAC;IAC3D;IAAC,OAAAL,KAAA;EACH;EAACW,YAAA,CAAAjB,MAAA;IAAAkB,GAAA;IAAAC,KAAA,EAED,SAAAC,OAAA,EAAS;MACP;MACA,IAAI,IAAI,CAACT,WAAW,EAAE;QACpB,oBAAOb,QAAQ,CAACuB,YAAY,CAC1B,IAAI,CAAChB,KAAK,CAACiB,QAAQ,EACnB,IAAI,CAACX,WACP,CAAC;MACH;MACA;MACA,OAAO,IAAI;IACb;EAAC;EAAA,OAAAX,MAAA;AAAA,EA1BkBH,KAAK,CAAC0B,SAAS;AA6BpCvB,MAAM,CAACwB,SAAS,GAAG;EACjBF,QAAQ,EAAEvB,SAAS,CAAC0B,IAAI,CAACC;AAC3B,CAAC;AAED,eAAe1B,MAAM","ignoreList":[]}
+{"version":3,"file":"Portal.js","names":["React","ReactDOM","Portal","_React$Component","_inherits","_super","_createSuper","props","_this","_classCallCheck","call","_defineProperty","_assertThisInitialized","rootName","document","rootElement","getElementById","createElement","setAttribute","body","appendChild","_createClass","key","value","render","createPortal","children","Component"],"sources":["../../src/Modal/Portal.tsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\ninterface Props {\n  children: React.ReactNode;\n}\n\nclass Portal extends React.Component<Props> {\n  private rootName: string;\n\n  private rootElement: HTMLElement | null;\n\n  constructor(props: Props) {\n    super(props);\n    this.rootName = 'paragon-portal-root';\n    // istanbul ignore if\n    if (typeof document === 'undefined') {\n      this.rootElement = null;\n    } else if (document.getElementById(this.rootName)) {\n      this.rootElement = document.getElementById(this.rootName);\n    } else {\n      const rootElement = document.createElement('div');\n      rootElement.setAttribute('id', this.rootName);\n      this.rootElement = document.body.appendChild(rootElement);\n    }\n  }\n\n  render() {\n    // istanbul ignore else\n    if (this.rootElement) {\n      return ReactDOM.createPortal(\n        this.props.children,\n        this.rootElement,\n      );\n    }\n    // istanbul ignore next\n    return null;\n  }\n}\n\nexport default Portal;\n"],"mappings":";;;;;;;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,QAAQ,MAAM,WAAW;AAAC,IAM3BC,MAAM,0BAAAC,gBAAA;EAAAC,SAAA,CAAAF,MAAA,EAAAC,gBAAA;EAAA,IAAAE,MAAA,GAAAC,YAAA,CAAAJ,MAAA;EAKV,SAAAA,OAAYK,KAAY,EAAE;IAAA,IAAAC,KAAA;IAAAC,eAAA,OAAAP,MAAA;IACxBM,KAAA,GAAAH,MAAA,CAAAK,IAAA,OAAMH,KAAK;IAAEI,eAAA,CAAAC,sBAAA,CAAAJ,KAAA;IAAAG,eAAA,CAAAC,sBAAA,CAAAJ,KAAA;IACbA,KAAA,CAAKK,QAAQ,GAAG,qBAAqB;IACrC;IACA,IAAI,OAAOC,QAAQ,KAAK,WAAW,EAAE;MACnCN,KAAA,CAAKO,WAAW,GAAG,IAAI;IACzB,CAAC,MAAM,IAAID,QAAQ,CAACE,cAAc,CAACR,KAAA,CAAKK,QAAQ,CAAC,EAAE;MACjDL,KAAA,CAAKO,WAAW,GAAGD,QAAQ,CAACE,cAAc,CAACR,KAAA,CAAKK,QAAQ,CAAC;IAC3D,CAAC,MAAM;MACL,IAAME,WAAW,GAAGD,QAAQ,CAACG,aAAa,CAAC,KAAK,CAAC;MACjDF,WAAW,CAACG,YAAY,CAAC,IAAI,EAAEV,KAAA,CAAKK,QAAQ,CAAC;MAC7CL,KAAA,CAAKO,WAAW,GAAGD,QAAQ,CAACK,IAAI,CAACC,WAAW,CAACL,WAAW,CAAC;IAC3D;IAAC,OAAAP,KAAA;EACH;EAACa,YAAA,CAAAnB,MAAA;IAAAoB,GAAA;IAAAC,KAAA,EAED,SAAAC,OAAA,EAAS;MACP;MACA,IAAI,IAAI,CAACT,WAAW,EAAE;QACpB,oBAAOd,QAAQ,CAACwB,YAAY,CAC1B,IAAI,CAAClB,KAAK,CAACmB,QAAQ,EACnB,IAAI,CAACX,WACP,CAAC;MACH;MACA;MACA,OAAO,IAAI;IACb;EAAC;EAAA,OAAAb,MAAA;AAAA,EA9BkBF,KAAK,CAAC2B,SAAS;AAiCpC,eAAezB,MAAM","ignoreList":[]}

package/dist/hooks/useArrowKeyNavigation.js

@@ -21,6 +21,7 @@ function handleEnter(_ref) {
   event.preventDefault();
 }
 function handleArrowKey(_ref2) {
+  var _nextElement;
   var event = _ref2.event,
     currentIndex = _ref2.currentIndex,
     availableElements = _ref2.availableElements;
@@ -44,9 +45,7 @@ function handleArrowKey(_ref2) {
     var _availableElements = _slicedToArray(availableElements, 1);
     nextElement = _availableElements[0];
   }
-
-  // eslint-disable-next-line no-unused-expressions
-  nextElement && nextElement.focus();
+  (_nextElement = nextElement) === null || _nextElement === void 0 ? void 0 : _nextElement.focus();
   event.preventDefault();
 }