@openedx/paragon 22.15.2 → 22.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Modal/AlertModal.js.map +1 -1
- package/dist/Modal/_ModalDialog.scss +1 -1
- package/dist/Toast/ToastContainer.d.ts +6 -0
- package/dist/Toast/ToastContainer.js +19 -29
- package/dist/Toast/ToastContainer.js.map +1 -1
- package/dist/Toast/ToastContainer.scss +2 -1
- package/dist/Toast/index.d.ts +59 -0
- package/dist/Toast/index.js.map +1 -1
- package/dist/Toast/index.scss +5 -4
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/paragon.css +1 -1
- package/package.json +1 -1
- package/src/Modal/AlertModal.jsx +5 -5
- package/src/Modal/_ModalDialog.scss +1 -1
- package/src/Toast/README.md +4 -4
- package/src/Toast/{Toast.test.jsx → Toast.test.tsx} +23 -13
- package/src/Toast/ToastContainer.scss +2 -1
- package/src/Toast/ToastContainer.tsx +30 -0
- package/src/Toast/index.scss +5 -4
- package/src/Toast/{index.jsx → index.tsx} +27 -6
- package/src/index.d.ts +1 -1
- package/src/index.js +1 -1
- package/src/Toast/ToastContainer.jsx +0 -40
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertModal.js","names":["React","PropTypes","classNames","requiredWhenNot","Icon","ModalDialog","AlertModal","_ref","children","footerNode","icon","props","createElement","className","Header","Title","src","title","Body","Footer","propTypes","node","isRequired","string","isOpen","bool","isBlocking","hasCloseButton","onClose","func","size","oneOf","variant","closeLabel","isFullscreenScroll","elementType","defaultProps","undefined"],"sources":["../../src/Modal/AlertModal.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport { requiredWhenNot } from '../utils/propTypes';\nimport Icon from '../Icon';\nimport ModalDialog from './ModalDialog';\n\nfunction AlertModal({\n children,\n footerNode,\n icon,\n ...props\n}) {\n return (\n <ModalDialog\n {...props}\n className={classNames('pgn__alert-modal', props.className)}\n >\n <ModalDialog.Header>\n <ModalDialog.Title>\n {icon && (\n
|
|
1
|
+
{"version":3,"file":"AlertModal.js","names":["React","PropTypes","classNames","requiredWhenNot","Icon","ModalDialog","AlertModal","_ref","children","footerNode","icon","props","createElement","className","Header","Title","src","title","Body","Footer","propTypes","node","isRequired","string","isOpen","bool","isBlocking","hasCloseButton","onClose","func","size","oneOf","variant","closeLabel","isFullscreenScroll","elementType","defaultProps","undefined"],"sources":["../../src/Modal/AlertModal.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport { requiredWhenNot } from '../utils/propTypes';\nimport Icon from '../Icon';\nimport ModalDialog from './ModalDialog';\n\nfunction AlertModal({\n children,\n footerNode,\n icon,\n ...props\n}) {\n return (\n <ModalDialog\n {...props}\n className={classNames('pgn__alert-modal', props.className)}\n >\n <ModalDialog.Header>\n <ModalDialog.Title>\n {icon && (\n <Icon\n data-testid=\"title-icon\"\n src={icon}\n className={classNames('pgn__alert-modal__title_icon')}\n />\n )}\n {props.title}\n </ModalDialog.Title>\n </ModalDialog.Header>\n <ModalDialog.Body>{children}</ModalDialog.Body>\n {footerNode && <ModalDialog.Footer>{footerNode}</ModalDialog.Footer>}\n </ModalDialog>\n );\n}\n\nAlertModal.propTypes = {\n children: PropTypes.node.isRequired,\n /** The aria-label of the dialog */\n title: PropTypes.string.isRequired,\n /** Is the modal dialog open or closed */\n isOpen: PropTypes.bool,\n /** Prevent clicking on the backdrop or pressing Esc to close the modal */\n isBlocking: PropTypes.bool,\n /** Specifies whether the dialog box should contain 'x' icon button in the top right */\n hasCloseButton: PropTypes.bool,\n /** A callback to close the modal dialog */\n onClose: requiredWhenNot(PropTypes.func, 'isBlocking'),\n /** Sizes determine the maximum width of the dialog box */\n size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'fullscreen']),\n /** The visual style of the dialog box */\n variant: PropTypes.oneOf(['default', 'warning', 'danger', 'success']),\n /** The label supplied to the close icon button if one is rendered */\n closeLabel: PropTypes.string,\n /** Specifies class name to append to the base element */\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 /** Specifies what should be displayed in the footer of the dialog box */\n footerNode: PropTypes.node,\n /** Icon that will be shown in the header of modal */\n icon: PropTypes.elementType,\n};\n\nAlertModal.defaultProps = {\n isOpen: false,\n isBlocking: false,\n hasCloseButton: false,\n onClose: () => {},\n size: 'md',\n variant: 'default',\n closeLabel: 'Close',\n className: undefined,\n isFullscreenScroll: false,\n footerNode: null,\n icon: undefined,\n};\n\nexport default AlertModal;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,eAAe,QAAQ,oBAAoB;AACpD,OAAOC,IAAI,MAAM,SAAS;AAC1B,OAAOC,WAAW,MAAM,eAAe;AAEvC,SAASC,UAAUA,CAAAC,IAAA,EAKhB;EAAA,IALiB;IAClBC,QAAQ;IACRC,UAAU;IACVC,IAAI;IACJ,GAAGC;EACL,CAAC,GAAAJ,IAAA;EACC,oBACEP,KAAA,CAAAY,aAAA,CAACP,WAAW;IAAA,GACNM,KAAK;IACTE,SAAS,EAAEX,UAAU,CAAC,kBAAkB,EAAES,KAAK,CAACE,SAAS;EAAE,gBAE3Db,KAAA,CAAAY,aAAA,CAACP,WAAW,CAACS,MAAM,qBACjBd,KAAA,CAAAY,aAAA,CAACP,WAAW,CAACU,KAAK,QACfL,IAAI,iBACHV,KAAA,CAAAY,aAAA,CAACR,IAAI;IACH,eAAY,YAAY;IACxBY,GAAG,EAAEN,IAAK;IACVG,SAAS,EAAEX,UAAU,CAAC,8BAA8B;EAAE,CACvD,CACF,EACAS,KAAK,CAACM,KACU,CACD,CAAC,eACrBjB,KAAA,CAAAY,aAAA,CAACP,WAAW,CAACa,IAAI,QAAEV,QAA2B,CAAC,EAC9CC,UAAU,iBAAIT,KAAA,CAAAY,aAAA,CAACP,WAAW,CAACc,MAAM,QAAEV,UAA+B,CACxD,CAAC;AAElB;AAEAH,UAAU,CAACc,SAAS,GAAG;EACrBZ,QAAQ,EAAEP,SAAS,CAACoB,IAAI,CAACC,UAAU;EACnC;EACAL,KAAK,EAAEhB,SAAS,CAACsB,MAAM,CAACD,UAAU;EAClC;EACAE,MAAM,EAAEvB,SAAS,CAACwB,IAAI;EACtB;EACAC,UAAU,EAAEzB,SAAS,CAACwB,IAAI;EAC1B;EACAE,cAAc,EAAE1B,SAAS,CAACwB,IAAI;EAC9B;EACAG,OAAO,EAAEzB,eAAe,CAACF,SAAS,CAAC4B,IAAI,EAAE,YAAY,CAAC;EACtD;EACAC,IAAI,EAAE7B,SAAS,CAAC8B,KAAK,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,CAAC,CAAC;EAC7D;EACAC,OAAO,EAAE/B,SAAS,CAAC8B,KAAK,CAAC,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;EACrE;EACAE,UAAU,EAAEhC,SAAS,CAACsB,MAAM;EAC5B;EACAV,SAAS,EAAEZ,SAAS,CAACsB,MAAM;EAC3B;AACF;AACA;AACA;AACA;EACEW,kBAAkB,EAAEjC,SAAS,CAACwB,IAAI;EAClC;EACAhB,UAAU,EAAER,SAAS,CAACoB,IAAI;EAC1B;EACAX,IAAI,EAAET,SAAS,CAACkC;AAClB,CAAC;AAED7B,UAAU,CAAC8B,YAAY,GAAG;EACxBZ,MAAM,EAAE,KAAK;EACbE,UAAU,EAAE,KAAK;EACjBC,cAAc,EAAE,KAAK;EACrBC,OAAO,EAAEA,CAAA,KAAM,CAAC,CAAC;EACjBE,IAAI,EAAE,IAAI;EACVE,OAAO,EAAE,SAAS;EAClBC,UAAU,EAAE,OAAO;EACnBpB,SAAS,EAAEwB,SAAS;EACpBH,kBAAkB,EAAE,KAAK;EACzBzB,UAAU,EAAE,IAAI;EAChBC,IAAI,EAAE2B;AACR,CAAC;AAED,eAAe/B,UAAU","ignoreList":[]}
|
|
@@ -125,6 +125,7 @@
|
|
|
125
125
|
|
|
126
126
|
.pgn__modal-title {
|
|
127
127
|
font-size: $h3-font-size;
|
|
128
|
+
line-height: $h3-font-size * $headings-line-height;
|
|
128
129
|
margin-inline-end: 3rem; // roughly accomodate the width of the close buttonn
|
|
129
130
|
text-align: start;
|
|
130
131
|
}
|
|
@@ -310,7 +311,6 @@
|
|
|
310
311
|
}
|
|
311
312
|
|
|
312
313
|
.pgn__modal-title {
|
|
313
|
-
font-size: $h4-font-size;
|
|
314
314
|
display: flex;
|
|
315
315
|
flex-grow: 1;
|
|
316
316
|
align-items: center;
|
|
@@ -1,34 +1,24 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { useEffect, useState } from 'react';
|
|
2
2
|
import ReactDOM from 'react-dom';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
this.rootElement = document.body.appendChild(rootElement);
|
|
3
|
+
const TOAST_ROOT_ID = 'toast-root';
|
|
4
|
+
function ToastContainer(_ref) {
|
|
5
|
+
let {
|
|
6
|
+
children
|
|
7
|
+
} = _ref;
|
|
8
|
+
const [rootElement, setRootElement] = useState(null);
|
|
9
|
+
useEffect(() => {
|
|
10
|
+
if (typeof document !== 'undefined') {
|
|
11
|
+
let existingElement = document.getElementById(TOAST_ROOT_ID);
|
|
12
|
+
if (!existingElement) {
|
|
13
|
+
existingElement = document.createElement('div');
|
|
14
|
+
existingElement.id = TOAST_ROOT_ID;
|
|
15
|
+
existingElement.className = 'toast-container';
|
|
16
|
+
document.body.appendChild(existingElement);
|
|
17
|
+
}
|
|
18
|
+
setRootElement(existingElement);
|
|
20
19
|
}
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
if (this.rootElement) {
|
|
24
|
-
return /*#__PURE__*/ReactDOM.createPortal(this.props.children, this.rootElement);
|
|
25
|
-
}
|
|
26
|
-
return null;
|
|
27
|
-
}
|
|
20
|
+
}, []);
|
|
21
|
+
return rootElement ? /*#__PURE__*/ReactDOM.createPortal(children, rootElement) : null;
|
|
28
22
|
}
|
|
29
|
-
ToastContainer.propTypes = {
|
|
30
|
-
/** Specifies contents of the component. */
|
|
31
|
-
children: PropTypes.node.isRequired
|
|
32
|
-
};
|
|
33
23
|
export default ToastContainer;
|
|
34
24
|
//# sourceMappingURL=ToastContainer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToastContainer.js","names":["
|
|
1
|
+
{"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":[]}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@use "sass:map";
|
|
1
2
|
@import "variables";
|
|
2
3
|
|
|
3
4
|
.toast-container {
|
|
@@ -11,7 +12,7 @@
|
|
|
11
12
|
left: 0;
|
|
12
13
|
}
|
|
13
14
|
|
|
14
|
-
@media
|
|
15
|
+
@media (max-width: map.get($grid-breakpoints, "md")) {
|
|
15
16
|
bottom: $toast-container-gutter-sm;
|
|
16
17
|
right: $toast-container-gutter-sm;
|
|
17
18
|
left: $toast-container-gutter-sm;
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
export declare const TOAST_CLOSE_LABEL_TEXT = "Close";
|
|
4
|
+
export declare const TOAST_DELAY = 5000;
|
|
5
|
+
interface ToastAction {
|
|
6
|
+
label: string;
|
|
7
|
+
href?: string;
|
|
8
|
+
onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
|
|
9
|
+
}
|
|
10
|
+
interface ToastProps {
|
|
11
|
+
children: string;
|
|
12
|
+
onClose: () => void;
|
|
13
|
+
show: boolean;
|
|
14
|
+
action?: ToastAction;
|
|
15
|
+
closeLabel?: string;
|
|
16
|
+
delay?: number;
|
|
17
|
+
className?: string;
|
|
18
|
+
}
|
|
19
|
+
declare function Toast({ action, children, className, closeLabel, onClose, show, ...rest }: ToastProps): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
declare namespace Toast {
|
|
21
|
+
var defaultProps: {
|
|
22
|
+
action: null;
|
|
23
|
+
closeLabel: undefined;
|
|
24
|
+
delay: number;
|
|
25
|
+
className: undefined;
|
|
26
|
+
};
|
|
27
|
+
var propTypes: {
|
|
28
|
+
/** A string or an element that is rendered inside the main body of the `Toast`. */
|
|
29
|
+
children: PropTypes.Validator<string>;
|
|
30
|
+
/**
|
|
31
|
+
* A function that is called on close. It can be used to perform
|
|
32
|
+
* actions upon closing of the `Toast`, such as setting the "show"
|
|
33
|
+
* element to false.
|
|
34
|
+
* */
|
|
35
|
+
onClose: PropTypes.Validator<(...args: any[]) => any>;
|
|
36
|
+
/** Boolean used to control whether the `Toast` shows */
|
|
37
|
+
show: PropTypes.Validator<boolean>;
|
|
38
|
+
/**
|
|
39
|
+
* Fields used to build optional action button.
|
|
40
|
+
* `label` is a string rendered inside the button.
|
|
41
|
+
* `href` is a link that will render the action button as an anchor tag.
|
|
42
|
+
* `onClick` is a function that is called when the button is clicked.
|
|
43
|
+
*/
|
|
44
|
+
action: PropTypes.Requireable<PropTypes.InferProps<{
|
|
45
|
+
label: PropTypes.Validator<string>;
|
|
46
|
+
href: PropTypes.Requireable<string>;
|
|
47
|
+
onClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
48
|
+
}>>;
|
|
49
|
+
/**
|
|
50
|
+
* Alt text for the `Toast`'s dismiss button. Defaults to 'Close'.
|
|
51
|
+
*/
|
|
52
|
+
closeLabel: PropTypes.Requireable<string>;
|
|
53
|
+
/** Time in milliseconds for which the `Toast` will display. */
|
|
54
|
+
delay: PropTypes.Requireable<number>;
|
|
55
|
+
/** Class names for the `BaseToast` component */
|
|
56
|
+
className: PropTypes.Requireable<string>;
|
|
57
|
+
};
|
|
58
|
+
}
|
|
59
|
+
export default Toast;
|
package/dist/Toast/index.js.map
CHANGED
|
@@ -1 +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.
|
|
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.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
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@use "sass:map";
|
|
1
2
|
@import "variables";
|
|
2
3
|
@import "~bootstrap/scss/toasts";
|
|
3
4
|
|
|
@@ -5,7 +6,7 @@
|
|
|
5
6
|
background-color: $toast-background-color;
|
|
6
7
|
box-shadow: $toast-box-shadow;
|
|
7
8
|
margin: 0;
|
|
8
|
-
padding:
|
|
9
|
+
padding: $spacer;
|
|
9
10
|
position: relative;
|
|
10
11
|
border-radius: $toast-border-radius;
|
|
11
12
|
z-index: 2;
|
|
@@ -38,15 +39,15 @@
|
|
|
38
39
|
}
|
|
39
40
|
|
|
40
41
|
& + .btn {
|
|
41
|
-
margin-top:
|
|
42
|
+
margin-top: $spacer;
|
|
42
43
|
}
|
|
43
44
|
}
|
|
44
45
|
|
|
45
|
-
@media
|
|
46
|
+
@media (max-width: map.get($grid-breakpoints, "md")) {
|
|
46
47
|
max-width: 100%;
|
|
47
48
|
}
|
|
48
49
|
|
|
49
|
-
@media
|
|
50
|
+
@media (min-width: map.get($grid-breakpoints, "md")) {
|
|
50
51
|
min-width: $toast-max-width;
|
|
51
52
|
max-width: $toast-max-width;
|
|
52
53
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -39,6 +39,7 @@ export { default as ModalDialog, MODAL_DIALOG_CLOSE_LABEL } from './Modal/ModalD
|
|
|
39
39
|
export { default as ModalLayer } from './Modal/ModalLayer';
|
|
40
40
|
export { default as Overlay, OverlayTrigger } from './Overlay';
|
|
41
41
|
export { default as Portal } from './Modal/Portal';
|
|
42
|
+
export { default as Toast, TOAST_CLOSE_LABEL_TEXT, TOAST_DELAY } from './Toast';
|
|
42
43
|
export { default as Tooltip } from './Tooltip';
|
|
43
44
|
export { default as useWindowSize, type WindowSizeData } from './hooks/useWindowSizeHook';
|
|
44
45
|
export { default as useToggle, type Toggler, type ToggleHandlers } from './hooks/useToggleHook';
|
|
@@ -163,7 +164,6 @@ export const
|
|
|
163
164
|
// from './Tabs';
|
|
164
165
|
/** @deprecated Replaced by `Form.Control`. */
|
|
165
166
|
export const TextArea: any; // from './TextArea';
|
|
166
|
-
export const Toast: any, TOAST_CLOSE_LABEL_TEXT: string, TOAST_DELAY: number; // from './Toast';
|
|
167
167
|
/** @deprecated Replaced by `Form.Group`. */
|
|
168
168
|
export const ValidationFormGroup: any; // from './ValidationFormGroup';
|
|
169
169
|
export const TransitionReplace: any; // from './TransitionReplace';
|
package/dist/index.js
CHANGED
|
@@ -39,6 +39,7 @@ export { default as ModalDialog, MODAL_DIALOG_CLOSE_LABEL } from './Modal/ModalD
|
|
|
39
39
|
export { default as ModalLayer } from './Modal/ModalLayer';
|
|
40
40
|
export { default as Overlay, OverlayTrigger } from './Overlay';
|
|
41
41
|
export { default as Portal } from './Modal/Portal';
|
|
42
|
+
export { default as Toast, TOAST_CLOSE_LABEL_TEXT, TOAST_DELAY } from './Toast';
|
|
42
43
|
export { default as Tooltip } from './Tooltip';
|
|
43
44
|
export { default as useWindowSize } from './hooks/useWindowSizeHook';
|
|
44
45
|
export { default as useToggle } from './hooks/useToggleHook';
|
|
@@ -163,7 +164,6 @@ export {
|
|
|
163
164
|
} from './Tabs';
|
|
164
165
|
/** @deprecated Replaced by `Form.Control`. */
|
|
165
166
|
export { default as TextArea } from './TextArea';
|
|
166
|
-
export { default as Toast, TOAST_CLOSE_LABEL_TEXT, TOAST_DELAY } from './Toast';
|
|
167
167
|
/** @deprecated Replaced by `Form.Group`. */
|
|
168
168
|
export { default as ValidationFormGroup } from './ValidationFormGroup';
|
|
169
169
|
export { default as TransitionReplace } from './TransitionReplace';
|