@danske/sapphire-react-lab 0.81.0 → 0.82.1
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 +17 -4
- package/build/cjs/index.js.map +1 -1
- package/build/esm/Toast/src/ToastProvider.js +9 -2
- package/build/esm/Toast/src/ToastProvider.js.map +1 -1
- package/build/esm/Toast/src/ToastRegion.js +9 -2
- package/build/esm/Toast/src/ToastRegion.js.map +1 -1
- package/build/index.d.ts +7 -1
- package/package.json +3 -3
|
@@ -36,7 +36,13 @@ var __objRest = (source, exclude) => {
|
|
|
36
36
|
return target;
|
|
37
37
|
};
|
|
38
38
|
const ToastProvider = (_a) => {
|
|
39
|
-
var _b = _a, {
|
|
39
|
+
var _b = _a, {
|
|
40
|
+
children,
|
|
41
|
+
placement = "bottom"
|
|
42
|
+
} = _b, props = __objRest(_b, [
|
|
43
|
+
"children",
|
|
44
|
+
"placement"
|
|
45
|
+
]);
|
|
40
46
|
useThemeCheck();
|
|
41
47
|
const state = useToastState({
|
|
42
48
|
maxVisibleToasts: 1,
|
|
@@ -45,7 +51,8 @@ const ToastProvider = (_a) => {
|
|
|
45
51
|
return /* @__PURE__ */ React.createElement(ToastContext.Provider, {
|
|
46
52
|
value: state
|
|
47
53
|
}, children, state.visibleToasts.length > 0 && /* @__PURE__ */ React.createElement(ToastRegion, __spreadProps(__spreadValues({}, props), {
|
|
48
|
-
state
|
|
54
|
+
state,
|
|
55
|
+
placement
|
|
49
56
|
})));
|
|
50
57
|
};
|
|
51
58
|
|
|
@@ -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 = ({
|
|
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<ReactNode>({\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,5 +1,6 @@
|
|
|
1
1
|
import React, { useRef } from 'react';
|
|
2
2
|
import { useToastRegion } from '@react-aria/toast';
|
|
3
|
+
import clsx from 'clsx';
|
|
3
4
|
import { useThemeContext, SapphireOverlayContainer, ThemeRoot } from '@danske/sapphire-react';
|
|
4
5
|
import styles from '@danske/sapphire-css/components/toast/toast.module.css';
|
|
5
6
|
import { Toast } from './Toast.js';
|
|
@@ -36,7 +37,13 @@ var __objRest = (source, exclude) => {
|
|
|
36
37
|
return target;
|
|
37
38
|
};
|
|
38
39
|
const ToastRegion = (_a) => {
|
|
39
|
-
var _b = _a, {
|
|
40
|
+
var _b = _a, {
|
|
41
|
+
state,
|
|
42
|
+
placement = "bottom"
|
|
43
|
+
} = _b, props = __objRest(_b, [
|
|
44
|
+
"state",
|
|
45
|
+
"placement"
|
|
46
|
+
]);
|
|
40
47
|
const ref = useRef(null);
|
|
41
48
|
const { regionProps } = useToastRegion(props, state, ref);
|
|
42
49
|
const { overlayZIndex = 100 } = useThemeContext();
|
|
@@ -44,7 +51,7 @@ const ToastRegion = (_a) => {
|
|
|
44
51
|
contrast: true
|
|
45
52
|
}, /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, regionProps), {
|
|
46
53
|
ref,
|
|
47
|
-
className: styles["sapphire-toast-container"],
|
|
54
|
+
className: clsx(styles["sapphire-toast-container"], styles[`sapphire-toast-container--${placement}`]),
|
|
48
55
|
style: {
|
|
49
56
|
zIndex: overlayZIndex + 200
|
|
50
57
|
}
|
|
@@ -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 {\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\nexport type ToastRegionProps<T> = AriaToastRegionProps &\n SapphireStyleProps & {\n state: ToastState<T>;\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';\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,>({\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4Ba,MAAA,WAAA,GAAc,CAAK,EAIL,KAAA;AAJK,EAC9B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,KAAA;AAAA,IACA,SAAY,GAAA,QAAA;AAAA,GAFkB,GAAA,EAAA,EAG3B,kBAH2B,EAG3B,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;;;;"}
|
package/build/index.d.ts
CHANGED
|
@@ -540,8 +540,14 @@ interface AutocompleteProps<T extends object> {
|
|
|
540
540
|
*/
|
|
541
541
|
declare const SearchField: React__default.ForwardRefExoticComponent<SapphireSearchFieldProps<object> & React__default.RefAttributes<HTMLInputElement>>;
|
|
542
542
|
|
|
543
|
+
declare type VerticalPlacement = 'top' | 'bottom';
|
|
544
|
+
declare type HorizontalPlacement = 'left' | 'right';
|
|
543
545
|
declare type ToastRegionProps<T> = AriaToastRegionProps & SapphireStyleProps & {
|
|
544
546
|
state: ToastState<T>;
|
|
547
|
+
/**
|
|
548
|
+
* Placement of the Toast notifications on the page.
|
|
549
|
+
*/
|
|
550
|
+
placement?: VerticalPlacement | `${VerticalPlacement}-${HorizontalPlacement}`;
|
|
545
551
|
};
|
|
546
552
|
|
|
547
553
|
declare type ToastProviderProps = Omit<ToastRegionProps<ReactNode>, 'state'> & {
|
|
@@ -551,7 +557,7 @@ declare type ToastProviderProps = Omit<ToastRegionProps<ReactNode>, 'state'> & {
|
|
|
551
557
|
* Sapphire toast provider.
|
|
552
558
|
* Render this at the root of your app.
|
|
553
559
|
*/
|
|
554
|
-
declare const ToastProvider: ({ children, ...props }: ToastProviderProps) => React__default.JSX.Element;
|
|
560
|
+
declare const ToastProvider: ({ children, placement, ...props }: ToastProviderProps) => React__default.JSX.Element;
|
|
555
561
|
|
|
556
562
|
declare type ShowToastFn = (content: ReactNode, options?: ShowToastOptions) => void;
|
|
557
563
|
interface ShowToastOptions {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@danske/sapphire-react-lab",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.82.1",
|
|
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": "^
|
|
39
|
+
"@danske/sapphire-css": "^28.0.1",
|
|
40
40
|
"@internationalized/date": "^3.5.2",
|
|
41
41
|
"@internationalized/string": "^3.2.1",
|
|
42
42
|
"@react-aria/accordion": "^3.0.0-alpha.27",
|
|
@@ -71,5 +71,5 @@
|
|
|
71
71
|
"clsx": "^1.1.1",
|
|
72
72
|
"react-transition-group": "^4.4.5"
|
|
73
73
|
},
|
|
74
|
-
"gitHead": "
|
|
74
|
+
"gitHead": "1d251e9bee55e38ff1595ca53598d934474b1f1c"
|
|
75
75
|
}
|