@veeqo/ui 13.19.0-beta-1 → 13.19.0-beta-2
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/components/ToastsLayout/ToastsLayout.cjs +22 -7
- package/dist/components/ToastsLayout/ToastsLayout.cjs.map +1 -1
- package/dist/components/ToastsLayout/ToastsLayout.d.ts +13 -0
- package/dist/components/ToastsLayout/ToastsLayout.js +22 -7
- package/dist/components/ToastsLayout/ToastsLayout.js.map +1 -1
- package/dist/components/ToastsLayout/components/Toast.cjs +9 -8
- package/dist/components/ToastsLayout/components/Toast.cjs.map +1 -1
- package/dist/components/ToastsLayout/components/Toast.d.ts +1 -1
- package/dist/components/ToastsLayout/components/Toast.js +9 -8
- package/dist/components/ToastsLayout/components/Toast.js.map +1 -1
- package/dist/components/ToastsLayout/index.d.ts +1 -0
- package/dist/components/ToastsLayout/toastsLayout.module.scss.cjs +2 -2
- package/dist/components/ToastsLayout/toastsLayout.module.scss.cjs.map +1 -1
- package/dist/components/ToastsLayout/toastsLayout.module.scss.js +2 -2
- package/dist/components/ToastsLayout/toastsLayout.module.scss.js.map +1 -1
- package/dist/components/ToastsLayout/types.cjs +12 -0
- package/dist/components/ToastsLayout/types.cjs.map +1 -0
- package/dist/components/ToastsLayout/types.d.ts +9 -5
- package/dist/components/ToastsLayout/types.js +12 -0
- package/dist/components/ToastsLayout/types.js.map +1 -0
- package/dist/components/index.d.ts +1 -1
- package/dist/index.cjs +5 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -11,15 +11,30 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
11
11
|
|
|
12
12
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
/**
|
|
15
|
+
* ToastsLayout displays toast notifications in a fixed position at the bottom of the screen.
|
|
16
|
+
* Toasts are rendered in a portal and support animations, auto-dismissal, and custom CTAs.
|
|
17
|
+
*
|
|
18
|
+
* @example
|
|
19
|
+
* ```tsx
|
|
20
|
+
* <ToastsLayout
|
|
21
|
+
* toasts={[{ id: '1', type: 'success', message: 'Saved!' }]}
|
|
22
|
+
* onClose={(id) => removeToast(id)}
|
|
23
|
+
* max={3}
|
|
24
|
+
* />
|
|
25
|
+
* ```
|
|
26
|
+
*/
|
|
27
|
+
const ToastsLayout = ({ e2eClassName, toasts, minWidth = '50vw', max = 3, portalTarget = document.body, onClose, }) => {
|
|
15
28
|
React.useEffect(() => {
|
|
16
|
-
if (max && toasts.length > max)
|
|
17
|
-
onClose(toasts[0].
|
|
29
|
+
if (max && toasts.length > max) {
|
|
30
|
+
onClose(toasts[0].id);
|
|
31
|
+
}
|
|
18
32
|
}, [toasts, max, onClose]);
|
|
19
|
-
const
|
|
20
|
-
|
|
21
|
-
React__default.default.createElement(reactTransitionGroup.TransitionGroup, { component: null }, [...toasts].reverse().map((toast, index) => (React__default.default.createElement(reactTransitionGroup.CSSTransition, { key: toast.
|
|
22
|
-
React__default.default.createElement(Toast.Toast, { e2eClassName: e2eClassName, minWidth: minWidth, last: index === toasts.length - 1, onClose: () => onClose(toast.
|
|
33
|
+
const containerAriaLabel = `${toasts.length} notification${toasts.length !== 1 ? 's' : ''}.`;
|
|
34
|
+
const content = (React__default.default.createElement(FlexCol.FlexCol, { className: toastsLayout_module.toastsLayoutContainer, alignItems: "center", gap: 4, role: "region", "aria-label": containerAriaLabel },
|
|
35
|
+
React__default.default.createElement(reactTransitionGroup.TransitionGroup, { component: null }, [...toasts].reverse().map((toast, index) => (React__default.default.createElement(reactTransitionGroup.CSSTransition, { key: toast.id, timeout: 225, classNames: "veeqo-components-toast" },
|
|
36
|
+
React__default.default.createElement(Toast.Toast, { e2eClassName: e2eClassName, minWidth: minWidth, last: index === toasts.length - 1, onClose: () => onClose(toast.id), ...toast })))))));
|
|
37
|
+
return reactDom.createPortal(content, portalTarget);
|
|
23
38
|
};
|
|
24
39
|
|
|
25
40
|
exports.ToastsLayout = ToastsLayout;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToastsLayout.cjs","sources":["../../../src/components/ToastsLayout/ToastsLayout.tsx"],"sourcesContent":["import { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport React, { useEffect, FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ToastsLayoutPropTypes } from './types';\nimport { Toast } from './components/Toast';\nimport { FlexCol } from '../Flex/FlexCol';\nimport styles from './toastsLayout.module.scss';\n\nexport const ToastsLayout: FC<ToastsLayoutPropTypes> = ({\n e2eClassName,\n toasts,\n minWidth = '50vw',\n max = 3,\n onClose,\n}) => {\n useEffect(() => {\n if (max && toasts.length > max) onClose(toasts[0].
|
|
1
|
+
{"version":3,"file":"ToastsLayout.cjs","sources":["../../../src/components/ToastsLayout/ToastsLayout.tsx"],"sourcesContent":["import { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport React, { useEffect, FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ToastsLayoutPropTypes } from './types';\nimport { Toast } from './components/Toast';\nimport { FlexCol } from '../Flex/FlexCol';\nimport styles from './toastsLayout.module.scss';\n\n/**\n * ToastsLayout displays toast notifications in a fixed position at the bottom of the screen.\n * Toasts are rendered in a portal and support animations, auto-dismissal, and custom CTAs.\n *\n * @example\n * ```tsx\n * <ToastsLayout\n * toasts={[{ id: '1', type: 'success', message: 'Saved!' }]}\n * onClose={(id) => removeToast(id)}\n * max={3}\n * />\n * ```\n */\nexport const ToastsLayout: FC<ToastsLayoutPropTypes> = ({\n e2eClassName,\n toasts,\n minWidth = '50vw',\n max = 3,\n portalTarget = document.body,\n onClose,\n}) => {\n useEffect(() => {\n if (max && toasts.length > max) {\n onClose(toasts[0].id);\n }\n }, [toasts, max, onClose]);\n\n const containerAriaLabel = `${toasts.length} notification${toasts.length !== 1 ? 's' : ''}.`;\n\n const content = (\n <FlexCol\n className={styles.toastsLayoutContainer}\n alignItems=\"center\"\n gap={4}\n role=\"region\"\n aria-label={containerAriaLabel}\n >\n <TransitionGroup component={null}>\n {[...toasts].reverse().map((toast, index) => (\n <CSSTransition key={toast.id} timeout={225} classNames=\"veeqo-components-toast\">\n <Toast\n e2eClassName={e2eClassName}\n minWidth={minWidth}\n last={index === toasts.length - 1}\n onClose={() => onClose(toast.id)}\n {...toast}\n />\n </CSSTransition>\n ))}\n </TransitionGroup>\n </FlexCol>\n );\n\n return createPortal(content, portalTarget);\n};\n"],"names":["useEffect","React","FlexCol","styles","TransitionGroup","CSSTransition","Toast","createPortal"],"mappings":";;;;;;;;;;;;;AAQA;;;;;;;;;;;;AAYG;AACU,MAAA,YAAY,GAA8B,CAAC,EACtD,YAAY,EACZ,MAAM,EACN,QAAQ,GAAG,MAAM,EACjB,GAAG,GAAG,CAAC,EACP,YAAY,GAAG,QAAQ,CAAC,IAAI,EAC5B,OAAO,GACR,KAAI;IACHA,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,GAAG,IAAI,MAAM,CAAC,MAAM,GAAG,GAAG,EAAE;YAC9B,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AACtB;KACF,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE,OAAO,CAAC,CAAC;IAE1B,MAAM,kBAAkB,GAAG,CAAG,EAAA,MAAM,CAAC,MAAM,CAAA,aAAA,EAAgB,MAAM,CAAC,MAAM,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAA,CAAA,CAAG;IAE5F,MAAM,OAAO,IACXC,sBAAC,CAAA,aAAA,CAAAC,eAAO,IACN,SAAS,EAAEC,mBAAM,CAAC,qBAAqB,EACvC,UAAU,EAAC,QAAQ,EACnB,GAAG,EAAE,CAAC,EACN,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,kBAAkB,EAAA;AAE9B,QAAAF,sBAAA,CAAA,aAAA,CAACG,oCAAe,EAAC,EAAA,SAAS,EAAE,IAAI,IAC7B,CAAC,GAAG,MAAM,CAAC,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MACtCH,qCAACI,kCAAa,EAAA,EAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,UAAU,EAAC,wBAAwB,EAAA;AAC7E,YAAAJ,sBAAA,CAAA,aAAA,CAACK,WAAK,EACJ,EAAA,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,KAAK,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC,EACjC,OAAO,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,EAC5B,GAAA,KAAK,GACT,CACY,CACjB,CAAC,CACc,CACV,CACX;AAED,IAAA,OAAOC,qBAAY,CAAC,OAAO,EAAE,YAAY,CAAC;AAC5C;;;;"}
|
|
@@ -1,3 +1,16 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import { ToastsLayoutPropTypes } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* ToastsLayout displays toast notifications in a fixed position at the bottom of the screen.
|
|
5
|
+
* Toasts are rendered in a portal and support animations, auto-dismissal, and custom CTAs.
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```tsx
|
|
9
|
+
* <ToastsLayout
|
|
10
|
+
* toasts={[{ id: '1', type: 'success', message: 'Saved!' }]}
|
|
11
|
+
* onClose={(id) => removeToast(id)}
|
|
12
|
+
* max={3}
|
|
13
|
+
* />
|
|
14
|
+
* ```
|
|
15
|
+
*/
|
|
3
16
|
export declare const ToastsLayout: FC<ToastsLayoutPropTypes>;
|
|
@@ -5,15 +5,30 @@ import { Toast } from './components/Toast.js';
|
|
|
5
5
|
import { FlexCol } from '../Flex/FlexCol/FlexCol.js';
|
|
6
6
|
import styles from './toastsLayout.module.scss.js';
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
/**
|
|
9
|
+
* ToastsLayout displays toast notifications in a fixed position at the bottom of the screen.
|
|
10
|
+
* Toasts are rendered in a portal and support animations, auto-dismissal, and custom CTAs.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```tsx
|
|
14
|
+
* <ToastsLayout
|
|
15
|
+
* toasts={[{ id: '1', type: 'success', message: 'Saved!' }]}
|
|
16
|
+
* onClose={(id) => removeToast(id)}
|
|
17
|
+
* max={3}
|
|
18
|
+
* />
|
|
19
|
+
* ```
|
|
20
|
+
*/
|
|
21
|
+
const ToastsLayout = ({ e2eClassName, toasts, minWidth = '50vw', max = 3, portalTarget = document.body, onClose, }) => {
|
|
9
22
|
useEffect(() => {
|
|
10
|
-
if (max && toasts.length > max)
|
|
11
|
-
onClose(toasts[0].
|
|
23
|
+
if (max && toasts.length > max) {
|
|
24
|
+
onClose(toasts[0].id);
|
|
25
|
+
}
|
|
12
26
|
}, [toasts, max, onClose]);
|
|
13
|
-
const
|
|
14
|
-
|
|
15
|
-
React__default.createElement(TransitionGroup, { component: null }, [...toasts].reverse().map((toast, index) => (React__default.createElement(CSSTransition, { key: toast.
|
|
16
|
-
React__default.createElement(Toast, { e2eClassName: e2eClassName, minWidth: minWidth, last: index === toasts.length - 1, onClose: () => onClose(toast.
|
|
27
|
+
const containerAriaLabel = `${toasts.length} notification${toasts.length !== 1 ? 's' : ''}.`;
|
|
28
|
+
const content = (React__default.createElement(FlexCol, { className: styles.toastsLayoutContainer, alignItems: "center", gap: 4, role: "region", "aria-label": containerAriaLabel },
|
|
29
|
+
React__default.createElement(TransitionGroup, { component: null }, [...toasts].reverse().map((toast, index) => (React__default.createElement(CSSTransition, { key: toast.id, timeout: 225, classNames: "veeqo-components-toast" },
|
|
30
|
+
React__default.createElement(Toast, { e2eClassName: e2eClassName, minWidth: minWidth, last: index === toasts.length - 1, onClose: () => onClose(toast.id), ...toast })))))));
|
|
31
|
+
return createPortal(content, portalTarget);
|
|
17
32
|
};
|
|
18
33
|
|
|
19
34
|
export { ToastsLayout };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToastsLayout.js","sources":["../../../src/components/ToastsLayout/ToastsLayout.tsx"],"sourcesContent":["import { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport React, { useEffect, FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ToastsLayoutPropTypes } from './types';\nimport { Toast } from './components/Toast';\nimport { FlexCol } from '../Flex/FlexCol';\nimport styles from './toastsLayout.module.scss';\n\nexport const ToastsLayout: FC<ToastsLayoutPropTypes> = ({\n e2eClassName,\n toasts,\n minWidth = '50vw',\n max = 3,\n onClose,\n}) => {\n useEffect(() => {\n if (max && toasts.length > max) onClose(toasts[0].
|
|
1
|
+
{"version":3,"file":"ToastsLayout.js","sources":["../../../src/components/ToastsLayout/ToastsLayout.tsx"],"sourcesContent":["import { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport React, { useEffect, FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ToastsLayoutPropTypes } from './types';\nimport { Toast } from './components/Toast';\nimport { FlexCol } from '../Flex/FlexCol';\nimport styles from './toastsLayout.module.scss';\n\n/**\n * ToastsLayout displays toast notifications in a fixed position at the bottom of the screen.\n * Toasts are rendered in a portal and support animations, auto-dismissal, and custom CTAs.\n *\n * @example\n * ```tsx\n * <ToastsLayout\n * toasts={[{ id: '1', type: 'success', message: 'Saved!' }]}\n * onClose={(id) => removeToast(id)}\n * max={3}\n * />\n * ```\n */\nexport const ToastsLayout: FC<ToastsLayoutPropTypes> = ({\n e2eClassName,\n toasts,\n minWidth = '50vw',\n max = 3,\n portalTarget = document.body,\n onClose,\n}) => {\n useEffect(() => {\n if (max && toasts.length > max) {\n onClose(toasts[0].id);\n }\n }, [toasts, max, onClose]);\n\n const containerAriaLabel = `${toasts.length} notification${toasts.length !== 1 ? 's' : ''}.`;\n\n const content = (\n <FlexCol\n className={styles.toastsLayoutContainer}\n alignItems=\"center\"\n gap={4}\n role=\"region\"\n aria-label={containerAriaLabel}\n >\n <TransitionGroup component={null}>\n {[...toasts].reverse().map((toast, index) => (\n <CSSTransition key={toast.id} timeout={225} classNames=\"veeqo-components-toast\">\n <Toast\n e2eClassName={e2eClassName}\n minWidth={minWidth}\n last={index === toasts.length - 1}\n onClose={() => onClose(toast.id)}\n {...toast}\n />\n </CSSTransition>\n ))}\n </TransitionGroup>\n </FlexCol>\n );\n\n return createPortal(content, portalTarget);\n};\n"],"names":["React"],"mappings":";;;;;;;AAQA;;;;;;;;;;;;AAYG;AACU,MAAA,YAAY,GAA8B,CAAC,EACtD,YAAY,EACZ,MAAM,EACN,QAAQ,GAAG,MAAM,EACjB,GAAG,GAAG,CAAC,EACP,YAAY,GAAG,QAAQ,CAAC,IAAI,EAC5B,OAAO,GACR,KAAI;IACH,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,GAAG,IAAI,MAAM,CAAC,MAAM,GAAG,GAAG,EAAE;YAC9B,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AACtB;KACF,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE,OAAO,CAAC,CAAC;IAE1B,MAAM,kBAAkB,GAAG,CAAG,EAAA,MAAM,CAAC,MAAM,CAAA,aAAA,EAAgB,MAAM,CAAC,MAAM,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAA,CAAA,CAAG;IAE5F,MAAM,OAAO,IACXA,cAAC,CAAA,aAAA,CAAA,OAAO,IACN,SAAS,EAAE,MAAM,CAAC,qBAAqB,EACvC,UAAU,EAAC,QAAQ,EACnB,GAAG,EAAE,CAAC,EACN,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,kBAAkB,EAAA;AAE9B,QAAAA,cAAA,CAAA,aAAA,CAAC,eAAe,EAAC,EAAA,SAAS,EAAE,IAAI,IAC7B,CAAC,GAAG,MAAM,CAAC,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MACtCA,6BAAC,aAAa,EAAA,EAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,UAAU,EAAC,wBAAwB,EAAA;AAC7E,YAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EACJ,EAAA,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,KAAK,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC,EACjC,OAAO,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,EAC5B,GAAA,KAAK,GACT,CACY,CACjB,CAAC,CACc,CACV,CACX;AAED,IAAA,OAAO,YAAY,CAAC,OAAO,EAAE,YAAY,CAAC;AAC5C;;;;"}
|
|
@@ -15,22 +15,23 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
15
15
|
|
|
16
16
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
17
17
|
|
|
18
|
-
const Toast = ({ e2eClassName, type, iconSlot,
|
|
18
|
+
const Toast = ({ e2eClassName, type, iconSlot, message, subMessage, last, minWidth, ctaSlot, onClose, }) => {
|
|
19
19
|
var _a;
|
|
20
20
|
const e2eClassNames = utils.generateToastClassNames(e2eClassName);
|
|
21
|
+
// Default to Info icon
|
|
21
22
|
const { accentColor, icon } = (_a = constants.ToastTypeConfig[type]) !== null && _a !== undefined ? _a : constants.ToastTypeConfig.info;
|
|
22
|
-
const
|
|
23
|
+
const resolvedIcon = iconSlot !== null && iconSlot !== undefined ? iconSlot : icon;
|
|
23
24
|
return (React__default.default.createElement(FlexRow.FlexRow, { className: buildClassnames.buildClassnames([toast_module.toastContainer, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.container]), alignItems: "center", style: {
|
|
24
25
|
'--toast-min-width': minWidth !== null && minWidth !== undefined ? minWidth : undefined,
|
|
25
26
|
'--toast-status-color': accentColor,
|
|
26
|
-
}, "data-toast-last": last !== null && last !== undefined ? last : undefined, gap: "base" },
|
|
27
|
-
React__default.default.createElement(FlexRow.FlexRow, { className: buildClassnames.buildClassnames([toast_module.iconWrapper, e2eClassNames.icon]), alignItems: "center", justifyContent: "center" },
|
|
28
|
-
React__default.default.createElement(FlexRow.FlexRow, { alignItems: "center", flexGrow: 1, justifyContent: "space-between"
|
|
27
|
+
}, "data-toast-last": last !== null && last !== undefined ? last : undefined, gap: "base", role: "alert" },
|
|
28
|
+
resolvedIcon && (React__default.default.createElement(FlexRow.FlexRow, { className: buildClassnames.buildClassnames([toast_module.iconWrapper, e2eClassNames.icon]), alignItems: "center", justifyContent: "center" }, resolvedIcon)),
|
|
29
|
+
React__default.default.createElement(FlexRow.FlexRow, { alignItems: "center", flexGrow: 1, justifyContent: "space-between" },
|
|
29
30
|
React__default.default.createElement(FlexCol.FlexCol, { gap: "none" },
|
|
30
|
-
React__default.default.createElement(Text.Text, { className: toast_module.toastText, variant: "headingSmall", as: "p" },
|
|
31
|
+
React__default.default.createElement(Text.Text, { className: toast_module.toastText, variant: "headingSmall", as: "p" }, message),
|
|
31
32
|
subMessage && (React__default.default.createElement(Text.Text, { className: toast_module.toastText, variant: "body", as: "p" }, subMessage))),
|
|
32
|
-
|
|
33
|
-
React__default.default.createElement(Button.Button, { className: toast_module.toastCloseButton, variant: "flat", iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, { color: "
|
|
33
|
+
ctaSlot),
|
|
34
|
+
React__default.default.createElement(Button.Button, { className: buildClassnames.buildClassnames([toast_module.toastCloseButton, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.closeIcon]), variant: "flat", iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, { color: "#fff" }), onClick: onClose, "aria-label": "Close" })));
|
|
34
35
|
};
|
|
35
36
|
|
|
36
37
|
exports.Toast = Toast;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.cjs","sources":["../../../../src/components/ToastsLayout/components/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { Text } from '../../Text';\nimport { ToastPropTypes } from '../types';\nimport { buildClassnames } from '../../../utils/buildClassnames';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport styles from './toast.module.scss';\nimport { generateToastClassNames } from './utils';\nimport { ToastTypeConfig } from './constants';\n\nexport const Toast = ({\n e2eClassName,\n type,\n iconSlot,\n
|
|
1
|
+
{"version":3,"file":"Toast.cjs","sources":["../../../../src/components/ToastsLayout/components/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { Text } from '../../Text';\nimport { ToastPropTypes } from '../types';\nimport { buildClassnames } from '../../../utils/buildClassnames';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport styles from './toast.module.scss';\nimport { generateToastClassNames } from './utils';\nimport { ToastTypeConfig } from './constants';\n\nexport const Toast = ({\n e2eClassName,\n type,\n iconSlot,\n message,\n subMessage,\n last,\n minWidth,\n ctaSlot,\n onClose,\n}: ToastPropTypes) => {\n const e2eClassNames = generateToastClassNames(e2eClassName);\n\n // Default to Info icon\n const { accentColor, icon } = ToastTypeConfig[type] ?? ToastTypeConfig.info;\n\n const resolvedIcon = iconSlot ?? icon;\n\n return (\n <FlexRow\n className={buildClassnames([styles.toastContainer, e2eClassNames?.container])}\n alignItems=\"center\"\n style={\n {\n '--toast-min-width': minWidth ?? undefined,\n '--toast-status-color': accentColor,\n } as React.CSSProperties\n }\n data-toast-last={last ?? undefined}\n gap=\"base\"\n role=\"alert\"\n >\n {resolvedIcon && (\n <FlexRow\n className={buildClassnames([styles.iconWrapper, e2eClassNames.icon])}\n alignItems=\"center\"\n justifyContent=\"center\"\n >\n {resolvedIcon}\n </FlexRow>\n )}\n <FlexRow alignItems=\"center\" flexGrow={1} justifyContent=\"space-between\">\n <FlexCol gap=\"none\">\n <Text className={styles.toastText} variant=\"headingSmall\" as=\"p\">\n {message}\n </Text>\n {subMessage && (\n <Text className={styles.toastText} variant=\"body\" as=\"p\">\n {subMessage}\n </Text>\n )}\n </FlexCol>\n {ctaSlot}\n </FlexRow>\n <Button\n className={buildClassnames([styles.toastCloseButton, e2eClassNames?.closeIcon])}\n variant=\"flat\"\n iconSlot={<CrossIcon color=\"#fff\" />}\n onClick={onClose}\n aria-label=\"Close\"\n />\n </FlexRow>\n );\n};\n"],"names":["generateToastClassNames","ToastTypeConfig","React","FlexRow","buildClassnames","styles","FlexCol","Text","Button","CrossIcon"],"mappings":";;;;;;;;;;;;;;;;;AAYa,MAAA,KAAK,GAAG,CAAC,EACpB,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,UAAU,EACV,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,OAAO,GACQ,KAAI;;AACnB,IAAA,MAAM,aAAa,GAAGA,6BAAuB,CAAC,YAAY,CAAC;;AAG3D,IAAA,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,CAAA,EAAA,GAAAC,yBAAe,CAAC,IAAI,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAIA,yBAAe,CAAC,IAAI;IAE3E,MAAM,YAAY,GAAG,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAR,SAAA,GAAA,QAAQ,GAAI,IAAI;AAErC,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EACN,SAAS,EAAEC,+BAAe,CAAC,CAACC,YAAM,CAAC,cAAc,EAAE,aAAa,KAAb,IAAA,IAAA,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,SAAS,CAAC,CAAC,EAC7E,UAAU,EAAC,QAAQ,EACnB,KAAK,EACH;AACE,YAAA,mBAAmB,EAAE,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAR,SAAA,GAAA,QAAQ,GAAI,SAAS;AAC1C,YAAA,sBAAsB,EAAE,WAAW;AACb,SAAA,EAAA,iBAAA,EAET,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,SAAA,GAAJ,IAAI,GAAI,SAAS,EAClC,GAAG,EAAC,MAAM,EACV,IAAI,EAAC,OAAO,EAAA;AAEX,QAAA,YAAY,KACXH,sBAAC,CAAA,aAAA,CAAAC,eAAO,EACN,EAAA,SAAS,EAAEC,+BAAe,CAAC,CAACC,YAAM,CAAC,WAAW,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,EACpE,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EAEtB,EAAA,YAAY,CACL,CACX;AACD,QAAAH,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EAAC,UAAU,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAE,cAAc,EAAC,eAAe,EAAA;AACtE,YAAAD,sBAAA,CAAA,aAAA,CAACI,eAAO,EAAA,EAAC,GAAG,EAAC,MAAM,EAAA;AACjB,gBAAAJ,sBAAA,CAAA,aAAA,CAACK,SAAI,EAAC,EAAA,SAAS,EAAEF,YAAM,CAAC,SAAS,EAAE,OAAO,EAAC,cAAc,EAAC,EAAE,EAAC,GAAG,EAAA,EAC7D,OAAO,CACH;gBACN,UAAU,KACTH,sBAAC,CAAA,aAAA,CAAAK,SAAI,IAAC,SAAS,EAAEF,YAAM,CAAC,SAAS,EAAE,OAAO,EAAC,MAAM,EAAC,EAAE,EAAC,GAAG,EACrD,EAAA,UAAU,CACN,CACR,CACO;AACT,YAAA,OAAO,CACA;AACV,QAAAH,sBAAA,CAAA,aAAA,CAACM,aAAM,EACL,EAAA,SAAS,EAAEJ,+BAAe,CAAC,CAACC,YAAM,CAAC,gBAAgB,EAAE,aAAa,aAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,SAAS,CAAC,CAAC,EAC/E,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEH,qCAACO,wBAAS,EAAA,EAAC,KAAK,EAAC,MAAM,GAAG,EACpC,OAAO,EAAE,OAAO,EAAA,YAAA,EACL,OAAO,EAClB,CAAA,CACM;AAEd;;;;"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ToastPropTypes } from '../types';
|
|
3
|
-
export declare const Toast: ({ e2eClassName, type, iconSlot,
|
|
3
|
+
export declare const Toast: ({ e2eClassName, type, iconSlot, message, subMessage, last, minWidth, ctaSlot, onClose, }: ToastPropTypes) => React.JSX.Element;
|
|
@@ -9,22 +9,23 @@ import styles from './toast.module.scss.js';
|
|
|
9
9
|
import { generateToastClassNames } from './utils.js';
|
|
10
10
|
import { ToastTypeConfig } from './constants.js';
|
|
11
11
|
|
|
12
|
-
const Toast = ({ e2eClassName, type, iconSlot,
|
|
12
|
+
const Toast = ({ e2eClassName, type, iconSlot, message, subMessage, last, minWidth, ctaSlot, onClose, }) => {
|
|
13
13
|
var _a;
|
|
14
14
|
const e2eClassNames = generateToastClassNames(e2eClassName);
|
|
15
|
+
// Default to Info icon
|
|
15
16
|
const { accentColor, icon } = (_a = ToastTypeConfig[type]) !== null && _a !== undefined ? _a : ToastTypeConfig.info;
|
|
16
|
-
const
|
|
17
|
+
const resolvedIcon = iconSlot !== null && iconSlot !== undefined ? iconSlot : icon;
|
|
17
18
|
return (React__default.createElement(FlexRow, { className: buildClassnames([styles.toastContainer, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.container]), alignItems: "center", style: {
|
|
18
19
|
'--toast-min-width': minWidth !== null && minWidth !== undefined ? minWidth : undefined,
|
|
19
20
|
'--toast-status-color': accentColor,
|
|
20
|
-
}, "data-toast-last": last !== null && last !== undefined ? last : undefined, gap: "base" },
|
|
21
|
-
React__default.createElement(FlexRow, { className: buildClassnames([styles.iconWrapper, e2eClassNames.icon]), alignItems: "center", justifyContent: "center" },
|
|
22
|
-
React__default.createElement(FlexRow, { alignItems: "center", flexGrow: 1, justifyContent: "space-between"
|
|
21
|
+
}, "data-toast-last": last !== null && last !== undefined ? last : undefined, gap: "base", role: "alert" },
|
|
22
|
+
resolvedIcon && (React__default.createElement(FlexRow, { className: buildClassnames([styles.iconWrapper, e2eClassNames.icon]), alignItems: "center", justifyContent: "center" }, resolvedIcon)),
|
|
23
|
+
React__default.createElement(FlexRow, { alignItems: "center", flexGrow: 1, justifyContent: "space-between" },
|
|
23
24
|
React__default.createElement(FlexCol, { gap: "none" },
|
|
24
|
-
React__default.createElement(Text, { className: styles.toastText, variant: "headingSmall", as: "p" },
|
|
25
|
+
React__default.createElement(Text, { className: styles.toastText, variant: "headingSmall", as: "p" }, message),
|
|
25
26
|
subMessage && (React__default.createElement(Text, { className: styles.toastText, variant: "body", as: "p" }, subMessage))),
|
|
26
|
-
|
|
27
|
-
React__default.createElement(Button, { className: styles.toastCloseButton, variant: "flat", iconSlot: React__default.createElement(CrossIcon, { color: "
|
|
27
|
+
ctaSlot),
|
|
28
|
+
React__default.createElement(Button, { className: buildClassnames([styles.toastCloseButton, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.closeIcon]), variant: "flat", iconSlot: React__default.createElement(CrossIcon, { color: "#fff" }), onClick: onClose, "aria-label": "Close" })));
|
|
28
29
|
};
|
|
29
30
|
|
|
30
31
|
export { Toast };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.js","sources":["../../../../src/components/ToastsLayout/components/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { Text } from '../../Text';\nimport { ToastPropTypes } from '../types';\nimport { buildClassnames } from '../../../utils/buildClassnames';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport styles from './toast.module.scss';\nimport { generateToastClassNames } from './utils';\nimport { ToastTypeConfig } from './constants';\n\nexport const Toast = ({\n e2eClassName,\n type,\n iconSlot,\n
|
|
1
|
+
{"version":3,"file":"Toast.js","sources":["../../../../src/components/ToastsLayout/components/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { Text } from '../../Text';\nimport { ToastPropTypes } from '../types';\nimport { buildClassnames } from '../../../utils/buildClassnames';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport styles from './toast.module.scss';\nimport { generateToastClassNames } from './utils';\nimport { ToastTypeConfig } from './constants';\n\nexport const Toast = ({\n e2eClassName,\n type,\n iconSlot,\n message,\n subMessage,\n last,\n minWidth,\n ctaSlot,\n onClose,\n}: ToastPropTypes) => {\n const e2eClassNames = generateToastClassNames(e2eClassName);\n\n // Default to Info icon\n const { accentColor, icon } = ToastTypeConfig[type] ?? ToastTypeConfig.info;\n\n const resolvedIcon = iconSlot ?? icon;\n\n return (\n <FlexRow\n className={buildClassnames([styles.toastContainer, e2eClassNames?.container])}\n alignItems=\"center\"\n style={\n {\n '--toast-min-width': minWidth ?? undefined,\n '--toast-status-color': accentColor,\n } as React.CSSProperties\n }\n data-toast-last={last ?? undefined}\n gap=\"base\"\n role=\"alert\"\n >\n {resolvedIcon && (\n <FlexRow\n className={buildClassnames([styles.iconWrapper, e2eClassNames.icon])}\n alignItems=\"center\"\n justifyContent=\"center\"\n >\n {resolvedIcon}\n </FlexRow>\n )}\n <FlexRow alignItems=\"center\" flexGrow={1} justifyContent=\"space-between\">\n <FlexCol gap=\"none\">\n <Text className={styles.toastText} variant=\"headingSmall\" as=\"p\">\n {message}\n </Text>\n {subMessage && (\n <Text className={styles.toastText} variant=\"body\" as=\"p\">\n {subMessage}\n </Text>\n )}\n </FlexCol>\n {ctaSlot}\n </FlexRow>\n <Button\n className={buildClassnames([styles.toastCloseButton, e2eClassNames?.closeIcon])}\n variant=\"flat\"\n iconSlot={<CrossIcon color=\"#fff\" />}\n onClick={onClose}\n aria-label=\"Close\"\n />\n </FlexRow>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;AAYa,MAAA,KAAK,GAAG,CAAC,EACpB,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,UAAU,EACV,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,OAAO,GACQ,KAAI;;AACnB,IAAA,MAAM,aAAa,GAAG,uBAAuB,CAAC,YAAY,CAAC;;AAG3D,IAAA,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,CAAA,EAAA,GAAA,eAAe,CAAC,IAAI,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAI,eAAe,CAAC,IAAI;IAE3E,MAAM,YAAY,GAAG,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAR,SAAA,GAAA,QAAQ,GAAI,IAAI;AAErC,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,cAAc,EAAE,aAAa,KAAb,IAAA,IAAA,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,SAAS,CAAC,CAAC,EAC7E,UAAU,EAAC,QAAQ,EACnB,KAAK,EACH;AACE,YAAA,mBAAmB,EAAE,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAR,SAAA,GAAA,QAAQ,GAAI,SAAS;AAC1C,YAAA,sBAAsB,EAAE,WAAW;AACb,SAAA,EAAA,iBAAA,EAET,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,SAAA,GAAJ,IAAI,GAAI,SAAS,EAClC,GAAG,EAAC,MAAM,EACV,IAAI,EAAC,OAAO,EAAA;AAEX,QAAA,YAAY,KACXA,cAAC,CAAA,aAAA,CAAA,OAAO,EACN,EAAA,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,WAAW,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,EACpE,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EAEtB,EAAA,YAAY,CACL,CACX;AACD,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,UAAU,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAE,cAAc,EAAC,eAAe,EAAA;AACtE,YAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAC,MAAM,EAAA;AACjB,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,OAAO,EAAC,cAAc,EAAC,EAAE,EAAC,GAAG,EAAA,EAC7D,OAAO,CACH;gBACN,UAAU,KACTA,cAAC,CAAA,aAAA,CAAA,IAAI,IAAC,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,OAAO,EAAC,MAAM,EAAC,EAAE,EAAC,GAAG,EACrD,EAAA,UAAU,CACN,CACR,CACO;AACT,YAAA,OAAO,CACA;AACV,QAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EACL,EAAA,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,gBAAgB,EAAE,aAAa,aAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,SAAS,CAAC,CAAC,EAC/E,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEA,6BAAC,SAAS,EAAA,EAAC,KAAK,EAAC,MAAM,GAAG,EACpC,OAAO,EAAE,OAAO,EAAA,YAAA,EACL,OAAO,EAClB,CAAA,CACM;AAEd;;;;"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle(".
|
|
6
|
-
var styles = {"toastsLayoutContainer":"
|
|
5
|
+
___$insertStyle("._toastsLayoutContainer_o6hq3_1 {\n position: fixed;\n bottom: var(--sizes-6);\n left: 0;\n right: 0;\n width: 100%;\n pointer-events: none;\n z-index: var(--layers-tooltip);\n}\n._toastsLayoutContainer_o6hq3_1 .veeqo-components-toast-enter {\n transform: translateY(12px);\n opacity: 0;\n transition: 225ms ease;\n}\n._toastsLayoutContainer_o6hq3_1 .veeqo-components-toast-enter-active {\n transform: translateY(0);\n opacity: 1;\n transition: 225ms ease-in-out;\n}\n._toastsLayoutContainer_o6hq3_1 .veeqo-components-toast-enter-done {\n opacity: 1;\n}\n._toastsLayoutContainer_o6hq3_1 .veeqo-components-toast-exit {\n transform: translateX(0);\n opacity: 1;\n}\n._toastsLayoutContainer_o6hq3_1 .veeqo-components-toast-exit[data-toast-last=true] {\n transform: translateY(0);\n}\n._toastsLayoutContainer_o6hq3_1 .veeqo-components-toast-exit-active {\n transform: translateX(12px);\n opacity: 0;\n transition: 225ms ease-in-out;\n}\n._toastsLayoutContainer_o6hq3_1 .veeqo-components-toast-exit-active[data-toast-last=true] {\n transform: translateY(12px);\n}");
|
|
6
|
+
var styles = {"toastsLayoutContainer":"_toastsLayoutContainer_o6hq3_1"};
|
|
7
7
|
|
|
8
8
|
module.exports = styles;
|
|
9
9
|
//# sourceMappingURL=toastsLayout.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toastsLayout.module.scss.cjs","sources":["../../../src/components/ToastsLayout/toastsLayout.module.scss"],"sourcesContent":[".toastsLayoutContainer {\n position: fixed;\n bottom: var(--sizes-6);\n width: 100%;\n pointer-events: none;\n z-index: var(--layers-tooltip);\n\n // The CSSTransition components adds non-scoped class names for transition\n // phases. :global is used to target these class names without the default\n // locally scoped id suffix appended by CSS modules.\n :global(.veeqo-components-toast-enter) {\n transform: translateY(12px);\n opacity: 0;\n transition:
|
|
1
|
+
{"version":3,"file":"toastsLayout.module.scss.cjs","sources":["../../../src/components/ToastsLayout/toastsLayout.module.scss"],"sourcesContent":[".toastsLayoutContainer {\n position: fixed;\n bottom: var(--sizes-6);\n left: 0;\n right: 0;\n width: 100%;\n pointer-events: none;\n z-index: var(--layers-tooltip);\n\n // The CSSTransition components adds non-scoped class names for transition\n // phases. :global is used to target these class names without the default\n // locally scoped id suffix appended by CSS modules.\n :global(.veeqo-components-toast-enter) {\n transform: translateY(12px);\n opacity: 0;\n transition: 225ms ease;\n }\n\n :global(.veeqo-components-toast-enter-active) {\n transform: translateY(0);\n opacity: 1;\n transition: 225ms ease-in-out;\n }\n :global(.veeqo-components-toast-enter-done) {\n opacity: 1;\n }\n\n :global(.veeqo-components-toast-exit) {\n transform: translateX(0);\n opacity: 1;\n\n &[data-toast-last='true'] {\n transform: translateY(0);\n }\n }\n\n :global(.veeqo-components-toast-exit-active) {\n transform: translateX(12px);\n opacity: 0;\n transition: 225ms ease-in-out;\n\n &[data-toast-last='true'] {\n transform: translateY(12px);\n }\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,yjCAAA;AACA,aAAA,CAAA,uBAAA,CAAA,gCAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle(".
|
|
4
|
-
var styles = {"toastsLayoutContainer":"
|
|
3
|
+
insertStyle("._toastsLayoutContainer_o6hq3_1 {\n position: fixed;\n bottom: var(--sizes-6);\n left: 0;\n right: 0;\n width: 100%;\n pointer-events: none;\n z-index: var(--layers-tooltip);\n}\n._toastsLayoutContainer_o6hq3_1 .veeqo-components-toast-enter {\n transform: translateY(12px);\n opacity: 0;\n transition: 225ms ease;\n}\n._toastsLayoutContainer_o6hq3_1 .veeqo-components-toast-enter-active {\n transform: translateY(0);\n opacity: 1;\n transition: 225ms ease-in-out;\n}\n._toastsLayoutContainer_o6hq3_1 .veeqo-components-toast-enter-done {\n opacity: 1;\n}\n._toastsLayoutContainer_o6hq3_1 .veeqo-components-toast-exit {\n transform: translateX(0);\n opacity: 1;\n}\n._toastsLayoutContainer_o6hq3_1 .veeqo-components-toast-exit[data-toast-last=true] {\n transform: translateY(0);\n}\n._toastsLayoutContainer_o6hq3_1 .veeqo-components-toast-exit-active {\n transform: translateX(12px);\n opacity: 0;\n transition: 225ms ease-in-out;\n}\n._toastsLayoutContainer_o6hq3_1 .veeqo-components-toast-exit-active[data-toast-last=true] {\n transform: translateY(12px);\n}");
|
|
4
|
+
var styles = {"toastsLayoutContainer":"_toastsLayoutContainer_o6hq3_1"};
|
|
5
5
|
|
|
6
6
|
export { styles as default };
|
|
7
7
|
//# sourceMappingURL=toastsLayout.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toastsLayout.module.scss.js","sources":["../../../src/components/ToastsLayout/toastsLayout.module.scss"],"sourcesContent":[".toastsLayoutContainer {\n position: fixed;\n bottom: var(--sizes-6);\n width: 100%;\n pointer-events: none;\n z-index: var(--layers-tooltip);\n\n // The CSSTransition components adds non-scoped class names for transition\n // phases. :global is used to target these class names without the default\n // locally scoped id suffix appended by CSS modules.\n :global(.veeqo-components-toast-enter) {\n transform: translateY(12px);\n opacity: 0;\n transition:
|
|
1
|
+
{"version":3,"file":"toastsLayout.module.scss.js","sources":["../../../src/components/ToastsLayout/toastsLayout.module.scss"],"sourcesContent":[".toastsLayoutContainer {\n position: fixed;\n bottom: var(--sizes-6);\n left: 0;\n right: 0;\n width: 100%;\n pointer-events: none;\n z-index: var(--layers-tooltip);\n\n // The CSSTransition components adds non-scoped class names for transition\n // phases. :global is used to target these class names without the default\n // locally scoped id suffix appended by CSS modules.\n :global(.veeqo-components-toast-enter) {\n transform: translateY(12px);\n opacity: 0;\n transition: 225ms ease;\n }\n\n :global(.veeqo-components-toast-enter-active) {\n transform: translateY(0);\n opacity: 1;\n transition: 225ms ease-in-out;\n }\n :global(.veeqo-components-toast-enter-done) {\n opacity: 1;\n }\n\n :global(.veeqo-components-toast-exit) {\n transform: translateX(0);\n opacity: 1;\n\n &[data-toast-last='true'] {\n transform: translateY(0);\n }\n }\n\n :global(.veeqo-components-toast-exit-active) {\n transform: translateX(12px);\n opacity: 0;\n transition: 225ms ease-in-out;\n\n &[data-toast-last='true'] {\n transform: translateY(12px);\n }\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,yjCAAA;AACA,aAAA,CAAA,uBAAA,CAAA,gCAAA;;;;"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
exports.ToastTypes = void 0;
|
|
4
|
+
(function (ToastTypes) {
|
|
5
|
+
ToastTypes["info"] = "info";
|
|
6
|
+
ToastTypes["error"] = "error";
|
|
7
|
+
ToastTypes["warning"] = "warning";
|
|
8
|
+
ToastTypes["success"] = "success";
|
|
9
|
+
ToastTypes["merge"] = "merge";
|
|
10
|
+
ToastTypes["custom"] = "custom";
|
|
11
|
+
})(exports.ToastTypes || (exports.ToastTypes = {}));
|
|
12
|
+
//# sourceMappingURL=types.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.cjs","sources":["../../../src/components/ToastsLayout/types.ts"],"sourcesContent":["import { ReactElement } from 'react';\n\nexport enum ToastTypes {\n info = 'info',\n error = 'error',\n warning = 'warning',\n success = 'success',\n merge = 'merge',\n custom = 'custom',\n}\n\nexport type ToastType = Record<ToastTypes, { accentColor: string; icon?: ReactElement }>;\n\nexport type ToastPropTypes = Omit<Notification, 'id' | 'key'> & {\n e2eClassName?: string;\n last: boolean;\n minWidth: number | string;\n onClose: () => void;\n};\n\nexport type ToastsLayoutPropTypes = {\n e2eClassName?: string;\n toasts: Notification[];\n minWidth?: number | string;\n max?: number | null;\n /** Portal target element. Defaults to document.body */\n portalTarget?: Element;\n onClose: (key: string) => void;\n};\n\nexport type ClassNamesReturnPayload = {\n container?: string;\n icon?: string;\n closeIcon?: string;\n};\n\nexport type Notification = {\n /** Unique identifier for the toast */\n id: string;\n type: keyof typeof ToastTypes;\n iconSlot?: ReactElement;\n /** Main message text */\n message: string;\n /** Optional secondary message */\n subMessage?: string;\n /** Optional action buttons slot */\n ctaSlot?: React.ReactNode;\n};\n"],"names":["ToastTypes"],"mappings":";;AAEYA;AAAZ,CAAA,UAAY,UAAU,EAAA;AACpB,IAAA,UAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACb,IAAA,UAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,UAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,UAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,UAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,UAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACnB,CAAC,EAPWA,kBAAU,KAAVA,kBAAU,GAOrB,EAAA,CAAA,CAAA;;"}
|
|
@@ -11,7 +11,7 @@ export type ToastType = Record<ToastTypes, {
|
|
|
11
11
|
accentColor: string;
|
|
12
12
|
icon?: ReactElement;
|
|
13
13
|
}>;
|
|
14
|
-
export type ToastPropTypes = Omit<Notification, 'key'> & {
|
|
14
|
+
export type ToastPropTypes = Omit<Notification, 'id' | 'key'> & {
|
|
15
15
|
e2eClassName?: string;
|
|
16
16
|
last: boolean;
|
|
17
17
|
minWidth: number | string;
|
|
@@ -22,6 +22,8 @@ export type ToastsLayoutPropTypes = {
|
|
|
22
22
|
toasts: Notification[];
|
|
23
23
|
minWidth?: number | string;
|
|
24
24
|
max?: number | null;
|
|
25
|
+
/** Portal target element. Defaults to document.body */
|
|
26
|
+
portalTarget?: Element;
|
|
25
27
|
onClose: (key: string) => void;
|
|
26
28
|
};
|
|
27
29
|
export type ClassNamesReturnPayload = {
|
|
@@ -30,12 +32,14 @@ export type ClassNamesReturnPayload = {
|
|
|
30
32
|
closeIcon?: string;
|
|
31
33
|
};
|
|
32
34
|
export type Notification = {
|
|
33
|
-
|
|
35
|
+
/** Unique identifier for the toast */
|
|
36
|
+
id: string;
|
|
34
37
|
type: keyof typeof ToastTypes;
|
|
35
38
|
iconSlot?: ReactElement;
|
|
36
|
-
text
|
|
39
|
+
/** Main message text */
|
|
40
|
+
message: string;
|
|
41
|
+
/** Optional secondary message */
|
|
37
42
|
subMessage?: string;
|
|
43
|
+
/** Optional action buttons slot */
|
|
38
44
|
ctaSlot?: React.ReactNode;
|
|
39
|
-
/** @deprecated Use ctaSlot instead */
|
|
40
|
-
cta?: React.ReactNode;
|
|
41
45
|
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
var ToastTypes;
|
|
2
|
+
(function (ToastTypes) {
|
|
3
|
+
ToastTypes["info"] = "info";
|
|
4
|
+
ToastTypes["error"] = "error";
|
|
5
|
+
ToastTypes["warning"] = "warning";
|
|
6
|
+
ToastTypes["success"] = "success";
|
|
7
|
+
ToastTypes["merge"] = "merge";
|
|
8
|
+
ToastTypes["custom"] = "custom";
|
|
9
|
+
})(ToastTypes || (ToastTypes = {}));
|
|
10
|
+
|
|
11
|
+
export { ToastTypes };
|
|
12
|
+
//# sourceMappingURL=types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sources":["../../../src/components/ToastsLayout/types.ts"],"sourcesContent":["import { ReactElement } from 'react';\n\nexport enum ToastTypes {\n info = 'info',\n error = 'error',\n warning = 'warning',\n success = 'success',\n merge = 'merge',\n custom = 'custom',\n}\n\nexport type ToastType = Record<ToastTypes, { accentColor: string; icon?: ReactElement }>;\n\nexport type ToastPropTypes = Omit<Notification, 'id' | 'key'> & {\n e2eClassName?: string;\n last: boolean;\n minWidth: number | string;\n onClose: () => void;\n};\n\nexport type ToastsLayoutPropTypes = {\n e2eClassName?: string;\n toasts: Notification[];\n minWidth?: number | string;\n max?: number | null;\n /** Portal target element. Defaults to document.body */\n portalTarget?: Element;\n onClose: (key: string) => void;\n};\n\nexport type ClassNamesReturnPayload = {\n container?: string;\n icon?: string;\n closeIcon?: string;\n};\n\nexport type Notification = {\n /** Unique identifier for the toast */\n id: string;\n type: keyof typeof ToastTypes;\n iconSlot?: ReactElement;\n /** Main message text */\n message: string;\n /** Optional secondary message */\n subMessage?: string;\n /** Optional action buttons slot */\n ctaSlot?: React.ReactNode;\n};\n"],"names":[],"mappings":"IAEY;AAAZ,CAAA,UAAY,UAAU,EAAA;AACpB,IAAA,UAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACb,IAAA,UAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,UAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,UAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,UAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,UAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACnB,CAAC,EAPW,UAAU,KAAV,UAAU,GAOrB,EAAA,CAAA,CAAA;;;;"}
|
|
@@ -56,7 +56,7 @@ export { Stepper } from './Stepper';
|
|
|
56
56
|
export { Tag } from './Tag';
|
|
57
57
|
export { Text } from './Text';
|
|
58
58
|
export { TextField, type TextFieldType } from './TextField';
|
|
59
|
-
export { ToastsLayout, type Notification } from './ToastsLayout';
|
|
59
|
+
export { ToastsLayout, type Notification, ToastTypes } from './ToastsLayout';
|
|
60
60
|
export { Toggle } from './Toggle';
|
|
61
61
|
export { ToggleButton } from './ToggleButton';
|
|
62
62
|
export { Tooltip } from './Tooltip';
|
package/dist/index.cjs
CHANGED
|
@@ -67,6 +67,7 @@ var Tag = require('./components/Tag/Tag.cjs');
|
|
|
67
67
|
var Text = require('./components/Text/Text.cjs');
|
|
68
68
|
var index$3 = require('./components/TextField/index.cjs');
|
|
69
69
|
var ToastsLayout = require('./components/ToastsLayout/ToastsLayout.cjs');
|
|
70
|
+
var types = require('./components/ToastsLayout/types.cjs');
|
|
70
71
|
var Toggle = require('./components/Toggle/Toggle.cjs');
|
|
71
72
|
var ToggleButton = require('./components/ToggleButton/ToggleButton.cjs');
|
|
72
73
|
var Tooltip = require('./components/Tooltip/Tooltip.cjs');
|
|
@@ -420,6 +421,10 @@ exports.Tag = Tag.Tag;
|
|
|
420
421
|
exports.Text = Text.Text;
|
|
421
422
|
exports.TextField = index$3.TextField;
|
|
422
423
|
exports.ToastsLayout = ToastsLayout.ToastsLayout;
|
|
424
|
+
Object.defineProperty(exports, "ToastTypes", {
|
|
425
|
+
enumerable: true,
|
|
426
|
+
get: function () { return types.ToastTypes; }
|
|
427
|
+
});
|
|
423
428
|
exports.Toggle = Toggle.Toggle;
|
|
424
429
|
exports.ToggleButton = ToggleButton.ToggleButton;
|
|
425
430
|
exports.Tooltip = Tooltip.Tooltip;
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/index.js
CHANGED
|
@@ -65,6 +65,7 @@ export { Tag } from './components/Tag/Tag.js';
|
|
|
65
65
|
export { Text } from './components/Text/Text.js';
|
|
66
66
|
export { TextField } from './components/TextField/index.js';
|
|
67
67
|
export { ToastsLayout } from './components/ToastsLayout/ToastsLayout.js';
|
|
68
|
+
export { ToastTypes } from './components/ToastsLayout/types.js';
|
|
68
69
|
export { Toggle } from './components/Toggle/Toggle.js';
|
|
69
70
|
export { ToggleButton } from './components/ToggleButton/ToggleButton.js';
|
|
70
71
|
export { Tooltip } from './components/Tooltip/Tooltip.js';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|