@openedx/paragon 23.10.0 → 23.11.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/IconButton/index.d.ts

@@ -60,7 +60,7 @@ declare namespace IconButtonWithTooltip {
             iconName?: string | undefined;
             icon?: any[] | undefined;
         } | undefined;
-        variant?: "primary" | "success" | "warning" | "secondary" | "danger" | "dark" | "light" | "black" | "brand" | undefined;
+        variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "dark" | "light" | "black" | "brand" | undefined;
         size?: "sm" | "md" | "inline" | undefined;
         children?: undefined;
         defaultChecked?: boolean | undefined;

package/dist/Modal/ModalDialog.d.ts

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

package/dist/Modal/ModalDialog.js

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

package/dist/Modal/ModalDialog.js.map

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

package/dist/Modal/messages.d.ts

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

package/dist/Modal/messages.js

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

package/dist/Modal/messages.js.map

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