@zendeskgarden/react-avatars 9.1.0 → 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.
Files changed (10) hide show
  1. package/dist/esm/elements/Avatar.js +11 -8
  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 +18 -15
  10. package/package.json +5 -5
package/dist/esm/elements/Avatar.js CHANGED
@@ -22,15 +22,16 @@ import { Text } from './components/Text.js';
22
22
 
23
23
  const AvatarComponent = forwardRef((_ref, ref) => {
24
24
  let {
25
+ backgroundColor,
26
+ badge,
27
+ children,
28
+ foregroundColor,
25
29
  isSystem,
26
30
  size,
27
31
  status,
28
- children,
29
- badge,
32
+ statusLabel,
30
33
  surfaceColor,
31
- backgroundColor,
32
- foregroundColor,
33
- ...props
34
+ ...other
34
35
  } = _ref;
35
36
  const computedStatus = badge === undefined ? status : 'active';
36
37
  let ClockIcon = SvgClockStroke;
@@ -48,7 +49,9 @@ const AvatarComponent = forwardRef((_ref, ref) => {
48
49
  return ['status'].concat(statusMessage || []).join(': ');
49
50
  }, [computedStatus, badge]);
50
51
  const shouldValidate = computedStatus !== undefined;
51
- const statusLabel = useText(AvatarComponent, props, 'statusLabel', defaultStatusLabel, shouldValidate);
52
+ const ariaLabel = useText(AvatarComponent, {
53
+ statusLabel
54
+ }, 'statusLabel', defaultStatusLabel, shouldValidate);
52
55
  return React__default.createElement(StyledAvatar, Object.assign({
53
56
  ref: ref,
54
57
  $isSystem: isSystem,
@@ -59,11 +62,11 @@ const AvatarComponent = forwardRef((_ref, ref) => {
59
62
  $foregroundColor: foregroundColor,
60
63
  "aria-atomic": "true",
61
64
  "aria-live": "polite"
62
- }, props), Children.only(children), !!computedStatus && React__default.createElement(StyledStatusIndicator, {
65
+ }, other), Children.only(children), !!computedStatus && React__default.createElement(StyledStatusIndicator, {
63
66
  $size: size,
64
67
  $type: computedStatus,
65
68
  $surfaceColor: surfaceColor,
66
- "aria-label": statusLabel,
69
+ "aria-label": ariaLabel,
67
70
  as: "figcaption"
68
71
  }, computedStatus === 'active' ? React__default.createElement("span", {
69
72
  "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.1.0'
111
+ 'data-garden-version': '9.1.2'
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.1.0'
14
+ 'data-garden-version': '9.1.2'
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.1.0'
17
+ 'data-garden-version': '9.1.2'
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.1.0'
15
+ 'data-garden-version': '9.1.2'
16
16
  }).withConfig({
17
17
  displayName: "StyledStandaloneStatusIndicator",
18
18
  componentId: "sc-1xt1heq-0"
package/dist/esm/styled/StyledStatusIndicator.js CHANGED
@@ -50,7 +50,7 @@ const colorStyles = _ref => {
50
50
  };
51
51
  const StyledStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
52
52
  'data-garden-id': COMPONENT_ID,
53
- 'data-garden-version': '9.1.0'
53
+ 'data-garden-version': '9.1.2'
54
54
  }).withConfig({
55
55
  displayName: "StyledStatusIndicator",
56
56
  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.1.0'
43
+ 'data-garden-version': '9.1.2'
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 { retrieveComponentStyles } 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.1.0'
13
+ 'data-garden-version': '9.1.2'
14
14
  }).withConfig({
15
15
  displayName: "StyledText",
16
16
  componentId: "sc-1a6hivh-0"
package/dist/index.cjs.js CHANGED
@@ -122,7 +122,7 @@ const STATUS = ['available', 'away', 'transfers', 'offline'];
122
122
  const COMPONENT_ID$6 = 'avatars.text';
123
123
  const StyledText = styled__default.default.span.attrs({
124
124
  'data-garden-id': COMPONENT_ID$6,
125
- 'data-garden-version': '9.1.0'
125
+ 'data-garden-version': '9.1.2'
126
126
  }).withConfig({
127
127
  displayName: "StyledText",
128
128
  componentId: "sc-1a6hivh-0"
@@ -242,7 +242,7 @@ const colorStyles$2 = _ref => {
242
242
  };
243
243
  const StyledStatusIndicatorBase = styled__default.default.div.attrs({
244
244
  'data-garden-id': COMPONENT_ID$5,
245
- 'data-garden-version': '9.1.0'
245
+ 'data-garden-version': '9.1.2'
246
246
  }).withConfig({
247
247
  displayName: "StyledStatusIndicatorBase",
248
248
  componentId: "sc-1rininy-0"
@@ -291,7 +291,7 @@ const colorStyles$1 = _ref => {
291
291
  };
292
292
  const StyledStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs({
293
293
  'data-garden-id': COMPONENT_ID$4,
294
- 'data-garden-version': '9.1.0'
294
+ 'data-garden-version': '9.1.2'
295
295
  }).withConfig({
296
296
  displayName: "StyledStatusIndicator",
297
297
  componentId: "sc-16t9if3-0"
@@ -397,7 +397,7 @@ const sizeStyles$1 = props => {
397
397
  };
398
398
  const StyledAvatar = styled__default.default.figure.attrs({
399
399
  'data-garden-id': COMPONENT_ID$3,
400
- 'data-garden-version': '9.1.0'
400
+ 'data-garden-version': '9.1.2'
401
401
  }).withConfig({
402
402
  displayName: "StyledAvatar",
403
403
  componentId: "sc-608m04-0"
@@ -410,7 +410,7 @@ StyledAvatar.defaultProps = {
410
410
  const COMPONENT_ID$2 = 'avatars.status-indicator.status';
411
411
  const StyledStandaloneStatus = styled__default.default.figure.attrs({
412
412
  'data-garden-id': COMPONENT_ID$2,
413
- 'data-garden-version': '9.1.0'
413
+ 'data-garden-version': '9.1.2'
414
414
  }).withConfig({
415
415
  displayName: "StyledStandaloneStatus",
416
416
  componentId: "sc-1ow4nfj-0"
@@ -423,7 +423,7 @@ function sizeStyles(props) {
423
423
  }
424
424
  const StyledStandaloneStatusCaption = styled__default.default.figcaption.attrs({
425
425
  'data-garden-id': COMPONENT_ID$1,
426
- 'data-garden-version': '9.1.0'
426
+ 'data-garden-version': '9.1.2'
427
427
  }).withConfig({
428
428
  displayName: "StyledStandaloneStatusCaption",
429
429
  componentId: "sc-aalyk1-0"
@@ -432,7 +432,7 @@ const StyledStandaloneStatusCaption = styled__default.default.figcaption.attrs({
432
432
  const COMPONENT_ID = 'avatars.status-indicator.indicator';
433
433
  const StyledStandaloneStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs({
434
434
  'data-garden-id': COMPONENT_ID,
435
- 'data-garden-version': '9.1.0'
435
+ 'data-garden-version': '9.1.2'
436
436
  }).withConfig({
437
437
  displayName: "StyledStandaloneStatusIndicator",
438
438
  componentId: "sc-1xt1heq-0"
@@ -450,15 +450,16 @@ const Text = TextComponent;
450
450
 
451
451
  const AvatarComponent = React.forwardRef((_ref, ref) => {
452
452
  let {
453
+ backgroundColor,
454
+ badge,
455
+ children,
456
+ foregroundColor,
453
457
  isSystem,
454
458
  size,
455
459
  status,
456
- children,
457
- badge,
460
+ statusLabel,
458
461
  surfaceColor,
459
- backgroundColor,
460
- foregroundColor,
461
- ...props
462
+ ...other
462
463
  } = _ref;
463
464
  const computedStatus = badge === undefined ? status : 'active';
464
465
  let ClockIcon = SvgClockStroke$1;
@@ -476,7 +477,9 @@ const AvatarComponent = React.forwardRef((_ref, ref) => {
476
477
  return ['status'].concat(statusMessage || []).join(': ');
477
478
  }, [computedStatus, badge]);
478
479
  const shouldValidate = computedStatus !== undefined;
479
- const statusLabel = reactTheming.useText(AvatarComponent, props, 'statusLabel', defaultStatusLabel, shouldValidate);
480
+ const ariaLabel = reactTheming.useText(AvatarComponent, {
481
+ statusLabel
482
+ }, 'statusLabel', defaultStatusLabel, shouldValidate);
480
483
  return React__namespace.default.createElement(StyledAvatar, Object.assign({
481
484
  ref: ref,
482
485
  $isSystem: isSystem,
@@ -487,11 +490,11 @@ const AvatarComponent = React.forwardRef((_ref, ref) => {
487
490
  $foregroundColor: foregroundColor,
488
491
  "aria-atomic": "true",
489
492
  "aria-live": "polite"
490
- }, props), React.Children.only(children), !!computedStatus && React__namespace.default.createElement(StyledStatusIndicator, {
493
+ }, other), React.Children.only(children), !!computedStatus && React__namespace.default.createElement(StyledStatusIndicator, {
491
494
  $size: size,
492
495
  $type: computedStatus,
493
496
  $surfaceColor: surfaceColor,
494
- "aria-label": statusLabel,
497
+ "aria-label": ariaLabel,
495
498
  as: "figcaption"
496
499
  }, computedStatus === 'active' ? React__namespace.default.createElement("span", {
497
500
  "aria-hidden": "true"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-avatars",
3
- "version": "9.1.0",
3
+ "version": "9.1.2",
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>",
@@ -25,14 +25,14 @@
25
25
  "prop-types": "^15.5.7"
26
26
  },
27
27
  "peerDependencies": {
28
- "@zendeskgarden/react-theming": ">=9.0.0-next",
28
+ "@zendeskgarden/react-theming": ">=9.0.0",
29
29
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
30
30
  "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
31
31
  "styled-components": "^5.3.1"
32
32
  },
33
33
  "devDependencies": {
34
- "@zendeskgarden/react-dropdowns": "^9.1.0",
35
- "@zendeskgarden/react-theming": "^9.1.0",
34
+ "@zendeskgarden/react-dropdowns": "^9.1.2",
35
+ "@zendeskgarden/react-theming": "^9.1.2",
36
36
  "@zendeskgarden/svg-icons": "7.3.0"
37
37
  },
38
38
  "keywords": [
@@ -45,5 +45,5 @@
45
45
  "access": "public"
46
46
  },
47
47
  "zendeskgarden:src": "src/index.ts",
48
- "gitHead": "a2842d18615ad057d75988fde4df5a0c79d2714e"
48
+ "gitHead": "dd7b2e7fb6747ef39a028b4e7b9924c2098deea0"
49
49
  }