@danske/sapphire-react-lab 0.87.6 → 0.88.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/build/cjs/index.js +552 -493
- package/build/cjs/index.js.map +1 -1
- package/build/esm/Toast/src/Toast.js +21 -10
- package/build/esm/Toast/src/Toast.js.map +1 -1
- package/build/esm/Toast/src/ToastCloseButton.js +50 -0
- package/build/esm/Toast/src/ToastCloseButton.js.map +1 -0
- package/build/esm/Toast/src/ToastProvider.js.map +1 -1
- package/build/esm/Toast/src/ToastRegion.js.map +1 -1
- package/build/esm/Toast/src/context.js.map +1 -1
- package/build/esm/Toast/src/useShowToast.js +12 -2
- package/build/esm/Toast/src/useShowToast.js.map +1 -1
- package/build/index.d.ts +2 -0
- package/package.json +3 -3
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import React, { useRef } from 'react';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { useToast } from '@react-aria/toast';
|
|
4
|
-
import { useSapphireStyleProps,
|
|
4
|
+
import { useSapphireStyleProps, Icon } from '@danske/sapphire-react';
|
|
5
5
|
import styles from '@danske/sapphire-css/components/toast/toast.module.css';
|
|
6
|
-
import {
|
|
6
|
+
import { CheckMarkCircle } from '@danske/sapphire-icons/react';
|
|
7
|
+
import { ToastCloseButton } from './ToastCloseButton.js';
|
|
7
8
|
|
|
8
9
|
var __defProp = Object.defineProperty;
|
|
9
10
|
var __defProps = Object.defineProperties;
|
|
@@ -37,12 +38,19 @@ var __objRest = (source, exclude) => {
|
|
|
37
38
|
return target;
|
|
38
39
|
};
|
|
39
40
|
const Toast = (_a) => {
|
|
40
|
-
var _b = _a, {
|
|
41
|
+
var _b = _a, {
|
|
42
|
+
state
|
|
43
|
+
} = _b, props = __objRest(_b, [
|
|
44
|
+
"state"
|
|
45
|
+
]);
|
|
46
|
+
var _a2;
|
|
41
47
|
const {
|
|
42
48
|
styleProps: { style, className }
|
|
43
49
|
} = useSapphireStyleProps(props);
|
|
44
50
|
const ref = useRef(null);
|
|
45
51
|
const { toastProps, titleProps, closeButtonProps } = useToast(props, state, ref);
|
|
52
|
+
const content = props.toast.content;
|
|
53
|
+
const icon = (_a2 = content.icon) != null ? _a2 : content.variant === "success" ? /* @__PURE__ */ React.createElement(CheckMarkCircle, null) : null;
|
|
46
54
|
return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, toastProps), {
|
|
47
55
|
className: clsx(styles["sapphire-toast"], props.toast.animation ? styles[`sapphire-toast--${props.toast.animation}`] : {}, className),
|
|
48
56
|
style,
|
|
@@ -53,13 +61,16 @@ const Toast = (_a) => {
|
|
|
53
61
|
}
|
|
54
62
|
}
|
|
55
63
|
}), /* @__PURE__ */ React.createElement("div", {
|
|
56
|
-
className: clsx(styles["sapphire-toast__content"]
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
64
|
+
className: clsx(styles["sapphire-toast__content"], {
|
|
65
|
+
[styles["sapphire-toast__content--success"]]: content.variant === "success"
|
|
66
|
+
})
|
|
67
|
+
}, icon && /* @__PURE__ */ React.createElement(Icon, {
|
|
68
|
+
size: "m"
|
|
69
|
+
}, icon), /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, titleProps), {
|
|
70
|
+
className: clsx({
|
|
71
|
+
[styles["sapphire-toast__title--with-icon"]]: icon
|
|
72
|
+
})
|
|
73
|
+
}), content.content), /* @__PURE__ */ React.createElement(ToastCloseButton, __spreadValues({}, closeButtonProps))));
|
|
63
74
|
};
|
|
64
75
|
|
|
65
76
|
export { Toast };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.js","sources":["../../../../src/Toast/src/Toast.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport { AriaToastProps, useToast } from '@react-aria/toast';\nimport {\n SapphireStyleProps,\n useSapphireStyleProps,\n
|
|
1
|
+
{"version":3,"file":"Toast.js","sources":["../../../../src/Toast/src/Toast.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport { AriaToastProps, useToast } from '@react-aria/toast';\nimport {\n SapphireStyleProps,\n useSapphireStyleProps,\n Icon,\n} from '@danske/sapphire-react';\n\nimport styles from '@danske/sapphire-css/components/toast/toast.module.css';\nimport { ToastState } from '@react-stately/toast';\nimport { CheckMarkCircle } from '@danske/sapphire-icons/react';\nimport { ToastData } from './context';\nimport { ToastCloseButton } from './ToastCloseButton';\n\nexport type ToastProps<T extends ToastData> = AriaToastProps<T> &\n SapphireStyleProps & {\n state: ToastState<T>;\n };\n\nexport const Toast = <T extends ToastData>({\n state,\n ...props\n}: ToastProps<T>) => {\n const {\n styleProps: { style, className },\n } = useSapphireStyleProps(props);\n\n const ref = useRef(null);\n const { toastProps, titleProps, closeButtonProps } = useToast(\n props,\n state,\n ref\n );\n\n const content = props.toast.content;\n\n const icon =\n content.icon ??\n (content.variant === 'success' ? <CheckMarkCircle /> : null);\n\n return (\n <div\n {...toastProps}\n className={clsx(\n styles['sapphire-toast'],\n props.toast.animation\n ? styles[`sapphire-toast--${props.toast.animation}`]\n : {},\n className\n )}\n style={style}\n ref={ref}\n onAnimationEnd={() => {\n // Remove the toast when the exiting animation completes.\n if (props.toast.animation === 'exiting') {\n state.remove(props.toast.key);\n }\n }}\n >\n <div\n className={clsx(styles['sapphire-toast__content'], {\n [styles['sapphire-toast__content--success']]:\n content.variant === 'success',\n })}\n >\n {icon && <Icon size=\"m\">{icon}</Icon>}\n <div\n {...titleProps}\n className={clsx({\n [styles['sapphire-toast__title--with-icon']]: icon,\n })}\n >\n {content.content}\n </div>\n <ToastCloseButton {...closeButtonProps} />\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBa,MAAA,KAAA,GAAQ,CAAsB,EAGtB,KAAA;AAHsB,EACzC,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,KAAA;AAAA,GADyC,GAAA,EAAA,EAEtC,kBAFsC,EAEtC,EAAA;AAAA,IADH,OAAA;AAAA,GAAA,CAAA,CAAA;AArBF,EAAA,IAAA,GAAA,CAAA;AAwBE,EAAM,MAAA;AAAA,IACJ,UAAA,EAAY,EAAE,KAAO,EAAA,SAAA,EAAA;AAAA,GAAA,GACnB,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAE1B,EAAA,MAAM,MAAM,MAAO,CAAA,IAAA,CAAA,CAAA;AACnB,EAAA,MAAM,EAAE,UAAY,EAAA,UAAA,EAAY,gBAAqB,EAAA,GAAA,QAAA,CACnD,OACA,KACA,EAAA,GAAA,CAAA,CAAA;AAGF,EAAM,MAAA,OAAA,GAAU,MAAM,KAAM,CAAA,OAAA,CAAA;AAE5B,EAAM,MAAA,IAAA,GACJ,eAAQ,IAAR,KAAA,IAAA,GAAA,GAAA,GACC,QAAQ,OAAY,KAAA,SAAA,mBAAa,KAAA,CAAA,aAAA,CAAA,eAAA,EAAD,IAAsB,CAAA,GAAA,IAAA,CAAA;AAEzD,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,UADN,CAAA,EAAA;AAAA,IAEE,SAAW,EAAA,IAAA,CACT,MAAO,CAAA,gBAAA,CAAA,EACP,KAAM,CAAA,KAAA,CAAM,SACR,GAAA,MAAA,CAAO,CAAmB,gBAAA,EAAA,KAAA,CAAM,KAAM,CAAA,SAAA,CAAA,CAAA,CAAA,GACtC,EACJ,EAAA,SAAA,CAAA;AAAA,IAEF,KAAA;AAAA,IACA,GAAA;AAAA,IACA,gBAAgB,MAAM;AAEpB,MAAI,IAAA,KAAA,CAAM,KAAM,CAAA,SAAA,KAAc,SAAW,EAAA;AACvC,QAAM,KAAA,CAAA,MAAA,CAAO,MAAM,KAAM,CAAA,GAAA,CAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAAA,CAAA,sCAI5B,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,IAAK,CAAA,MAAA,CAAO,yBAA4B,CAAA,EAAA;AAAA,MAChD,CAAA,MAAA,CAAO,kCACN,CAAA,GAAA,OAAA,CAAQ,OAAY,KAAA,SAAA;AAAA,KAAA,CAAA;AAAA,GAGvB,EAAA,IAAA,wCAAS,IAAD,EAAA;AAAA,IAAM,IAAK,EAAA,GAAA;AAAA,GAAA,EAAK,IACzB,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,UADN,CAAA,EAAA;AAAA,IAEE,WAAW,IAAK,CAAA;AAAA,MAAA,CACb,OAAO,kCAAsC,CAAA,GAAA,IAAA;AAAA,KAAA,CAAA;AAAA,GAAA,CAAA,EAG/C,OAAQ,CAAA,OAAA,CAAA,kBAEV,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAD,cAAsB,CAAA,EAAA,EAAA,gBAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import React, { useRef } from 'react';
|
|
2
|
+
import { useButton, Icon } from '@danske/sapphire-react';
|
|
3
|
+
import { useHover } from '@react-aria/interactions';
|
|
4
|
+
import { useFocusRing, FocusRing } from '@react-aria/focus';
|
|
5
|
+
import { mergeProps } from '@react-aria/utils';
|
|
6
|
+
import clsx from 'clsx';
|
|
7
|
+
import styles from '@danske/sapphire-css/components/toast/toast.module.css';
|
|
8
|
+
import { Close } from '@danske/sapphire-icons/react';
|
|
9
|
+
|
|
10
|
+
var __defProp = Object.defineProperty;
|
|
11
|
+
var __defProps = Object.defineProperties;
|
|
12
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
13
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
14
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
15
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
16
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
17
|
+
var __spreadValues = (a, b) => {
|
|
18
|
+
for (var prop in b || (b = {}))
|
|
19
|
+
if (__hasOwnProp.call(b, prop))
|
|
20
|
+
__defNormalProp(a, prop, b[prop]);
|
|
21
|
+
if (__getOwnPropSymbols)
|
|
22
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
23
|
+
if (__propIsEnum.call(b, prop))
|
|
24
|
+
__defNormalProp(a, prop, b[prop]);
|
|
25
|
+
}
|
|
26
|
+
return a;
|
|
27
|
+
};
|
|
28
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
29
|
+
const ToastCloseButton = (props) => {
|
|
30
|
+
const ref = useRef(null);
|
|
31
|
+
const { buttonProps, isPressed } = useButton(props, ref);
|
|
32
|
+
const { hoverProps, isHovered } = useHover({ isDisabled: props.isDisabled });
|
|
33
|
+
const { focusProps, isFocusVisible } = useFocusRing();
|
|
34
|
+
return /* @__PURE__ */ React.createElement(FocusRing, {
|
|
35
|
+
focusRingClass: clsx(styles["is-focus"])
|
|
36
|
+
}, /* @__PURE__ */ React.createElement("button", __spreadProps(__spreadValues({}, mergeProps(buttonProps, hoverProps, focusProps)), {
|
|
37
|
+
"aria-label": "Close",
|
|
38
|
+
ref,
|
|
39
|
+
className: clsx(styles["sapphire-toast__close-button"], styles["js-focus"], styles["js-hover"], {
|
|
40
|
+
[styles["is-active"]]: isPressed,
|
|
41
|
+
[styles["is-hover"]]: isHovered,
|
|
42
|
+
[styles["is-focus"]]: isFocusVisible
|
|
43
|
+
})
|
|
44
|
+
}), /* @__PURE__ */ React.createElement(Icon, {
|
|
45
|
+
size: "s"
|
|
46
|
+
}, /* @__PURE__ */ React.createElement(Close, null))));
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
export { ToastCloseButton };
|
|
50
|
+
//# sourceMappingURL=ToastCloseButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToastCloseButton.js","sources":["../../../../src/Toast/src/ToastCloseButton.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { AriaButtonProps } from '@react-aria/button';\nimport { Icon, useButton } from '@danske/sapphire-react';\nimport { useHover } from '@react-aria/interactions';\nimport { FocusRing, useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/toast/toast.module.css';\nimport { Close } from '@danske/sapphire-icons/react';\n\n/**\n * @internal\n */\nexport const ToastCloseButton = (props: AriaButtonProps) => {\n const ref = useRef(null);\n const { buttonProps, isPressed } = useButton(props, ref);\n const { hoverProps, isHovered } = useHover({ isDisabled: props.isDisabled });\n const { focusProps, isFocusVisible } = useFocusRing();\n\n return (\n <FocusRing focusRingClass={clsx(styles['is-focus'])}>\n <button\n {...mergeProps(buttonProps, hoverProps, focusProps)}\n aria-label=\"Close\"\n ref={ref}\n className={clsx(\n styles['sapphire-toast__close-button'],\n styles['js-focus'],\n styles['js-hover'],\n {\n [styles['is-active']]: isPressed,\n [styles['is-hover']]: isHovered,\n [styles['is-focus']]: isFocusVisible,\n }\n )}\n >\n <Icon size=\"s\">\n <Close />\n </Icon>\n </button>\n </FocusRing>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaa,MAAA,gBAAA,GAAmB,CAAC,KAA2B,KAAA;AAC1D,EAAA,MAAM,MAAM,MAAO,CAAA,IAAA,CAAA,CAAA;AACnB,EAAA,MAAM,EAAE,WAAA,EAAa,SAAc,EAAA,GAAA,SAAA,CAAU,KAAO,EAAA,GAAA,CAAA,CAAA;AACpD,EAAA,MAAM,EAAE,UAAY,EAAA,SAAA,EAAA,GAAc,QAAS,CAAA,EAAE,YAAY,KAAM,CAAA,UAAA,EAAA,CAAA,CAAA;AAC/D,EAAM,MAAA,EAAE,YAAY,cAAmB,EAAA,GAAA,YAAA,EAAA,CAAA;AAEvC,EAAA,2CACG,SAAD,EAAA;AAAA,IAAW,cAAA,EAAgB,KAAK,MAAO,CAAA,UAAA,CAAA,CAAA;AAAA,GAAA,sCACpC,QAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,UAAW,CAAA,WAAA,EAAa,YAAY,UAD1C,CAAA,CAAA,EAAA;AAAA,IAEE,YAAW,EAAA,OAAA;AAAA,IACX,GAAA;AAAA,IACA,WAAW,IACT,CAAA,MAAA,CAAO,iCACP,MAAO,CAAA,UAAA,CAAA,EACP,OAAO,UACP,CAAA,EAAA;AAAA,MAAA,CACG,OAAO,WAAe,CAAA,GAAA,SAAA;AAAA,MAAA,CACtB,OAAO,UAAc,CAAA,GAAA,SAAA;AAAA,MAAA,CACrB,OAAO,UAAc,CAAA,GAAA,cAAA;AAAA,KAAA,CAAA;AAAA,GAAA,CAAA,sCAIzB,IAAD,EAAA;AAAA,IAAM,IAAK,EAAA,GAAA;AAAA,GAAA,sCACR,KAAD,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToastProvider.js","sources":["../../../../src/Toast/src/ToastProvider.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { useThemeCheck } from '@danske/sapphire-react';\n\nimport { useToastState } from '@react-stately/toast';\nimport { ToastRegionProps, ToastRegion } from './ToastRegion';\nimport { ToastContext } from './context';\n\nexport type ToastProviderProps = Omit<ToastRegionProps<ReactNode>, 'state'> & {\n children: React.ReactNode;\n};\n\n/**\n * Sapphire toast provider.\n * Render this at the root of your app.\n */\nexport const ToastProvider = ({\n children,\n placement = 'bottom',\n ...props\n}: ToastProviderProps) => {\n useThemeCheck();\n\n const state = useToastState<
|
|
1
|
+
{"version":3,"file":"ToastProvider.js","sources":["../../../../src/Toast/src/ToastProvider.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { useThemeCheck } from '@danske/sapphire-react';\n\nimport { useToastState } from '@react-stately/toast';\nimport { ToastRegionProps, ToastRegion } from './ToastRegion';\nimport { ToastContext, ToastData } from './context';\n\nexport type ToastProviderProps = Omit<ToastRegionProps<ReactNode>, 'state'> & {\n children: React.ReactNode;\n};\n\n/**\n * Sapphire toast provider.\n * Render this at the root of your app.\n */\nexport const ToastProvider = ({\n children,\n placement = 'bottom',\n ...props\n}: ToastProviderProps) => {\n useThemeCheck();\n\n const state = useToastState<ToastData>({\n maxVisibleToasts: 1,\n hasExitAnimation: true,\n });\n\n return (\n <ToastContext.Provider value={state}>\n {children}\n {state.visibleToasts.length > 0 && (\n <ToastRegion {...props} state={state} placement={placement} />\n )}\n </ToastContext.Provider>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAea,MAAA,aAAA,GAAgB,CAAC,EAIJ,KAAA;AAJI,EAC5B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,SAAY,GAAA,QAAA;AAAA,GAFgB,GAAA,EAAA,EAGzB,kBAHyB,EAGzB,EAAA;AAAA,IAFH,UAAA;AAAA,IACA,WAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AAEA,EAAA,MAAM,QAAQ,aAAyB,CAAA;AAAA,IACrC,gBAAkB,EAAA,CAAA;AAAA,IAClB,gBAAkB,EAAA,IAAA;AAAA,GAAA,CAAA,CAAA;AAGpB,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,aAAa,QAAd,EAAA;AAAA,IAAuB,KAAO,EAAA,KAAA;AAAA,GAC3B,EAAA,QAAA,EACA,MAAM,aAAc,CAAA,MAAA,GAAS,qBAC3B,KAAA,CAAA,aAAA,CAAA,WAAA,EAAD,iCAAiB,KAAjB,CAAA,EAAA;AAAA,IAAwB,KAAA;AAAA,IAAc,SAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToastRegion.js","sources":["../../../../src/Toast/src/ToastRegion.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { AriaToastRegionProps, useToastRegion } from '@react-aria/toast';\nimport clsx from 'clsx';\nimport {\n SapphireOverlayContainer,\n SapphireStyleProps,\n ThemeRoot,\n useThemeContext,\n} from '@danske/sapphire-react';\n\nimport styles from '@danske/sapphire-css/components/toast/toast.module.css';\nimport { ToastState } from '@react-stately/toast';\nimport { Toast } from './Toast';\n\ntype VerticalPlacement = 'top' | 'bottom';\ntype HorizontalPlacement = 'left' | 'right';\n\nexport type ToastRegionProps<T> = AriaToastRegionProps &\n SapphireStyleProps & {\n state: ToastState<T>;\n /**\n * Placement of the Toast notifications on the page.\n */\n placement?:\n | VerticalPlacement\n | `${VerticalPlacement}-${HorizontalPlacement}`;\n };\n\nexport const ToastRegion = <T
|
|
1
|
+
{"version":3,"file":"ToastRegion.js","sources":["../../../../src/Toast/src/ToastRegion.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { AriaToastRegionProps, useToastRegion } from '@react-aria/toast';\nimport clsx from 'clsx';\nimport {\n SapphireOverlayContainer,\n SapphireStyleProps,\n ThemeRoot,\n useThemeContext,\n} from '@danske/sapphire-react';\n\nimport styles from '@danske/sapphire-css/components/toast/toast.module.css';\nimport { ToastState } from '@react-stately/toast';\nimport { Toast } from './Toast';\nimport { ToastData } from './context';\n\ntype VerticalPlacement = 'top' | 'bottom';\ntype HorizontalPlacement = 'left' | 'right';\n\nexport type ToastRegionProps<T> = AriaToastRegionProps &\n SapphireStyleProps & {\n state: ToastState<T>;\n /**\n * Placement of the Toast notifications on the page.\n */\n placement?:\n | VerticalPlacement\n | `${VerticalPlacement}-${HorizontalPlacement}`;\n };\n\nexport const ToastRegion = <T extends ToastData>({\n state,\n placement = 'bottom',\n ...props\n}: ToastRegionProps<T>) => {\n const ref = useRef(null);\n const { regionProps } = useToastRegion(props, state, ref);\n const { overlayZIndex = 100 } = useThemeContext();\n\n return (\n <SapphireOverlayContainer>\n <ThemeRoot contrast>\n <div\n {...regionProps}\n ref={ref}\n className={clsx(\n styles['sapphire-toast-container'],\n styles[`sapphire-toast-container--${placement}`]\n )}\n style={\n {\n zIndex: overlayZIndex + 200,\n } /* above overlays from @danske/sapphire-react */\n }\n >\n {state.visibleToasts.map((toast) => (\n <Toast {...props} key={toast.key} toast={toast} state={state} />\n ))}\n </div>\n </ThemeRoot>\n </SapphireOverlayContainer>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6Ba,MAAA,WAAA,GAAc,CAAsB,EAItB,KAAA;AAJsB,EAC/C,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,KAAA;AAAA,IACA,SAAY,GAAA,QAAA;AAAA,GAFmC,GAAA,EAAA,EAG5C,kBAH4C,EAG5C,EAAA;AAAA,IAFH,OAAA;AAAA,IACA,WAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,MAAM,MAAM,MAAO,CAAA,IAAA,CAAA,CAAA;AACnB,EAAA,MAAM,EAAE,WAAA,EAAA,GAAgB,cAAe,CAAA,KAAA,EAAO,KAAO,EAAA,GAAA,CAAA,CAAA;AACrD,EAAM,MAAA,EAAE,gBAAgB,GAAQ,EAAA,GAAA,eAAA,EAAA,CAAA;AAEhC,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAD,IACE,kBAAA,KAAA,CAAA,aAAA,CAAC,SAAD,EAAA;AAAA,IAAW,QAAQ,EAAA,IAAA;AAAA,GACjB,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,WADN,CAAA,EAAA;AAAA,IAEE,GAAA;AAAA,IACA,SAAW,EAAA,IAAA,CACT,MAAO,CAAA,0BAAA,CAAA,EACP,OAAO,CAA6B,0BAAA,EAAA,SAAA,CAAA,CAAA,CAAA,CAAA;AAAA,IAEtC,KACE,EAAA;AAAA,MACE,QAAQ,aAAgB,GAAA,GAAA;AAAA,KAAA;AAAA,GAI3B,CAAA,EAAA,KAAA,CAAM,cAAc,GAAI,CAAA,CAAC,0BACvB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAD,iCAAW,KAAX,CAAA,EAAA;AAAA,IAAkB,KAAK,KAAM,CAAA,GAAA;AAAA,IAAK,KAAA;AAAA,IAAc,KAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.js","sources":["../../../../src/Toast/src/context.ts"],"sourcesContent":["import React, { ReactNode, useContext } from 'react';\nimport { ToastState } from '@react-stately/toast';\n\nexport const ToastContext = React.createContext<ToastState<
|
|
1
|
+
{"version":3,"file":"context.js","sources":["../../../../src/Toast/src/context.ts"],"sourcesContent":["import React, { ReactNode, useContext } from 'react';\nimport { ToastState } from '@react-stately/toast';\n\nexport interface ToastData {\n content: ReactNode;\n variant: 'neutral' | 'success';\n icon?: React.ReactNode;\n}\n\nexport const ToastContext = React.createContext<ToastState<ToastData> | null>(\n null\n);\n\nexport const useToastContext = () => {\n const context = useContext(ToastContext);\n\n return context;\n};\n"],"names":[],"mappings":";;AASa,MAAA,YAAA,GAAe,MAAM,aAChC,CAAA,IAAA,EAAA;AAGK,MAAM,kBAAkB,MAAM;AACnC,EAAA,MAAM,UAAU,UAAW,CAAA,YAAA,CAAA,CAAA;AAE3B,EAAO,OAAA,OAAA,CAAA;AAAA;;;;"}
|
|
@@ -6,8 +6,18 @@ const useShowToast = () => {
|
|
|
6
6
|
throw new Error('"useShowToast" should be used inside a <ToastProvider>.');
|
|
7
7
|
}
|
|
8
8
|
return (content, options) => {
|
|
9
|
-
const {
|
|
10
|
-
|
|
9
|
+
const {
|
|
10
|
+
onClose,
|
|
11
|
+
timeout = 3e3,
|
|
12
|
+
variant = "neutral",
|
|
13
|
+
icon
|
|
14
|
+
} = options || {};
|
|
15
|
+
const toastData = {
|
|
16
|
+
content,
|
|
17
|
+
variant,
|
|
18
|
+
icon
|
|
19
|
+
};
|
|
20
|
+
toastState.add(toastData, { onClose, timeout });
|
|
11
21
|
};
|
|
12
22
|
};
|
|
13
23
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useShowToast.js","sources":["../../../../src/Toast/src/useShowToast.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"useShowToast.js","sources":["../../../../src/Toast/src/useShowToast.ts"],"sourcesContent":["import { ToastData, useToastContext } from './context';\nimport { ReactNode } from 'react';\n\nexport type ShowToastFn = (\n content: ReactNode,\n options?: ShowToastOptions\n) => void;\n\nexport interface ShowToastOptions {\n /**\n * Handler that is called when the toast is closed, either by the user\n * or after a timeout.\n */\n onClose?: () => void;\n /**\n * A timeout to automatically close the toast after, in milliseconds.\n * Note that if the toast is hovered or interacted with, the timeout is\n * paused.\n *\n * @default 3000\n */\n timeout?: number;\n variant?: 'neutral' | 'success';\n icon?: ReactNode;\n}\n\nexport const useShowToast = (): ShowToastFn => {\n const toastState = useToastContext();\n\n if (!toastState) {\n throw new Error('\"useShowToast\" should be used inside a <ToastProvider>.');\n }\n\n return (content, options) => {\n const {\n onClose,\n timeout = 3000,\n variant = 'neutral',\n icon,\n } = options || {};\n\n const toastData: ToastData = {\n content,\n variant,\n icon,\n };\n\n /*\n * NOTE:\n * There is an addition \"priority\" parameter to \".add\".\n * We don't use it now, but we should if we will have different types of\n * toast notifications with different priorities.\n */\n toastState.add(toastData, { onClose, timeout });\n };\n};\n"],"names":[],"mappings":";;AA0BO,MAAM,eAAe,MAAmB;AAC7C,EAAA,MAAM,UAAa,GAAA,eAAA,EAAA,CAAA;AAEnB,EAAA,IAAI,CAAC,UAAY,EAAA;AACf,IAAA,MAAM,IAAI,KAAM,CAAA,yDAAA,CAAA,CAAA;AAAA,GAAA;AAGlB,EAAO,OAAA,CAAC,SAAS,OAAY,KAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,OAAA;AAAA,MACA,OAAU,GAAA,GAAA;AAAA,MACV,OAAU,GAAA,SAAA;AAAA,MACV,IAAA;AAAA,KAAA,GACE,OAAW,IAAA,EAAA,CAAA;AAEf,IAAA,MAAM,SAAuB,GAAA;AAAA,MAC3B,OAAA;AAAA,MACA,OAAA;AAAA,MACA,IAAA;AAAA,KAAA,CAAA;AASF,IAAW,UAAA,CAAA,GAAA,CAAI,SAAW,EAAA,EAAE,OAAS,EAAA,OAAA,EAAA,CAAA,CAAA;AAAA,GAAA,CAAA;AAAA;;;;"}
|
package/build/index.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@danske/sapphire-react-lab",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.88.0",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"description": "Experimental React components of the Sapphire Design System from Danske Bank A/S",
|
|
6
6
|
"exports": {
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"cross-env": "^7.0.3"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@danske/sapphire-css": "^32.
|
|
39
|
+
"@danske/sapphire-css": "^32.1.0",
|
|
40
40
|
"@internationalized/date": "^3.5.5",
|
|
41
41
|
"@internationalized/string": "^3.2.3",
|
|
42
42
|
"@react-aria/accordion": "^3.0.0-alpha.31",
|
|
@@ -74,5 +74,5 @@
|
|
|
74
74
|
"clsx": "^1.1.1",
|
|
75
75
|
"react-transition-group": "^4.4.5"
|
|
76
76
|
},
|
|
77
|
-
"gitHead": "
|
|
77
|
+
"gitHead": "d07b03faa800429f6bf0e28d47ac8accec8e9755"
|
|
78
78
|
}
|