@zendeskgarden/react-notifications 8.75.1 → 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
package/dist/index.cjs.js CHANGED
@@ -1,10 +1,9 @@
1
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
-
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
+ */
8
7
  'use strict';
9
8
 
10
9
  var React = require('react');
@@ -40,27 +39,12 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
40
39
  var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
41
40
  var styled__default = /*#__PURE__*/_interopDefault(styled);
42
41
 
43
- function _extends$6() {
44
- _extends$6 = Object.assign ? Object.assign.bind() : function (target) {
45
- for (var i = 1; i < arguments.length; i++) {
46
- var source = arguments[i];
47
- for (var key in source) {
48
- if (Object.prototype.hasOwnProperty.call(source, key)) {
49
- target[key] = source[key];
50
- }
51
- }
52
- }
53
- return target;
54
- };
55
- return _extends$6.apply(this, arguments);
56
- }
57
-
58
42
  const TYPE = ['success', 'warning', 'error', 'info'];
59
43
 
60
44
  const COMPONENT_ID$b = 'notifications.close';
61
45
  const StyledClose = styled__default.default.button.attrs({
62
46
  'data-garden-id': COMPONENT_ID$b,
63
- 'data-garden-version': '8.75.1'
47
+ 'data-garden-version': '8.76.0'
64
48
  }).withConfig({
65
49
  displayName: "StyledClose",
66
50
  componentId: "sc-1mr9nx1-0"
@@ -75,7 +59,7 @@ StyledClose.defaultProps = {
75
59
  const COMPONENT_ID$a = 'notifications.paragraph';
76
60
  const StyledParagraph = styled__default.default.p.attrs({
77
61
  'data-garden-id': COMPONENT_ID$a,
78
- 'data-garden-version': '8.75.1'
62
+ 'data-garden-version': '8.76.0'
79
63
  }).withConfig({
80
64
  displayName: "StyledParagraph",
81
65
  componentId: "sc-12tmd6p-0"
@@ -87,7 +71,7 @@ StyledParagraph.defaultProps = {
87
71
  const COMPONENT_ID$9 = 'notifications.title';
88
72
  const StyledTitle = styled__default.default.div.attrs({
89
73
  'data-garden-id': COMPONENT_ID$9,
90
- 'data-garden-version': '8.75.1'
74
+ 'data-garden-version': '8.76.0'
91
75
  }).withConfig({
92
76
  displayName: "StyledTitle",
93
77
  componentId: "sc-xx4jsv-0"
@@ -144,7 +128,7 @@ const COMPONENT_ID$8 = 'notifications.alert';
144
128
  const colorStyles$5 = props => styled.css(["", "{color:", ";}"], StyledTitle, props.hue && reactTheming.getColorV8(props.hue, 800, props.theme));
145
129
  const StyledAlert = styled__default.default(StyledBase).attrs({
146
130
  'data-garden-id': COMPONENT_ID$8,
147
- 'data-garden-version': '8.75.1'
131
+ 'data-garden-version': '8.76.0'
148
132
  }).withConfig({
149
133
  displayName: "StyledAlert",
150
134
  componentId: "sc-fyn8jp-0"
@@ -189,7 +173,7 @@ const colorStyles$4 = props => {
189
173
  };
190
174
  const StyledNotification = styled__default.default(StyledBase).attrs({
191
175
  'data-garden-id': COMPONENT_ID$7,
192
- 'data-garden-version': '8.75.1'
176
+ 'data-garden-version': '8.76.0'
193
177
  }).withConfig({
194
178
  displayName: "StyledNotification",
195
179
  componentId: "sc-uf6jh-0"
@@ -204,7 +188,7 @@ StyledNotification.defaultProps = {
204
188
  const COMPONENT_ID$6 = 'notifications.well';
205
189
  const StyledWell = styled__default.default(StyledBase).attrs({
206
190
  'data-garden-id': COMPONENT_ID$6,
207
- 'data-garden-version': '8.75.1'
191
+ 'data-garden-version': '8.76.0'
208
192
  }).withConfig({
209
193
  displayName: "StyledWell",
210
194
  componentId: "sc-a5831c-0"
@@ -291,7 +275,7 @@ const sizeStyles$3 = props => {
291
275
  };
292
276
  const StyledGlobalAlert = styled__default.default.div.attrs({
293
277
  'data-garden-id': COMPONENT_ID$5,
294
- 'data-garden-version': '8.75.1'
278
+ 'data-garden-version': '8.76.0'
295
279
  }).withConfig({
296
280
  displayName: "StyledGlobalAlert",
297
281
  componentId: "sc-k6rimt-0"
@@ -351,7 +335,7 @@ const sizeStyles$2 = props => {
351
335
  };
352
336
  const StyledGlobalAlertClose = styled__default.default(reactButtons.IconButton).attrs({
353
337
  'data-garden-id': COMPONENT_ID$4,
354
- 'data-garden-version': '8.75.1',
338
+ 'data-garden-version': '8.76.0',
355
339
  size: 'small'
356
340
  }).withConfig({
357
341
  displayName: "StyledGlobalAlertClose",
@@ -406,7 +390,7 @@ function sizeStyles$1(props) {
406
390
  }
407
391
  const StyledGlobalAlertButton = styled__default.default(reactButtons.Button).attrs({
408
392
  'data-garden-id': COMPONENT_ID$3,
409
- 'data-garden-version': '8.75.1',
393
+ 'data-garden-version': '8.76.0',
410
394
  focusInset: false,
411
395
  isDanger: false,
412
396
  isLink: false,
@@ -425,7 +409,7 @@ StyledGlobalAlertButton.defaultProps = {
425
409
  const COMPONENT_ID$2 = 'notifications.global-alert.content';
426
410
  const StyledGlobalAlertContent = styled__default.default.div.attrs({
427
411
  'data-garden-id': COMPONENT_ID$2,
428
- 'data-garden-version': '8.75.1'
412
+ 'data-garden-version': '8.76.0'
429
413
  }).withConfig({
430
414
  displayName: "StyledGlobalAlertContent",
431
415
  componentId: "sc-rept0u-0"
@@ -449,7 +433,7 @@ const StyledGlobalAlertIcon = styled__default.default(_ref => {
449
433
  return React__namespace.default.cloneElement(React.Children.only(children), props);
450
434
  }).attrs({
451
435
  'data-garden-id': COMPONENT_ID$1,
452
- 'data-garden-version': '8.75.1'
436
+ 'data-garden-version': '8.76.0'
453
437
  }).withConfig({
454
438
  displayName: "StyledGlobalAlertIcon",
455
439
  componentId: "sc-84ne9k-0"
@@ -477,7 +461,7 @@ const colorStyles = props => {
477
461
  };
478
462
  const StyledGlobalAlertTitle = styled__default.default.div.attrs({
479
463
  'data-garden-id': COMPONENT_ID,
480
- 'data-garden-version': '8.75.1'
464
+ 'data-garden-version': '8.76.0'
481
465
  }).withConfig({
482
466
  displayName: "StyledGlobalAlertTitle",
483
467
  componentId: "sc-10clqbo-0"
@@ -616,7 +600,7 @@ const Alert = React__namespace.default.forwardRef((_ref, ref) => {
616
600
  const Icon = validationIcons[props.type];
617
601
  return React__namespace.default.createElement(NotificationsContext.Provider, {
618
602
  value: hue
619
- }, React__namespace.default.createElement(StyledAlert, _extends$6({
603
+ }, React__namespace.default.createElement(StyledAlert, Object.assign({
620
604
  ref: ref,
621
605
  hue: hue,
622
606
  role: role === undefined ? 'alert' : role
@@ -636,7 +620,7 @@ const Notification = React.forwardRef((_ref, ref) => {
636
620
  } = _ref;
637
621
  const Icon = props.type ? validationIcons[props.type] : SvgInfoStroke;
638
622
  const hue = props.type && validationHues[props.type];
639
- return React__namespace.default.createElement(StyledNotification, _extends$6({
623
+ return React__namespace.default.createElement(StyledNotification, Object.assign({
640
624
  ref: ref,
641
625
  type: props.type,
642
626
  isFloating: true
@@ -651,7 +635,7 @@ Notification.propTypes = {
651
635
  type: PropTypes__default.default.oneOf(TYPE)
652
636
  };
653
637
 
654
- const Well = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledWell, _extends$6({
638
+ const Well = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledWell, Object.assign({
655
639
  ref: ref
656
640
  }, props)));
657
641
  Well.displayName = 'Well';
@@ -680,7 +664,7 @@ var SvgXStroke$1 = function SvgXStroke(props) {
680
664
  const Close = React__namespace.default.forwardRef((props, ref) => {
681
665
  const ariaLabel = reactTheming.useText(Close, props, 'aria-label', 'Close');
682
666
  const hue = useNotificationsContext();
683
- return React__namespace.default.createElement(StyledClose, _extends$6({
667
+ return React__namespace.default.createElement(StyledClose, Object.assign({
684
668
  ref: ref,
685
669
  hue: hue,
686
670
  "aria-label": ariaLabel
@@ -688,12 +672,12 @@ const Close = React__namespace.default.forwardRef((props, ref) => {
688
672
  });
689
673
  Close.displayName = 'Close';
690
674
 
691
- const Paragraph = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledParagraph, _extends$6({
675
+ const Paragraph = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledParagraph, Object.assign({
692
676
  ref: ref
693
677
  }, props)));
694
678
  Paragraph.displayName = 'Paragraph';
695
679
 
696
- const Title = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledTitle, _extends$6({
680
+ const Title = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledTitle, Object.assign({
697
681
  ref: ref
698
682
  }, props)));
699
683
  Title.displayName = 'Title';
@@ -970,7 +954,7 @@ const ToastSlot = _ref => {
970
954
  }
971
955
  return index >= limit;
972
956
  }, [limit, placement, toasts.length]);
973
- return React__namespace.default.createElement(StyledTransitionContainer, _extends$6({
957
+ return React__namespace.default.createElement(StyledTransitionContainer, Object.assign({
974
958
  key: placement,
975
959
  toastPlacement: placement,
976
960
  toastZIndex: zIndex,
@@ -1015,7 +999,7 @@ const ToastProvider = _ref => {
1015
999
  if (placement === 'bottom' || placement === 'bottom-start' || placement === 'bottom-end') {
1016
1000
  matchingToasts = matchingToasts.reverse();
1017
1001
  }
1018
- return React__namespace.default.createElement(ToastSlot, _extends$6({
1002
+ return React__namespace.default.createElement(ToastSlot, Object.assign({
1019
1003
  placement: placement,
1020
1004
  toasts: matchingToasts,
1021
1005
  zIndex: zIndex,
@@ -1049,7 +1033,7 @@ const GlobalAlertButton = React.forwardRef((_ref, ref) => {
1049
1033
  const {
1050
1034
  type
1051
1035
  } = useGlobalAlertContext();
1052
- return React__namespace.default.createElement(StyledGlobalAlertButton, _extends$6({
1036
+ return React__namespace.default.createElement(StyledGlobalAlertButton, Object.assign({
1053
1037
  ref: ref,
1054
1038
  alertType: type
1055
1039
  }, props, {
@@ -1084,7 +1068,7 @@ const GlobalAlertClose = React.forwardRef((props, ref) => {
1084
1068
  type
1085
1069
  } = useGlobalAlertContext();
1086
1070
  const label = reactTheming.useText(GlobalAlertClose, props, 'aria-label', 'Close');
1087
- return React__namespace.default.createElement(StyledGlobalAlertClose, _extends$6({
1071
+ return React__namespace.default.createElement(StyledGlobalAlertClose, Object.assign({
1088
1072
  ref: ref,
1089
1073
  alertType: type
1090
1074
  }, props), React__namespace.default.createElement(SvgXStroke, {
@@ -1095,7 +1079,7 @@ const GlobalAlertClose = React.forwardRef((props, ref) => {
1095
1079
  GlobalAlertClose.displayName = 'GlobalAlert.Close';
1096
1080
 
1097
1081
  const GlobalAlertContent = React.forwardRef((props, ref) => {
1098
- return React__namespace.default.createElement(StyledGlobalAlertContent, _extends$6({
1082
+ return React__namespace.default.createElement(StyledGlobalAlertContent, Object.assign({
1099
1083
  ref: ref
1100
1084
  }, props));
1101
1085
  });
@@ -1105,7 +1089,7 @@ const GlobalAlertTitle = React.forwardRef((props, ref) => {
1105
1089
  const {
1106
1090
  type
1107
1091
  } = useGlobalAlertContext();
1108
- return React__namespace.default.createElement(StyledGlobalAlertTitle, _extends$6({
1092
+ return React__namespace.default.createElement(StyledGlobalAlertTitle, Object.assign({
1109
1093
  alertType: type,
1110
1094
  ref: ref
1111
1095
  }, props));
@@ -1124,7 +1108,7 @@ const GlobalAlertComponent = React.forwardRef((_ref, ref) => {
1124
1108
  value: React.useMemo(() => ({
1125
1109
  type
1126
1110
  }), [type])
1127
- }, React__namespace.default.createElement(StyledGlobalAlert, _extends$6({
1111
+ }, React__namespace.default.createElement(StyledGlobalAlert, Object.assign({
1128
1112
  ref: ref,
1129
1113
  role: "status",
1130
1114
  alertType: type
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-notifications",
3
- "version": "8.75.1",
3
+ "version": "8.76.0",
4
4
  "description": "Notification and Well components within the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -10,7 +10,7 @@
10
10
  "url": "https://github.com/zendeskgarden/react-components/issues"
11
11
  },
12
12
  "main": "dist/index.cjs.js",
13
- "module": "dist/index.esm.js",
13
+ "module": "dist/esm/index.js",
14
14
  "files": [
15
15
  "dist"
16
16
  ],
@@ -21,21 +21,21 @@
21
21
  "sideEffects": false,
22
22
  "types": "dist/typings/index.d.ts",
23
23
  "dependencies": {
24
- "@zendeskgarden/react-buttons": "^8.75.1",
24
+ "@zendeskgarden/react-buttons": "^8.76.0",
25
25
  "polished": "^4.1.1",
26
26
  "prop-types": "^15.5.7",
27
27
  "react-transition-group": "^4.4.2",
28
28
  "react-uid": "^2.3.1"
29
29
  },
30
30
  "peerDependencies": {
31
- "@zendeskgarden/react-theming": "^8.67.0",
31
+ "@zendeskgarden/react-theming": "^8.75.0",
32
32
  "react": ">=16.8.0",
33
33
  "react-dom": ">=16.8.0",
34
34
  "styled-components": "^4.2.0 || ^5.0.0"
35
35
  },
36
36
  "devDependencies": {
37
37
  "@types/react-transition-group": "4.4.10",
38
- "@zendeskgarden/react-theming": "^8.75.1",
38
+ "@zendeskgarden/react-theming": "^8.76.0",
39
39
  "@zendeskgarden/svg-icons": "7.0.0"
40
40
  },
41
41
  "keywords": [
@@ -48,5 +48,5 @@
48
48
  "access": "public"
49
49
  },
50
50
  "zendeskgarden:src": "src/index.ts",
51
- "gitHead": "8e2bb36bcfef722db47a135fc987f72597be5000"
51
+ "gitHead": "3e52650c39fd1085a2e97b40a43eed7bc1e21937"
52
52
  }