@box/blueprint-web 7.19.3 → 7.19.4

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 (6) hide show
  1. package/lib-esm/avatar/avatar.js +12 -59
  2. package/lib-esm/avatar/avatar.module.js +1 -1
  3. package/lib-esm/avatar/consts.d.ts +1 -1
  4. package/lib-esm/avatar/consts.js +7 -7
  5. package/lib-esm/index.css +27 -30
  6. package/package.json +2 -2
package/lib-esm/avatar/avatar.js CHANGED
@@ -1,60 +1,20 @@
1
1
  import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
- import { AvatarBadge } from '@box/blueprint-web-assets/icons/Fill';
3
- import { Gray10, GrayBlack } from '@box/blueprint-web-assets/tokens/tokens';
2
+ import { Avatar as Avatar$1 } from '@box/blueprint-web-assets/icons/Line';
3
+ import { GrayBlack } from '@box/blueprint-web-assets/tokens/tokens';
4
4
  import clsx from 'clsx';
5
5
  import { forwardRef, useState, useEffect, Children, cloneElement } from 'react';
6
6
  import styles from './avatar.module.js';
7
- import { colors, anonymousAvatarSizes, badgeSizes } from './consts.js';
7
+ import { colors, anonymousAvatarIconSizes, badgeSizes } from './consts.js';
8
8
 
9
- /** This components serves the purpose of the underlay for AvatarBadge to make the transparent lines displayed in proper color. */
10
- function AnonymousAvatarIconBackground({
11
- size
12
- }) {
13
- return jsx("svg", {
14
- className: styles.svg,
15
- height: size,
16
- role: "presentation",
17
- viewBox: `0 0 ${size} ${size}`,
18
- width: size,
19
- children: jsx("circle", {
20
- cx: `calc(${size} / 2)`,
21
- cy: `calc(${size} / 2)`,
22
- fill: GrayBlack,
23
- r: `calc(${size} / 2 - 1px)`
24
- })
25
- });
26
- }
27
- function AnonymousAvatarIcon({
28
- size
29
- }) {
30
- return jsxs("div", {
31
- className: styles.anonymousAvatar,
32
- style: {
33
- width: size,
34
- height: size
35
- },
36
- children: [jsx(AnonymousAvatarIconBackground, {
37
- size: size
38
- }), jsx(AvatarBadge, {
39
- className: styles.svg,
40
- color: Gray10,
41
- height: size,
42
- role: "presentation",
43
- width: size
44
- })]
45
- });
46
- }
47
9
  const Avatar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
48
10
  const {
49
11
  alt,
50
12
  anonymous,
51
- // 'aria-label': ariaLabel, disabled till we implement proper styles for clickable avatar
52
13
  children,
53
14
  className,
54
15
  color,
55
16
  colorIndex,
56
17
  loading = 'lazy',
57
- // onClick,
58
18
  onLoad,
59
19
  src,
60
20
  size = 'large',
@@ -68,7 +28,7 @@ const Avatar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
68
28
  setImageHasError(false);
69
29
  }, [src]);
70
30
  const backgroundColor = color || colors[(colorIndex || 0) % colors.length];
71
- const anonymousAvatarSize = anonymousAvatarSizes[size];
31
+ const anonymousAvatarIconSize = anonymousAvatarIconSizes[size];
72
32
  const child = children && Children.only(children);
73
33
  const badgeSize = badgeSizes[size];
74
34
  const badge = child && /*#__PURE__*/cloneElement(child, {
@@ -86,8 +46,14 @@ const Avatar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
86
46
  backgroundColor
87
47
  },
88
48
  children: text
89
- }), shouldShowAnonymousAvatar && jsx(AnonymousAvatarIcon, {
90
- size: anonymousAvatarSize
49
+ }), shouldShowAnonymousAvatar && jsx("div", {
50
+ className: styles.anonymousAvatar,
51
+ children: jsx(Avatar$1, {
52
+ color: GrayBlack,
53
+ height: anonymousAvatarIconSize,
54
+ role: "presentation",
55
+ width: anonymousAvatarIconSize
56
+ })
91
57
  }), shouldShowImage && jsx("img", {
92
58
  ...rest,
93
59
  ref: forwardedRef,
@@ -109,19 +75,6 @@ const Avatar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
109
75
  children: badge
110
76
  })]
111
77
  });
112
- // disabled till we implement proper styles for clickable avatar
113
- // if (onClick) {
114
- // return (
115
- // <button
116
- // aria-label={ariaLabel}
117
- // className={className}
118
- // onClick={onClick}
119
- // type="button"
120
- // >
121
- // {avatarContents}
122
- // </button>
123
- // );
124
- // }
125
78
  return jsx("div", {
126
79
  className: clsx(styles.avatar, styles[size], className),
127
80
  children: avatarContents
package/lib-esm/avatar/avatar.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"avatar":"bp_avatar_module_avatar--a487f","badge":"bp_avatar_module_badge--a487f","text":"bp_avatar_module_text--a487f","small":"bp_avatar_module_small--a487f","length-1":"bp_avatar_module_length-1--a487f","length-2":"bp_avatar_module_length-2--a487f","medium":"bp_avatar_module_medium--a487f","large":"bp_avatar_module_large--a487f","length-3":"bp_avatar_module_length-3--a487f","length-4":"bp_avatar_module_length-4--a487f","xlarge":"bp_avatar_module_xlarge--a487f","image":"bp_avatar_module_image--a487f","loading":"bp_avatar_module_loading--a487f","anonymousAvatar":"bp_avatar_module_anonymousAvatar--a487f","svg":"bp_avatar_module_svg--a487f"};
2
+ var styles = {"avatar":"bp_avatar_module_avatar--e3305","badge":"bp_avatar_module_badge--e3305","text":"bp_avatar_module_text--e3305","small":"bp_avatar_module_small--e3305","length-1":"bp_avatar_module_length-1--e3305","length-2":"bp_avatar_module_length-2--e3305","medium":"bp_avatar_module_medium--e3305","large":"bp_avatar_module_large--e3305","length-3":"bp_avatar_module_length-3--e3305","length-4":"bp_avatar_module_length-4--e3305","xlarge":"bp_avatar_module_xlarge--e3305","image":"bp_avatar_module_image--e3305","loading":"bp_avatar_module_loading--e3305","anonymousAvatar":"bp_avatar_module_anonymousAvatar--e3305"};
3
3
 
4
4
  export { styles as default };
package/lib-esm/avatar/consts.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { type Color, type AvatarSize } from './types';
2
- export declare const anonymousAvatarSizes: Record<AvatarSize, string>;
2
+ export declare const anonymousAvatarIconSizes: Record<AvatarSize, string>;
3
3
  export declare const AvatarSizes: readonly ["small", "medium", "large", "xlarge"];
4
4
  export declare const badgeSizes: Record<AvatarSize, string>;
5
5
  export declare const colorsMap: Record<string, Color>;
package/lib-esm/avatar/consts.js CHANGED
@@ -1,10 +1,10 @@
1
- import { BoxBlue50, DarkBlue50, Yellow50, GreenLight50, Yellorange50, LightBlue50, WatermelonRed50, PurpleRain50, Orange50, Grimace50, Size4, Size5, Size6, Size8, Size2, Size3 } from '@box/blueprint-web-assets/tokens/tokens';
1
+ import { BoxBlue50, DarkBlue50, Yellow50, GreenLight50, Yellorange50, LightBlue50, WatermelonRed50, PurpleRain50, Orange50, Grimace50, Size3, Size4, Size5, Size7, Size2 } from '@box/blueprint-web-assets/tokens/tokens';
2
2
 
3
- const anonymousAvatarSizes = {
4
- small: Size4,
5
- medium: Size5,
6
- large: Size6,
7
- xlarge: Size8
3
+ const anonymousAvatarIconSizes = {
4
+ small: Size3,
5
+ medium: Size4,
6
+ large: Size5,
7
+ xlarge: Size7
8
8
  };
9
9
  const badgeSizes = {
10
10
  small: Size2,
@@ -26,4 +26,4 @@ const colorsMap = {
26
26
  };
27
27
  const colors = Object.values(colorsMap);
28
28
 
29
- export { anonymousAvatarSizes, badgeSizes, colors, colorsMap };
29
+ export { anonymousAvatarIconSizes, badgeSizes, colors, colorsMap };
package/lib-esm/index.css CHANGED
@@ -662,7 +662,7 @@
662
662
  text-transform:none;
663
663
  }
664
664
 
665
- .bp_avatar_module_avatar--a487f{
665
+ .bp_avatar_module_avatar--e3305{
666
666
  all:unset;
667
667
  align-items:center;
668
668
  background-color:var(--gray-10);
@@ -678,7 +678,7 @@
678
678
  text-decoration:none;
679
679
  text-transform:none;
680
680
  }
681
- .bp_avatar_module_avatar--a487f .bp_avatar_module_badge--a487f{
681
+ .bp_avatar_module_avatar--e3305 .bp_avatar_module_badge--e3305{
682
682
  background-color:var(--gray-white);
683
683
  border:var(--border-2) solid var(--gray-white);
684
684
  border-radius:50%;
@@ -686,7 +686,7 @@
686
686
  display:flex;
687
687
  position:absolute;
688
688
  }
689
- .bp_avatar_module_avatar--a487f .bp_avatar_module_text--a487f{
689
+ .bp_avatar_module_avatar--e3305 .bp_avatar_module_text--e3305{
690
690
  align-items:center;
691
691
  border-radius:50%;
692
692
  display:flex;
@@ -694,14 +694,14 @@
694
694
  justify-content:center;
695
695
  width:100%;
696
696
  }
697
- .bp_avatar_module_avatar--a487f.bp_avatar_module_small--a487f{
697
+ .bp_avatar_module_avatar--e3305.bp_avatar_module_small--e3305{
698
698
  height:var(--size-6);
699
699
  width:var(--size-6);
700
700
  }
701
- .bp_avatar_module_avatar--a487f.bp_avatar_module_small--a487f .bp_avatar_module_text--a487f{
701
+ .bp_avatar_module_avatar--e3305.bp_avatar_module_small--e3305 .bp_avatar_module_text--e3305{
702
702
  font-size:.5rem;
703
703
  }
704
- .bp_avatar_module_avatar--a487f.bp_avatar_module_small--a487f .bp_avatar_module_length-1--a487f.bp_avatar_module_text--a487f,.bp_avatar_module_avatar--a487f.bp_avatar_module_small--a487f .bp_avatar_module_length-2--a487f.bp_avatar_module_text--a487f{
704
+ .bp_avatar_module_avatar--e3305.bp_avatar_module_small--e3305 .bp_avatar_module_length-1--e3305.bp_avatar_module_text--e3305,.bp_avatar_module_avatar--e3305.bp_avatar_module_small--e3305 .bp_avatar_module_length-2--e3305.bp_avatar_module_text--e3305{
705
705
  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
706
706
  font-size:.625rem;
707
707
  font-weight:700;
@@ -710,14 +710,14 @@
710
710
  text-decoration:none;
711
711
  text-transform:none;
712
712
  }
713
- .bp_avatar_module_avatar--a487f.bp_avatar_module_small--a487f .bp_avatar_module_badge--a487f{
713
+ .bp_avatar_module_avatar--e3305.bp_avatar_module_small--e3305 .bp_avatar_module_badge--e3305{
714
714
  right:-.25rem;
715
715
  }
716
- .bp_avatar_module_avatar--a487f.bp_avatar_module_medium--a487f{
716
+ .bp_avatar_module_avatar--e3305.bp_avatar_module_medium--e3305{
717
717
  height:var(--size-7);
718
718
  width:var(--size-7);
719
719
  }
720
- .bp_avatar_module_avatar--a487f.bp_avatar_module_medium--a487f .bp_avatar_module_text--a487f{
720
+ .bp_avatar_module_avatar--e3305.bp_avatar_module_medium--e3305 .bp_avatar_module_text--e3305{
721
721
  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
722
722
  font-size:.625rem;
723
723
  font-weight:700;
@@ -726,20 +726,20 @@
726
726
  text-decoration:none;
727
727
  text-transform:none;
728
728
  }
729
- .bp_avatar_module_avatar--a487f.bp_avatar_module_medium--a487f .bp_avatar_module_length-1--a487f.bp_avatar_module_text--a487f,.bp_avatar_module_avatar--a487f.bp_avatar_module_medium--a487f .bp_avatar_module_length-2--a487f.bp_avatar_module_text--a487f{
729
+ .bp_avatar_module_avatar--e3305.bp_avatar_module_medium--e3305 .bp_avatar_module_length-1--e3305.bp_avatar_module_text--e3305,.bp_avatar_module_avatar--e3305.bp_avatar_module_medium--e3305 .bp_avatar_module_length-2--e3305.bp_avatar_module_text--e3305{
730
730
  font-size:.8125rem;
731
731
  }
732
- .bp_avatar_module_avatar--a487f.bp_avatar_module_medium--a487f .bp_avatar_module_badge--a487f{
732
+ .bp_avatar_module_avatar--e3305.bp_avatar_module_medium--e3305 .bp_avatar_module_badge--e3305{
733
733
  right:-.375rem;
734
734
  }
735
- .bp_avatar_module_avatar--a487f.bp_avatar_module_large--a487f{
735
+ .bp_avatar_module_avatar--e3305.bp_avatar_module_large--e3305{
736
736
  height:var(--size-8);
737
737
  width:var(--size-8);
738
738
  }
739
- .bp_avatar_module_avatar--a487f.bp_avatar_module_large--a487f .bp_avatar_module_text--a487f{
739
+ .bp_avatar_module_avatar--e3305.bp_avatar_module_large--e3305 .bp_avatar_module_text--e3305{
740
740
  font-size:.5rem;
741
741
  }
742
- .bp_avatar_module_avatar--a487f.bp_avatar_module_large--a487f .bp_avatar_module_length-1--a487f.bp_avatar_module_text--a487f,.bp_avatar_module_avatar--a487f.bp_avatar_module_large--a487f .bp_avatar_module_length-2--a487f.bp_avatar_module_text--a487f{
742
+ .bp_avatar_module_avatar--e3305.bp_avatar_module_large--e3305 .bp_avatar_module_length-1--e3305.bp_avatar_module_text--e3305,.bp_avatar_module_avatar--e3305.bp_avatar_module_large--e3305 .bp_avatar_module_length-2--e3305.bp_avatar_module_text--e3305{
743
743
  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
744
744
  font-size:.875rem;
745
745
  font-weight:700;
@@ -748,10 +748,10 @@
748
748
  text-decoration:none;
749
749
  text-transform:none;
750
750
  }
751
- .bp_avatar_module_avatar--a487f.bp_avatar_module_large--a487f .bp_avatar_module_length-3--a487f.bp_avatar_module_text--a487f{
751
+ .bp_avatar_module_avatar--e3305.bp_avatar_module_large--e3305 .bp_avatar_module_length-3--e3305.bp_avatar_module_text--e3305{
752
752
  font-size:.6875rem;
753
753
  }
754
- .bp_avatar_module_avatar--a487f.bp_avatar_module_large--a487f .bp_avatar_module_length-4--a487f.bp_avatar_module_text--a487f{
754
+ .bp_avatar_module_avatar--e3305.bp_avatar_module_large--e3305 .bp_avatar_module_length-4--e3305.bp_avatar_module_text--e3305{
755
755
  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
756
756
  font-size:.625rem;
757
757
  font-weight:700;
@@ -760,17 +760,17 @@
760
760
  text-decoration:none;
761
761
  text-transform:none;
762
762
  }
763
- .bp_avatar_module_avatar--a487f.bp_avatar_module_large--a487f .bp_avatar_module_badge--a487f{
763
+ .bp_avatar_module_avatar--e3305.bp_avatar_module_large--e3305 .bp_avatar_module_badge--e3305{
764
764
  right:-.25rem;
765
765
  }
766
- .bp_avatar_module_avatar--a487f.bp_avatar_module_xlarge--a487f{
766
+ .bp_avatar_module_avatar--e3305.bp_avatar_module_xlarge--e3305{
767
767
  height:var(--size-11);
768
768
  width:var(--size-11);
769
769
  }
770
- .bp_avatar_module_avatar--a487f.bp_avatar_module_xlarge--a487f .bp_avatar_module_text--a487f{
770
+ .bp_avatar_module_avatar--e3305.bp_avatar_module_xlarge--e3305 .bp_avatar_module_text--e3305{
771
771
  font-size:1rem;
772
772
  }
773
- .bp_avatar_module_avatar--a487f.bp_avatar_module_xlarge--a487f .bp_avatar_module_length-1--a487f.bp_avatar_module_text--a487f,.bp_avatar_module_avatar--a487f.bp_avatar_module_xlarge--a487f .bp_avatar_module_length-2--a487f.bp_avatar_module_text--a487f{
773
+ .bp_avatar_module_avatar--e3305.bp_avatar_module_xlarge--e3305 .bp_avatar_module_length-1--e3305.bp_avatar_module_text--e3305,.bp_avatar_module_avatar--e3305.bp_avatar_module_xlarge--e3305 .bp_avatar_module_length-2--e3305.bp_avatar_module_text--e3305{
774
774
  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
775
775
  font-size:1.3125rem;
776
776
  font-weight:700;
@@ -779,27 +779,24 @@
779
779
  text-decoration:none;
780
780
  text-transform:none;
781
781
  }
782
- .bp_avatar_module_avatar--a487f.bp_avatar_module_xlarge--a487f .bp_avatar_module_badge--a487f{
782
+ .bp_avatar_module_avatar--e3305.bp_avatar_module_xlarge--e3305 .bp_avatar_module_badge--e3305{
783
783
  right:-.375rem;
784
784
  }
785
- .bp_avatar_module_avatar--a487f .bp_avatar_module_image--a487f{
785
+ .bp_avatar_module_avatar--e3305 .bp_avatar_module_image--e3305{
786
786
  border-radius:50%;
787
787
  height:100%;
788
788
  object-fit:cover;
789
789
  width:100%;
790
790
  }
791
- .bp_avatar_module_avatar--a487f .bp_avatar_module_image--a487f.bp_avatar_module_loading--a487f{
791
+ .bp_avatar_module_avatar--e3305 .bp_avatar_module_image--e3305.bp_avatar_module_loading--e3305{
792
792
  height:0;
793
793
  width:0;
794
794
  }
795
795
 
796
- .bp_avatar_module_anonymousAvatar--a487f{
797
- position:relative;
798
- }
799
- .bp_avatar_module_anonymousAvatar--a487f .bp_avatar_module_svg--a487f{
800
- left:0;
801
- position:absolute;
802
- top:0;
796
+ .bp_avatar_module_anonymousAvatar--e3305{
797
+ align-items:center;
798
+ display:flex;
799
+ justify-content:center;
803
800
  }
804
801
 
805
802
  .bp_base_badge_module_badgeContainer--f6ba5{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "7.19.3",
3
+ "version": "7.19.4",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {
@@ -66,7 +66,7 @@
66
66
  "react-stately": "^3.31.1",
67
67
  "tsx": "^4.16.5"
68
68
  },
69
- "gitHead": "4f81a71cfb50fff054646dfa12c6a4dd9739cb24",
69
+ "gitHead": "aa0706e5fdf6f08b99138d3e2ceb9c60d47829b4",
70
70
  "module": "lib-esm/index.js",
71
71
  "main": "lib-esm/index.js",
72
72
  "exports": {