@zendeskgarden/react-avatars 9.10.1 → 9.11.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 (10) hide show
  1. package/dist/esm/elements/Avatar.js +4 -2
  2. package/dist/esm/styled/StyledAvatar.js +1 -1
  3. package/dist/esm/styled/StyledStandaloneStatus.js +1 -1
  4. package/dist/esm/styled/StyledStandaloneStatusCaption.js +1 -1
  5. package/dist/esm/styled/StyledStandaloneStatusIndicator.js +1 -1
  6. package/dist/esm/styled/StyledStatusIndicator.js +1 -1
  7. package/dist/esm/styled/StyledStatusIndicatorBase.js +1 -1
  8. package/dist/esm/styled/StyledText.js +1 -1
  9. package/dist/index.cjs.js +11 -9
  10. package/package.json +5 -5
package/dist/esm/elements/Avatar.js CHANGED
@@ -23,6 +23,7 @@ import { Text } from './components/Text.js';
23
23
 
24
24
  const AvatarComponent = forwardRef((_ref, ref) => {
25
25
  let {
26
+ 'aria-hidden': ariaHidden,
26
27
  backgroundColor,
27
28
  badge,
28
29
  children,
@@ -49,7 +50,7 @@ const AvatarComponent = forwardRef((_ref, ref) => {
49
50
  }
50
51
  return ['status'].concat(statusMessage || []).join(': ');
51
52
  }, [computedStatus, badge]);
52
- const shouldValidate = computedStatus !== undefined;
53
+ const shouldValidate = computedStatus !== undefined && ariaHidden !== true;
53
54
  const label = useText(AvatarComponent, {
54
55
  statusLabel
55
56
  }, 'statusLabel', defaultStatusLabel, shouldValidate);
@@ -62,13 +63,14 @@ const AvatarComponent = forwardRef((_ref, ref) => {
62
63
  $backgroundColor: backgroundColor,
63
64
  $foregroundColor: foregroundColor,
64
65
  "aria-atomic": "true",
66
+ "aria-hidden": ariaHidden,
65
67
  "aria-live": "polite"
66
68
  }, other), Children.only(children), !!computedStatus && React__default.createElement(StyledStatusIndicator, {
67
69
  $size: size,
68
70
  $type: computedStatus,
69
71
  $surfaceColor: surfaceColor,
70
72
  as: "figcaption"
71
- }, React__default.createElement(Span, {
73
+ }, ariaHidden !== true && React__default.createElement(Span, {
72
74
  hidden: true
73
75
  }, label), computedStatus === 'active' ? React__default.createElement("span", {
74
76
  "aria-hidden": true
package/dist/esm/styled/StyledAvatar.js CHANGED
@@ -108,7 +108,7 @@ const sizeStyles = props => {
108
108
  };
109
109
  const StyledAvatar = styled.figure.attrs({
110
110
  'data-garden-id': COMPONENT_ID,
111
- 'data-garden-version': '9.10.1'
111
+ 'data-garden-version': '9.11.0'
112
112
  }).withConfig({
113
113
  displayName: "StyledAvatar",
114
114
  componentId: "sc-608m04-0"
package/dist/esm/styled/StyledStandaloneStatus.js CHANGED
@@ -11,7 +11,7 @@ import { TRANSITION_DURATION } from './utility.js';
11
11
  const COMPONENT_ID = 'avatars.status-indicator.status';
12
12
  const StyledStandaloneStatus = styled.figure.attrs({
13
13
  'data-garden-id': COMPONENT_ID,
14
- 'data-garden-version': '9.10.1'
14
+ 'data-garden-version': '9.11.0'
15
15
  }).withConfig({
16
16
  displayName: "StyledStandaloneStatus",
17
17
  componentId: "sc-1ow4nfj-0"
package/dist/esm/styled/StyledStandaloneStatusCaption.js CHANGED
@@ -14,7 +14,7 @@ function sizeStyles(props) {
14
14
  }
15
15
  const StyledStandaloneStatusCaption = styled.figcaption.attrs({
16
16
  'data-garden-id': COMPONENT_ID,
17
- 'data-garden-version': '9.10.1'
17
+ 'data-garden-version': '9.11.0'
18
18
  }).withConfig({
19
19
  displayName: "StyledStandaloneStatusCaption",
20
20
  componentId: "sc-aalyk1-0"
package/dist/esm/styled/StyledStandaloneStatusIndicator.js CHANGED
@@ -12,7 +12,7 @@ import { StyledStatusIndicatorBase } from './StyledStatusIndicatorBase.js';
12
12
  const COMPONENT_ID = 'avatars.status-indicator.indicator';
13
13
  const StyledStandaloneStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
14
14
  'data-garden-id': COMPONENT_ID,
15
- 'data-garden-version': '9.10.1'
15
+ 'data-garden-version': '9.11.0'
16
16
  }).withConfig({
17
17
  displayName: "StyledStandaloneStatusIndicator",
18
18
  componentId: "sc-1xt1heq-0"
package/dist/esm/styled/StyledStatusIndicator.js CHANGED
@@ -51,7 +51,7 @@ const colorStyles = _ref => {
51
51
  };
52
52
  const StyledStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
53
53
  'data-garden-id': COMPONENT_ID,
54
- 'data-garden-version': '9.10.1'
54
+ 'data-garden-version': '9.11.0'
55
55
  }).withConfig({
56
56
  displayName: "StyledStatusIndicator",
57
57
  componentId: "sc-16t9if3-0"
package/dist/esm/styled/StyledStatusIndicatorBase.js CHANGED
@@ -40,7 +40,7 @@ const colorStyles = _ref => {
40
40
  };
41
41
  const StyledStatusIndicatorBase = styled.div.attrs({
42
42
  'data-garden-id': COMPONENT_ID,
43
- 'data-garden-version': '9.10.1'
43
+ 'data-garden-version': '9.11.0'
44
44
  }).withConfig({
45
45
  displayName: "StyledStatusIndicatorBase",
46
46
  componentId: "sc-1rininy-0"
package/dist/esm/styled/StyledText.js CHANGED
@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
10
10
  const COMPONENT_ID = 'avatars.text';
11
11
  const StyledText = styled.span.attrs({
12
12
  'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.10.1'
13
+ 'data-garden-version': '9.11.0'
14
14
  }).withConfig({
15
15
  displayName: "StyledText",
16
16
  componentId: "sc-1a6hivh-0"
package/dist/index.cjs.js CHANGED
@@ -123,7 +123,7 @@ const STATUS = ['available', 'away', 'transfers', 'offline'];
123
123
  const COMPONENT_ID$6 = 'avatars.text';
124
124
  const StyledText = styled__default.default.span.attrs({
125
125
  'data-garden-id': COMPONENT_ID$6,
126
- 'data-garden-version': '9.10.1'
126
+ 'data-garden-version': '9.11.0'
127
127
  }).withConfig({
128
128
  displayName: "StyledText",
129
129
  componentId: "sc-1a6hivh-0"
@@ -243,7 +243,7 @@ const colorStyles$2 = _ref => {
243
243
  };
244
244
  const StyledStatusIndicatorBase = styled__default.default.div.attrs({
245
245
  'data-garden-id': COMPONENT_ID$5,
246
- 'data-garden-version': '9.10.1'
246
+ 'data-garden-version': '9.11.0'
247
247
  }).withConfig({
248
248
  displayName: "StyledStatusIndicatorBase",
249
249
  componentId: "sc-1rininy-0"
@@ -293,7 +293,7 @@ const colorStyles$1 = _ref => {
293
293
  };
294
294
  const StyledStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs({
295
295
  'data-garden-id': COMPONENT_ID$4,
296
- 'data-garden-version': '9.10.1'
296
+ 'data-garden-version': '9.11.0'
297
297
  }).withConfig({
298
298
  displayName: "StyledStatusIndicator",
299
299
  componentId: "sc-16t9if3-0"
@@ -399,7 +399,7 @@ const sizeStyles$1 = props => {
399
399
  };
400
400
  const StyledAvatar = styled__default.default.figure.attrs({
401
401
  'data-garden-id': COMPONENT_ID$3,
402
- 'data-garden-version': '9.10.1'
402
+ 'data-garden-version': '9.11.0'
403
403
  }).withConfig({
404
404
  displayName: "StyledAvatar",
405
405
  componentId: "sc-608m04-0"
@@ -412,7 +412,7 @@ StyledAvatar.defaultProps = {
412
412
  const COMPONENT_ID$2 = 'avatars.status-indicator.status';
413
413
  const StyledStandaloneStatus = styled__default.default.figure.attrs({
414
414
  'data-garden-id': COMPONENT_ID$2,
415
- 'data-garden-version': '9.10.1'
415
+ 'data-garden-version': '9.11.0'
416
416
  }).withConfig({
417
417
  displayName: "StyledStandaloneStatus",
418
418
  componentId: "sc-1ow4nfj-0"
@@ -425,7 +425,7 @@ function sizeStyles(props) {
425
425
  }
426
426
  const StyledStandaloneStatusCaption = styled__default.default.figcaption.attrs({
427
427
  'data-garden-id': COMPONENT_ID$1,
428
- 'data-garden-version': '9.10.1'
428
+ 'data-garden-version': '9.11.0'
429
429
  }).withConfig({
430
430
  displayName: "StyledStandaloneStatusCaption",
431
431
  componentId: "sc-aalyk1-0"
@@ -434,7 +434,7 @@ const StyledStandaloneStatusCaption = styled__default.default.figcaption.attrs({
434
434
  const COMPONENT_ID = 'avatars.status-indicator.indicator';
435
435
  const StyledStandaloneStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs({
436
436
  'data-garden-id': COMPONENT_ID,
437
- 'data-garden-version': '9.10.1'
437
+ 'data-garden-version': '9.11.0'
438
438
  }).withConfig({
439
439
  displayName: "StyledStandaloneStatusIndicator",
440
440
  componentId: "sc-1xt1heq-0"
@@ -452,6 +452,7 @@ const Text = TextComponent;
452
452
 
453
453
  const AvatarComponent = React.forwardRef((_ref, ref) => {
454
454
  let {
455
+ 'aria-hidden': ariaHidden,
455
456
  backgroundColor,
456
457
  badge,
457
458
  children,
@@ -478,7 +479,7 @@ const AvatarComponent = React.forwardRef((_ref, ref) => {
478
479
  }
479
480
  return ['status'].concat(statusMessage || []).join(': ');
480
481
  }, [computedStatus, badge]);
481
- const shouldValidate = computedStatus !== undefined;
482
+ const shouldValidate = computedStatus !== undefined && ariaHidden !== true;
482
483
  const label = reactTheming.useText(AvatarComponent, {
483
484
  statusLabel
484
485
  }, 'statusLabel', defaultStatusLabel, shouldValidate);
@@ -491,13 +492,14 @@ const AvatarComponent = React.forwardRef((_ref, ref) => {
491
492
  $backgroundColor: backgroundColor,
492
493
  $foregroundColor: foregroundColor,
493
494
  "aria-atomic": "true",
495
+ "aria-hidden": ariaHidden,
494
496
  "aria-live": "polite"
495
497
  }, other), React.Children.only(children), !!computedStatus && React__namespace.default.createElement(StyledStatusIndicator, {
496
498
  $size: size,
497
499
  $type: computedStatus,
498
500
  $surfaceColor: surfaceColor,
499
501
  as: "figcaption"
500
- }, React__namespace.default.createElement(reactTypography.Span, {
502
+ }, ariaHidden !== true && React__namespace.default.createElement(reactTypography.Span, {
501
503
  hidden: true
502
504
  }, label), computedStatus === 'active' ? React__namespace.default.createElement("span", {
503
505
  "aria-hidden": true
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-avatars",
3
- "version": "9.10.1",
3
+ "version": "9.11.0",
4
4
  "description": "Components relating to avatars in 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-typography": "^9.10.1",
24
+ "@zendeskgarden/react-typography": "^9.11.0",
25
25
  "polished": "^4.3.1",
26
26
  "prop-types": "^15.5.7"
27
27
  },
@@ -32,8 +32,8 @@
32
32
  "styled-components": "^5.3.1 || ^6.0.0"
33
33
  },
34
34
  "devDependencies": {
35
- "@zendeskgarden/react-dropdowns": "^9.10.1",
36
- "@zendeskgarden/react-theming": "^9.10.1",
35
+ "@zendeskgarden/react-dropdowns": "^9.11.0",
36
+ "@zendeskgarden/react-theming": "^9.11.0",
37
37
  "@zendeskgarden/svg-icons": "7.5.0"
38
38
  },
39
39
  "keywords": [
@@ -46,5 +46,5 @@
46
46
  "access": "public"
47
47
  },
48
48
  "zendeskgarden:src": "src/index.ts",
49
- "gitHead": "13d8cdfc477e51f8d4829a2e8463e0c84672a339"
49
+ "gitHead": "1bde0483c654e7fc3482c7b95741147a01073ef9"
50
50
  }