@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.
- package/dist/esm/elements/Alert.js +49 -0
- package/dist/esm/elements/Notification.js +49 -0
- package/dist/esm/elements/Well.js +33 -0
- package/dist/esm/elements/content/Close.js +37 -0
- package/dist/esm/elements/content/Paragraph.js +28 -0
- package/dist/esm/elements/content/Title.js +28 -0
- package/dist/esm/elements/global-alert/GlobalAlert.js +64 -0
- package/dist/esm/elements/global-alert/GlobalAlertButton.js +46 -0
- package/dist/esm/elements/global-alert/GlobalAlertClose.js +41 -0
- package/dist/esm/elements/global-alert/GlobalAlertContent.js +30 -0
- package/dist/esm/elements/global-alert/GlobalAlertTitle.js +39 -0
- package/dist/esm/elements/global-alert/utility.js +14 -0
- package/dist/esm/elements/toaster/Toast.js +62 -0
- package/dist/esm/elements/toaster/ToastContext.js +11 -0
- package/dist/esm/elements/toaster/ToastProvider.js +51 -0
- package/dist/esm/elements/toaster/ToastSlot.js +82 -0
- package/dist/esm/elements/toaster/reducer.js +66 -0
- package/dist/esm/elements/toaster/styled.js +71 -0
- package/dist/esm/elements/toaster/useToast.js +70 -0
- package/dist/esm/index.js +15 -0
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/x-stroke.svg.js +26 -0
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/alert-error-stroke.svg.js +37 -0
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/alert-warning-stroke.svg.js +32 -0
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/check-circle-stroke.svg.js +33 -0
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/info-stroke.svg.js +37 -0
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/x-stroke.svg.js +26 -0
- package/dist/esm/styled/StyledAlert.js +25 -0
- package/dist/esm/styled/StyledBase.js +54 -0
- package/dist/esm/styled/StyledIcon.js +25 -0
- package/dist/esm/styled/StyledNotification.js +62 -0
- package/dist/esm/styled/StyledWell.js +23 -0
- package/dist/esm/styled/content/StyledClose.js +25 -0
- package/dist/esm/styled/content/StyledParagraph.js +22 -0
- package/dist/esm/styled/content/StyledTitle.js +22 -0
- package/dist/esm/styled/global-alert/StyledGlobalAlert.js +83 -0
- package/dist/esm/styled/global-alert/StyledGlobalAlertButton.js +73 -0
- package/dist/esm/styled/global-alert/StyledGlobalAlertClose.js +72 -0
- package/dist/esm/styled/global-alert/StyledGlobalAlertContent.js +22 -0
- package/dist/esm/styled/global-alert/StyledGlobalAlertIcon.js +36 -0
- package/dist/esm/styled/global-alert/StyledGlobalAlertTitle.js +38 -0
- package/dist/esm/types/index.js +9 -0
- package/dist/esm/utils/icons.js +25 -0
- package/dist/esm/utils/useNotificationsContext.js +14 -0
- package/dist/index.cjs.js +30 -46
- package/package.json +6 -6
- package/dist/index.esm.js +0 -1123
package/dist/index.cjs.js
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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": "
|
|
51
|
+
"gitHead": "3e52650c39fd1085a2e97b40a43eed7bc1e21937"
|
|
52
52
|
}
|