@carbon/ibm-products 2.43.2-canary.105 → 2.43.2-canary.108
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -1,2 +1,60 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2024, 2024
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
2
7
|
import React from 'react';
|
|
8
|
+
import '../../global/js/utils/props-helper';
|
|
9
|
+
/**
|
|
10
|
+
* TODO: A description of the component.
|
|
11
|
+
*/
|
|
12
|
+
type BackgroundColor = 'order-1-cyan' | 'order-2-gray' | 'order-3-green' | 'order-4-magenta' | 'order-5-purple' | 'order-6-teal' | 'order-7-cyan' | 'order-8-gray' | 'order-9-green' | 'order-10-magenta' | 'order-11-purple' | 'order-12-teal';
|
|
13
|
+
type Size = 'xl' | 'lg' | 'md' | 'sm';
|
|
14
|
+
type TooltipAlignment = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
|
|
15
|
+
type ImageProps = {
|
|
16
|
+
/**
|
|
17
|
+
* When passing the image prop, supply a full path to the image to be displayed.
|
|
18
|
+
*/
|
|
19
|
+
image: string;
|
|
20
|
+
/**
|
|
21
|
+
* When passing the image prop use the imageDescription prop to describe the image for screen reader.
|
|
22
|
+
*/
|
|
23
|
+
imageDescription: string;
|
|
24
|
+
} | {
|
|
25
|
+
image?: never;
|
|
26
|
+
imageDescription?: never;
|
|
27
|
+
};
|
|
28
|
+
type UserAvatarBaseProps = {
|
|
29
|
+
/**
|
|
30
|
+
* Provide the background color need to be set for UserAvatar.
|
|
31
|
+
*/
|
|
32
|
+
backgroundColor?: BackgroundColor;
|
|
33
|
+
/**
|
|
34
|
+
* Provide an optional class to be applied to the containing node.
|
|
35
|
+
*/
|
|
36
|
+
className?: string;
|
|
37
|
+
/**
|
|
38
|
+
* When passing the name prop, either send the initials to be used or the user's full name. The first two capital letters of the user's name will be used as the name.
|
|
39
|
+
*/
|
|
40
|
+
name?: string;
|
|
41
|
+
/**
|
|
42
|
+
* Provide a custom icon to use if you need to use an icon other than the default one
|
|
43
|
+
*/
|
|
44
|
+
renderIcon?: React.ElementType;
|
|
45
|
+
/**
|
|
46
|
+
* Set the size of the avatar circle
|
|
47
|
+
*/
|
|
48
|
+
size?: Size;
|
|
49
|
+
/**
|
|
50
|
+
* Specify how the trigger should align with the tooltip
|
|
51
|
+
*/
|
|
52
|
+
tooltipAlignment?: TooltipAlignment;
|
|
53
|
+
/**
|
|
54
|
+
* Pass in the display name to have it shown on hover
|
|
55
|
+
*/
|
|
56
|
+
tooltipText?: string;
|
|
57
|
+
};
|
|
58
|
+
type UserAvatarProps = UserAvatarBaseProps & ImageProps;
|
|
59
|
+
export declare let UserAvatar: React.ForwardRefExoticComponent<UserAvatarProps & React.RefAttributes<HTMLDivElement>>;
|
|
60
|
+
export {};
|
|
@@ -26,42 +26,23 @@ var componentName = 'UserAvatar';
|
|
|
26
26
|
|
|
27
27
|
// NOTE: the component SCSS is not imported here: it is rolled up separately.
|
|
28
28
|
|
|
29
|
-
// Default values can be included here and then assigned to the prop params,
|
|
30
|
-
// e.g. prop = defaults.prop,
|
|
31
|
-
// This gathers default values together neatly and ensures non-primitive
|
|
32
|
-
// values are initialized early to avoid react making unnecessary re-renders.
|
|
33
|
-
// Note that default values are not required for props that are 'required',
|
|
34
|
-
// nor for props where the component can apply undefined values reasonably.
|
|
35
|
-
// Default values should be provided when the component needs to make a choice
|
|
36
|
-
// or assumption when a prop is not supplied.
|
|
37
|
-
|
|
38
|
-
// Default values for props
|
|
39
|
-
// const defaults = {
|
|
40
|
-
// /* TODO: add defaults for relevant props if needed */
|
|
41
|
-
// };
|
|
42
|
-
|
|
43
29
|
/**
|
|
44
30
|
* TODO: A description of the component.
|
|
45
31
|
*/
|
|
46
32
|
|
|
47
|
-
var defaults = {
|
|
48
|
-
size: 'md',
|
|
49
|
-
tooltipAlignment: 'bottom',
|
|
50
|
-
backgroundColor: 'order-1-cyan'
|
|
51
|
-
};
|
|
52
33
|
var UserAvatar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
53
34
|
var _ref$backgroundColor = _ref.backgroundColor,
|
|
54
|
-
backgroundColor = _ref$backgroundColor === void 0 ?
|
|
35
|
+
backgroundColor = _ref$backgroundColor === void 0 ? 'order-1-cyan' : _ref$backgroundColor,
|
|
55
36
|
className = _ref.className,
|
|
56
37
|
image = _ref.image,
|
|
57
38
|
imageDescription = _ref.imageDescription,
|
|
58
39
|
name = _ref.name,
|
|
59
40
|
RenderIcon = _ref.renderIcon,
|
|
60
41
|
_ref$size = _ref.size,
|
|
61
|
-
size = _ref$size === void 0 ?
|
|
42
|
+
size = _ref$size === void 0 ? 'md' : _ref$size,
|
|
62
43
|
tooltipText = _ref.tooltipText,
|
|
63
44
|
_ref$tooltipAlignment = _ref.tooltipAlignment,
|
|
64
|
-
tooltipAlignment = _ref$tooltipAlignment === void 0 ?
|
|
45
|
+
tooltipAlignment = _ref$tooltipAlignment === void 0 ? 'bottom' : _ref$tooltipAlignment,
|
|
65
46
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
66
47
|
var carbonPrefix = usePrefix();
|
|
67
48
|
var iconSize = {
|
|
@@ -72,7 +53,7 @@ var UserAvatar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
|
72
53
|
};
|
|
73
54
|
var formatInitials = function formatInitials() {
|
|
74
55
|
var _ref2;
|
|
75
|
-
var parts = name.split(' ');
|
|
56
|
+
var parts = (name === null || name === void 0 ? void 0 : name.split(' ')) || [];
|
|
76
57
|
var firstChar = parts[0].charAt(0).toUpperCase();
|
|
77
58
|
var secondChar = parts[0].charAt(1).toUpperCase();
|
|
78
59
|
if (parts.length === 1) {
|
|
@@ -152,10 +133,12 @@ UserAvatar.propTypes = {
|
|
|
152
133
|
/**
|
|
153
134
|
* When passing the image prop, supply a full path to the image to be displayed.
|
|
154
135
|
*/
|
|
136
|
+
/**@ts-ignore */
|
|
155
137
|
image: PropTypes.string,
|
|
156
138
|
/**
|
|
157
139
|
* When passing the image prop use the imageDescription prop to describe the image for screen reader.
|
|
158
140
|
*/
|
|
141
|
+
/**@ts-ignore */
|
|
159
142
|
imageDescription: PropTypes.string.isRequired.if(function (_ref3) {
|
|
160
143
|
var image = _ref3.image;
|
|
161
144
|
return !!image;
|
|
@@ -167,6 +150,7 @@ UserAvatar.propTypes = {
|
|
|
167
150
|
/**
|
|
168
151
|
* Provide a custom icon to use if you need to use an icon other than the default one
|
|
169
152
|
*/
|
|
153
|
+
/**@ts-ignore */
|
|
170
154
|
renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
|
171
155
|
/**
|
|
172
156
|
* Set the size of the avatar circle
|
|
@@ -1,2 +1,60 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2024, 2024
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
2
7
|
import React from 'react';
|
|
8
|
+
import '../../global/js/utils/props-helper';
|
|
9
|
+
/**
|
|
10
|
+
* TODO: A description of the component.
|
|
11
|
+
*/
|
|
12
|
+
type BackgroundColor = 'order-1-cyan' | 'order-2-gray' | 'order-3-green' | 'order-4-magenta' | 'order-5-purple' | 'order-6-teal' | 'order-7-cyan' | 'order-8-gray' | 'order-9-green' | 'order-10-magenta' | 'order-11-purple' | 'order-12-teal';
|
|
13
|
+
type Size = 'xl' | 'lg' | 'md' | 'sm';
|
|
14
|
+
type TooltipAlignment = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
|
|
15
|
+
type ImageProps = {
|
|
16
|
+
/**
|
|
17
|
+
* When passing the image prop, supply a full path to the image to be displayed.
|
|
18
|
+
*/
|
|
19
|
+
image: string;
|
|
20
|
+
/**
|
|
21
|
+
* When passing the image prop use the imageDescription prop to describe the image for screen reader.
|
|
22
|
+
*/
|
|
23
|
+
imageDescription: string;
|
|
24
|
+
} | {
|
|
25
|
+
image?: never;
|
|
26
|
+
imageDescription?: never;
|
|
27
|
+
};
|
|
28
|
+
type UserAvatarBaseProps = {
|
|
29
|
+
/**
|
|
30
|
+
* Provide the background color need to be set for UserAvatar.
|
|
31
|
+
*/
|
|
32
|
+
backgroundColor?: BackgroundColor;
|
|
33
|
+
/**
|
|
34
|
+
* Provide an optional class to be applied to the containing node.
|
|
35
|
+
*/
|
|
36
|
+
className?: string;
|
|
37
|
+
/**
|
|
38
|
+
* When passing the name prop, either send the initials to be used or the user's full name. The first two capital letters of the user's name will be used as the name.
|
|
39
|
+
*/
|
|
40
|
+
name?: string;
|
|
41
|
+
/**
|
|
42
|
+
* Provide a custom icon to use if you need to use an icon other than the default one
|
|
43
|
+
*/
|
|
44
|
+
renderIcon?: React.ElementType;
|
|
45
|
+
/**
|
|
46
|
+
* Set the size of the avatar circle
|
|
47
|
+
*/
|
|
48
|
+
size?: Size;
|
|
49
|
+
/**
|
|
50
|
+
* Specify how the trigger should align with the tooltip
|
|
51
|
+
*/
|
|
52
|
+
tooltipAlignment?: TooltipAlignment;
|
|
53
|
+
/**
|
|
54
|
+
* Pass in the display name to have it shown on hover
|
|
55
|
+
*/
|
|
56
|
+
tooltipText?: string;
|
|
57
|
+
};
|
|
58
|
+
type UserAvatarProps = UserAvatarBaseProps & ImageProps;
|
|
59
|
+
export declare let UserAvatar: React.ForwardRefExoticComponent<UserAvatarProps & React.RefAttributes<HTMLDivElement>>;
|
|
60
|
+
export {};
|
|
@@ -35,42 +35,23 @@ var componentName = 'UserAvatar';
|
|
|
35
35
|
|
|
36
36
|
// NOTE: the component SCSS is not imported here: it is rolled up separately.
|
|
37
37
|
|
|
38
|
-
// Default values can be included here and then assigned to the prop params,
|
|
39
|
-
// e.g. prop = defaults.prop,
|
|
40
|
-
// This gathers default values together neatly and ensures non-primitive
|
|
41
|
-
// values are initialized early to avoid react making unnecessary re-renders.
|
|
42
|
-
// Note that default values are not required for props that are 'required',
|
|
43
|
-
// nor for props where the component can apply undefined values reasonably.
|
|
44
|
-
// Default values should be provided when the component needs to make a choice
|
|
45
|
-
// or assumption when a prop is not supplied.
|
|
46
|
-
|
|
47
|
-
// Default values for props
|
|
48
|
-
// const defaults = {
|
|
49
|
-
// /* TODO: add defaults for relevant props if needed */
|
|
50
|
-
// };
|
|
51
|
-
|
|
52
38
|
/**
|
|
53
39
|
* TODO: A description of the component.
|
|
54
40
|
*/
|
|
55
41
|
|
|
56
|
-
var defaults = {
|
|
57
|
-
size: 'md',
|
|
58
|
-
tooltipAlignment: 'bottom',
|
|
59
|
-
backgroundColor: 'order-1-cyan'
|
|
60
|
-
};
|
|
61
42
|
exports.UserAvatar = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
|
62
43
|
var _ref$backgroundColor = _ref.backgroundColor,
|
|
63
|
-
backgroundColor = _ref$backgroundColor === void 0 ?
|
|
44
|
+
backgroundColor = _ref$backgroundColor === void 0 ? 'order-1-cyan' : _ref$backgroundColor,
|
|
64
45
|
className = _ref.className,
|
|
65
46
|
image = _ref.image,
|
|
66
47
|
imageDescription = _ref.imageDescription,
|
|
67
48
|
name = _ref.name,
|
|
68
49
|
RenderIcon = _ref.renderIcon,
|
|
69
50
|
_ref$size = _ref.size,
|
|
70
|
-
size = _ref$size === void 0 ?
|
|
51
|
+
size = _ref$size === void 0 ? 'md' : _ref$size,
|
|
71
52
|
tooltipText = _ref.tooltipText,
|
|
72
53
|
_ref$tooltipAlignment = _ref.tooltipAlignment,
|
|
73
|
-
tooltipAlignment = _ref$tooltipAlignment === void 0 ?
|
|
54
|
+
tooltipAlignment = _ref$tooltipAlignment === void 0 ? 'bottom' : _ref$tooltipAlignment,
|
|
74
55
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
|
75
56
|
var carbonPrefix = react.usePrefix();
|
|
76
57
|
var iconSize = {
|
|
@@ -81,7 +62,7 @@ exports.UserAvatar = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
|
81
62
|
};
|
|
82
63
|
var formatInitials = function formatInitials() {
|
|
83
64
|
var _ref2;
|
|
84
|
-
var parts = name.split(' ');
|
|
65
|
+
var parts = (name === null || name === void 0 ? void 0 : name.split(' ')) || [];
|
|
85
66
|
var firstChar = parts[0].charAt(0).toUpperCase();
|
|
86
67
|
var secondChar = parts[0].charAt(1).toUpperCase();
|
|
87
68
|
if (parts.length === 1) {
|
|
@@ -161,10 +142,12 @@ exports.UserAvatar.propTypes = {
|
|
|
161
142
|
/**
|
|
162
143
|
* When passing the image prop, supply a full path to the image to be displayed.
|
|
163
144
|
*/
|
|
145
|
+
/**@ts-ignore */
|
|
164
146
|
image: index["default"].string,
|
|
165
147
|
/**
|
|
166
148
|
* When passing the image prop use the imageDescription prop to describe the image for screen reader.
|
|
167
149
|
*/
|
|
150
|
+
/**@ts-ignore */
|
|
168
151
|
imageDescription: index["default"].string.isRequired.if(function (_ref3) {
|
|
169
152
|
var image = _ref3.image;
|
|
170
153
|
return !!image;
|
|
@@ -176,6 +159,7 @@ exports.UserAvatar.propTypes = {
|
|
|
176
159
|
/**
|
|
177
160
|
* Provide a custom icon to use if you need to use an icon other than the default one
|
|
178
161
|
*/
|
|
162
|
+
/**@ts-ignore */
|
|
179
163
|
renderIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
|
|
180
164
|
/**
|
|
181
165
|
* Set the size of the avatar circle
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/ibm-products",
|
|
3
3
|
"description": "Carbon for IBM Products",
|
|
4
|
-
"version": "2.43.2-canary.
|
|
4
|
+
"version": "2.43.2-canary.108+81d820dc5",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -120,5 +120,5 @@
|
|
|
120
120
|
"react": "^16.8.6 || ^17.0.1 || ^18.2.0",
|
|
121
121
|
"react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
|
|
122
122
|
},
|
|
123
|
-
"gitHead": "
|
|
123
|
+
"gitHead": "81d820dc51a3b2f5a1481392e6af025362f65edd"
|
|
124
124
|
}
|