@zendeskgarden/react-notifications 8.75.0 → 8.76.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.
Files changed (46) hide show
  1. package/dist/esm/elements/Alert.js +49 -0
  2. package/dist/esm/elements/Notification.js +49 -0
  3. package/dist/esm/elements/Well.js +33 -0
  4. package/dist/esm/elements/content/Close.js +37 -0
  5. package/dist/esm/elements/content/Paragraph.js +28 -0
  6. package/dist/esm/elements/content/Title.js +28 -0
  7. package/dist/esm/elements/global-alert/GlobalAlert.js +64 -0
  8. package/dist/esm/elements/global-alert/GlobalAlertButton.js +46 -0
  9. package/dist/esm/elements/global-alert/GlobalAlertClose.js +41 -0
  10. package/dist/esm/elements/global-alert/GlobalAlertContent.js +30 -0
  11. package/dist/esm/elements/global-alert/GlobalAlertTitle.js +39 -0
  12. package/dist/esm/elements/global-alert/utility.js +14 -0
  13. package/dist/esm/elements/toaster/Toast.js +62 -0
  14. package/dist/esm/elements/toaster/ToastContext.js +11 -0
  15. package/dist/esm/elements/toaster/ToastProvider.js +51 -0
  16. package/dist/esm/elements/toaster/ToastSlot.js +82 -0
  17. package/dist/esm/elements/toaster/reducer.js +66 -0
  18. package/dist/esm/elements/toaster/styled.js +71 -0
  19. package/dist/esm/elements/toaster/useToast.js +70 -0
  20. package/dist/esm/index.js +15 -0
  21. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/x-stroke.svg.js +26 -0
  22. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/alert-error-stroke.svg.js +37 -0
  23. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/alert-warning-stroke.svg.js +32 -0
  24. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/check-circle-stroke.svg.js +33 -0
  25. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/info-stroke.svg.js +37 -0
  26. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/x-stroke.svg.js +26 -0
  27. package/dist/esm/styled/StyledAlert.js +25 -0
  28. package/dist/esm/styled/StyledBase.js +54 -0
  29. package/dist/esm/styled/StyledIcon.js +25 -0
  30. package/dist/esm/styled/StyledNotification.js +62 -0
  31. package/dist/esm/styled/StyledWell.js +23 -0
  32. package/dist/esm/styled/content/StyledClose.js +25 -0
  33. package/dist/esm/styled/content/StyledParagraph.js +22 -0
  34. package/dist/esm/styled/content/StyledTitle.js +22 -0
  35. package/dist/esm/styled/global-alert/StyledGlobalAlert.js +83 -0
  36. package/dist/esm/styled/global-alert/StyledGlobalAlertButton.js +73 -0
  37. package/dist/esm/styled/global-alert/StyledGlobalAlertClose.js +72 -0
  38. package/dist/esm/styled/global-alert/StyledGlobalAlertContent.js +22 -0
  39. package/dist/esm/styled/global-alert/StyledGlobalAlertIcon.js +36 -0
  40. package/dist/esm/styled/global-alert/StyledGlobalAlertTitle.js +38 -0
  41. package/dist/esm/types/index.js +9 -0
  42. package/dist/esm/utils/icons.js +25 -0
  43. package/dist/esm/utils/useNotificationsContext.js +14 -0
  44. package/dist/index.cjs.js +30 -46
  45. package/package.json +6 -6
  46. package/dist/index.esm.js +0 -1123
@@ -0,0 +1,49 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import React__default from 'react';
8
+ import PropTypes from 'prop-types';
9
+ import { TYPE } from '../types/index.js';
10
+ import '../styled/content/StyledClose.js';
11
+ import '../styled/content/StyledParagraph.js';
12
+ import '../styled/content/StyledTitle.js';
13
+ import { StyledAlert } from '../styled/StyledAlert.js';
14
+ import '../styled/StyledNotification.js';
15
+ import '../styled/StyledWell.js';
16
+ import { StyledIcon } from '../styled/StyledIcon.js';
17
+ import '../styled/StyledBase.js';
18
+ import '../styled/global-alert/StyledGlobalAlert.js';
19
+ import '../styled/global-alert/StyledGlobalAlertButton.js';
20
+ import '../styled/global-alert/StyledGlobalAlertClose.js';
21
+ import '../styled/global-alert/StyledGlobalAlertContent.js';
22
+ import '../styled/global-alert/StyledGlobalAlertIcon.js';
23
+ import '../styled/global-alert/StyledGlobalAlertTitle.js';
24
+ import { validationHues, validationIcons } from '../utils/icons.js';
25
+ import { NotificationsContext } from '../utils/useNotificationsContext.js';
26
+
27
+ const Alert = React__default.forwardRef((_ref, ref) => {
28
+ let {
29
+ role,
30
+ ...props
31
+ } = _ref;
32
+ const hue = validationHues[props.type];
33
+ const Icon = validationIcons[props.type];
34
+ return React__default.createElement(NotificationsContext.Provider, {
35
+ value: hue
36
+ }, React__default.createElement(StyledAlert, Object.assign({
37
+ ref: ref,
38
+ hue: hue,
39
+ role: role === undefined ? 'alert' : role
40
+ }, props), React__default.createElement(StyledIcon, {
41
+ hue: hue
42
+ }, React__default.createElement(Icon, null)), props.children));
43
+ });
44
+ Alert.displayName = 'Alert';
45
+ Alert.propTypes = {
46
+ type: PropTypes.oneOf(TYPE).isRequired
47
+ };
48
+
49
+ export { Alert };
@@ -0,0 +1,49 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import React__default, { forwardRef } from 'react';
8
+ import PropTypes from 'prop-types';
9
+ import SvgInfoStroke from '../node_modules/@zendeskgarden/svg-icons/src/16/info-stroke.svg.js';
10
+ import { TYPE } from '../types/index.js';
11
+ import '../styled/content/StyledClose.js';
12
+ import '../styled/content/StyledParagraph.js';
13
+ import '../styled/content/StyledTitle.js';
14
+ import '../styled/StyledAlert.js';
15
+ import { StyledNotification } from '../styled/StyledNotification.js';
16
+ import '../styled/StyledWell.js';
17
+ import { StyledIcon } from '../styled/StyledIcon.js';
18
+ import '../styled/StyledBase.js';
19
+ import '../styled/global-alert/StyledGlobalAlert.js';
20
+ import '../styled/global-alert/StyledGlobalAlertButton.js';
21
+ import '../styled/global-alert/StyledGlobalAlertClose.js';
22
+ import '../styled/global-alert/StyledGlobalAlertContent.js';
23
+ import '../styled/global-alert/StyledGlobalAlertIcon.js';
24
+ import '../styled/global-alert/StyledGlobalAlertTitle.js';
25
+ import { validationIcons, validationHues } from '../utils/icons.js';
26
+
27
+ const Notification = forwardRef((_ref, ref) => {
28
+ let {
29
+ role,
30
+ ...props
31
+ } = _ref;
32
+ const Icon = props.type ? validationIcons[props.type] : SvgInfoStroke;
33
+ const hue = props.type && validationHues[props.type];
34
+ return React__default.createElement(StyledNotification, Object.assign({
35
+ ref: ref,
36
+ type: props.type,
37
+ isFloating: true
38
+ }, props, {
39
+ role: role === undefined ? 'status' : role
40
+ }), props.type && React__default.createElement(StyledIcon, {
41
+ hue: hue
42
+ }, React__default.createElement(Icon, null)), props.children);
43
+ });
44
+ Notification.displayName = 'Notification';
45
+ Notification.propTypes = {
46
+ type: PropTypes.oneOf(TYPE)
47
+ };
48
+
49
+ export { Notification };
@@ -0,0 +1,33 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import React__default from 'react';
8
+ import PropTypes from 'prop-types';
9
+ import '../styled/content/StyledClose.js';
10
+ import '../styled/content/StyledParagraph.js';
11
+ import '../styled/content/StyledTitle.js';
12
+ import '../styled/StyledAlert.js';
13
+ import '../styled/StyledNotification.js';
14
+ import { StyledWell } from '../styled/StyledWell.js';
15
+ import '../styled/StyledIcon.js';
16
+ import '../styled/StyledBase.js';
17
+ import '../styled/global-alert/StyledGlobalAlert.js';
18
+ import '../styled/global-alert/StyledGlobalAlertButton.js';
19
+ import '../styled/global-alert/StyledGlobalAlertClose.js';
20
+ import '../styled/global-alert/StyledGlobalAlertContent.js';
21
+ import '../styled/global-alert/StyledGlobalAlertIcon.js';
22
+ import '../styled/global-alert/StyledGlobalAlertTitle.js';
23
+
24
+ const Well = React__default.forwardRef((props, ref) => React__default.createElement(StyledWell, Object.assign({
25
+ ref: ref
26
+ }, props)));
27
+ Well.displayName = 'Well';
28
+ Well.propTypes = {
29
+ isRecessed: PropTypes.bool,
30
+ isFloating: PropTypes.bool
31
+ };
32
+
33
+ export { Well };
@@ -0,0 +1,37 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import React__default from 'react';
8
+ import { StyledClose } from '../../styled/content/StyledClose.js';
9
+ import '../../styled/content/StyledParagraph.js';
10
+ import '../../styled/content/StyledTitle.js';
11
+ import '../../styled/StyledAlert.js';
12
+ import '../../styled/StyledNotification.js';
13
+ import '../../styled/StyledWell.js';
14
+ import '../../styled/StyledIcon.js';
15
+ import '../../styled/StyledBase.js';
16
+ import '../../styled/global-alert/StyledGlobalAlert.js';
17
+ import '../../styled/global-alert/StyledGlobalAlertButton.js';
18
+ import '../../styled/global-alert/StyledGlobalAlertClose.js';
19
+ import '../../styled/global-alert/StyledGlobalAlertContent.js';
20
+ import '../../styled/global-alert/StyledGlobalAlertIcon.js';
21
+ import '../../styled/global-alert/StyledGlobalAlertTitle.js';
22
+ import { useNotificationsContext } from '../../utils/useNotificationsContext.js';
23
+ import { useText } from '@zendeskgarden/react-theming';
24
+ import SvgXStroke from '../../node_modules/@zendeskgarden/svg-icons/src/12/x-stroke.svg.js';
25
+
26
+ const Close = React__default.forwardRef((props, ref) => {
27
+ const ariaLabel = useText(Close, props, 'aria-label', 'Close');
28
+ const hue = useNotificationsContext();
29
+ return React__default.createElement(StyledClose, Object.assign({
30
+ ref: ref,
31
+ hue: hue,
32
+ "aria-label": ariaLabel
33
+ }, props), React__default.createElement(SvgXStroke, null));
34
+ });
35
+ Close.displayName = 'Close';
36
+
37
+ export { Close };
@@ -0,0 +1,28 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import React__default from 'react';
8
+ import '../../styled/content/StyledClose.js';
9
+ import { StyledParagraph } from '../../styled/content/StyledParagraph.js';
10
+ import '../../styled/content/StyledTitle.js';
11
+ import '../../styled/StyledAlert.js';
12
+ import '../../styled/StyledNotification.js';
13
+ import '../../styled/StyledWell.js';
14
+ import '../../styled/StyledIcon.js';
15
+ import '../../styled/StyledBase.js';
16
+ import '../../styled/global-alert/StyledGlobalAlert.js';
17
+ import '../../styled/global-alert/StyledGlobalAlertButton.js';
18
+ import '../../styled/global-alert/StyledGlobalAlertClose.js';
19
+ import '../../styled/global-alert/StyledGlobalAlertContent.js';
20
+ import '../../styled/global-alert/StyledGlobalAlertIcon.js';
21
+ import '../../styled/global-alert/StyledGlobalAlertTitle.js';
22
+
23
+ const Paragraph = React__default.forwardRef((props, ref) => React__default.createElement(StyledParagraph, Object.assign({
24
+ ref: ref
25
+ }, props)));
26
+ Paragraph.displayName = 'Paragraph';
27
+
28
+ export { Paragraph };
@@ -0,0 +1,28 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import React__default from 'react';
8
+ import '../../styled/content/StyledClose.js';
9
+ import '../../styled/content/StyledParagraph.js';
10
+ import { StyledTitle } from '../../styled/content/StyledTitle.js';
11
+ import '../../styled/StyledAlert.js';
12
+ import '../../styled/StyledNotification.js';
13
+ import '../../styled/StyledWell.js';
14
+ import '../../styled/StyledIcon.js';
15
+ import '../../styled/StyledBase.js';
16
+ import '../../styled/global-alert/StyledGlobalAlert.js';
17
+ import '../../styled/global-alert/StyledGlobalAlertButton.js';
18
+ import '../../styled/global-alert/StyledGlobalAlertClose.js';
19
+ import '../../styled/global-alert/StyledGlobalAlertContent.js';
20
+ import '../../styled/global-alert/StyledGlobalAlertIcon.js';
21
+ import '../../styled/global-alert/StyledGlobalAlertTitle.js';
22
+
23
+ const Title = React__default.forwardRef((props, ref) => React__default.createElement(StyledTitle, Object.assign({
24
+ ref: ref
25
+ }, props)));
26
+ Title.displayName = 'Title';
27
+
28
+ export { Title };
@@ -0,0 +1,64 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import React__default, { forwardRef, useMemo } from 'react';
8
+ import PropTypes from 'prop-types';
9
+ import SvgInfoStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/info-stroke.svg.js';
10
+ import SvgAlertErrorStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/alert-error-stroke.svg.js';
11
+ import SvgAlertWarningStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/alert-warning-stroke.svg.js';
12
+ import SvgCheckCircleStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/check-circle-stroke.svg.js';
13
+ import { TYPE } from '../../types/index.js';
14
+ import '../../styled/content/StyledClose.js';
15
+ import '../../styled/content/StyledParagraph.js';
16
+ import '../../styled/content/StyledTitle.js';
17
+ import '../../styled/StyledAlert.js';
18
+ import '../../styled/StyledNotification.js';
19
+ import '../../styled/StyledWell.js';
20
+ import '../../styled/StyledIcon.js';
21
+ import '../../styled/StyledBase.js';
22
+ import { StyledGlobalAlert } from '../../styled/global-alert/StyledGlobalAlert.js';
23
+ import '../../styled/global-alert/StyledGlobalAlertButton.js';
24
+ import '../../styled/global-alert/StyledGlobalAlertClose.js';
25
+ import '../../styled/global-alert/StyledGlobalAlertContent.js';
26
+ import { StyledGlobalAlertIcon } from '../../styled/global-alert/StyledGlobalAlertIcon.js';
27
+ import '../../styled/global-alert/StyledGlobalAlertTitle.js';
28
+ import { GlobalAlertContext } from './utility.js';
29
+ import { GlobalAlertButton } from './GlobalAlertButton.js';
30
+ import { GlobalAlertClose } from './GlobalAlertClose.js';
31
+ import { GlobalAlertContent } from './GlobalAlertContent.js';
32
+ import { GlobalAlertTitle } from './GlobalAlertTitle.js';
33
+
34
+ const GlobalAlertComponent = forwardRef((_ref, ref) => {
35
+ let {
36
+ type,
37
+ ...props
38
+ } = _ref;
39
+ return React__default.createElement(GlobalAlertContext.Provider, {
40
+ value: useMemo(() => ({
41
+ type
42
+ }), [type])
43
+ }, React__default.createElement(StyledGlobalAlert, Object.assign({
44
+ ref: ref,
45
+ role: "status",
46
+ alertType: type
47
+ }, props), {
48
+ success: React__default.createElement(StyledGlobalAlertIcon, null, React__default.createElement(SvgCheckCircleStroke, null)),
49
+ error: React__default.createElement(StyledGlobalAlertIcon, null, React__default.createElement(SvgAlertErrorStroke, null)),
50
+ warning: React__default.createElement(StyledGlobalAlertIcon, null, React__default.createElement(SvgAlertWarningStroke, null)),
51
+ info: React__default.createElement(StyledGlobalAlertIcon, null, React__default.createElement(SvgInfoStroke, null))
52
+ }[type], props.children));
53
+ });
54
+ GlobalAlertComponent.displayName = 'GlobalAlert';
55
+ const GlobalAlert = GlobalAlertComponent;
56
+ GlobalAlert.Button = GlobalAlertButton;
57
+ GlobalAlert.Close = GlobalAlertClose;
58
+ GlobalAlert.Content = GlobalAlertContent;
59
+ GlobalAlert.Title = GlobalAlertTitle;
60
+ GlobalAlert.propTypes = {
61
+ type: PropTypes.oneOf(TYPE).isRequired
62
+ };
63
+
64
+ export { GlobalAlert };
@@ -0,0 +1,46 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import React__default, { forwardRef } from 'react';
8
+ import PropTypes from 'prop-types';
9
+ import '../../styled/content/StyledClose.js';
10
+ import '../../styled/content/StyledParagraph.js';
11
+ import '../../styled/content/StyledTitle.js';
12
+ import '../../styled/StyledAlert.js';
13
+ import '../../styled/StyledNotification.js';
14
+ import '../../styled/StyledWell.js';
15
+ import '../../styled/StyledIcon.js';
16
+ import '../../styled/StyledBase.js';
17
+ import '../../styled/global-alert/StyledGlobalAlert.js';
18
+ import { StyledGlobalAlertButton } from '../../styled/global-alert/StyledGlobalAlertButton.js';
19
+ import '../../styled/global-alert/StyledGlobalAlertClose.js';
20
+ import '../../styled/global-alert/StyledGlobalAlertContent.js';
21
+ import '../../styled/global-alert/StyledGlobalAlertIcon.js';
22
+ import '../../styled/global-alert/StyledGlobalAlertTitle.js';
23
+ import { useGlobalAlertContext } from './utility.js';
24
+
25
+ const GlobalAlertButton = forwardRef((_ref, ref) => {
26
+ let {
27
+ isBasic,
28
+ ...props
29
+ } = _ref;
30
+ const {
31
+ type
32
+ } = useGlobalAlertContext();
33
+ return React__default.createElement(StyledGlobalAlertButton, Object.assign({
34
+ ref: ref,
35
+ alertType: type
36
+ }, props, {
37
+ isPrimary: !isBasic,
38
+ isBasic: isBasic
39
+ }));
40
+ });
41
+ GlobalAlertButton.displayName = 'GlobalAlert.Button';
42
+ GlobalAlertButton.propTypes = {
43
+ isBasic: PropTypes.bool
44
+ };
45
+
46
+ export { GlobalAlertButton };
@@ -0,0 +1,41 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import React__default, { forwardRef } from 'react';
8
+ import { useText } from '@zendeskgarden/react-theming';
9
+ import SvgXStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/x-stroke.svg.js';
10
+ import '../../styled/content/StyledClose.js';
11
+ import '../../styled/content/StyledParagraph.js';
12
+ import '../../styled/content/StyledTitle.js';
13
+ import '../../styled/StyledAlert.js';
14
+ import '../../styled/StyledNotification.js';
15
+ import '../../styled/StyledWell.js';
16
+ import '../../styled/StyledIcon.js';
17
+ import '../../styled/StyledBase.js';
18
+ import '../../styled/global-alert/StyledGlobalAlert.js';
19
+ import '../../styled/global-alert/StyledGlobalAlertButton.js';
20
+ import { StyledGlobalAlertClose } from '../../styled/global-alert/StyledGlobalAlertClose.js';
21
+ import '../../styled/global-alert/StyledGlobalAlertContent.js';
22
+ import '../../styled/global-alert/StyledGlobalAlertIcon.js';
23
+ import '../../styled/global-alert/StyledGlobalAlertTitle.js';
24
+ import { useGlobalAlertContext } from './utility.js';
25
+
26
+ const GlobalAlertClose = forwardRef((props, ref) => {
27
+ const {
28
+ type
29
+ } = useGlobalAlertContext();
30
+ const label = useText(GlobalAlertClose, props, 'aria-label', 'Close');
31
+ return React__default.createElement(StyledGlobalAlertClose, Object.assign({
32
+ ref: ref,
33
+ alertType: type
34
+ }, props), React__default.createElement(SvgXStroke, {
35
+ role: "img",
36
+ "aria-label": label
37
+ }));
38
+ });
39
+ GlobalAlertClose.displayName = 'GlobalAlert.Close';
40
+
41
+ export { GlobalAlertClose };
@@ -0,0 +1,30 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import React__default, { forwardRef } from 'react';
8
+ import '../../styled/content/StyledClose.js';
9
+ import '../../styled/content/StyledParagraph.js';
10
+ import '../../styled/content/StyledTitle.js';
11
+ import '../../styled/StyledAlert.js';
12
+ import '../../styled/StyledNotification.js';
13
+ import '../../styled/StyledWell.js';
14
+ import '../../styled/StyledIcon.js';
15
+ import '../../styled/StyledBase.js';
16
+ import '../../styled/global-alert/StyledGlobalAlert.js';
17
+ import '../../styled/global-alert/StyledGlobalAlertButton.js';
18
+ import '../../styled/global-alert/StyledGlobalAlertClose.js';
19
+ import { StyledGlobalAlertContent } from '../../styled/global-alert/StyledGlobalAlertContent.js';
20
+ import '../../styled/global-alert/StyledGlobalAlertIcon.js';
21
+ import '../../styled/global-alert/StyledGlobalAlertTitle.js';
22
+
23
+ const GlobalAlertContent = forwardRef((props, ref) => {
24
+ return React__default.createElement(StyledGlobalAlertContent, Object.assign({
25
+ ref: ref
26
+ }, props));
27
+ });
28
+ GlobalAlertContent.displayName = 'GlobalAlert.Content';
29
+
30
+ export { GlobalAlertContent };
@@ -0,0 +1,39 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import React__default, { forwardRef } from 'react';
8
+ import PropTypes from 'prop-types';
9
+ import '../../styled/content/StyledClose.js';
10
+ import '../../styled/content/StyledParagraph.js';
11
+ import '../../styled/content/StyledTitle.js';
12
+ import '../../styled/StyledAlert.js';
13
+ import '../../styled/StyledNotification.js';
14
+ import '../../styled/StyledWell.js';
15
+ import '../../styled/StyledIcon.js';
16
+ import '../../styled/StyledBase.js';
17
+ import '../../styled/global-alert/StyledGlobalAlert.js';
18
+ import '../../styled/global-alert/StyledGlobalAlertButton.js';
19
+ import '../../styled/global-alert/StyledGlobalAlertClose.js';
20
+ import '../../styled/global-alert/StyledGlobalAlertContent.js';
21
+ import '../../styled/global-alert/StyledGlobalAlertIcon.js';
22
+ import { StyledGlobalAlertTitle } from '../../styled/global-alert/StyledGlobalAlertTitle.js';
23
+ import { useGlobalAlertContext } from './utility.js';
24
+
25
+ const GlobalAlertTitle = forwardRef((props, ref) => {
26
+ const {
27
+ type
28
+ } = useGlobalAlertContext();
29
+ return React__default.createElement(StyledGlobalAlertTitle, Object.assign({
30
+ alertType: type,
31
+ ref: ref
32
+ }, props));
33
+ });
34
+ GlobalAlertTitle.displayName = 'GlobalAlert.Title';
35
+ GlobalAlertTitle.propTypes = {
36
+ isRegular: PropTypes.bool
37
+ };
38
+
39
+ export { GlobalAlertTitle };
@@ -0,0 +1,14 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import { createContext, useContext } from 'react';
8
+
9
+ const GlobalAlertContext = createContext({
10
+ type: 'info'
11
+ });
12
+ const useGlobalAlertContext = () => useContext(GlobalAlertContext);
13
+
14
+ export { GlobalAlertContext, useGlobalAlertContext };
@@ -0,0 +1,62 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import { useState, useRef, useEffect, useCallback } from 'react';
8
+ import { useToast } from './useToast.js';
9
+
10
+ const Toast = _ref => {
11
+ let {
12
+ toast,
13
+ pauseTimers
14
+ } = _ref;
15
+ const {
16
+ removeToast
17
+ } = useToast();
18
+ const {
19
+ id
20
+ } = toast;
21
+ const {
22
+ autoDismiss
23
+ } = toast.options;
24
+ const [remainingTime, setRemainingTime] = useState(NaN);
25
+ const startTimeRef = useRef(Date.now());
26
+ const previousRemainingTimeRef = useRef(remainingTime);
27
+ useEffect(() => {
28
+ if (typeof autoDismiss === 'number') {
29
+ setRemainingTime(autoDismiss);
30
+ } else {
31
+ setRemainingTime(NaN);
32
+ }
33
+ }, [autoDismiss]);
34
+ useEffect(() => {
35
+ if (pauseTimers && !isNaN(remainingTime)) {
36
+ previousRemainingTimeRef.current = remainingTime - (Date.now() - startTimeRef.current);
37
+ setRemainingTime(NaN);
38
+ } else if (!pauseTimers && isNaN(remainingTime) && !isNaN(previousRemainingTimeRef.current)) {
39
+ setRemainingTime(previousRemainingTimeRef.current);
40
+ }
41
+ }, [pauseTimers, remainingTime]);
42
+ useEffect(() => {
43
+ let timeout;
44
+ if (!isNaN(remainingTime)) {
45
+ startTimeRef.current = Date.now();
46
+ timeout = setTimeout(() => {
47
+ removeToast(id);
48
+ }, remainingTime);
49
+ }
50
+ return () => {
51
+ clearTimeout(timeout);
52
+ };
53
+ }, [id, pauseTimers, remainingTime, removeToast]);
54
+ const close = useCallback(() => {
55
+ removeToast(toast.id);
56
+ }, [removeToast, toast.id]);
57
+ return toast.content({
58
+ close
59
+ });
60
+ };
61
+
62
+ export { Toast };
@@ -0,0 +1,11 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import { createContext } from 'react';
8
+
9
+ const ToastContext = createContext(undefined);
10
+
11
+ export { ToastContext };
@@ -0,0 +1,51 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import React__default, { useReducer, useMemo, useCallback } from 'react';
8
+ import PropTypes from 'prop-types';
9
+ import { toasterReducer, getInitialState } from './reducer.js';
10
+ import { ToastContext } from './ToastContext.js';
11
+ import { ToastSlot } from './ToastSlot.js';
12
+
13
+ const ToastProvider = _ref => {
14
+ let {
15
+ limit,
16
+ zIndex,
17
+ placementProps = {},
18
+ children
19
+ } = _ref;
20
+ const [state, dispatch] = useReducer(toasterReducer, getInitialState());
21
+ const contextValue = useMemo(() => ({
22
+ state,
23
+ dispatch
24
+ }), [state, dispatch]);
25
+ const toastsByPlacement = useCallback(placement => {
26
+ let matchingToasts = state.toasts.filter(toast => toast.options.placement === placement);
27
+ if (placement === 'bottom' || placement === 'bottom-start' || placement === 'bottom-end') {
28
+ matchingToasts = matchingToasts.reverse();
29
+ }
30
+ return React__default.createElement(ToastSlot, Object.assign({
31
+ placement: placement,
32
+ toasts: matchingToasts,
33
+ zIndex: zIndex,
34
+ limit: limit
35
+ }, placementProps[placement]));
36
+ }, [limit, state.toasts, zIndex, placementProps]);
37
+ return React__default.createElement(ToastContext.Provider, {
38
+ value: contextValue
39
+ }, toastsByPlacement('top-start'), toastsByPlacement('top'), toastsByPlacement('top-end'), children, toastsByPlacement('bottom-start'), toastsByPlacement('bottom'), toastsByPlacement('bottom-end'));
40
+ };
41
+ ToastProvider.displayName = 'ToastProvider';
42
+ ToastProvider.defaultProps = {
43
+ limit: 4
44
+ };
45
+ ToastProvider.propTypes = {
46
+ limit: PropTypes.number,
47
+ zIndex: PropTypes.number,
48
+ placementProps: PropTypes.object
49
+ };
50
+
51
+ export { ToastProvider };