@zendeskgarden/react-notifications 8.67.0 → 8.68.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 (8) hide show
  1. package/dist/index.cjs.js +60 -37
  2. package/dist/index.esm.js +62 -39
  3. package/dist/typings/elements/global-alert/utility.d.ts +1 -0
  4. package/dist/typings/elements/toaster/Toast.d.ts +1 -0
  5. package/dist/typings/styled/StyledNotification.d.ts +1 -2
  6. package/dist/typings/styled/global-alert/StyledGlobalAlertButton.d.ts +3 -3
  7. package/dist/typings/utils/useNotificationsContext.d.ts +1 -0
  8. package/package.json +5 -5
package/dist/index.cjs.js CHANGED
@@ -60,11 +60,14 @@ const TYPE = ['success', 'warning', 'error', 'info'];
60
60
  const COMPONENT_ID$b = 'notifications.close';
61
61
  const StyledClose = styled__default.default.button.attrs({
62
62
  'data-garden-id': COMPONENT_ID$b,
63
- 'data-garden-version': '8.67.0'
63
+ 'data-garden-version': '8.68.0'
64
64
  }).withConfig({
65
65
  displayName: "StyledClose",
66
66
  componentId: "sc-1mr9nx1-0"
67
- })(["display:block;position:absolute;top:", "px;", ":", ";transition:background-color 0.1s ease-in-out,color 0.25s ease-in-out;border:none;border-radius:50%;background-color:transparent;cursor:pointer;padding:0;width:", "px;height:", "px;overflow:hidden;color:", ";font-size:0;user-select:none;&:hover{color:", ";}&:focus{outline:none;}&[data-garden-focus-visible]{background-color:", ";color:", ";&::-moz-focus-inner{border:0;}}", ";"], props => props.theme.space.base, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base}px`, props => props.theme.space.base * 7, props => props.theme.space.base * 7, props => props.hue ? reactTheming.getColor(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme) : reactTheming.getColor('neutralHue', 600, props.theme), props => props.hue ? reactTheming.getColor(props.hue, 800, props.theme) : reactTheming.getColor('neutralHue', 800, props.theme), props => props.hue ? reactTheming.getColor(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme, 0.15) : reactTheming.getColor('neutralHue', 600, props.theme, 0.15), props => props.hue ? reactTheming.getColor(props.hue, 800, props.theme) : reactTheming.getColor('neutralHue', 800, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
67
+ })(["display:block;position:absolute;top:", "px;", ":", ";transition:background-color 0.1s ease-in-out,color 0.25s ease-in-out,box-shadow 0.1s ease-in-out;border:none;border-radius:50%;background-color:transparent;cursor:pointer;padding:0;width:", "px;height:", "px;overflow:hidden;color:", ";font-size:0;user-select:none;&::-moz-focus-inner{border:0;}&:hover{color:", ";}", " ", ";"], props => props.theme.space.base, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base}px`, props => props.theme.space.base * 7, props => props.theme.space.base * 7, props => props.hue ? reactTheming.getColor(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme) : reactTheming.getColor('neutralHue', 600, props.theme), props => props.hue ? reactTheming.getColor(props.hue, 800, props.theme) : reactTheming.getColor('neutralHue', 800, props.theme), props => reactTheming.focusStyles({
68
+ theme: props.theme,
69
+ inset: true
70
+ }), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
68
71
  StyledClose.defaultProps = {
69
72
  theme: reactTheming.DEFAULT_THEME
70
73
  };
@@ -72,7 +75,7 @@ StyledClose.defaultProps = {
72
75
  const COMPONENT_ID$a = 'notifications.paragraph';
73
76
  const StyledParagraph = styled__default.default.p.attrs({
74
77
  'data-garden-id': COMPONENT_ID$a,
75
- 'data-garden-version': '8.67.0'
78
+ 'data-garden-version': '8.68.0'
76
79
  }).withConfig({
77
80
  displayName: "StyledParagraph",
78
81
  componentId: "sc-12tmd6p-0"
@@ -84,7 +87,7 @@ StyledParagraph.defaultProps = {
84
87
  const COMPONENT_ID$9 = 'notifications.title';
85
88
  const StyledTitle = styled__default.default.div.attrs({
86
89
  'data-garden-id': COMPONENT_ID$9,
87
- 'data-garden-version': '8.67.0'
90
+ 'data-garden-version': '8.68.0'
88
91
  }).withConfig({
89
92
  displayName: "StyledTitle",
90
93
  componentId: "sc-xx4jsv-0"
@@ -141,7 +144,7 @@ const COMPONENT_ID$8 = 'notifications.alert';
141
144
  const colorStyles$5 = props => styled.css(["", "{color:", ";}"], StyledTitle, props.hue && reactTheming.getColor(props.hue, 800, props.theme));
142
145
  const StyledAlert = styled__default.default(StyledBase).attrs(props => ({
143
146
  'data-garden-id': COMPONENT_ID$8,
144
- 'data-garden-version': '8.67.0',
147
+ 'data-garden-version': '8.68.0',
145
148
  role: props.role === undefined ? 'alert' : props.role
146
149
  })).withConfig({
147
150
  displayName: "StyledAlert",
@@ -186,11 +189,10 @@ const colorStyles$4 = props => {
186
189
  }
187
190
  return styled.css(["", "{color:", ";}"], StyledTitle, color);
188
191
  };
189
- const StyledNotification = styled__default.default(StyledBase).attrs(props => ({
192
+ const StyledNotification = styled__default.default(StyledBase).attrs({
190
193
  'data-garden-id': COMPONENT_ID$7,
191
- 'data-garden-version': '8.67.0',
192
- role: props.role === undefined ? 'status' : props.role
193
- })).withConfig({
194
+ 'data-garden-version': '8.68.0'
195
+ }).withConfig({
194
196
  displayName: "StyledNotification",
195
197
  componentId: "sc-uf6jh-0"
196
198
  })(["", " ", ";"], colorStyles$4, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
@@ -204,7 +206,7 @@ StyledNotification.defaultProps = {
204
206
  const COMPONENT_ID$6 = 'notifications.well';
205
207
  const StyledWell = styled__default.default(StyledBase).attrs({
206
208
  'data-garden-id': COMPONENT_ID$6,
207
- 'data-garden-version': '8.67.0'
209
+ 'data-garden-version': '8.68.0'
208
210
  }).withConfig({
209
211
  displayName: "StyledWell",
210
212
  componentId: "sc-a5831c-0"
@@ -234,7 +236,7 @@ const colorStyles$3 = props => {
234
236
  let foregroundColor;
235
237
  let anchorHoverColor;
236
238
  let anchorActiveColor;
237
- let anchorBoxShadowColor;
239
+ let focusColor;
238
240
  switch (props.alertType) {
239
241
  case 'success':
240
242
  borderColor = reactTheming.getColor('successHue', 700, props.theme);
@@ -242,7 +244,7 @@ const colorStyles$3 = props => {
242
244
  foregroundColor = reactTheming.getColor('successHue', 100, props.theme);
243
245
  anchorHoverColor = props.theme.palette.white;
244
246
  anchorActiveColor = props.theme.palette.white;
245
- anchorBoxShadowColor = reactTheming.getColor('successHue', 200, props.theme, 0.35);
247
+ focusColor = 'successHue';
246
248
  break;
247
249
  case 'error':
248
250
  borderColor = reactTheming.getColor('dangerHue', 700, props.theme);
@@ -250,7 +252,7 @@ const colorStyles$3 = props => {
250
252
  foregroundColor = reactTheming.getColor('dangerHue', 100, props.theme);
251
253
  anchorHoverColor = props.theme.palette.white;
252
254
  anchorActiveColor = props.theme.palette.white;
253
- anchorBoxShadowColor = reactTheming.getColor('dangerHue', 100, props.theme, 0.35);
255
+ focusColor = 'dangerHue';
254
256
  break;
255
257
  case 'warning':
256
258
  borderColor = reactTheming.getColor('warningHue', 400, props.theme);
@@ -258,7 +260,7 @@ const colorStyles$3 = props => {
258
260
  foregroundColor = reactTheming.getColor('warningHue', 800, props.theme);
259
261
  anchorHoverColor = reactTheming.getColor('warningHue', 900, props.theme);
260
262
  anchorActiveColor = reactTheming.getColor('warningHue', 1000, props.theme);
261
- anchorBoxShadowColor = reactTheming.getColor('warningHue', 800, props.theme, 0.35);
263
+ focusColor = 'warningHue';
262
264
  break;
263
265
  case 'info':
264
266
  borderColor = reactTheming.getColor('primaryHue', 300, props.theme);
@@ -266,11 +268,18 @@ const colorStyles$3 = props => {
266
268
  foregroundColor = reactTheming.getColor('primaryHue', 700, props.theme);
267
269
  anchorHoverColor = reactTheming.getColor('primaryHue', 800, props.theme);
268
270
  anchorActiveColor = reactTheming.getColor('primaryHue', 900, props.theme);
269
- anchorBoxShadowColor = reactTheming.getColor('primaryHue', 700, props.theme, 0.35);
271
+ focusColor = 'primaryHue';
270
272
  break;
271
273
  }
272
274
  const boxShadow = `0 ${props.theme.borderWidths.sm} ${props.theme.borderWidths.sm} ${borderColor}`;
273
- return styled.css(["box-shadow:", ";background-color:", ";color:", ";& a{color:inherit;&:focus{color:inherit;}&:hover,[data-garden-focus-visible]{color:", ";}&[data-garden-focus-visible]{box-shadow:", ";}&:active{color:", ";}}"], boxShadow, backgroundColor, foregroundColor, anchorHoverColor, props.theme.shadows.sm(anchorBoxShadowColor), anchorActiveColor);
275
+ return styled.css(["box-shadow:", ";background-color:", ";color:", ";& a{color:inherit;", " &:hover{color:", ";}&:active{color:", ";}}"], boxShadow, backgroundColor, foregroundColor, reactTheming.focusStyles({
276
+ theme: props.theme,
277
+ hue: focusColor,
278
+ shade: props.alertType === 'info' ? 600 : 800,
279
+ styles: {
280
+ color: 'inherit'
281
+ }
282
+ }), anchorHoverColor, anchorActiveColor);
274
283
  };
275
284
  const sizeStyles$3 = props => {
276
285
  const {
@@ -284,11 +293,11 @@ const sizeStyles$3 = props => {
284
293
  };
285
294
  const StyledGlobalAlert = styled__default.default.div.attrs({
286
295
  'data-garden-id': COMPONENT_ID$5,
287
- 'data-garden-version': '8.67.0'
296
+ 'data-garden-version': '8.68.0'
288
297
  }).withConfig({
289
298
  displayName: "StyledGlobalAlert",
290
299
  componentId: "sc-k6rimt-0"
291
- })(["display:flex;flex-wrap:nowrap;overflow:auto;overflow-x:hidden;box-sizing:border-box;direction:", ";&& a{border-radius:", ";text-decoration:underline;&:focus{text-decoration:underline;}}", " ", " ", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => props.theme.borderRadii.sm, sizeStyles$3, colorStyles$3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
300
+ })(["display:flex;flex-wrap:nowrap;overflow:auto;overflow-x:hidden;box-sizing:border-box;direction:", ";", " ", " && a{border-radius:", ";text-decoration:underline;}", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', sizeStyles$3, colorStyles$3, props => props.theme.borderRadii.sm, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
292
301
  StyledGlobalAlert.defaultProps = {
293
302
  theme: reactTheming.DEFAULT_THEME
294
303
  };
@@ -299,38 +308,42 @@ const colorStyles$2 = props => {
299
308
  let hoverForegroundColor;
300
309
  let activeBackgroundColor;
301
310
  let activeForegroundColor;
302
- let boxShadowColor;
311
+ let focusColor;
303
312
  switch (props.alertType) {
304
313
  case 'success':
305
314
  hoverBackgroundColor = reactTheming.getColor('successHue', 100, props.theme, 0.08);
306
315
  hoverForegroundColor = props.theme.palette.white;
307
316
  activeBackgroundColor = reactTheming.getColor('successHue', 100, props.theme, 0.2);
308
317
  activeForegroundColor = props.theme.palette.white;
309
- boxShadowColor = reactTheming.getColor('successHue', 100, props.theme, 0.35);
318
+ focusColor = 'successHue';
310
319
  break;
311
320
  case 'error':
312
321
  hoverBackgroundColor = reactTheming.getColor('dangerHue', 100, props.theme, 0.08);
313
322
  hoverForegroundColor = props.theme.palette.white;
314
323
  activeBackgroundColor = reactTheming.getColor('dangerHue', 100, props.theme, 0.2);
315
324
  activeForegroundColor = props.theme.palette.white;
316
- boxShadowColor = reactTheming.getColor('dangerHue', 100, props.theme, 0.35);
325
+ focusColor = 'dangerHue';
317
326
  break;
318
327
  case 'warning':
319
328
  hoverBackgroundColor = reactTheming.getColor('warningHue', 800, props.theme, 0.08);
320
329
  hoverForegroundColor = reactTheming.getColor('warningHue', 900, props.theme);
321
330
  activeBackgroundColor = reactTheming.getColor('warningHue', 800, props.theme, 0.2);
322
331
  activeForegroundColor = reactTheming.getColor('warningHue', 1000, props.theme);
323
- boxShadowColor = reactTheming.getColor('warningHue', 800, props.theme, 0.35);
332
+ focusColor = 'warningHue';
324
333
  break;
325
334
  case 'info':
326
335
  hoverBackgroundColor = reactTheming.getColor('primaryHue', 700, props.theme, 0.08);
327
336
  hoverForegroundColor = reactTheming.getColor('primaryHue', 800, props.theme);
328
337
  activeBackgroundColor = reactTheming.getColor('primaryHue', 700, props.theme, 0.2);
329
338
  activeForegroundColor = reactTheming.getColor('primaryHue', 900, props.theme);
330
- boxShadowColor = reactTheming.getColor('primaryHue', 700, props.theme, 0.35);
339
+ focusColor = 'primaryHue';
331
340
  break;
332
341
  }
333
- return styled.css(["color:inherit;&:hover{background-color:", ";color:", ";}&[data-garden-focus-visible]{box-shadow:", ";}&:active{background-color:", ";color:", ";}"], hoverBackgroundColor, hoverForegroundColor, props.theme.shadows.md(boxShadowColor), activeBackgroundColor, activeForegroundColor);
342
+ return styled.css(["color:inherit;&:hover{background-color:", ";color:", ";}", " &:active{background-color:", ";color:", ";}"], hoverBackgroundColor, hoverForegroundColor, reactTheming.focusStyles({
343
+ theme: props.theme,
344
+ hue: focusColor,
345
+ shade: props.alertType === 'info' ? 600 : 800
346
+ }), activeBackgroundColor, activeForegroundColor);
334
347
  };
335
348
  const sizeStyles$2 = props => {
336
349
  const marginVertical = `-${props.theme.space.base * 1.5}px`;
@@ -340,7 +353,7 @@ const sizeStyles$2 = props => {
340
353
  };
341
354
  const StyledGlobalAlertClose = styled__default.default(reactButtons.IconButton).attrs({
342
355
  'data-garden-id': COMPONENT_ID$4,
343
- 'data-garden-version': '8.67.0',
356
+ 'data-garden-version': '8.68.0',
344
357
  size: 'small'
345
358
  }).withConfig({
346
359
  displayName: "StyledGlobalAlertClose",
@@ -358,31 +371,35 @@ function colorStyles$1(props) {
358
371
  let backgroundColor;
359
372
  let hoverBackgroundColor;
360
373
  let activeBackgroundColor;
361
- let boxShadowColor;
374
+ let focusColor;
362
375
  switch (props.alertType) {
363
376
  case 'success':
364
377
  backgroundColor = reactTheming.getColor('successHue', 800, props.theme);
365
378
  hoverBackgroundColor = reactTheming.getColor('successHue', 900, props.theme);
366
379
  activeBackgroundColor = reactTheming.getColor('successHue', 1000, props.theme);
367
- boxShadowColor = reactTheming.getColor('successHue', 200, props.theme, 0.35);
380
+ focusColor = 'successHue';
368
381
  break;
369
382
  case 'error':
370
383
  backgroundColor = reactTheming.getColor('dangerHue', 800, props.theme);
371
384
  hoverBackgroundColor = reactTheming.getColor('dangerHue', 900, props.theme);
372
385
  activeBackgroundColor = reactTheming.getColor('dangerHue', 1000, props.theme);
373
- boxShadowColor = reactTheming.getColor('dangerHue', 100, props.theme, 0.35);
386
+ focusColor = 'dangerHue';
374
387
  break;
375
388
  case 'warning':
376
389
  backgroundColor = reactTheming.getColor('warningHue', 800, props.theme);
377
390
  hoverBackgroundColor = reactTheming.getColor('warningHue', 900, props.theme);
378
391
  activeBackgroundColor = reactTheming.getColor('warningHue', 1000, props.theme);
379
- boxShadowColor = reactTheming.getColor('warningHue', 800, props.theme, 0.35);
392
+ focusColor = 'warningHue';
380
393
  break;
381
394
  case 'info':
382
- boxShadowColor = reactTheming.getColor('primaryHue', 700, props.theme, 0.35);
395
+ focusColor = 'primaryHue';
383
396
  break;
384
397
  }
385
- return styled.css(["background-color:", ";&:hover{background-color:", ";}&[data-garden-focus-visible]{box-shadow:", ";}&:active{background-color:", ";}"], backgroundColor, hoverBackgroundColor, boxShadowColor && props.theme.shadows.md(boxShadowColor), activeBackgroundColor);
398
+ return styled.css(["background-color:", ";&:hover{background-color:", ";}", " &:active{background-color:", ";}"], backgroundColor, hoverBackgroundColor, reactTheming.focusStyles({
399
+ theme: props.theme,
400
+ hue: focusColor,
401
+ shade: props.alertType === 'info' ? 600 : 800
402
+ }), activeBackgroundColor);
386
403
  }
387
404
  function sizeStyles$1(props) {
388
405
  const marginVertical = `-${props.theme.space.base * 1.5}px`;
@@ -391,7 +408,7 @@ function sizeStyles$1(props) {
391
408
  }
392
409
  const StyledGlobalAlertButton = styled__default.default(reactButtons.Button).attrs({
393
410
  'data-garden-id': COMPONENT_ID$3,
394
- 'data-garden-version': '8.67.0',
411
+ 'data-garden-version': '8.68.0',
395
412
  focusInset: false,
396
413
  isDanger: false,
397
414
  isLink: false,
@@ -410,7 +427,7 @@ StyledGlobalAlertButton.defaultProps = {
410
427
  const COMPONENT_ID$2 = 'notifications.global-alert.content';
411
428
  const StyledGlobalAlertContent = styled__default.default.div.attrs({
412
429
  'data-garden-id': COMPONENT_ID$2,
413
- 'data-garden-version': '8.67.0'
430
+ 'data-garden-version': '8.68.0'
414
431
  }).withConfig({
415
432
  displayName: "StyledGlobalAlertContent",
416
433
  componentId: "sc-rept0u-0"
@@ -434,7 +451,7 @@ const StyledGlobalAlertIcon = styled__default.default(_ref => {
434
451
  return React__namespace.default.cloneElement(React.Children.only(children), props);
435
452
  }).attrs({
436
453
  'data-garden-id': COMPONENT_ID$1,
437
- 'data-garden-version': '8.67.0'
454
+ 'data-garden-version': '8.68.0'
438
455
  }).withConfig({
439
456
  displayName: "StyledGlobalAlertIcon",
440
457
  componentId: "sc-84ne9k-0"
@@ -462,7 +479,7 @@ const colorStyles = props => {
462
479
  };
463
480
  const StyledGlobalAlertTitle = styled__default.default.div.attrs({
464
481
  'data-garden-id': COMPONENT_ID,
465
- 'data-garden-version': '8.67.0'
482
+ 'data-garden-version': '8.68.0'
466
483
  }).withConfig({
467
484
  displayName: "StyledGlobalAlertTitle",
468
485
  componentId: "sc-10clqbo-0"
@@ -609,14 +626,20 @@ Alert.propTypes = {
609
626
  type: PropTypes__default.default.oneOf(TYPE).isRequired
610
627
  };
611
628
 
612
- const Notification = React__namespace.default.forwardRef((props, ref) => {
629
+ const Notification = React.forwardRef((_ref, ref) => {
630
+ let {
631
+ role,
632
+ ...props
633
+ } = _ref;
613
634
  const Icon = props.type ? validationIcons[props.type] : SvgInfoStroke;
614
635
  const hue = props.type && validationHues[props.type];
615
636
  return React__namespace.default.createElement(StyledNotification, _extends$6({
616
637
  ref: ref,
617
638
  type: props.type,
618
639
  isFloating: true
619
- }, props), props.type && React__namespace.default.createElement(StyledIcon, {
640
+ }, props, {
641
+ role: role === undefined ? 'status' : role
642
+ }), props.type && React__namespace.default.createElement(StyledIcon, {
620
643
  hue: hue
621
644
  }, React__namespace.default.createElement(Icon, null)), props.children);
622
645
  });
package/dist/index.esm.js CHANGED
@@ -6,10 +6,10 @@
6
6
  */
7
7
 
8
8
  import * as React from 'react';
9
- import React__default, { Children, createContext, useContext, useCallback, useState, useRef, useEffect, useReducer, useMemo, forwardRef } from 'react';
9
+ import React__default, { Children, createContext, useContext, forwardRef, useCallback, useState, useRef, useEffect, useReducer, useMemo } from 'react';
10
10
  import PropTypes from 'prop-types';
11
11
  import styled, { css, ThemeContext } from 'styled-components';
12
- import { getColor, retrieveComponentStyles, DEFAULT_THEME, getLineHeight, useText, useDocument } from '@zendeskgarden/react-theming';
12
+ import { getColor, focusStyles, retrieveComponentStyles, DEFAULT_THEME, getLineHeight, useText, useDocument } from '@zendeskgarden/react-theming';
13
13
  import { IconButton, Button } from '@zendeskgarden/react-buttons';
14
14
  import { math, hideVisually } from 'polished';
15
15
  import { TransitionGroup, CSSTransition } from 'react-transition-group';
@@ -35,11 +35,14 @@ const TYPE = ['success', 'warning', 'error', 'info'];
35
35
  const COMPONENT_ID$b = 'notifications.close';
36
36
  const StyledClose = styled.button.attrs({
37
37
  'data-garden-id': COMPONENT_ID$b,
38
- 'data-garden-version': '8.67.0'
38
+ 'data-garden-version': '8.68.0'
39
39
  }).withConfig({
40
40
  displayName: "StyledClose",
41
41
  componentId: "sc-1mr9nx1-0"
42
- })(["display:block;position:absolute;top:", "px;", ":", ";transition:background-color 0.1s ease-in-out,color 0.25s ease-in-out;border:none;border-radius:50%;background-color:transparent;cursor:pointer;padding:0;width:", "px;height:", "px;overflow:hidden;color:", ";font-size:0;user-select:none;&:hover{color:", ";}&:focus{outline:none;}&[data-garden-focus-visible]{background-color:", ";color:", ";&::-moz-focus-inner{border:0;}}", ";"], props => props.theme.space.base, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base}px`, props => props.theme.space.base * 7, props => props.theme.space.base * 7, props => props.hue ? getColor(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme) : getColor('neutralHue', 600, props.theme), props => props.hue ? getColor(props.hue, 800, props.theme) : getColor('neutralHue', 800, props.theme), props => props.hue ? getColor(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme, 0.15) : getColor('neutralHue', 600, props.theme, 0.15), props => props.hue ? getColor(props.hue, 800, props.theme) : getColor('neutralHue', 800, props.theme), props => retrieveComponentStyles(COMPONENT_ID$b, props));
42
+ })(["display:block;position:absolute;top:", "px;", ":", ";transition:background-color 0.1s ease-in-out,color 0.25s ease-in-out,box-shadow 0.1s ease-in-out;border:none;border-radius:50%;background-color:transparent;cursor:pointer;padding:0;width:", "px;height:", "px;overflow:hidden;color:", ";font-size:0;user-select:none;&::-moz-focus-inner{border:0;}&:hover{color:", ";}", " ", ";"], props => props.theme.space.base, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base}px`, props => props.theme.space.base * 7, props => props.theme.space.base * 7, props => props.hue ? getColor(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme) : getColor('neutralHue', 600, props.theme), props => props.hue ? getColor(props.hue, 800, props.theme) : getColor('neutralHue', 800, props.theme), props => focusStyles({
43
+ theme: props.theme,
44
+ inset: true
45
+ }), props => retrieveComponentStyles(COMPONENT_ID$b, props));
43
46
  StyledClose.defaultProps = {
44
47
  theme: DEFAULT_THEME
45
48
  };
@@ -47,7 +50,7 @@ StyledClose.defaultProps = {
47
50
  const COMPONENT_ID$a = 'notifications.paragraph';
48
51
  const StyledParagraph = styled.p.attrs({
49
52
  'data-garden-id': COMPONENT_ID$a,
50
- 'data-garden-version': '8.67.0'
53
+ 'data-garden-version': '8.68.0'
51
54
  }).withConfig({
52
55
  displayName: "StyledParagraph",
53
56
  componentId: "sc-12tmd6p-0"
@@ -59,7 +62,7 @@ StyledParagraph.defaultProps = {
59
62
  const COMPONENT_ID$9 = 'notifications.title';
60
63
  const StyledTitle = styled.div.attrs({
61
64
  'data-garden-id': COMPONENT_ID$9,
62
- 'data-garden-version': '8.67.0'
65
+ 'data-garden-version': '8.68.0'
63
66
  }).withConfig({
64
67
  displayName: "StyledTitle",
65
68
  componentId: "sc-xx4jsv-0"
@@ -116,7 +119,7 @@ const COMPONENT_ID$8 = 'notifications.alert';
116
119
  const colorStyles$5 = props => css(["", "{color:", ";}"], StyledTitle, props.hue && getColor(props.hue, 800, props.theme));
117
120
  const StyledAlert = styled(StyledBase).attrs(props => ({
118
121
  'data-garden-id': COMPONENT_ID$8,
119
- 'data-garden-version': '8.67.0',
122
+ 'data-garden-version': '8.68.0',
120
123
  role: props.role === undefined ? 'alert' : props.role
121
124
  })).withConfig({
122
125
  displayName: "StyledAlert",
@@ -161,11 +164,10 @@ const colorStyles$4 = props => {
161
164
  }
162
165
  return css(["", "{color:", ";}"], StyledTitle, color);
163
166
  };
164
- const StyledNotification = styled(StyledBase).attrs(props => ({
167
+ const StyledNotification = styled(StyledBase).attrs({
165
168
  'data-garden-id': COMPONENT_ID$7,
166
- 'data-garden-version': '8.67.0',
167
- role: props.role === undefined ? 'status' : props.role
168
- })).withConfig({
169
+ 'data-garden-version': '8.68.0'
170
+ }).withConfig({
169
171
  displayName: "StyledNotification",
170
172
  componentId: "sc-uf6jh-0"
171
173
  })(["", " ", ";"], colorStyles$4, props => retrieveComponentStyles(COMPONENT_ID$7, props));
@@ -179,7 +181,7 @@ StyledNotification.defaultProps = {
179
181
  const COMPONENT_ID$6 = 'notifications.well';
180
182
  const StyledWell = styled(StyledBase).attrs({
181
183
  'data-garden-id': COMPONENT_ID$6,
182
- 'data-garden-version': '8.67.0'
184
+ 'data-garden-version': '8.68.0'
183
185
  }).withConfig({
184
186
  displayName: "StyledWell",
185
187
  componentId: "sc-a5831c-0"
@@ -209,7 +211,7 @@ const colorStyles$3 = props => {
209
211
  let foregroundColor;
210
212
  let anchorHoverColor;
211
213
  let anchorActiveColor;
212
- let anchorBoxShadowColor;
214
+ let focusColor;
213
215
  switch (props.alertType) {
214
216
  case 'success':
215
217
  borderColor = getColor('successHue', 700, props.theme);
@@ -217,7 +219,7 @@ const colorStyles$3 = props => {
217
219
  foregroundColor = getColor('successHue', 100, props.theme);
218
220
  anchorHoverColor = props.theme.palette.white;
219
221
  anchorActiveColor = props.theme.palette.white;
220
- anchorBoxShadowColor = getColor('successHue', 200, props.theme, 0.35);
222
+ focusColor = 'successHue';
221
223
  break;
222
224
  case 'error':
223
225
  borderColor = getColor('dangerHue', 700, props.theme);
@@ -225,7 +227,7 @@ const colorStyles$3 = props => {
225
227
  foregroundColor = getColor('dangerHue', 100, props.theme);
226
228
  anchorHoverColor = props.theme.palette.white;
227
229
  anchorActiveColor = props.theme.palette.white;
228
- anchorBoxShadowColor = getColor('dangerHue', 100, props.theme, 0.35);
230
+ focusColor = 'dangerHue';
229
231
  break;
230
232
  case 'warning':
231
233
  borderColor = getColor('warningHue', 400, props.theme);
@@ -233,7 +235,7 @@ const colorStyles$3 = props => {
233
235
  foregroundColor = getColor('warningHue', 800, props.theme);
234
236
  anchorHoverColor = getColor('warningHue', 900, props.theme);
235
237
  anchorActiveColor = getColor('warningHue', 1000, props.theme);
236
- anchorBoxShadowColor = getColor('warningHue', 800, props.theme, 0.35);
238
+ focusColor = 'warningHue';
237
239
  break;
238
240
  case 'info':
239
241
  borderColor = getColor('primaryHue', 300, props.theme);
@@ -241,11 +243,18 @@ const colorStyles$3 = props => {
241
243
  foregroundColor = getColor('primaryHue', 700, props.theme);
242
244
  anchorHoverColor = getColor('primaryHue', 800, props.theme);
243
245
  anchorActiveColor = getColor('primaryHue', 900, props.theme);
244
- anchorBoxShadowColor = getColor('primaryHue', 700, props.theme, 0.35);
246
+ focusColor = 'primaryHue';
245
247
  break;
246
248
  }
247
249
  const boxShadow = `0 ${props.theme.borderWidths.sm} ${props.theme.borderWidths.sm} ${borderColor}`;
248
- return css(["box-shadow:", ";background-color:", ";color:", ";& a{color:inherit;&:focus{color:inherit;}&:hover,[data-garden-focus-visible]{color:", ";}&[data-garden-focus-visible]{box-shadow:", ";}&:active{color:", ";}}"], boxShadow, backgroundColor, foregroundColor, anchorHoverColor, props.theme.shadows.sm(anchorBoxShadowColor), anchorActiveColor);
250
+ return css(["box-shadow:", ";background-color:", ";color:", ";& a{color:inherit;", " &:hover{color:", ";}&:active{color:", ";}}"], boxShadow, backgroundColor, foregroundColor, focusStyles({
251
+ theme: props.theme,
252
+ hue: focusColor,
253
+ shade: props.alertType === 'info' ? 600 : 800,
254
+ styles: {
255
+ color: 'inherit'
256
+ }
257
+ }), anchorHoverColor, anchorActiveColor);
249
258
  };
250
259
  const sizeStyles$3 = props => {
251
260
  const {
@@ -259,11 +268,11 @@ const sizeStyles$3 = props => {
259
268
  };
260
269
  const StyledGlobalAlert = styled.div.attrs({
261
270
  'data-garden-id': COMPONENT_ID$5,
262
- 'data-garden-version': '8.67.0'
271
+ 'data-garden-version': '8.68.0'
263
272
  }).withConfig({
264
273
  displayName: "StyledGlobalAlert",
265
274
  componentId: "sc-k6rimt-0"
266
- })(["display:flex;flex-wrap:nowrap;overflow:auto;overflow-x:hidden;box-sizing:border-box;direction:", ";&& a{border-radius:", ";text-decoration:underline;&:focus{text-decoration:underline;}}", " ", " ", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => props.theme.borderRadii.sm, sizeStyles$3, colorStyles$3, props => retrieveComponentStyles(COMPONENT_ID$5, props));
275
+ })(["display:flex;flex-wrap:nowrap;overflow:auto;overflow-x:hidden;box-sizing:border-box;direction:", ";", " ", " && a{border-radius:", ";text-decoration:underline;}", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', sizeStyles$3, colorStyles$3, props => props.theme.borderRadii.sm, props => retrieveComponentStyles(COMPONENT_ID$5, props));
267
276
  StyledGlobalAlert.defaultProps = {
268
277
  theme: DEFAULT_THEME
269
278
  };
@@ -274,38 +283,42 @@ const colorStyles$2 = props => {
274
283
  let hoverForegroundColor;
275
284
  let activeBackgroundColor;
276
285
  let activeForegroundColor;
277
- let boxShadowColor;
286
+ let focusColor;
278
287
  switch (props.alertType) {
279
288
  case 'success':
280
289
  hoverBackgroundColor = getColor('successHue', 100, props.theme, 0.08);
281
290
  hoverForegroundColor = props.theme.palette.white;
282
291
  activeBackgroundColor = getColor('successHue', 100, props.theme, 0.2);
283
292
  activeForegroundColor = props.theme.palette.white;
284
- boxShadowColor = getColor('successHue', 100, props.theme, 0.35);
293
+ focusColor = 'successHue';
285
294
  break;
286
295
  case 'error':
287
296
  hoverBackgroundColor = getColor('dangerHue', 100, props.theme, 0.08);
288
297
  hoverForegroundColor = props.theme.palette.white;
289
298
  activeBackgroundColor = getColor('dangerHue', 100, props.theme, 0.2);
290
299
  activeForegroundColor = props.theme.palette.white;
291
- boxShadowColor = getColor('dangerHue', 100, props.theme, 0.35);
300
+ focusColor = 'dangerHue';
292
301
  break;
293
302
  case 'warning':
294
303
  hoverBackgroundColor = getColor('warningHue', 800, props.theme, 0.08);
295
304
  hoverForegroundColor = getColor('warningHue', 900, props.theme);
296
305
  activeBackgroundColor = getColor('warningHue', 800, props.theme, 0.2);
297
306
  activeForegroundColor = getColor('warningHue', 1000, props.theme);
298
- boxShadowColor = getColor('warningHue', 800, props.theme, 0.35);
307
+ focusColor = 'warningHue';
299
308
  break;
300
309
  case 'info':
301
310
  hoverBackgroundColor = getColor('primaryHue', 700, props.theme, 0.08);
302
311
  hoverForegroundColor = getColor('primaryHue', 800, props.theme);
303
312
  activeBackgroundColor = getColor('primaryHue', 700, props.theme, 0.2);
304
313
  activeForegroundColor = getColor('primaryHue', 900, props.theme);
305
- boxShadowColor = getColor('primaryHue', 700, props.theme, 0.35);
314
+ focusColor = 'primaryHue';
306
315
  break;
307
316
  }
308
- return css(["color:inherit;&:hover{background-color:", ";color:", ";}&[data-garden-focus-visible]{box-shadow:", ";}&:active{background-color:", ";color:", ";}"], hoverBackgroundColor, hoverForegroundColor, props.theme.shadows.md(boxShadowColor), activeBackgroundColor, activeForegroundColor);
317
+ return css(["color:inherit;&:hover{background-color:", ";color:", ";}", " &:active{background-color:", ";color:", ";}"], hoverBackgroundColor, hoverForegroundColor, focusStyles({
318
+ theme: props.theme,
319
+ hue: focusColor,
320
+ shade: props.alertType === 'info' ? 600 : 800
321
+ }), activeBackgroundColor, activeForegroundColor);
309
322
  };
310
323
  const sizeStyles$2 = props => {
311
324
  const marginVertical = `-${props.theme.space.base * 1.5}px`;
@@ -315,7 +328,7 @@ const sizeStyles$2 = props => {
315
328
  };
316
329
  const StyledGlobalAlertClose = styled(IconButton).attrs({
317
330
  'data-garden-id': COMPONENT_ID$4,
318
- 'data-garden-version': '8.67.0',
331
+ 'data-garden-version': '8.68.0',
319
332
  size: 'small'
320
333
  }).withConfig({
321
334
  displayName: "StyledGlobalAlertClose",
@@ -333,31 +346,35 @@ function colorStyles$1(props) {
333
346
  let backgroundColor;
334
347
  let hoverBackgroundColor;
335
348
  let activeBackgroundColor;
336
- let boxShadowColor;
349
+ let focusColor;
337
350
  switch (props.alertType) {
338
351
  case 'success':
339
352
  backgroundColor = getColor('successHue', 800, props.theme);
340
353
  hoverBackgroundColor = getColor('successHue', 900, props.theme);
341
354
  activeBackgroundColor = getColor('successHue', 1000, props.theme);
342
- boxShadowColor = getColor('successHue', 200, props.theme, 0.35);
355
+ focusColor = 'successHue';
343
356
  break;
344
357
  case 'error':
345
358
  backgroundColor = getColor('dangerHue', 800, props.theme);
346
359
  hoverBackgroundColor = getColor('dangerHue', 900, props.theme);
347
360
  activeBackgroundColor = getColor('dangerHue', 1000, props.theme);
348
- boxShadowColor = getColor('dangerHue', 100, props.theme, 0.35);
361
+ focusColor = 'dangerHue';
349
362
  break;
350
363
  case 'warning':
351
364
  backgroundColor = getColor('warningHue', 800, props.theme);
352
365
  hoverBackgroundColor = getColor('warningHue', 900, props.theme);
353
366
  activeBackgroundColor = getColor('warningHue', 1000, props.theme);
354
- boxShadowColor = getColor('warningHue', 800, props.theme, 0.35);
367
+ focusColor = 'warningHue';
355
368
  break;
356
369
  case 'info':
357
- boxShadowColor = getColor('primaryHue', 700, props.theme, 0.35);
370
+ focusColor = 'primaryHue';
358
371
  break;
359
372
  }
360
- return css(["background-color:", ";&:hover{background-color:", ";}&[data-garden-focus-visible]{box-shadow:", ";}&:active{background-color:", ";}"], backgroundColor, hoverBackgroundColor, boxShadowColor && props.theme.shadows.md(boxShadowColor), activeBackgroundColor);
373
+ return css(["background-color:", ";&:hover{background-color:", ";}", " &:active{background-color:", ";}"], backgroundColor, hoverBackgroundColor, focusStyles({
374
+ theme: props.theme,
375
+ hue: focusColor,
376
+ shade: props.alertType === 'info' ? 600 : 800
377
+ }), activeBackgroundColor);
361
378
  }
362
379
  function sizeStyles$1(props) {
363
380
  const marginVertical = `-${props.theme.space.base * 1.5}px`;
@@ -366,7 +383,7 @@ function sizeStyles$1(props) {
366
383
  }
367
384
  const StyledGlobalAlertButton = styled(Button).attrs({
368
385
  'data-garden-id': COMPONENT_ID$3,
369
- 'data-garden-version': '8.67.0',
386
+ 'data-garden-version': '8.68.0',
370
387
  focusInset: false,
371
388
  isDanger: false,
372
389
  isLink: false,
@@ -385,7 +402,7 @@ StyledGlobalAlertButton.defaultProps = {
385
402
  const COMPONENT_ID$2 = 'notifications.global-alert.content';
386
403
  const StyledGlobalAlertContent = styled.div.attrs({
387
404
  'data-garden-id': COMPONENT_ID$2,
388
- 'data-garden-version': '8.67.0'
405
+ 'data-garden-version': '8.68.0'
389
406
  }).withConfig({
390
407
  displayName: "StyledGlobalAlertContent",
391
408
  componentId: "sc-rept0u-0"
@@ -409,7 +426,7 @@ const StyledGlobalAlertIcon = styled(_ref => {
409
426
  return React__default.cloneElement(Children.only(children), props);
410
427
  }).attrs({
411
428
  'data-garden-id': COMPONENT_ID$1,
412
- 'data-garden-version': '8.67.0'
429
+ 'data-garden-version': '8.68.0'
413
430
  }).withConfig({
414
431
  displayName: "StyledGlobalAlertIcon",
415
432
  componentId: "sc-84ne9k-0"
@@ -437,7 +454,7 @@ const colorStyles = props => {
437
454
  };
438
455
  const StyledGlobalAlertTitle = styled.div.attrs({
439
456
  'data-garden-id': COMPONENT_ID,
440
- 'data-garden-version': '8.67.0'
457
+ 'data-garden-version': '8.68.0'
441
458
  }).withConfig({
442
459
  displayName: "StyledGlobalAlertTitle",
443
460
  componentId: "sc-10clqbo-0"
@@ -584,14 +601,20 @@ Alert.propTypes = {
584
601
  type: PropTypes.oneOf(TYPE).isRequired
585
602
  };
586
603
 
587
- const Notification = React__default.forwardRef((props, ref) => {
604
+ const Notification = forwardRef((_ref, ref) => {
605
+ let {
606
+ role,
607
+ ...props
608
+ } = _ref;
588
609
  const Icon = props.type ? validationIcons[props.type] : SvgInfoStroke;
589
610
  const hue = props.type && validationHues[props.type];
590
611
  return React__default.createElement(StyledNotification, _extends$6({
591
612
  ref: ref,
592
613
  type: props.type,
593
614
  isFloating: true
594
- }, props), props.type && React__default.createElement(StyledIcon, {
615
+ }, props, {
616
+ role: role === undefined ? 'status' : role
617
+ }), props.type && React__default.createElement(StyledIcon, {
595
618
  hue: hue
596
619
  }, React__default.createElement(Icon, null)), props.children);
597
620
  });
package/dist/typings/elements/global-alert/utility.d.ts CHANGED
@@ -4,6 +4,7 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
+ /// <reference types="react" />
7
8
  import { IGlobalAlertProps } from '../../types';
8
9
  export type GlobalAlertContextProps = Pick<IGlobalAlertProps, 'type'>;
9
10
  export declare const GlobalAlertContext: import("react").Context<GlobalAlertContextProps>;
package/dist/typings/elements/toaster/Toast.d.ts CHANGED
@@ -4,6 +4,7 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
+ /// <reference types="react" />
7
8
  import { IToast } from './useToast';
8
9
  interface IToastProps {
9
10
  toast: IToast;
package/dist/typings/styled/StyledNotification.d.ts CHANGED
@@ -12,5 +12,4 @@ import { INotificationProps } from '../types';
12
12
  export declare const StyledNotification: import("styled-components").StyledComponent<"div", DefaultTheme, import("./StyledBase").IStyledBaseProps & {
13
13
  'data-garden-id': string;
14
14
  'data-garden-version': string;
15
- role: import("react").AriaRole;
16
- } & INotificationProps, "role" | "data-garden-id" | "data-garden-version">;
15
+ } & INotificationProps, "data-garden-id" | "data-garden-version">;
package/dist/typings/styled/global-alert/StyledGlobalAlertButton.d.ts CHANGED
@@ -12,11 +12,11 @@ interface IStyledGlobalAlertButtonProps {
12
12
  }
13
13
  export declare const StyledGlobalAlertButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-buttons").IButtonProps & import("react").RefAttributes<HTMLButtonElement>> & {
14
14
  EndIcon: {
15
- (props: import("@zendeskgarden/react-buttons").IButtonEndIconProps): JSX.Element;
15
+ (props: import("@zendeskgarden/react-buttons").IButtonEndIconProps): import("react").JSX.Element;
16
16
  displayName: string;
17
17
  };
18
18
  StartIcon: {
19
- (props: import("@zendeskgarden/react-buttons").IButtonEndIconProps): JSX.Element;
19
+ (props: import("@zendeskgarden/react-buttons").IButtonEndIconProps): import("react").JSX.Element;
20
20
  displayName: string;
21
21
  };
22
22
  }, DefaultTheme, {
@@ -29,5 +29,5 @@ export declare const StyledGlobalAlertButton: import("styled-components").Styled
29
29
  isPill: false;
30
30
  isStretched: false;
31
31
  size: "small";
32
- } & IStyledGlobalAlertButtonProps, "isDanger" | "size" | "isStretched" | "isNeutral" | "isLink" | "isPill" | "focusInset" | "data-garden-id" | "data-garden-version">;
32
+ } & IStyledGlobalAlertButtonProps, "size" | "isDanger" | "isStretched" | "isNeutral" | "isLink" | "isPill" | "focusInset" | "data-garden-id" | "data-garden-version">;
33
33
  export {};
package/dist/typings/utils/useNotificationsContext.d.ts CHANGED
@@ -4,6 +4,7 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
+ /// <reference types="react" />
7
8
  export type Hue = 'successHue' | 'warningHue' | 'dangerHue' | 'neutralHue';
8
9
  export declare const NotificationsContext: import("react").Context<Hue | undefined>;
9
10
  export declare const useNotificationsContext: () => Hue | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-notifications",
3
- "version": "8.67.0",
3
+ "version": "8.68.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>",
@@ -21,21 +21,21 @@
21
21
  "sideEffects": false,
22
22
  "types": "dist/typings/index.d.ts",
23
23
  "dependencies": {
24
- "@zendeskgarden/react-buttons": "^8.67.0",
24
+ "@zendeskgarden/react-buttons": "^8.68.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.1.0",
31
+ "@zendeskgarden/react-theming": "^8.67.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.5",
38
- "@zendeskgarden/react-theming": "^8.67.0",
38
+ "@zendeskgarden/react-theming": "^8.68.0",
39
39
  "@zendeskgarden/svg-icons": "6.33.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": "50a98b0cd7c85bed2ed88ad869e6f2cd3fc68f62"
51
+ "gitHead": "e05a28d586f47d95e0570fe2d529915aa4285845"
52
52
  }