@transferwise/components 0.0.0-experimental-5598332 → 0.0.0-experimental-cbc00a7

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.
Files changed (82) hide show
  1. package/build/ListItem/ListItem.js +2 -32
  2. package/build/ListItem/ListItem.js.map +1 -1
  3. package/build/ListItem/ListItem.mjs +3 -33
  4. package/build/ListItem/ListItem.mjs.map +1 -1
  5. package/build/Snackbar/Snackbar.js +107 -105
  6. package/build/Snackbar/Snackbar.js.map +1 -1
  7. package/build/Snackbar/Snackbar.mjs +109 -104
  8. package/build/Snackbar/Snackbar.mjs.map +1 -1
  9. package/build/Snackbar/SnackbarContext.js.map +1 -1
  10. package/build/Snackbar/SnackbarContext.mjs.map +1 -1
  11. package/build/Snackbar/SnackbarPortal.js +12 -0
  12. package/build/Snackbar/SnackbarPortal.js.map +1 -0
  13. package/build/Snackbar/SnackbarPortal.mjs +8 -0
  14. package/build/Snackbar/SnackbarPortal.mjs.map +1 -0
  15. package/build/Snackbar/SnackbarProvider.js +23 -27
  16. package/build/Snackbar/SnackbarProvider.js.map +1 -1
  17. package/build/Snackbar/SnackbarProvider.mjs +24 -28
  18. package/build/Snackbar/SnackbarProvider.mjs.map +1 -1
  19. package/build/Snackbar/constants.js +8 -0
  20. package/build/Snackbar/constants.js.map +1 -0
  21. package/build/Snackbar/constants.mjs +5 -0
  22. package/build/Snackbar/constants.mjs.map +1 -0
  23. package/build/Snackbar/useSnackbarManager.js +119 -0
  24. package/build/Snackbar/useSnackbarManager.js.map +1 -0
  25. package/build/Snackbar/useSnackbarManager.mjs +115 -0
  26. package/build/Snackbar/useSnackbarManager.mjs.map +1 -0
  27. package/build/i18n/th.json +1 -1
  28. package/build/i18n/th.json.js +1 -1
  29. package/build/i18n/th.json.mjs +1 -1
  30. package/build/i18n/zh-CN.json +0 -1
  31. package/build/i18n/zh-CN.json.js +0 -1
  32. package/build/i18n/zh-CN.json.js.map +1 -1
  33. package/build/i18n/zh-CN.json.mjs +0 -1
  34. package/build/i18n/zh-CN.json.mjs.map +1 -1
  35. package/build/main.css +113 -61
  36. package/build/styles/Snackbar/Snackbar.css +116 -64
  37. package/build/styles/main.css +113 -61
  38. package/build/types/Body/Body.d.ts +2 -2
  39. package/build/types/IconButton/IconButton.d.ts +1 -1
  40. package/build/types/ListItem/ListItem.d.ts +0 -2
  41. package/build/types/ListItem/ListItem.d.ts.map +1 -1
  42. package/build/types/MoneyInput/MoneyInput.d.ts +1 -1
  43. package/build/types/MoneyInput/MoneyInput.d.ts.map +1 -1
  44. package/build/types/Snackbar/Snackbar.d.ts +10 -8
  45. package/build/types/Snackbar/Snackbar.d.ts.map +1 -1
  46. package/build/types/Snackbar/Snackbar.types.d.ts +19 -0
  47. package/build/types/Snackbar/Snackbar.types.d.ts.map +1 -0
  48. package/build/types/Snackbar/SnackbarContext.d.ts +2 -2
  49. package/build/types/Snackbar/SnackbarContext.d.ts.map +1 -1
  50. package/build/types/Snackbar/SnackbarPortal.d.ts +4 -0
  51. package/build/types/Snackbar/SnackbarPortal.d.ts.map +1 -0
  52. package/build/types/Snackbar/SnackbarProvider.d.ts.map +1 -1
  53. package/build/types/Snackbar/constants.d.ts +3 -0
  54. package/build/types/Snackbar/constants.d.ts.map +1 -0
  55. package/build/types/Snackbar/useSnackbar.d.ts +1 -1
  56. package/build/types/Snackbar/useSnackbar.d.ts.map +1 -1
  57. package/build/types/Snackbar/useSnackbarManager.d.ts +16 -0
  58. package/build/types/Snackbar/useSnackbarManager.d.ts.map +1 -0
  59. package/build/types/Title/Title.d.ts +2 -2
  60. package/build/types/Upload/Steps/UploadImageStep/UploadImageStep.d.ts +1 -1
  61. package/build/types/UploadInput/UploadItem/UploadItemLink.d.ts +1 -1
  62. package/package.json +3 -3
  63. package/src/ListItem/ListItem.test.tsx +0 -42
  64. package/src/ListItem/ListItem.tsx +2 -23
  65. package/src/Snackbar/Snackbar.css +116 -64
  66. package/src/Snackbar/Snackbar.less +121 -60
  67. package/src/Snackbar/Snackbar.test.tsx +122 -133
  68. package/src/Snackbar/Snackbar.tsx +95 -96
  69. package/src/Snackbar/Snackbar.types.ts +21 -0
  70. package/src/Snackbar/SnackbarContext.ts +2 -2
  71. package/src/Snackbar/SnackbarPortal.tsx +8 -0
  72. package/src/Snackbar/SnackbarProvider.test.tsx +289 -0
  73. package/src/Snackbar/SnackbarProvider.tsx +19 -18
  74. package/src/Snackbar/_stories/Snackbar.rtl.test.story.tsx +16 -6
  75. package/src/Snackbar/_stories/Snackbar.story.tsx +62 -1
  76. package/src/Snackbar/_stories/Snackbar.test.story.tsx +26 -5
  77. package/src/Snackbar/constants.ts +2 -0
  78. package/src/Snackbar/useSnackbarManager.ts +122 -0
  79. package/src/i18n/th.json +1 -1
  80. package/src/i18n/zh-CN.json +0 -1
  81. package/src/main.css +113 -61
  82. package/src/ListItem/ListItem.ssr.test.tsx +0 -115
@@ -1 +1 @@
1
- {"version":3,"file":"Snackbar.js","sources":["../../src/Snackbar/Snackbar.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport Button from '../Button';\nimport Body from '../Body';\nimport type { ThemeDark, ThemeLight } from '../common';\nimport withNextPortal from '../WithNextPortal/WithNextPortal';\n\nconst CSS_TRANSITION_DURATION = 400;\n\nexport interface SnackbarProps {\n action?: {\n label: string;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n };\n text: React.ReactNode;\n /** @deprecated Has no effect. Snackbar theming is based on ThemeProvider. */\n theme?: ThemeLight | ThemeDark;\n timeout: number;\n timestamp: number;\n}\n\ninterface SnackbarState extends Pick<SnackbarProps, 'action' | 'text'> {\n visible: boolean;\n}\n\nexport const Snackbar = (props: SnackbarProps) => {\n const bodyRef = useRef<HTMLSpanElement>(null);\n const leaveTimeout = useRef(0);\n const transitionTimeout = useRef(0);\n /** The props of the last committed render, as `this.props` was in the class component. */\n const committedProps = useRef(props);\n\n const [state, setState] = useState<SnackbarState>({\n visible: false,\n text: '',\n });\n\n useEffect(\n () => () => {\n window.clearTimeout(leaveTimeout.current);\n window.clearTimeout(transitionTimeout.current);\n },\n [],\n );\n\n // Runs after every render to mirror the componentDidUpdate lifecycle this component previously\n // relied on, including the shouldComponentUpdate guard that ignored every update without text.\n // Layout, not passive, so a notification is shown or replaced before the browser paints, as\n // componentDidUpdate did. Both rules below are disabled on purpose: the dependency-less effect\n // and its synchronous state updates are what keep this conversion behaviour-identical.\n /* eslint-disable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */\n useLayoutEffect(() => {\n const previousProps = committedProps.current;\n committedProps.current = props;\n\n const { action, text, timestamp } = props;\n\n // shouldComponentUpdate bailed out whenever the incoming text was empty. That also blocked the\n // updates scheduled below, so a Snackbar whose text is cleared stays on screen until it is\n // given text again. Preserved here deliberately to keep this refactor behaviour-identical.\n const updateWhileTextIsPresent = (update: () => void) => {\n if (committedProps.current.text) {\n update();\n }\n };\n\n const setLeaveTimeout = () => {\n leaveTimeout.current = window.setTimeout(() => {\n updateWhileTextIsPresent(() => setState((current) => ({ ...current, visible: false })));\n }, committedProps.current.timeout);\n };\n\n const show = () => {\n setState((current) => ({ ...current, visible: true, action, text }));\n setLeaveTimeout();\n };\n\n if (!text) {\n return;\n }\n\n if (!previousProps.text) {\n show();\n } else if (previousProps.timestamp !== timestamp) {\n window.clearTimeout(leaveTimeout.current);\n\n if (state.visible) {\n setState((current) => ({ ...current, visible: false }));\n transitionTimeout.current = window.setTimeout(() => {\n updateWhileTextIsPresent(show);\n }, CSS_TRANSITION_DURATION);\n } else {\n show();\n }\n }\n });\n /* eslint-enable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */\n\n const { action, text, visible } = state;\n const { timeout } = props;\n\n return (\n <div className=\"snackbar\" aria-live=\"assertive\" role=\"alert\">\n <CSSTransition\n nodeRef={bodyRef}\n in={visible}\n classNames=\"snackbar__text-container\"\n timeout={{\n appear: 0,\n enter: timeout,\n exit: CSS_TRANSITION_DURATION,\n }}\n unmountOnExit\n >\n <Body ref={bodyRef} as=\"span\" className=\"snackbar__text\">\n {text}\n {action ? (\n <Button className=\"snackbar__text__action\" v2 size=\"sm\" onClick={action.onClick}>\n {action.label}\n </Button>\n ) : null}\n </Body>\n </CSSTransition>\n </div>\n );\n};\n\nexport default withNextPortal(Snackbar);\n"],"names":["CSS_TRANSITION_DURATION","Snackbar","props","bodyRef","useRef","leaveTimeout","transitionTimeout","committedProps","state","setState","useState","visible","text","useEffect","window","clearTimeout","current","useLayoutEffect","previousProps","action","timestamp","updateWhileTextIsPresent","update","setLeaveTimeout","setTimeout","timeout","show","_jsx","className","role","children","CSSTransition","nodeRef","in","classNames","appear","enter","exit","unmountOnExit","_jsxs","Body","ref","as","Button","v2","size","onClick","label","withNextPortal"],"mappings":"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"}
1
+ {"version":3,"file":"Snackbar.js","sources":["../../src/Snackbar/Snackbar.tsx"],"sourcesContent":["import { Tags } from '@transferwise/icons';\nimport { useEffect, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport Button from '../Button';\nimport Body from '../Body';\nimport { LiveRegion } from '../common';\nimport type { ThemeDark, ThemeLight } from '../common';\nimport { PrimitivePrompt } from '../Prompt/PrimitivePrompt';\nimport type { Sentiment } from '../SentimentSurface';\nimport StatusIcon from '../StatusIcon';\n\nimport { SNACKBAR_ENTER_DURATION, SNACKBAR_EXIT_DURATION } from './constants';\nimport type { SnackbarAction, SnackbarInternalProps } from './Snackbar.types';\n\nexport interface SnackbarProps {\n /** One optional action, supporting a callback or navigation through `href` and `target`. */\n action?: SnackbarAction;\n media?: React.ReactNode;\n sentiment?: Sentiment;\n text: React.ReactNode;\n /** @deprecated Has no effect. Snackbar theming is based on ThemeProvider. */\n theme?: ThemeLight | ThemeDark;\n timeout: number;\n /** @deprecated Has no effect when using SnackbarProvider, which manages Snackbar identity. */\n timestamp?: number;\n}\n\nexport const Snackbar = ({\n action,\n announcementKey,\n media,\n onDismissRequest,\n onExited,\n sentiment = 'neutral',\n text,\n timeout,\n visible,\n}: SnackbarInternalProps) => {\n const surfaceRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (!visible) {\n return undefined;\n }\n\n const id = window.setTimeout(onDismissRequest, timeout);\n return () => window.clearTimeout(id);\n }, [announcementKey, onDismissRequest, timeout, visible]);\n\n const renderMedia = () => {\n if (media) {\n return <span className=\"wds-Snackbar__media-asset\">{media}</span>;\n }\n\n if (sentiment === 'proposition') {\n return (\n <span className=\"wds-Snackbar__media-asset\">\n <Tags aria-hidden size={24} />\n </span>\n );\n }\n\n return <StatusIcon sentiment={sentiment} size={24} />;\n };\n\n return (\n <div\n className=\"wds-Snackbar\"\n style={\n {\n '--Snackbar-enter-duration': `${SNACKBAR_ENTER_DURATION}ms`,\n '--Snackbar-exit-duration': `${SNACKBAR_EXIT_DURATION}ms`,\n } as React.CSSProperties\n }\n >\n <CSSTransition\n appear\n nodeRef={surfaceRef}\n in={visible}\n classNames=\"wds-Snackbar-container\"\n timeout={{\n appear: SNACKBAR_ENTER_DURATION,\n enter: SNACKBAR_ENTER_DURATION,\n exit: SNACKBAR_EXIT_DURATION,\n }}\n unmountOnExit\n onExited={onExited}\n >\n <PrimitivePrompt\n ref={surfaceRef}\n className=\"wds-Snackbar-container\"\n sentiment={sentiment}\n emphasis=\"elevated\"\n media={renderMedia()}\n onDismiss={onDismissRequest}\n >\n <div className=\"wds-Snackbar__content\">\n <LiveRegion\n aria-live=\"polite\"\n announceOnChange={announcementKey}\n className=\"wds-Snackbar__message\"\n >\n <Body as=\"span\" className=\"wds-Snackbar__body\">\n {text}\n </Body>\n </LiveRegion>\n {action ? (\n <Button\n className=\"wds-Snackbar__action\"\n v2\n size=\"sm\"\n priority=\"secondary\"\n href={action.href}\n target={action.target}\n onClick={action.onClick}\n >\n {action.label}\n </Button>\n ) : null}\n </div>\n </PrimitivePrompt>\n </CSSTransition>\n </div>\n );\n};\n\nexport default Snackbar;\n"],"names":["Snackbar","action","announcementKey","media","onDismissRequest","onExited","sentiment","text","timeout","visible","surfaceRef","useRef","useEffect","undefined","id","window","setTimeout","clearTimeout","renderMedia","_jsx","className","children","Tags","size","StatusIcon","style","SNACKBAR_ENTER_DURATION","SNACKBAR_EXIT_DURATION","CSSTransition","appear","nodeRef","in","classNames","enter","exit","unmountOnExit","PrimitivePrompt","ref","emphasis","onDismiss","_jsxs","LiveRegion","announceOnChange","Body","as","Button","v2","priority","href","target","onClick","label"],"mappings":"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"}
@@ -1,123 +1,128 @@
1
- import { useRef, useState, useEffect, useLayoutEffect } from 'react';
1
+ import { Tags } from '@transferwise/icons';
2
+ import { useRef, useEffect } from 'react';
2
3
  import { CSSTransition } from 'react-transition-group';
3
4
  import Button from '../Button/Button.resolver.mjs';
4
5
  import Body from '../Body/Body.mjs';
5
- import withNextPortalWrapper from '../WithNextPortal/WithNextPortal.mjs';
6
+ import '../common/theme.mjs';
7
+ import '../common/direction.mjs';
8
+ import '@transferwise/neptune-tokens';
9
+ import '../common/PropsValues/control.mjs';
10
+ import '../common/PropsValues/size.mjs';
11
+ import '../common/PropsValues/typography.mjs';
12
+ import '../common/PropsValues/width.mjs';
13
+ import '../common/PropsValues/type.mjs';
14
+ import '../common/PropsValues/dateMode.mjs';
15
+ import '../common/PropsValues/monthFormat.mjs';
16
+ import '../common/PropsValues/position.mjs';
17
+ import '../common/PropsValues/layouts.mjs';
18
+ import '../common/PropsValues/status.mjs';
19
+ import '../common/PropsValues/sentiment.mjs';
20
+ import '../common/PropsValues/profileType.mjs';
21
+ import '../common/PropsValues/variant.mjs';
22
+ import '../common/PropsValues/scroll.mjs';
23
+ import '../common/PropsValues/markdownNodeType.mjs';
24
+ import '../common/fileType.mjs';
25
+ import '@transferwise/formatting';
26
+ import 'clsx';
27
+ import 'react-intl';
28
+ import '../common/CloseButton/CloseButton.messages.mjs';
6
29
  import { jsx, jsxs } from 'react/jsx-runtime';
30
+ import { LiveRegion } from '../common/LiveRegion/LiveRegion.mjs';
31
+ import { PrimitivePrompt } from '../Prompt/PrimitivePrompt/PrimitivePrompt.mjs';
32
+ import StatusIcon from '../StatusIcon/StatusIcon.mjs';
33
+ import { SNACKBAR_EXIT_DURATION, SNACKBAR_ENTER_DURATION } from './constants.mjs';
7
34
 
8
- const CSS_TRANSITION_DURATION = 400;
9
- const Snackbar = props => {
10
- const bodyRef = useRef(null);
11
- const leaveTimeout = useRef(0);
12
- const transitionTimeout = useRef(0);
13
- /** The props of the last committed render, as `this.props` was in the class component. */
14
- const committedProps = useRef(props);
15
- const [state, setState] = useState({
16
- visible: false,
17
- text: ''
18
- });
19
- useEffect(() => () => {
20
- window.clearTimeout(leaveTimeout.current);
21
- window.clearTimeout(transitionTimeout.current);
22
- }, []);
23
- // Runs after every render to mirror the componentDidUpdate lifecycle this component previously
24
- // relied on, including the shouldComponentUpdate guard that ignored every update without text.
25
- // Layout, not passive, so a notification is shown or replaced before the browser paints, as
26
- // componentDidUpdate did. Both rules below are disabled on purpose: the dependency-less effect
27
- // and its synchronous state updates are what keep this conversion behaviour-identical.
28
- /* eslint-disable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */
29
- useLayoutEffect(() => {
30
- const previousProps = committedProps.current;
31
- committedProps.current = props;
32
- const {
33
- action,
34
- text,
35
- timestamp
36
- } = props;
37
- // shouldComponentUpdate bailed out whenever the incoming text was empty. That also blocked the
38
- // updates scheduled below, so a Snackbar whose text is cleared stays on screen until it is
39
- // given text again. Preserved here deliberately to keep this refactor behaviour-identical.
40
- const updateWhileTextIsPresent = update => {
41
- if (committedProps.current.text) {
42
- update();
43
- }
44
- };
45
- const setLeaveTimeout = () => {
46
- leaveTimeout.current = window.setTimeout(() => {
47
- updateWhileTextIsPresent(() => setState(current => ({
48
- ...current,
49
- visible: false
50
- })));
51
- }, committedProps.current.timeout);
52
- };
53
- const show = () => {
54
- setState(current => ({
55
- ...current,
56
- visible: true,
57
- action,
58
- text
59
- }));
60
- setLeaveTimeout();
61
- };
62
- if (!text) {
63
- return;
35
+ const Snackbar = ({
36
+ action,
37
+ announcementKey,
38
+ media,
39
+ onDismissRequest,
40
+ onExited,
41
+ sentiment = 'neutral',
42
+ text,
43
+ timeout,
44
+ visible
45
+ }) => {
46
+ const surfaceRef = useRef(null);
47
+ useEffect(() => {
48
+ if (!visible) {
49
+ return undefined;
64
50
  }
65
- if (!previousProps.text) {
66
- show();
67
- } else if (previousProps.timestamp !== timestamp) {
68
- window.clearTimeout(leaveTimeout.current);
69
- if (state.visible) {
70
- setState(current => ({
71
- ...current,
72
- visible: false
73
- }));
74
- transitionTimeout.current = window.setTimeout(() => {
75
- updateWhileTextIsPresent(show);
76
- }, CSS_TRANSITION_DURATION);
77
- } else {
78
- show();
79
- }
51
+ const id = window.setTimeout(onDismissRequest, timeout);
52
+ return () => window.clearTimeout(id);
53
+ }, [announcementKey, onDismissRequest, timeout, visible]);
54
+ const renderMedia = () => {
55
+ if (media) {
56
+ return /*#__PURE__*/jsx("span", {
57
+ className: "wds-Snackbar__media-asset",
58
+ children: media
59
+ });
80
60
  }
81
- });
82
- /* eslint-enable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */
83
- const {
84
- action,
85
- text,
86
- visible
87
- } = state;
88
- const {
89
- timeout
90
- } = props;
61
+ if (sentiment === 'proposition') {
62
+ return /*#__PURE__*/jsx("span", {
63
+ className: "wds-Snackbar__media-asset",
64
+ children: /*#__PURE__*/jsx(Tags, {
65
+ "aria-hidden": true,
66
+ size: 24
67
+ })
68
+ });
69
+ }
70
+ return /*#__PURE__*/jsx(StatusIcon, {
71
+ sentiment: sentiment,
72
+ size: 24
73
+ });
74
+ };
91
75
  return /*#__PURE__*/jsx("div", {
92
- className: "snackbar",
93
- "aria-live": "assertive",
94
- role: "alert",
76
+ className: "wds-Snackbar",
77
+ style: {
78
+ '--Snackbar-enter-duration': `${SNACKBAR_ENTER_DURATION}ms`,
79
+ '--Snackbar-exit-duration': `${SNACKBAR_EXIT_DURATION}ms`
80
+ },
95
81
  children: /*#__PURE__*/jsx(CSSTransition, {
96
- nodeRef: bodyRef,
82
+ appear: true,
83
+ nodeRef: surfaceRef,
97
84
  in: visible,
98
- classNames: "snackbar__text-container",
85
+ classNames: "wds-Snackbar-container",
99
86
  timeout: {
100
- appear: 0,
101
- enter: timeout,
102
- exit: CSS_TRANSITION_DURATION
87
+ appear: SNACKBAR_ENTER_DURATION,
88
+ enter: SNACKBAR_ENTER_DURATION,
89
+ exit: SNACKBAR_EXIT_DURATION
103
90
  },
104
91
  unmountOnExit: true,
105
- children: /*#__PURE__*/jsxs(Body, {
106
- ref: bodyRef,
107
- as: "span",
108
- className: "snackbar__text",
109
- children: [text, action ? /*#__PURE__*/jsx(Button, {
110
- className: "snackbar__text__action",
111
- v2: true,
112
- size: "sm",
113
- onClick: action.onClick,
114
- children: action.label
115
- }) : null]
92
+ onExited: onExited,
93
+ children: /*#__PURE__*/jsx(PrimitivePrompt, {
94
+ ref: surfaceRef,
95
+ className: "wds-Snackbar-container",
96
+ sentiment: sentiment,
97
+ emphasis: "elevated",
98
+ media: renderMedia(),
99
+ onDismiss: onDismissRequest,
100
+ children: /*#__PURE__*/jsxs("div", {
101
+ className: "wds-Snackbar__content",
102
+ children: [/*#__PURE__*/jsx(LiveRegion, {
103
+ "aria-live": "polite",
104
+ announceOnChange: announcementKey,
105
+ className: "wds-Snackbar__message",
106
+ children: /*#__PURE__*/jsx(Body, {
107
+ as: "span",
108
+ className: "wds-Snackbar__body",
109
+ children: text
110
+ })
111
+ }), action ? /*#__PURE__*/jsx(Button, {
112
+ className: "wds-Snackbar__action",
113
+ v2: true,
114
+ size: "sm",
115
+ priority: "secondary",
116
+ href: action.href,
117
+ target: action.target,
118
+ onClick: action.onClick,
119
+ children: action.label
120
+ }) : null]
121
+ })
116
122
  })
117
123
  })
118
124
  });
119
125
  };
120
- var SnackbarPortal = withNextPortalWrapper(Snackbar);
121
126
 
122
- export { Snackbar, SnackbarPortal as default };
127
+ export { Snackbar };
123
128
  //# sourceMappingURL=Snackbar.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Snackbar.mjs","sources":["../../src/Snackbar/Snackbar.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport Button from '../Button';\nimport Body from '../Body';\nimport type { ThemeDark, ThemeLight } from '../common';\nimport withNextPortal from '../WithNextPortal/WithNextPortal';\n\nconst CSS_TRANSITION_DURATION = 400;\n\nexport interface SnackbarProps {\n action?: {\n label: string;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n };\n text: React.ReactNode;\n /** @deprecated Has no effect. Snackbar theming is based on ThemeProvider. */\n theme?: ThemeLight | ThemeDark;\n timeout: number;\n timestamp: number;\n}\n\ninterface SnackbarState extends Pick<SnackbarProps, 'action' | 'text'> {\n visible: boolean;\n}\n\nexport const Snackbar = (props: SnackbarProps) => {\n const bodyRef = useRef<HTMLSpanElement>(null);\n const leaveTimeout = useRef(0);\n const transitionTimeout = useRef(0);\n /** The props of the last committed render, as `this.props` was in the class component. */\n const committedProps = useRef(props);\n\n const [state, setState] = useState<SnackbarState>({\n visible: false,\n text: '',\n });\n\n useEffect(\n () => () => {\n window.clearTimeout(leaveTimeout.current);\n window.clearTimeout(transitionTimeout.current);\n },\n [],\n );\n\n // Runs after every render to mirror the componentDidUpdate lifecycle this component previously\n // relied on, including the shouldComponentUpdate guard that ignored every update without text.\n // Layout, not passive, so a notification is shown or replaced before the browser paints, as\n // componentDidUpdate did. Both rules below are disabled on purpose: the dependency-less effect\n // and its synchronous state updates are what keep this conversion behaviour-identical.\n /* eslint-disable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */\n useLayoutEffect(() => {\n const previousProps = committedProps.current;\n committedProps.current = props;\n\n const { action, text, timestamp } = props;\n\n // shouldComponentUpdate bailed out whenever the incoming text was empty. That also blocked the\n // updates scheduled below, so a Snackbar whose text is cleared stays on screen until it is\n // given text again. Preserved here deliberately to keep this refactor behaviour-identical.\n const updateWhileTextIsPresent = (update: () => void) => {\n if (committedProps.current.text) {\n update();\n }\n };\n\n const setLeaveTimeout = () => {\n leaveTimeout.current = window.setTimeout(() => {\n updateWhileTextIsPresent(() => setState((current) => ({ ...current, visible: false })));\n }, committedProps.current.timeout);\n };\n\n const show = () => {\n setState((current) => ({ ...current, visible: true, action, text }));\n setLeaveTimeout();\n };\n\n if (!text) {\n return;\n }\n\n if (!previousProps.text) {\n show();\n } else if (previousProps.timestamp !== timestamp) {\n window.clearTimeout(leaveTimeout.current);\n\n if (state.visible) {\n setState((current) => ({ ...current, visible: false }));\n transitionTimeout.current = window.setTimeout(() => {\n updateWhileTextIsPresent(show);\n }, CSS_TRANSITION_DURATION);\n } else {\n show();\n }\n }\n });\n /* eslint-enable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */\n\n const { action, text, visible } = state;\n const { timeout } = props;\n\n return (\n <div className=\"snackbar\" aria-live=\"assertive\" role=\"alert\">\n <CSSTransition\n nodeRef={bodyRef}\n in={visible}\n classNames=\"snackbar__text-container\"\n timeout={{\n appear: 0,\n enter: timeout,\n exit: CSS_TRANSITION_DURATION,\n }}\n unmountOnExit\n >\n <Body ref={bodyRef} as=\"span\" className=\"snackbar__text\">\n {text}\n {action ? (\n <Button className=\"snackbar__text__action\" v2 size=\"sm\" onClick={action.onClick}>\n {action.label}\n </Button>\n ) : null}\n </Body>\n </CSSTransition>\n </div>\n );\n};\n\nexport default withNextPortal(Snackbar);\n"],"names":["CSS_TRANSITION_DURATION","Snackbar","props","bodyRef","useRef","leaveTimeout","transitionTimeout","committedProps","state","setState","useState","visible","text","useEffect","window","clearTimeout","current","useLayoutEffect","previousProps","action","timestamp","updateWhileTextIsPresent","update","setLeaveTimeout","setTimeout","timeout","show","_jsx","className","role","children","CSSTransition","nodeRef","in","classNames","appear","enter","exit","unmountOnExit","_jsxs","Body","ref","as","Button","v2","size","onClick","label","withNextPortal"],"mappings":"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"}
1
+ {"version":3,"file":"Snackbar.mjs","sources":["../../src/Snackbar/Snackbar.tsx"],"sourcesContent":["import { Tags } from '@transferwise/icons';\nimport { useEffect, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport Button from '../Button';\nimport Body from '../Body';\nimport { LiveRegion } from '../common';\nimport type { ThemeDark, ThemeLight } from '../common';\nimport { PrimitivePrompt } from '../Prompt/PrimitivePrompt';\nimport type { Sentiment } from '../SentimentSurface';\nimport StatusIcon from '../StatusIcon';\n\nimport { SNACKBAR_ENTER_DURATION, SNACKBAR_EXIT_DURATION } from './constants';\nimport type { SnackbarAction, SnackbarInternalProps } from './Snackbar.types';\n\nexport interface SnackbarProps {\n /** One optional action, supporting a callback or navigation through `href` and `target`. */\n action?: SnackbarAction;\n media?: React.ReactNode;\n sentiment?: Sentiment;\n text: React.ReactNode;\n /** @deprecated Has no effect. Snackbar theming is based on ThemeProvider. */\n theme?: ThemeLight | ThemeDark;\n timeout: number;\n /** @deprecated Has no effect when using SnackbarProvider, which manages Snackbar identity. */\n timestamp?: number;\n}\n\nexport const Snackbar = ({\n action,\n announcementKey,\n media,\n onDismissRequest,\n onExited,\n sentiment = 'neutral',\n text,\n timeout,\n visible,\n}: SnackbarInternalProps) => {\n const surfaceRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (!visible) {\n return undefined;\n }\n\n const id = window.setTimeout(onDismissRequest, timeout);\n return () => window.clearTimeout(id);\n }, [announcementKey, onDismissRequest, timeout, visible]);\n\n const renderMedia = () => {\n if (media) {\n return <span className=\"wds-Snackbar__media-asset\">{media}</span>;\n }\n\n if (sentiment === 'proposition') {\n return (\n <span className=\"wds-Snackbar__media-asset\">\n <Tags aria-hidden size={24} />\n </span>\n );\n }\n\n return <StatusIcon sentiment={sentiment} size={24} />;\n };\n\n return (\n <div\n className=\"wds-Snackbar\"\n style={\n {\n '--Snackbar-enter-duration': `${SNACKBAR_ENTER_DURATION}ms`,\n '--Snackbar-exit-duration': `${SNACKBAR_EXIT_DURATION}ms`,\n } as React.CSSProperties\n }\n >\n <CSSTransition\n appear\n nodeRef={surfaceRef}\n in={visible}\n classNames=\"wds-Snackbar-container\"\n timeout={{\n appear: SNACKBAR_ENTER_DURATION,\n enter: SNACKBAR_ENTER_DURATION,\n exit: SNACKBAR_EXIT_DURATION,\n }}\n unmountOnExit\n onExited={onExited}\n >\n <PrimitivePrompt\n ref={surfaceRef}\n className=\"wds-Snackbar-container\"\n sentiment={sentiment}\n emphasis=\"elevated\"\n media={renderMedia()}\n onDismiss={onDismissRequest}\n >\n <div className=\"wds-Snackbar__content\">\n <LiveRegion\n aria-live=\"polite\"\n announceOnChange={announcementKey}\n className=\"wds-Snackbar__message\"\n >\n <Body as=\"span\" className=\"wds-Snackbar__body\">\n {text}\n </Body>\n </LiveRegion>\n {action ? (\n <Button\n className=\"wds-Snackbar__action\"\n v2\n size=\"sm\"\n priority=\"secondary\"\n href={action.href}\n target={action.target}\n onClick={action.onClick}\n >\n {action.label}\n </Button>\n ) : null}\n </div>\n </PrimitivePrompt>\n </CSSTransition>\n </div>\n );\n};\n\nexport default Snackbar;\n"],"names":["Snackbar","action","announcementKey","media","onDismissRequest","onExited","sentiment","text","timeout","visible","surfaceRef","useRef","useEffect","undefined","id","window","setTimeout","clearTimeout","renderMedia","_jsx","className","children","Tags","size","StatusIcon","style","SNACKBAR_ENTER_DURATION","SNACKBAR_EXIT_DURATION","CSSTransition","appear","nodeRef","in","classNames","enter","exit","unmountOnExit","PrimitivePrompt","ref","emphasis","onDismiss","_jsxs","LiveRegion","announceOnChange","Body","as","Button","v2","priority","href","target","onClick","label"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"SnackbarContext.js","sources":["../../src/Snackbar/SnackbarContext.ts"],"sourcesContent":["import { createContext } from 'react';\n\nimport { SnackbarProps } from './Snackbar';\n\nexport type SnackbarContextType = {\n createSnackbar: (props: Omit<SnackbarProps, 'timeout' | 'timestamp'>) => void;\n};\n\nexport const SnackbarContext = createContext<SnackbarContextType>({ createSnackbar: () => {} });\n\nexport const SnackbarConsumer = SnackbarContext.Consumer;\n"],"names":["SnackbarContext","createContext","createSnackbar","SnackbarConsumer","Consumer"],"mappings":";;;;AAQO,MAAMA,eAAe,gBAAGC,mBAAa,CAAsB;EAAEC,cAAc,EAAEA,MAAK,CAAE;AAAC,CAAE;AAEvF,MAAMC,gBAAgB,GAAGH,eAAe,CAACI;;;"}
1
+ {"version":3,"file":"SnackbarContext.js","sources":["../../src/Snackbar/SnackbarContext.ts"],"sourcesContent":["import { createContext } from 'react';\n\nimport type { SnackbarCreationProps } from './Snackbar.types';\n\nexport type SnackbarContextType = {\n createSnackbar: (props: SnackbarCreationProps) => void;\n};\n\nexport const SnackbarContext = createContext<SnackbarContextType>({ createSnackbar: () => {} });\n\nexport const SnackbarConsumer = SnackbarContext.Consumer;\n"],"names":["SnackbarContext","createContext","createSnackbar","SnackbarConsumer","Consumer"],"mappings":";;;;AAQO,MAAMA,eAAe,gBAAGC,mBAAa,CAAsB;EAAEC,cAAc,EAAEA,MAAK,CAAE;AAAC,CAAE;AAEvF,MAAMC,gBAAgB,GAAGH,eAAe,CAACI;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"SnackbarContext.mjs","sources":["../../src/Snackbar/SnackbarContext.ts"],"sourcesContent":["import { createContext } from 'react';\n\nimport { SnackbarProps } from './Snackbar';\n\nexport type SnackbarContextType = {\n createSnackbar: (props: Omit<SnackbarProps, 'timeout' | 'timestamp'>) => void;\n};\n\nexport const SnackbarContext = createContext<SnackbarContextType>({ createSnackbar: () => {} });\n\nexport const SnackbarConsumer = SnackbarContext.Consumer;\n"],"names":["SnackbarContext","createContext","createSnackbar","SnackbarConsumer","Consumer"],"mappings":";;AAQO,MAAMA,eAAe,gBAAGC,aAAa,CAAsB;EAAEC,cAAc,EAAEA,MAAK,CAAE;AAAC,CAAE;AAEvF,MAAMC,gBAAgB,GAAGH,eAAe,CAACI;;"}
1
+ {"version":3,"file":"SnackbarContext.mjs","sources":["../../src/Snackbar/SnackbarContext.ts"],"sourcesContent":["import { createContext } from 'react';\n\nimport type { SnackbarCreationProps } from './Snackbar.types';\n\nexport type SnackbarContextType = {\n createSnackbar: (props: SnackbarCreationProps) => void;\n};\n\nexport const SnackbarContext = createContext<SnackbarContextType>({ createSnackbar: () => {} });\n\nexport const SnackbarConsumer = SnackbarContext.Consumer;\n"],"names":["SnackbarContext","createContext","createSnackbar","SnackbarConsumer","Consumer"],"mappings":";;AAQO,MAAMA,eAAe,gBAAGC,aAAa,CAAsB;EAAEC,cAAc,EAAEA,MAAK,CAAE;AAAC,CAAE;AAEvF,MAAMC,gBAAgB,GAAGH,eAAe,CAACI;;"}
@@ -0,0 +1,12 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var WithNextPortal = require('../WithNextPortal/WithNextPortal.js');
6
+ var Snackbar = require('./Snackbar.js');
7
+
8
+ /** Renders the Snackbar into `document.body` after mount, so it's safe for SSR. */
9
+ const SnackbarPortal = WithNextPortal.default(Snackbar.Snackbar);
10
+
11
+ exports.default = SnackbarPortal;
12
+ //# sourceMappingURL=SnackbarPortal.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SnackbarPortal.js","sources":["../../src/Snackbar/SnackbarPortal.tsx"],"sourcesContent":["import withNextPortal from '../WithNextPortal/WithNextPortal';\n\nimport { Snackbar } from './Snackbar';\n\n/** Renders the Snackbar into `document.body` after mount, so it's safe for SSR. */\nconst SnackbarPortal = withNextPortal(Snackbar);\n\nexport default SnackbarPortal;\n"],"names":["SnackbarPortal","withNextPortal","Snackbar"],"mappings":";;;;;;;AAIA;AACA,MAAMA,cAAc,GAAGC,sBAAc,CAACC,iBAAQ;;"}
@@ -0,0 +1,8 @@
1
+ import withNextPortalWrapper from '../WithNextPortal/WithNextPortal.mjs';
2
+ import { Snackbar } from './Snackbar.mjs';
3
+
4
+ /** Renders the Snackbar into `document.body` after mount, so it's safe for SSR. */
5
+ const SnackbarPortal = withNextPortalWrapper(Snackbar);
6
+
7
+ export { SnackbarPortal as default };
8
+ //# sourceMappingURL=SnackbarPortal.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SnackbarPortal.mjs","sources":["../../src/Snackbar/SnackbarPortal.tsx"],"sourcesContent":["import withNextPortal from '../WithNextPortal/WithNextPortal';\n\nimport { Snackbar } from './Snackbar';\n\n/** Renders the Snackbar into `document.body` after mount, so it's safe for SSR. */\nconst SnackbarPortal = withNextPortal(Snackbar);\n\nexport default SnackbarPortal;\n"],"names":["SnackbarPortal","withNextPortal","Snackbar"],"mappings":";;;AAIA;AACA,MAAMA,cAAc,GAAGC,qBAAc,CAACC,QAAQ;;"}
@@ -3,42 +3,38 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
- var Snackbar = require('./Snackbar.js');
6
+ var SnackbarPortal = require('./SnackbarPortal.js');
7
7
  var SnackbarContext = require('./SnackbarContext.js');
8
+ var useSnackbarManager = require('./useSnackbarManager.js');
8
9
  var jsxRuntime = require('react/jsx-runtime');
9
10
 
10
11
  function SnackbarProvider({
11
12
  timeout = 4500,
12
13
  children
13
14
  }) {
14
- const [state, setState] = React.useState({
15
- text: '',
16
- timestamp: 0
17
- });
18
15
  const {
19
- action,
20
- text,
21
- timestamp
22
- } = state;
16
+ active,
17
+ announcementKey,
18
+ dismissSnackbar,
19
+ handleExited,
20
+ showSnackbar,
21
+ visible
22
+ } = useSnackbarManager.default();
23
+ const contextValue = React.useMemo(() => ({
24
+ createSnackbar: showSnackbar
25
+ }), [showSnackbar]);
23
26
  return /*#__PURE__*/jsxRuntime.jsxs(SnackbarContext.SnackbarContext.Provider, {
24
- value: React.useMemo(() => ({
25
- createSnackbar: ({
26
- action,
27
- text
28
- }) => {
29
- setState({
30
- action,
31
- text,
32
- timestamp: Date.now()
33
- });
34
- }
35
- }), []),
36
- children: [/*#__PURE__*/jsxRuntime.jsx(Snackbar.default, {
37
- action: action,
38
- text: text,
39
- timestamp: timestamp,
40
- timeout: timeout
41
- }), children]
27
+ value: contextValue,
28
+ children: [active ? /*#__PURE__*/jsxRuntime.jsx(SnackbarPortal.default
29
+ // Each instance gets a fresh appear transition and live-region announcement.
30
+ , {
31
+ ...active.props,
32
+ announcementKey: announcementKey,
33
+ timeout: timeout,
34
+ visible: visible,
35
+ onDismissRequest: dismissSnackbar,
36
+ onExited: handleExited
37
+ }, active.id) : null, children]
42
38
  });
43
39
  }
44
40
 
@@ -1 +1 @@
1
- {"version":3,"file":"SnackbarProvider.js","sources":["../../src/Snackbar/SnackbarProvider.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\n\nimport SnackbarPortal, { SnackbarProps } from './Snackbar';\nimport { SnackbarContext } from './SnackbarContext';\n\nexport interface SnackbarProviderProps {\n timeout?: number;\n children?: React.ReactNode;\n}\n\nexport default function SnackbarProvider({ timeout = 4500, children }: SnackbarProviderProps) {\n const [state, setState] = useState<Omit<SnackbarProps, 'timeout'>>({\n text: '',\n timestamp: 0,\n });\n const { action, text, timestamp } = state;\n\n return (\n <SnackbarContext.Provider\n value={useMemo(\n () => ({\n createSnackbar: ({ action, text }) => {\n setState({ action, text, timestamp: Date.now() });\n },\n }),\n [],\n )}\n >\n <SnackbarPortal action={action} text={text} timestamp={timestamp} timeout={timeout} />\n {children}\n </SnackbarContext.Provider>\n );\n}\n"],"names":["SnackbarProvider","timeout","children","state","setState","useState","text","timestamp","action","_jsxs","SnackbarContext","Provider","value","useMemo","createSnackbar","Date","now","_jsx","SnackbarPortal"],"mappings":";;;;;;;;;AAUc,SAAUA,gBAAgBA,CAAC;AAAEC,EAAAA,OAAO,GAAG,IAAI;AAAEC,EAAAA;AAAQ,CAAyB,EAAA;AAC1F,EAAA,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,cAAQ,CAAiC;AACjEC,IAAAA,IAAI,EAAE,EAAE;AACRC,IAAAA,SAAS,EAAE;AACZ,GAAA,CAAC;EACF,MAAM;IAAEC,MAAM;IAAEF,IAAI;AAAEC,IAAAA;AAAS,GAAE,GAAGJ,KAAK;AAEzC,EAAA,oBACEM,eAAA,CAACC,+BAAe,CAACC,QAAQ,EAAA;IACvBC,KAAK,EAAEC,aAAO,CACZ,OAAO;AACLC,MAAAA,cAAc,EAAEA,CAAC;QAAEN,MAAM;AAAEF,QAAAA;AAAI,OAAE,KAAI;AACnCF,QAAAA,QAAQ,CAAC;UAAEI,MAAM;UAAEF,IAAI;AAAEC,UAAAA,SAAS,EAAEQ,IAAI,CAACC,GAAG;AAAE,SAAE,CAAC;AACnD,MAAA;KACD,CAAC,EACF,EAAE,CACF;IAAAd,QAAA,EAAA,cAEFe,cAAA,CAACC,gBAAc,EAAA;AAACV,MAAAA,MAAM,EAAEA,MAAO;AAACF,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,SAAS,EAAEA,SAAU;AAACN,MAAAA,OAAO,EAAEA;KAAQ,CACnF,EAACC,QAAQ;AAAA,GACe,CAAC;AAE/B;;"}
1
+ {"version":3,"file":"SnackbarProvider.js","sources":["../../src/Snackbar/SnackbarProvider.tsx"],"sourcesContent":["import { useMemo } from 'react';\n\nimport SnackbarPortal from './SnackbarPortal';\nimport { SnackbarContext } from './SnackbarContext';\nimport useSnackbarManager from './useSnackbarManager';\n\nexport interface SnackbarProviderProps {\n timeout?: number;\n children?: React.ReactNode;\n}\n\nexport default function SnackbarProvider({ timeout = 4500, children }: SnackbarProviderProps) {\n const { active, announcementKey, dismissSnackbar, handleExited, showSnackbar, visible } =\n useSnackbarManager();\n const contextValue = useMemo(() => ({ createSnackbar: showSnackbar }), [showSnackbar]);\n\n return (\n <SnackbarContext.Provider value={contextValue}>\n {active ? (\n <SnackbarPortal\n // Each instance gets a fresh appear transition and live-region announcement.\n key={active.id}\n {...active.props}\n announcementKey={announcementKey}\n timeout={timeout}\n visible={visible}\n onDismissRequest={dismissSnackbar}\n onExited={handleExited}\n />\n ) : null}\n {children}\n </SnackbarContext.Provider>\n );\n}\n"],"names":["SnackbarProvider","timeout","children","active","announcementKey","dismissSnackbar","handleExited","showSnackbar","visible","useSnackbarManager","contextValue","useMemo","createSnackbar","_jsxs","SnackbarContext","Provider","value","_jsx","SnackbarPortal","props","onDismissRequest","onExited","id"],"mappings":";;;;;;;;;;AAWc,SAAUA,gBAAgBA,CAAC;AAAEC,EAAAA,OAAO,GAAG,IAAI;AAAEC,EAAAA;AAAQ,CAAyB,EAAA;EAC1F,MAAM;IAAEC,MAAM;IAAEC,eAAe;IAAEC,eAAe;IAAEC,YAAY;IAAEC,YAAY;AAAEC,IAAAA;GAAS,GACrFC,0BAAkB,EAAE;AACtB,EAAA,MAAMC,YAAY,GAAGC,aAAO,CAAC,OAAO;AAAEC,IAAAA,cAAc,EAAEL;GAAc,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;AAEtF,EAAA,oBACEM,eAAA,CAACC,+BAAe,CAACC,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEN,YAAa;AAAAR,IAAAA,QAAA,EAAA,CAC3CC,MAAM,gBACLc,cAAA,CAACC;AACC;AAAA,MAAA;MAAA,GAEIf,MAAM,CAACgB,KAAK;AAChBf,MAAAA,eAAe,EAAEA,eAAgB;AACjCH,MAAAA,OAAO,EAAEA,OAAQ;AACjBO,MAAAA,OAAO,EAAEA,OAAQ;AACjBY,MAAAA,gBAAgB,EAAEf,eAAgB;AAClCgB,MAAAA,QAAQ,EAAEf;AAAa,KAAA,EANlBH,MAAM,CAACmB,EAMW,CACvB,GACA,IAAI,EACPpB,QAAQ;AAAA,GACe,CAAC;AAE/B;;"}
@@ -1,40 +1,36 @@
1
- import { useState, useMemo } from 'react';
2
- import SnackbarPortal from './Snackbar.mjs';
1
+ import { useMemo } from 'react';
2
+ import SnackbarPortal from './SnackbarPortal.mjs';
3
3
  import { SnackbarContext } from './SnackbarContext.mjs';
4
+ import useSnackbarManager from './useSnackbarManager.mjs';
4
5
  import { jsxs, jsx } from 'react/jsx-runtime';
5
6
 
6
7
  function SnackbarProvider({
7
8
  timeout = 4500,
8
9
  children
9
10
  }) {
10
- const [state, setState] = useState({
11
- text: '',
12
- timestamp: 0
13
- });
14
11
  const {
15
- action,
16
- text,
17
- timestamp
18
- } = state;
12
+ active,
13
+ announcementKey,
14
+ dismissSnackbar,
15
+ handleExited,
16
+ showSnackbar,
17
+ visible
18
+ } = useSnackbarManager();
19
+ const contextValue = useMemo(() => ({
20
+ createSnackbar: showSnackbar
21
+ }), [showSnackbar]);
19
22
  return /*#__PURE__*/jsxs(SnackbarContext.Provider, {
20
- value: useMemo(() => ({
21
- createSnackbar: ({
22
- action,
23
- text
24
- }) => {
25
- setState({
26
- action,
27
- text,
28
- timestamp: Date.now()
29
- });
30
- }
31
- }), []),
32
- children: [/*#__PURE__*/jsx(SnackbarPortal, {
33
- action: action,
34
- text: text,
35
- timestamp: timestamp,
36
- timeout: timeout
37
- }), children]
23
+ value: contextValue,
24
+ children: [active ? /*#__PURE__*/jsx(SnackbarPortal
25
+ // Each instance gets a fresh appear transition and live-region announcement.
26
+ , {
27
+ ...active.props,
28
+ announcementKey: announcementKey,
29
+ timeout: timeout,
30
+ visible: visible,
31
+ onDismissRequest: dismissSnackbar,
32
+ onExited: handleExited
33
+ }, active.id) : null, children]
38
34
  });
39
35
  }
40
36
 
@@ -1 +1 @@
1
- {"version":3,"file":"SnackbarProvider.mjs","sources":["../../src/Snackbar/SnackbarProvider.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\n\nimport SnackbarPortal, { SnackbarProps } from './Snackbar';\nimport { SnackbarContext } from './SnackbarContext';\n\nexport interface SnackbarProviderProps {\n timeout?: number;\n children?: React.ReactNode;\n}\n\nexport default function SnackbarProvider({ timeout = 4500, children }: SnackbarProviderProps) {\n const [state, setState] = useState<Omit<SnackbarProps, 'timeout'>>({\n text: '',\n timestamp: 0,\n });\n const { action, text, timestamp } = state;\n\n return (\n <SnackbarContext.Provider\n value={useMemo(\n () => ({\n createSnackbar: ({ action, text }) => {\n setState({ action, text, timestamp: Date.now() });\n },\n }),\n [],\n )}\n >\n <SnackbarPortal action={action} text={text} timestamp={timestamp} timeout={timeout} />\n {children}\n </SnackbarContext.Provider>\n );\n}\n"],"names":["SnackbarProvider","timeout","children","state","setState","useState","text","timestamp","action","_jsxs","SnackbarContext","Provider","value","useMemo","createSnackbar","Date","now","_jsx","SnackbarPortal"],"mappings":";;;;;AAUc,SAAUA,gBAAgBA,CAAC;AAAEC,EAAAA,OAAO,GAAG,IAAI;AAAEC,EAAAA;AAAQ,CAAyB,EAAA;AAC1F,EAAA,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,QAAQ,CAAiC;AACjEC,IAAAA,IAAI,EAAE,EAAE;AACRC,IAAAA,SAAS,EAAE;AACZ,GAAA,CAAC;EACF,MAAM;IAAEC,MAAM;IAAEF,IAAI;AAAEC,IAAAA;AAAS,GAAE,GAAGJ,KAAK;AAEzC,EAAA,oBACEM,IAAA,CAACC,eAAe,CAACC,QAAQ,EAAA;IACvBC,KAAK,EAAEC,OAAO,CACZ,OAAO;AACLC,MAAAA,cAAc,EAAEA,CAAC;QAAEN,MAAM;AAAEF,QAAAA;AAAI,OAAE,KAAI;AACnCF,QAAAA,QAAQ,CAAC;UAAEI,MAAM;UAAEF,IAAI;AAAEC,UAAAA,SAAS,EAAEQ,IAAI,CAACC,GAAG;AAAE,SAAE,CAAC;AACnD,MAAA;KACD,CAAC,EACF,EAAE,CACF;IAAAd,QAAA,EAAA,cAEFe,GAAA,CAACC,cAAc,EAAA;AAACV,MAAAA,MAAM,EAAEA,MAAO;AAACF,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,SAAS,EAAEA,SAAU;AAACN,MAAAA,OAAO,EAAEA;KAAQ,CACnF,EAACC,QAAQ;AAAA,GACe,CAAC;AAE/B;;"}
1
+ {"version":3,"file":"SnackbarProvider.mjs","sources":["../../src/Snackbar/SnackbarProvider.tsx"],"sourcesContent":["import { useMemo } from 'react';\n\nimport SnackbarPortal from './SnackbarPortal';\nimport { SnackbarContext } from './SnackbarContext';\nimport useSnackbarManager from './useSnackbarManager';\n\nexport interface SnackbarProviderProps {\n timeout?: number;\n children?: React.ReactNode;\n}\n\nexport default function SnackbarProvider({ timeout = 4500, children }: SnackbarProviderProps) {\n const { active, announcementKey, dismissSnackbar, handleExited, showSnackbar, visible } =\n useSnackbarManager();\n const contextValue = useMemo(() => ({ createSnackbar: showSnackbar }), [showSnackbar]);\n\n return (\n <SnackbarContext.Provider value={contextValue}>\n {active ? (\n <SnackbarPortal\n // Each instance gets a fresh appear transition and live-region announcement.\n key={active.id}\n {...active.props}\n announcementKey={announcementKey}\n timeout={timeout}\n visible={visible}\n onDismissRequest={dismissSnackbar}\n onExited={handleExited}\n />\n ) : null}\n {children}\n </SnackbarContext.Provider>\n );\n}\n"],"names":["SnackbarProvider","timeout","children","active","announcementKey","dismissSnackbar","handleExited","showSnackbar","visible","useSnackbarManager","contextValue","useMemo","createSnackbar","_jsxs","SnackbarContext","Provider","value","_jsx","SnackbarPortal","props","onDismissRequest","onExited","id"],"mappings":";;;;;;AAWc,SAAUA,gBAAgBA,CAAC;AAAEC,EAAAA,OAAO,GAAG,IAAI;AAAEC,EAAAA;AAAQ,CAAyB,EAAA;EAC1F,MAAM;IAAEC,MAAM;IAAEC,eAAe;IAAEC,eAAe;IAAEC,YAAY;IAAEC,YAAY;AAAEC,IAAAA;GAAS,GACrFC,kBAAkB,EAAE;AACtB,EAAA,MAAMC,YAAY,GAAGC,OAAO,CAAC,OAAO;AAAEC,IAAAA,cAAc,EAAEL;GAAc,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;AAEtF,EAAA,oBACEM,IAAA,CAACC,eAAe,CAACC,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEN,YAAa;AAAAR,IAAAA,QAAA,EAAA,CAC3CC,MAAM,gBACLc,GAAA,CAACC;AACC;AAAA,MAAA;MAAA,GAEIf,MAAM,CAACgB,KAAK;AAChBf,MAAAA,eAAe,EAAEA,eAAgB;AACjCH,MAAAA,OAAO,EAAEA,OAAQ;AACjBO,MAAAA,OAAO,EAAEA,OAAQ;AACjBY,MAAAA,gBAAgB,EAAEf,eAAgB;AAClCgB,MAAAA,QAAQ,EAAEf;AAAa,KAAA,EANlBH,MAAM,CAACmB,EAMW,CACvB,GACA,IAAI,EACPpB,QAAQ;AAAA,GACe,CAAC;AAE/B;;"}
@@ -0,0 +1,8 @@
1
+ 'use strict';
2
+
3
+ const SNACKBAR_ENTER_DURATION = 300;
4
+ const SNACKBAR_EXIT_DURATION = 150;
5
+
6
+ exports.SNACKBAR_ENTER_DURATION = SNACKBAR_ENTER_DURATION;
7
+ exports.SNACKBAR_EXIT_DURATION = SNACKBAR_EXIT_DURATION;
8
+ //# sourceMappingURL=constants.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants.js","sources":["../../src/Snackbar/constants.ts"],"sourcesContent":["export const SNACKBAR_ENTER_DURATION = 300;\nexport const SNACKBAR_EXIT_DURATION = 150;\n"],"names":["SNACKBAR_ENTER_DURATION","SNACKBAR_EXIT_DURATION"],"mappings":";;AAAO,MAAMA,uBAAuB,GAAG;AAChC,MAAMC,sBAAsB,GAAG;;;"}
@@ -0,0 +1,5 @@
1
+ const SNACKBAR_ENTER_DURATION = 300;
2
+ const SNACKBAR_EXIT_DURATION = 150;
3
+
4
+ export { SNACKBAR_ENTER_DURATION, SNACKBAR_EXIT_DURATION };
5
+ //# sourceMappingURL=constants.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants.mjs","sources":["../../src/Snackbar/constants.ts"],"sourcesContent":["export const SNACKBAR_ENTER_DURATION = 300;\nexport const SNACKBAR_EXIT_DURATION = 150;\n"],"names":["SNACKBAR_ENTER_DURATION","SNACKBAR_EXIT_DURATION"],"mappings":"AAAO,MAAMA,uBAAuB,GAAG;AAChC,MAAMC,sBAAsB,GAAG;;"}