@zendeskgarden/react-notifications 9.1.1 → 9.1.2

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.
@@ -53,8 +53,8 @@ const ToastSlot = _ref => {
53
53
  }, [limit, placement, toasts.length]);
54
54
  return React__default.createElement(StyledTransitionContainer, Object.assign({
55
55
  key: placement,
56
- toastPlacement: placement,
57
- toastZIndex: zIndex,
56
+ $toastPlacement: placement,
57
+ $toastZIndex: zIndex,
58
58
  onMouseEnter: handleMouseEnter,
59
59
  onMouseLeave: handleMouseLeave
60
60
  }, props), React__default.createElement(TransitionGroup, null, toasts.map((toast, index) => {
@@ -71,7 +71,7 @@ const ToastSlot = _ref => {
71
71
  }, React__default.createElement(StyledFadeInTransition, {
72
72
  ref: transitionRef,
73
73
  placement: placement,
74
- isHidden: isHidden(index)
74
+ $isHidden: isHidden(index)
75
75
  }, React__default.createElement(Toast, {
76
76
  toast: toast,
77
77
  pauseTimers: pauseTimers || isHidden(index)
@@ -12,7 +12,7 @@ const DEFAULT_DURATION = '400ms';
12
12
  const StyledFadeInTransition = styled.div.withConfig({
13
13
  displayName: "styled__StyledFadeInTransition",
14
14
  componentId: "sc-nq0usb-0"
15
- })(["transition:opacity ", " ease-in 300ms;opacity:", ";margin-bottom:", "px;", " &.", "-enter{transform:translateY( ", " );opacity:0;max-height:0;}&.", "-enter-active{transform:translateY(0);transition:opacity ", " ease-in,transform ", " cubic-bezier(0.15,0.85,0.35,1.2),max-height ", ";opacity:1;max-height:500px;}&.", "-exit{opacity:1;max-height:500px;}&.", "-exit-active{transition:opacity 550ms ease-out,max-height ", " linear 150ms;opacity:0;max-height:0;}"], DEFAULT_DURATION, p => p.isHidden ? '0 !important' : 1, p => p.theme.space.base * 2, p => p.isHidden && hideVisually(), TRANSITION_CLASS, props => {
15
+ })(["transition:opacity ", " ease-in 300ms;opacity:", ";margin-bottom:", "px;", " &.", "-enter{transform:translateY( ", " );opacity:0;max-height:0;}&.", "-enter-active{transform:translateY(0);transition:opacity ", " ease-in,transform ", " cubic-bezier(0.15,0.85,0.35,1.2),max-height ", ";opacity:1;max-height:500px;}&.", "-exit{opacity:1;max-height:500px;}&.", "-exit-active{transition:opacity 550ms ease-out,max-height ", " linear 150ms;opacity:0;max-height:0;}"], DEFAULT_DURATION, p => p.$isHidden ? '0 !important' : 1, p => p.theme.space.base * 2, p => p.$isHidden && hideVisually(), TRANSITION_CLASS, props => {
16
16
  if (props.placement === 'bottom-start' || props.placement === 'bottom' || props.placement === 'bottom-end') {
17
17
  return '100px';
18
18
  }
@@ -27,7 +27,7 @@ const placementStyles = props => {
27
27
  const bottomLeftStyles = css(["bottom:", ";left:", ";"], verticalDistance, horizontalDistance);
28
28
  const bottomStyles = css(["bottom:", ";left:50%;transform:translate(-50%,0);"], verticalDistance);
29
29
  const bottomRightStyles = css(["right:", ";bottom:", ";"], horizontalDistance, verticalDistance);
30
- switch (props.toastPlacement) {
30
+ switch (props.$toastPlacement) {
31
31
  case 'top-start':
32
32
  if (props.theme.rtl) {
33
33
  return topRightStyles;
@@ -59,6 +59,6 @@ const placementStyles = props => {
59
59
  const StyledTransitionContainer = styled.div.withConfig({
60
60
  displayName: "styled__StyledTransitionContainer",
61
61
  componentId: "sc-nq0usb-1"
62
- })(["position:fixed;z-index:", ";", ";"], props => props.toastZIndex, placementStyles);
62
+ })(["position:fixed;z-index:", ";", ";"], props => props.$toastZIndex, placementStyles);
63
63
 
64
64
  export { StyledFadeInTransition, StyledTransitionContainer, TRANSITION_CLASS };
@@ -39,7 +39,7 @@ const colorStyles = props => {
39
39
  };
40
40
  const StyledAlert = styled(StyledBase).attrs({
41
41
  'data-garden-id': COMPONENT_ID,
42
- 'data-garden-version': '9.1.1'
42
+ 'data-garden-version': '9.1.2'
43
43
  }).withConfig({
44
44
  displayName: "StyledAlert",
45
45
  componentId: "sc-fyn8jp-0"
@@ -80,7 +80,7 @@ const padding = props => {
80
80
  };
81
81
  const StyledBase = styled.div.attrs({
82
82
  'data-garden-id': COMPONENT_ID,
83
- 'data-garden-version': '9.1.1'
83
+ 'data-garden-version': '9.1.2'
84
84
  }).withConfig({
85
85
  displayName: "StyledBase",
86
86
  componentId: "sc-14syaqw-0"
@@ -49,7 +49,7 @@ const colorStyles = _ref2 => {
49
49
  };
50
50
  const StyledIcon = styled(StyledBaseIcon).attrs({
51
51
  'data-garden-id': COMPONENT_ID,
52
- 'data-garden-version': '9.1.1'
52
+ 'data-garden-version': '9.1.2'
53
53
  }).withConfig({
54
54
  displayName: "StyledIcon",
55
55
  componentId: "sc-msklws-0"
@@ -41,7 +41,7 @@ const colorStyles = props => {
41
41
  };
42
42
  const StyledNotification = styled(StyledBase).attrs({
43
43
  'data-garden-id': COMPONENT_ID,
44
- 'data-garden-version': '9.1.1'
44
+ 'data-garden-version': '9.1.2'
45
45
  }).withConfig({
46
46
  displayName: "StyledNotification",
47
47
  componentId: "sc-uf6jh-0"
@@ -35,7 +35,7 @@ const colorStyles = _ref => {
35
35
  };
36
36
  const StyledWell = styled(StyledBase).attrs({
37
37
  'data-garden-id': COMPONENT_ID,
38
- 'data-garden-version': '9.1.1'
38
+ 'data-garden-version': '9.1.2'
39
39
  }).withConfig({
40
40
  displayName: "StyledWell",
41
41
  componentId: "sc-a5831c-0"
@@ -58,7 +58,7 @@ const colorStyles = _ref => {
58
58
  };
59
59
  const StyledClose = styled(IconButton).attrs({
60
60
  'data-garden-id': COMPONENT_ID,
61
- 'data-garden-version': '9.1.1'
61
+ 'data-garden-version': '9.1.2'
62
62
  }).withConfig({
63
63
  displayName: "StyledClose",
64
64
  componentId: "sc-1mr9nx1-0"
@@ -10,7 +10,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
10
10
  const COMPONENT_ID = 'notifications.paragraph';
11
11
  const StyledParagraph = styled.p.attrs({
12
12
  'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.1.1'
13
+ 'data-garden-version': '9.1.2'
14
14
  }).withConfig({
15
15
  displayName: "StyledParagraph",
16
16
  componentId: "sc-12tmd6p-0"
@@ -10,7 +10,7 @@ import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'
10
10
  const COMPONENT_ID = 'notifications.title';
11
11
  const StyledTitle = styled.div.attrs({
12
12
  'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.1.1'
13
+ 'data-garden-version': '9.1.2'
14
14
  }).withConfig({
15
15
  displayName: "StyledTitle",
16
16
  componentId: "sc-xx4jsv-0"
@@ -148,7 +148,7 @@ const sizeStyles = props => {
148
148
  };
149
149
  const StyledGlobalAlert = styled.div.attrs({
150
150
  'data-garden-id': COMPONENT_ID,
151
- 'data-garden-version': '9.1.1'
151
+ 'data-garden-version': '9.1.2'
152
152
  }).withConfig({
153
153
  displayName: "StyledGlobalAlert",
154
154
  componentId: "sc-k6rimt-0"
@@ -106,7 +106,7 @@ function sizeStyles(props) {
106
106
  }
107
107
  const StyledGlobalAlertButton = styled(Button).attrs({
108
108
  'data-garden-id': COMPONENT_ID,
109
- 'data-garden-version': '9.1.1'
109
+ 'data-garden-version': '9.1.2'
110
110
  }).withConfig({
111
111
  displayName: "StyledGlobalAlertButton",
112
112
  componentId: "sc-1txe91a-0"
@@ -91,7 +91,7 @@ const sizeStyles = props => {
91
91
  };
92
92
  const StyledGlobalAlertClose = styled(IconButton).attrs({
93
93
  'data-garden-id': COMPONENT_ID,
94
- 'data-garden-version': '9.1.1'
94
+ 'data-garden-version': '9.1.2'
95
95
  }).withConfig({
96
96
  displayName: "StyledGlobalAlertClose",
97
97
  componentId: "sc-1g5s93s-0"
@@ -10,7 +10,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
10
10
  const COMPONENT_ID = 'notifications.global_alert.content';
11
11
  const StyledGlobalAlertContent = styled.div.attrs({
12
12
  'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.1.1'
13
+ 'data-garden-version': '9.1.2'
14
14
  }).withConfig({
15
15
  displayName: "StyledGlobalAlertContent",
16
16
  componentId: "sc-rept0u-0"
@@ -53,7 +53,7 @@ const colorStyles = _ref => {
53
53
  };
54
54
  const StyledGlobalAlertIcon = styled(StyledBaseIcon).attrs({
55
55
  'data-garden-id': COMPONENT_ID,
56
- 'data-garden-version': '9.1.1'
56
+ 'data-garden-version': '9.1.2'
57
57
  }).withConfig({
58
58
  displayName: "StyledGlobalAlertIcon",
59
59
  componentId: "sc-84ne9k-0"
@@ -37,7 +37,7 @@ const colorStyles = _ref => {
37
37
  };
38
38
  const StyledGlobalAlertTitle = styled.div.attrs({
39
39
  'data-garden-id': COMPONENT_ID,
40
- 'data-garden-version': '9.1.1'
40
+ 'data-garden-version': '9.1.2'
41
41
  }).withConfig({
42
42
  displayName: "StyledGlobalAlertTitle",
43
43
  componentId: "sc-10clqbo-0"
package/dist/index.cjs.js CHANGED
@@ -206,7 +206,7 @@ const colorStyles$a = _ref => {
206
206
  };
207
207
  const StyledClose = styled__default.default(reactButtons.IconButton).attrs({
208
208
  'data-garden-id': COMPONENT_ID$d,
209
- 'data-garden-version': '9.1.1'
209
+ 'data-garden-version': '9.1.2'
210
210
  }).withConfig({
211
211
  displayName: "StyledClose",
212
212
  componentId: "sc-1mr9nx1-0"
@@ -215,7 +215,7 @@ const StyledClose = styled__default.default(reactButtons.IconButton).attrs({
215
215
  const COMPONENT_ID$c = 'notifications.paragraph';
216
216
  const StyledParagraph = styled__default.default.p.attrs({
217
217
  'data-garden-id': COMPONENT_ID$c,
218
- 'data-garden-version': '9.1.1'
218
+ 'data-garden-version': '9.1.2'
219
219
  }).withConfig({
220
220
  displayName: "StyledParagraph",
221
221
  componentId: "sc-12tmd6p-0"
@@ -224,7 +224,7 @@ const StyledParagraph = styled__default.default.p.attrs({
224
224
  const COMPONENT_ID$b = 'notifications.title';
225
225
  const StyledTitle = styled__default.default.div.attrs({
226
226
  'data-garden-id': COMPONENT_ID$b,
227
- 'data-garden-version': '9.1.1'
227
+ 'data-garden-version': '9.1.2'
228
228
  }).withConfig({
229
229
  displayName: "StyledTitle",
230
230
  componentId: "sc-xx4jsv-0"
@@ -305,7 +305,7 @@ const padding = props => {
305
305
  };
306
306
  const StyledBase = styled__default.default.div.attrs({
307
307
  'data-garden-id': COMPONENT_ID$a,
308
- 'data-garden-version': '9.1.1'
308
+ 'data-garden-version': '9.1.2'
309
309
  }).withConfig({
310
310
  displayName: "StyledBase",
311
311
  componentId: "sc-14syaqw-0"
@@ -340,7 +340,7 @@ const colorStyles$8 = props => {
340
340
  };
341
341
  const StyledAlert = styled__default.default(StyledBase).attrs({
342
342
  'data-garden-id': COMPONENT_ID$9,
343
- 'data-garden-version': '9.1.1'
343
+ 'data-garden-version': '9.1.2'
344
344
  }).withConfig({
345
345
  displayName: "StyledAlert",
346
346
  componentId: "sc-fyn8jp-0"
@@ -375,7 +375,7 @@ const colorStyles$7 = props => {
375
375
  };
376
376
  const StyledNotification = styled__default.default(StyledBase).attrs({
377
377
  'data-garden-id': COMPONENT_ID$8,
378
- 'data-garden-version': '9.1.1'
378
+ 'data-garden-version': '9.1.2'
379
379
  }).withConfig({
380
380
  displayName: "StyledNotification",
381
381
  componentId: "sc-uf6jh-0"
@@ -411,7 +411,7 @@ const colorStyles$6 = _ref => {
411
411
  };
412
412
  const StyledWell = styled__default.default(StyledBase).attrs({
413
413
  'data-garden-id': COMPONENT_ID$7,
414
- 'data-garden-version': '9.1.1'
414
+ 'data-garden-version': '9.1.2'
415
415
  }).withConfig({
416
416
  displayName: "StyledWell",
417
417
  componentId: "sc-a5831c-0"
@@ -458,7 +458,7 @@ const colorStyles$5 = _ref2 => {
458
458
  };
459
459
  const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
460
460
  'data-garden-id': COMPONENT_ID$6,
461
- 'data-garden-version': '9.1.1'
461
+ 'data-garden-version': '9.1.2'
462
462
  }).withConfig({
463
463
  displayName: "StyledIcon",
464
464
  componentId: "sc-msklws-0"
@@ -605,7 +605,7 @@ const sizeStyles$3 = props => {
605
605
  };
606
606
  const StyledGlobalAlert = styled__default.default.div.attrs({
607
607
  'data-garden-id': COMPONENT_ID$5,
608
- 'data-garden-version': '9.1.1'
608
+ 'data-garden-version': '9.1.2'
609
609
  }).withConfig({
610
610
  displayName: "StyledGlobalAlert",
611
611
  componentId: "sc-k6rimt-0"
@@ -694,7 +694,7 @@ const sizeStyles$2 = props => {
694
694
  };
695
695
  const StyledGlobalAlertClose = styled__default.default(reactButtons.IconButton).attrs({
696
696
  'data-garden-id': COMPONENT_ID$4,
697
- 'data-garden-version': '9.1.1'
697
+ 'data-garden-version': '9.1.2'
698
698
  }).withConfig({
699
699
  displayName: "StyledGlobalAlertClose",
700
700
  componentId: "sc-1g5s93s-0"
@@ -797,7 +797,7 @@ function sizeStyles$1(props) {
797
797
  }
798
798
  const StyledGlobalAlertButton = styled__default.default(reactButtons.Button).attrs({
799
799
  'data-garden-id': COMPONENT_ID$3,
800
- 'data-garden-version': '9.1.1'
800
+ 'data-garden-version': '9.1.2'
801
801
  }).withConfig({
802
802
  displayName: "StyledGlobalAlertButton",
803
803
  componentId: "sc-1txe91a-0"
@@ -806,7 +806,7 @@ const StyledGlobalAlertButton = styled__default.default(reactButtons.Button).att
806
806
  const COMPONENT_ID$2 = 'notifications.global_alert.content';
807
807
  const StyledGlobalAlertContent = styled__default.default.div.attrs({
808
808
  'data-garden-id': COMPONENT_ID$2,
809
- 'data-garden-version': '9.1.1'
809
+ 'data-garden-version': '9.1.2'
810
810
  }).withConfig({
811
811
  displayName: "StyledGlobalAlertContent",
812
812
  componentId: "sc-rept0u-0"
@@ -857,7 +857,7 @@ const colorStyles$1 = _ref => {
857
857
  };
858
858
  const StyledGlobalAlertIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
859
859
  'data-garden-id': COMPONENT_ID$1,
860
- 'data-garden-version': '9.1.1'
860
+ 'data-garden-version': '9.1.2'
861
861
  }).withConfig({
862
862
  displayName: "StyledGlobalAlertIcon",
863
863
  componentId: "sc-84ne9k-0"
@@ -893,7 +893,7 @@ const colorStyles = _ref => {
893
893
  };
894
894
  const StyledGlobalAlertTitle = styled__default.default.div.attrs({
895
895
  'data-garden-id': COMPONENT_ID,
896
- 'data-garden-version': '9.1.1'
896
+ 'data-garden-version': '9.1.2'
897
897
  }).withConfig({
898
898
  displayName: "StyledGlobalAlertTitle",
899
899
  componentId: "sc-10clqbo-0"
@@ -1232,7 +1232,7 @@ const DEFAULT_DURATION = '400ms';
1232
1232
  const StyledFadeInTransition = styled__default.default.div.withConfig({
1233
1233
  displayName: "styled__StyledFadeInTransition",
1234
1234
  componentId: "sc-nq0usb-0"
1235
- })(["transition:opacity ", " ease-in 300ms;opacity:", ";margin-bottom:", "px;", " &.", "-enter{transform:translateY( ", " );opacity:0;max-height:0;}&.", "-enter-active{transform:translateY(0);transition:opacity ", " ease-in,transform ", " cubic-bezier(0.15,0.85,0.35,1.2),max-height ", ";opacity:1;max-height:500px;}&.", "-exit{opacity:1;max-height:500px;}&.", "-exit-active{transition:opacity 550ms ease-out,max-height ", " linear 150ms;opacity:0;max-height:0;}"], DEFAULT_DURATION, p => p.isHidden ? '0 !important' : 1, p => p.theme.space.base * 2, p => p.isHidden && polished.hideVisually(), TRANSITION_CLASS, props => {
1235
+ })(["transition:opacity ", " ease-in 300ms;opacity:", ";margin-bottom:", "px;", " &.", "-enter{transform:translateY( ", " );opacity:0;max-height:0;}&.", "-enter-active{transform:translateY(0);transition:opacity ", " ease-in,transform ", " cubic-bezier(0.15,0.85,0.35,1.2),max-height ", ";opacity:1;max-height:500px;}&.", "-exit{opacity:1;max-height:500px;}&.", "-exit-active{transition:opacity 550ms ease-out,max-height ", " linear 150ms;opacity:0;max-height:0;}"], DEFAULT_DURATION, p => p.$isHidden ? '0 !important' : 1, p => p.theme.space.base * 2, p => p.$isHidden && polished.hideVisually(), TRANSITION_CLASS, props => {
1236
1236
  if (props.placement === 'bottom-start' || props.placement === 'bottom' || props.placement === 'bottom-end') {
1237
1237
  return '100px';
1238
1238
  }
@@ -1247,7 +1247,7 @@ const placementStyles = props => {
1247
1247
  const bottomLeftStyles = styled.css(["bottom:", ";left:", ";"], verticalDistance, horizontalDistance);
1248
1248
  const bottomStyles = styled.css(["bottom:", ";left:50%;transform:translate(-50%,0);"], verticalDistance);
1249
1249
  const bottomRightStyles = styled.css(["right:", ";bottom:", ";"], horizontalDistance, verticalDistance);
1250
- switch (props.toastPlacement) {
1250
+ switch (props.$toastPlacement) {
1251
1251
  case 'top-start':
1252
1252
  if (props.theme.rtl) {
1253
1253
  return topRightStyles;
@@ -1279,7 +1279,7 @@ const placementStyles = props => {
1279
1279
  const StyledTransitionContainer = styled__default.default.div.withConfig({
1280
1280
  displayName: "styled__StyledTransitionContainer",
1281
1281
  componentId: "sc-nq0usb-1"
1282
- })(["position:fixed;z-index:", ";", ";"], props => props.toastZIndex, placementStyles);
1282
+ })(["position:fixed;z-index:", ";", ";"], props => props.$toastZIndex, placementStyles);
1283
1283
 
1284
1284
  const ToastSlot = _ref => {
1285
1285
  let {
@@ -1323,8 +1323,8 @@ const ToastSlot = _ref => {
1323
1323
  }, [limit, placement, toasts.length]);
1324
1324
  return React__namespace.default.createElement(StyledTransitionContainer, Object.assign({
1325
1325
  key: placement,
1326
- toastPlacement: placement,
1327
- toastZIndex: zIndex,
1326
+ $toastPlacement: placement,
1327
+ $toastZIndex: zIndex,
1328
1328
  onMouseEnter: handleMouseEnter,
1329
1329
  onMouseLeave: handleMouseLeave
1330
1330
  }, props), React__namespace.default.createElement(reactTransitionGroup.TransitionGroup, null, toasts.map((toast, index) => {
@@ -1341,7 +1341,7 @@ const ToastSlot = _ref => {
1341
1341
  }, React__namespace.default.createElement(StyledFadeInTransition, {
1342
1342
  ref: transitionRef,
1343
1343
  placement: placement,
1344
- isHidden: isHidden(index)
1344
+ $isHidden: isHidden(index)
1345
1345
  }, React__namespace.default.createElement(Toast, {
1346
1346
  toast: toast,
1347
1347
  pauseTimers: pauseTimers || isHidden(index)
@@ -8,12 +8,12 @@ import { DefaultTheme } from 'styled-components';
8
8
  import { Placement } from '../../types';
9
9
  export declare const TRANSITION_CLASS = "garden-toast-transition";
10
10
  export declare const StyledFadeInTransition: import("styled-components").StyledComponent<"div", DefaultTheme, {
11
- isHidden: boolean;
11
+ $isHidden: boolean;
12
12
  placement: Placement;
13
13
  }, never>;
14
14
  interface IStyledTransitionContainerProps {
15
- toastPlacement: Placement;
16
- toastZIndex?: number;
15
+ $toastPlacement: Placement;
16
+ $toastZIndex?: number;
17
17
  }
18
18
  export declare const StyledTransitionContainer: import("styled-components").StyledComponent<"div", DefaultTheme, IStyledTransitionContainerProps, never>;
19
19
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-notifications",
3
- "version": "9.1.1",
3
+ "version": "9.1.2",
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>",
@@ -21,7 +21,7 @@
21
21
  "sideEffects": false,
22
22
  "types": "dist/typings/index.d.ts",
23
23
  "dependencies": {
24
- "@zendeskgarden/react-buttons": "^9.1.1",
24
+ "@zendeskgarden/react-buttons": "^9.1.2",
25
25
  "polished": "^4.3.1",
26
26
  "prop-types": "^15.5.7",
27
27
  "react-transition-group": "^4.4.2",
@@ -35,7 +35,7 @@
35
35
  },
36
36
  "devDependencies": {
37
37
  "@types/react-transition-group": "4.4.11",
38
- "@zendeskgarden/react-theming": "^9.1.1",
38
+ "@zendeskgarden/react-theming": "^9.1.2",
39
39
  "@zendeskgarden/svg-icons": "7.3.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": "21eaf7b57f27f1a846ed332f1b8e655d6bc0a13b"
51
+ "gitHead": "dd7b2e7fb6747ef39a028b4e7b9924c2098deea0"
52
52
  }