@openedx/paragon 22.15.3 → 22.16.0

package/dist/Toast/ToastContainer.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+interface ToastContainerProps {
+    children: ReactNode;
+}
+declare function ToastContainer({ children }: ToastContainerProps): import("react").ReactPortal | null;
+export default ToastContainer;

package/dist/Toast/ToastContainer.js

@@ -1,34 +1,24 @@
-import React from 'react';
+import { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-class ToastContainer extends React.Component {
-  constructor(props) {
-    super(props);
-    this.toastRootName = 'toast-root';
-    if (typeof document === 'undefined') {
-      this.rootElement = null;
-    } else if (document.getElementById(this.toastRootName)) {
-      this.rootElement = document.getElementById(this.toastRootName);
-    } else {
-      const rootElement = document.createElement('div');
-      rootElement.setAttribute('id', this.toastRootName);
-      rootElement.setAttribute('class', 'toast-container');
-      rootElement.setAttribute('role', 'alert');
-      rootElement.setAttribute('aria-live', 'polite');
-      rootElement.setAttribute('aria-atomic', 'true');
-      this.rootElement = document.body.appendChild(rootElement);
+const TOAST_ROOT_ID = 'toast-root';
+function ToastContainer(_ref) {
+  let {
+    children
+  } = _ref;
+  const [rootElement, setRootElement] = useState(null);
+  useEffect(() => {
+    if (typeof document !== 'undefined') {
+      let existingElement = document.getElementById(TOAST_ROOT_ID);
+      if (!existingElement) {
+        existingElement = document.createElement('div');
+        existingElement.id = TOAST_ROOT_ID;
+        existingElement.className = 'toast-container';
+        document.body.appendChild(existingElement);
+      }
+      setRootElement(existingElement);
     }
-  }
-  render() {
-    if (this.rootElement) {
-      return /*#__PURE__*/ReactDOM.createPortal(this.props.children, this.rootElement);
-    }
-    return null;
-  }
+  }, []);
+  return rootElement ? /*#__PURE__*/ReactDOM.createPortal(children, rootElement) : null;
 }
-ToastContainer.propTypes = {
-  /** Specifies contents of the component. */
-  children: PropTypes.node.isRequired
-};
 export default ToastContainer;
 //# sourceMappingURL=ToastContainer.js.map

package/dist/Toast/ToastContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastContainer.js","names":["React","ReactDOM","PropTypes","ToastContainer","Component","constructor","props","toastRootName","document","rootElement","getElementById","createElement","setAttribute","body","appendChild","render","createPortal","children","propTypes","node","isRequired"],"sources":["../../src/Toast/ToastContainer.jsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\n\nclass ToastContainer extends React.Component {\n  constructor(props) {\n    super(props);\n    this.toastRootName = 'toast-root';\n    if (typeof document === 'undefined') {\n      this.rootElement = null;\n    } else if (document.getElementById(this.toastRootName)) {\n      this.rootElement = document.getElementById(this.toastRootName);\n    } else {\n      const rootElement = document.createElement('div');\n      rootElement.setAttribute('id', this.toastRootName);\n      rootElement.setAttribute('class', 'toast-container');\n      rootElement.setAttribute('role', 'alert');\n      rootElement.setAttribute('aria-live', 'polite');\n      rootElement.setAttribute('aria-atomic', 'true');\n      this.rootElement = document.body.appendChild(rootElement);\n    }\n  }\n\n  render() {\n    if (this.rootElement) {\n      return ReactDOM.createPortal(\n        this.props.children,\n        this.rootElement,\n      );\n    }\n    return null;\n  }\n}\n\nToastContainer.propTypes = {\n  /** Specifies contents of the component. */\n  children: PropTypes.node.isRequired,\n};\n\nexport default ToastContainer;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,QAAQ,MAAM,WAAW;AAChC,OAAOC,SAAS,MAAM,YAAY;AAElC,MAAMC,cAAc,SAASH,KAAK,CAACI,SAAS,CAAC;EAC3CC,WAAWA,CAACC,KAAK,EAAE;IACjB,KAAK,CAACA,KAAK,CAAC;IACZ,IAAI,CAACC,aAAa,GAAG,YAAY;IACjC,IAAI,OAAOC,QAAQ,KAAK,WAAW,EAAE;MACnC,IAAI,CAACC,WAAW,GAAG,IAAI;IACzB,CAAC,MAAM,IAAID,QAAQ,CAACE,cAAc,CAAC,IAAI,CAACH,aAAa,CAAC,EAAE;MACtD,IAAI,CAACE,WAAW,GAAGD,QAAQ,CAACE,cAAc,CAAC,IAAI,CAACH,aAAa,CAAC;IAChE,CAAC,MAAM;MACL,MAAME,WAAW,GAAGD,QAAQ,CAACG,aAAa,CAAC,KAAK,CAAC;MACjDF,WAAW,CAACG,YAAY,CAAC,IAAI,EAAE,IAAI,CAACL,aAAa,CAAC;MAClDE,WAAW,CAACG,YAAY,CAAC,OAAO,EAAE,iBAAiB,CAAC;MACpDH,WAAW,CAACG,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC;MACzCH,WAAW,CAACG,YAAY,CAAC,WAAW,EAAE,QAAQ,CAAC;MAC/CH,WAAW,CAACG,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC;MAC/C,IAAI,CAACH,WAAW,GAAGD,QAAQ,CAACK,IAAI,CAACC,WAAW,CAACL,WAAW,CAAC;IAC3D;EACF;EAEAM,MAAMA,CAAA,EAAG;IACP,IAAI,IAAI,CAACN,WAAW,EAAE;MACpB,oBAAOR,QAAQ,CAACe,YAAY,CAC1B,IAAI,CAACV,KAAK,CAACW,QAAQ,EACnB,IAAI,CAACR,WACP,CAAC;IACH;IACA,OAAO,IAAI;EACb;AACF;AAEAN,cAAc,CAACe,SAAS,GAAG;EACzB;EACAD,QAAQ,EAAEf,SAAS,CAACiB,IAAI,CAACC;AAC3B,CAAC;AAED,eAAejB,cAAc","ignoreList":[]}
+{"version":3,"file":"ToastContainer.js","names":["useEffect","useState","ReactDOM","TOAST_ROOT_ID","ToastContainer","_ref","children","rootElement","setRootElement","document","existingElement","getElementById","createElement","id","className","body","appendChild","createPortal"],"sources":["../../src/Toast/ToastContainer.tsx"],"sourcesContent":["import { ReactNode, useEffect, useState } from 'react';\nimport ReactDOM from 'react-dom';\n\ninterface ToastContainerProps {\n  children: ReactNode;\n}\n\nconst TOAST_ROOT_ID = 'toast-root';\n\nfunction ToastContainer({ children }: ToastContainerProps) {\n  const [rootElement, setRootElement] = useState<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (typeof document !== 'undefined') {\n      let existingElement = document.getElementById(TOAST_ROOT_ID);\n\n      if (!existingElement) {\n        existingElement = document.createElement('div');\n        existingElement.id = TOAST_ROOT_ID;\n        existingElement.className = 'toast-container';\n        document.body.appendChild(existingElement);\n      }\n      setRootElement(existingElement);\n    }\n  }, []);\n\n  return rootElement ? ReactDOM.createPortal(children, rootElement) : null;\n}\n\nexport default ToastContainer;\n"],"mappings":"AAAA,SAAoBA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AACtD,OAAOC,QAAQ,MAAM,WAAW;AAMhC,MAAMC,aAAa,GAAG,YAAY;AAElC,SAASC,cAAcA,CAAAC,IAAA,EAAoC;EAAA,IAAnC;IAAEC;EAA8B,CAAC,GAAAD,IAAA;EACvD,MAAM,CAACE,WAAW,EAAEC,cAAc,CAAC,GAAGP,QAAQ,CAAqB,IAAI,CAAC;EAExED,SAAS,CAAC,MAAM;IACd,IAAI,OAAOS,QAAQ,KAAK,WAAW,EAAE;MACnC,IAAIC,eAAe,GAAGD,QAAQ,CAACE,cAAc,CAACR,aAAa,CAAC;MAE5D,IAAI,CAACO,eAAe,EAAE;QACpBA,eAAe,GAAGD,QAAQ,CAACG,aAAa,CAAC,KAAK,CAAC;QAC/CF,eAAe,CAACG,EAAE,GAAGV,aAAa;QAClCO,eAAe,CAACI,SAAS,GAAG,iBAAiB;QAC7CL,QAAQ,CAACM,IAAI,CAACC,WAAW,CAACN,eAAe,CAAC;MAC5C;MACAF,cAAc,CAACE,eAAe,CAAC;IACjC;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOH,WAAW,gBAAGL,QAAQ,CAACe,YAAY,CAACX,QAAQ,EAAEC,WAAW,CAAC,GAAG,IAAI;AAC1E;AAEA,eAAeH,cAAc","ignoreList":[]}

package/dist/Toast/ToastContainer.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "variables";
 
 .toast-container {
@@ -11,7 +12,7 @@
     left: 0;
   }
 
-  @media only screen and (width <= 768px) {
+  @media (max-width: map.get($grid-breakpoints, "md")) {
     bottom: $toast-container-gutter-sm;
     right: $toast-container-gutter-sm;
     left: $toast-container-gutter-sm;

package/dist/Toast/index.d.ts

@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+export declare const TOAST_CLOSE_LABEL_TEXT = "Close";
+export declare const TOAST_DELAY = 5000;
+interface ToastAction {
+    label: string;
+    href?: string;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+}
+interface ToastProps {
+    children: string;
+    onClose: () => void;
+    show: boolean;
+    action?: ToastAction;
+    closeLabel?: string;
+    delay?: number;
+    className?: string;
+}
+declare function Toast({ action, children, className, closeLabel, onClose, show, ...rest }: ToastProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Toast {
+    var defaultProps: {
+        action: null;
+        closeLabel: undefined;
+        delay: number;
+        className: undefined;
+    };
+    var propTypes: {
+        /** A string or an element that is rendered inside the main body of the `Toast`. */
+        children: PropTypes.Validator<string>;
+        /**
+         * A function that is called on close. It can be used to perform
+         * actions upon closing of the `Toast`, such as setting the "show"
+         * element to false.
+         * */
+        onClose: PropTypes.Validator<(...args: any[]) => any>;
+        /** Boolean used to control whether the `Toast` shows */
+        show: PropTypes.Validator<boolean>;
+        /**
+         * Fields used to build optional action button.
+         * `label` is a string rendered inside the button.
+         * `href` is a link that will render the action button as an anchor tag.
+         * `onClick` is a function that is called when the button is clicked.
+         */
+        action: PropTypes.Requireable<PropTypes.InferProps<{
+            label: PropTypes.Validator<string>;
+            href: PropTypes.Requireable<string>;
+            onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        }>>;
+        /**
+         * Alt text for the `Toast`'s dismiss button. Defaults to 'Close'.
+         */
+        closeLabel: PropTypes.Requireable<string>;
+        /** Time in milliseconds for which the `Toast` will display. */
+        delay: PropTypes.Requireable<number>;
+        /** Class names for the `BaseToast` component */
+        className: PropTypes.Requireable<string>;
+    };
+}
+export default Toast;

package/dist/Toast/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useState","classNames","PropTypes","BaseToast","useIntl","Close","ToastContainer","Button","Icon","IconButton","TOAST_CLOSE_LABEL_TEXT","TOAST_DELAY","Toast","_ref","action","children","className","closeLabel","onClose","show","rest","intl","autoHide","setAutoHide","intlCloseLabel","formatMessage","id","defaultMessage","description","createElement","autohide","onBlur","onFocus","onMouseOut","onMouseOver","iconAs","alt","src","onClick","variant","invertColors","as","href","size","label","defaultProps","undefined","delay","propTypes","string","isRequired","func","bool","shape","number"],"sources":["../../src/Toast/index.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\n\nimport BaseToast from 'react-bootstrap/Toast';\nimport { useIntl } from 'react-intl';\n\nimport { Close } from '../../icons';\nimport ToastContainer from './ToastContainer';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport IconButton from '../IconButton';\n\nexport const TOAST_CLOSE_LABEL_TEXT = 'Close';\nexport const TOAST_DELAY = 5000;\n\nfunction Toast({\n  action, children, className, closeLabel, onClose, show, ...rest\n}) {\n  const intl = useIntl();\n  const [autoHide, setAutoHide] = useState(true);\n  const intlCloseLabel = closeLabel || intl.formatMessage({\n    id: 'pgn.Toast.closeLabel',\n    defaultMessage: 'Close',\n    description: 'Close label for Toast component',\n  });\n  return (\n    <ToastContainer>\n      <BaseToast\n        autohide={autoHide}\n        className={classNames('pgn__toast', className)}\n        onClose={onClose}\n        onBlur={() => setAutoHide(true)}\n        onFocus={() => setAutoHide(false)}\n        onMouseOut={() => setAutoHide(true)}\n        onMouseOver={() => setAutoHide(false)}\n        show={show}\n        {...rest}\n      >\n        <div\n          className=\"toast-header\"\n        >\n          <p className=\"small\">{children}</p>\n          <div className=\"toast-header-btn-container\">\n            <IconButton\n              iconAs={Icon}\n              alt={intlCloseLabel}\n              className=\"align-self-start\"\n              src={Close}\n              onClick={onClose}\n              variant=\"primary\"\n              invertColors\n            />\n          </div>\n        </div>\n        {action && (\n          <Button\n            as={action.href ? 'a' : 'button'}\n            href={action.href}\n            onClick={action.onClick}\n            size=\"sm\"\n            variant=\"inverse-outline-primary\"\n          >\n            {action.label}\n          </Button>\n        )}\n      </BaseToast>\n    </ToastContainer>\n  );\n}\n\nToast.defaultProps = {\n  action: null,\n  closeLabel: undefined,\n  delay: TOAST_DELAY,\n  className: undefined,\n};\n\nToast.propTypes = {\n  /** A string or an element that is rendered inside the main body of the `Toast`. */\n  children: PropTypes.string.isRequired,\n  /**\n   * A function that is called on close. It can be used to perform\n   * actions upon closing of the `Toast`, such as setting the \"show\"\n   * element to false.\n   * */\n  onClose: PropTypes.func.isRequired,\n  /** Boolean used to control whether the `Toast` shows */\n  show: PropTypes.bool.isRequired,\n  /**\n   * Fields used to build optional action button.\n   * `label` is a string rendered inside the button.\n   * `href` is a link that will render the action button as an anchor tag.\n   * `onClick` is a function that is called when the button is clicked.\n   */\n  action: PropTypes.shape({\n    label: PropTypes.string.isRequired,\n    href: PropTypes.string,\n    onClick: PropTypes.func,\n  }),\n  /**\n   * Alt text for the `Toast`'s dismiss button. Defaults to 'Close'.\n   */\n  closeLabel: PropTypes.string,\n  /** Time in milliseconds for which the `Toast` will display. */\n  delay: PropTypes.number,\n  /** Class names for the `BaseToast` component */\n  className: PropTypes.string,\n};\n\nexport default Toast;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useState","classNames","PropTypes","BaseToast","useIntl","Close","ToastContainer","Button","Icon","IconButton","TOAST_CLOSE_LABEL_TEXT","TOAST_DELAY","Toast","_ref","action","children","className","closeLabel","onClose","show","rest","intl","autoHide","setAutoHide","intlCloseLabel","formatMessage","id","defaultMessage","description","createElement","autohide","onBlur","onFocus","onMouseOut","onMouseOver","iconAs","alt","src","onClick","variant","invertColors","as","href","size","label","defaultProps","undefined","delay","propTypes","string","isRequired","func","bool","shape","number"],"sources":["../../src/Toast/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport BaseToast from 'react-bootstrap/Toast';\nimport { useIntl } from 'react-intl';\n\nimport { Close } from '../../icons';\nimport ToastContainer from './ToastContainer';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport IconButton from '../IconButton';\n\nexport const TOAST_CLOSE_LABEL_TEXT = 'Close';\nexport const TOAST_DELAY = 5000;\n\ninterface ToastAction {\n  label: string;\n  href?: string;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n}\n\ninterface ToastProps {\n  children: string;\n  onClose: () => void;\n  show: boolean;\n  action?: ToastAction;\n  closeLabel?: string;\n  delay?: number;\n  className?: string;\n}\n\nfunction Toast({\n  action,\n  children,\n  className,\n  closeLabel,\n  onClose,\n  show,\n  ...rest\n}: ToastProps) {\n  const intl = useIntl();\n  const [autoHide, setAutoHide] = useState(true);\n\n  const intlCloseLabel = closeLabel || intl.formatMessage({\n    id: 'pgn.Toast.closeLabel',\n    defaultMessage: 'Close',\n    description: 'Close label for Toast component',\n  });\n\n  return (\n    <ToastContainer>\n      <BaseToast\n        autohide={autoHide}\n        className={classNames('pgn__toast', className)}\n        onClose={onClose}\n        onBlur={() => setAutoHide(true)}\n        onFocus={() => setAutoHide(false)}\n        onMouseOut={() => setAutoHide(true)}\n        onMouseOver={() => setAutoHide(false)}\n        show={show}\n        {...rest}\n      >\n        <div className=\"toast-header\">\n          <p className=\"small\">{children}</p>\n          <div className=\"toast-header-btn-container\">\n            <IconButton\n              iconAs={Icon}\n              alt={intlCloseLabel}\n              className=\"align-self-start\"\n              src={Close}\n              onClick={onClose}\n              variant=\"primary\"\n              invertColors\n            />\n          </div>\n        </div>\n        {action && (\n          <Button\n            as={action.href ? 'a' : 'button'}\n            href={action.href}\n            onClick={action.onClick}\n            size=\"sm\"\n            variant=\"inverse-outline-primary\"\n          >\n            {action.label}\n          </Button>\n        )}\n      </BaseToast>\n    </ToastContainer>\n  );\n}\n\nToast.defaultProps = {\n  action: null,\n  closeLabel: undefined,\n  delay: TOAST_DELAY,\n  className: undefined,\n};\n\nToast.propTypes = {\n  /** A string or an element that is rendered inside the main body of the `Toast`. */\n  children: PropTypes.string.isRequired,\n  /**\n   * A function that is called on close. It can be used to perform\n   * actions upon closing of the `Toast`, such as setting the \"show\"\n   * element to false.\n   * */\n  onClose: PropTypes.func.isRequired,\n  /** Boolean used to control whether the `Toast` shows */\n  show: PropTypes.bool.isRequired,\n  /**\n   * Fields used to build optional action button.\n   * `label` is a string rendered inside the button.\n   * `href` is a link that will render the action button as an anchor tag.\n   * `onClick` is a function that is called when the button is clicked.\n   */\n  action: PropTypes.shape({\n    label: PropTypes.string.isRequired,\n    href: PropTypes.string,\n    onClick: PropTypes.func,\n  }),\n  /**\n   * Alt text for the `Toast`'s dismiss button. Defaults to 'Close'.\n   */\n  closeLabel: PropTypes.string,\n  /** Time in milliseconds for which the `Toast` will display. */\n  delay: PropTypes.number,\n  /** Class names for the `BaseToast` component */\n  className: PropTypes.string,\n};\n\nexport default Toast;\n"],"mappings":"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","ignoreList":[]}

package/dist/Toast/index.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "variables";
 @import "~bootstrap/scss/toasts";
 
@@ -5,7 +6,7 @@
   background-color: $toast-background-color;
   box-shadow: $toast-box-shadow;
   margin: 0;
-  padding: 1rem;
+  padding: $spacer;
   position: relative;
   border-radius: $toast-border-radius;
   z-index: 2;
@@ -38,15 +39,15 @@
     }
 
     & + .btn {
-      margin-top: 1rem;
+      margin-top: $spacer;
     }
   }
 
-  @media only screen and (width <= 768px) {
+  @media (max-width: map.get($grid-breakpoints, "md")) {
     max-width: 100%;
   }
 
-  @media only screen and (width >= 768px) {
+  @media (min-width: map.get($grid-breakpoints, "md")) {
     min-width: $toast-max-width;
     max-width: $toast-max-width;
   }

package/dist/index.d.ts

@@ -39,6 +39,7 @@ export { default as ModalDialog, MODAL_DIALOG_CLOSE_LABEL } from './Modal/ModalD
 export { default as ModalLayer } from './Modal/ModalLayer';
 export { default as Overlay, OverlayTrigger } from './Overlay';
 export { default as Portal } from './Modal/Portal';
+export { default as Toast, TOAST_CLOSE_LABEL_TEXT, TOAST_DELAY } from './Toast';
 export { default as Tooltip } from './Tooltip';
 export { default as useWindowSize, type WindowSizeData } from './hooks/useWindowSizeHook';
 export { default as useToggle, type Toggler, type ToggleHandlers } from './hooks/useToggleHook';
@@ -163,7 +164,6 @@ export const
 // from './Tabs';
 /** @deprecated Replaced by `Form.Control`. */
 export const TextArea: any; // from './TextArea';
-export const Toast: any, TOAST_CLOSE_LABEL_TEXT: string, TOAST_DELAY: number; // from './Toast';
 /** @deprecated Replaced by `Form.Group`. */
 export const ValidationFormGroup: any; // from './ValidationFormGroup';
 export const TransitionReplace: any; // from './TransitionReplace';

package/dist/index.js

@@ -39,6 +39,7 @@ export { default as ModalDialog, MODAL_DIALOG_CLOSE_LABEL } from './Modal/ModalD
 export { default as ModalLayer } from './Modal/ModalLayer';
 export { default as Overlay, OverlayTrigger } from './Overlay';
 export { default as Portal } from './Modal/Portal';
+export { default as Toast, TOAST_CLOSE_LABEL_TEXT, TOAST_DELAY } from './Toast';
 export { default as Tooltip } from './Tooltip';
 export { default as useWindowSize } from './hooks/useWindowSizeHook';
 export { default as useToggle } from './hooks/useToggleHook';
@@ -163,7 +164,6 @@ export {
 } from './Tabs';
 /** @deprecated Replaced by `Form.Control`. */
 export { default as TextArea } from './TextArea';
-export { default as Toast, TOAST_CLOSE_LABEL_TEXT, TOAST_DELAY } from './Toast';
 /** @deprecated Replaced by `Form.Group`. */
 export { default as ValidationFormGroup } from './ValidationFormGroup';
 export { default as TransitionReplace } from './TransitionReplace';