@carbon/ibm-products 2.43.2-canary.104 → 2.43.2-canary.108
Sign up to get free protection for your applications and to get access to all the features.
- package/es/components/ActionBar/ActionBar.d.ts +58 -2
- package/es/components/ActionBar/ActionBar.js +14 -9
- package/es/components/ActionBar/ActionBarItem.d.ts +36 -2
- package/es/components/ActionBar/ActionBarItem.js +7 -4
- package/es/components/ActionBar/ActionBarOverflowItems.d.ts +55 -16
- package/es/components/ActionBar/ActionBarOverflowItems.js +8 -4
- package/es/components/UserAvatar/UserAvatar.d.ts +59 -1
- package/es/components/UserAvatar/UserAvatar.js +7 -23
- package/lib/components/ActionBar/ActionBar.d.ts +58 -2
- package/lib/components/ActionBar/ActionBar.js +14 -9
- package/lib/components/ActionBar/ActionBarItem.d.ts +36 -2
- package/lib/components/ActionBar/ActionBarItem.js +6 -3
- package/lib/components/ActionBar/ActionBarOverflowItems.d.ts +55 -16
- package/lib/components/ActionBar/ActionBarOverflowItems.js +8 -4
- package/lib/components/UserAvatar/UserAvatar.d.ts +59 -1
- package/lib/components/UserAvatar/UserAvatar.js +7 -23
- package/package.json +3 -3
@@ -1,5 +1,61 @@
|
|
1
|
+
import React, { PropsWithChildren } from 'react';
|
2
|
+
import { ButtonProps } from '@carbon/type';
|
3
|
+
import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
|
4
|
+
interface Action extends ButtonProps {
|
5
|
+
id?: string;
|
6
|
+
key: string;
|
7
|
+
iconDescription: string;
|
8
|
+
label: string;
|
9
|
+
onClick?: () => void;
|
10
|
+
renderIcon: CarbonIconType;
|
11
|
+
}
|
12
|
+
interface ActionBarProps extends PropsWithChildren {
|
13
|
+
/**
|
14
|
+
* Specifies the action bar items. Each item is specified as an object
|
15
|
+
* with required fields: key for array rendering, renderIcon, iconDescription and
|
16
|
+
* label to provide the icon to display,
|
17
|
+
* and optional 'onClick' to receive notifications when the button is clicked.
|
18
|
+
* Additional fields in the object will be passed to the
|
19
|
+
* Button component, and these can include 'disabled', 'ref', 'className',
|
20
|
+
* and any other Button props.
|
21
|
+
*
|
22
|
+
* Note that the Button props 'kind', 'size',
|
23
|
+
* 'tooltipPosition', 'tooltipAlignment' and 'type' are ignored, as these
|
24
|
+
* cannot be used for an action bar item.
|
25
|
+
*
|
26
|
+
* Carbon Button API https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
|
27
|
+
*/
|
28
|
+
actions?: readonly Action[];
|
29
|
+
/**
|
30
|
+
* className
|
31
|
+
*/
|
32
|
+
className?: string;
|
33
|
+
/**
|
34
|
+
* maxVisible : Maximum action bar items visible before going into the overflow menu
|
35
|
+
*/
|
36
|
+
maxVisible?: number;
|
37
|
+
/**
|
38
|
+
* class name applied to the overflow options
|
39
|
+
*/
|
40
|
+
menuOptionsClass?: string;
|
41
|
+
/**
|
42
|
+
* onItemCountChange - event reporting maxWidth
|
43
|
+
*/
|
44
|
+
onWidthChange?: (sizes: {
|
45
|
+
minWidth: number;
|
46
|
+
maxWidth: number;
|
47
|
+
}) => void;
|
48
|
+
/**
|
49
|
+
* overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
|
50
|
+
*/
|
51
|
+
overflowAriaLabel: string;
|
52
|
+
/**
|
53
|
+
* align tags to right of available space
|
54
|
+
*/
|
55
|
+
rightAlign?: boolean;
|
56
|
+
}
|
1
57
|
/**
|
2
58
|
* The ActionBar is used internally by the PageHeader to wrap ActionBarItems.
|
3
59
|
*/
|
4
|
-
export let ActionBar: React.ForwardRefExoticComponent<React.RefAttributes<
|
5
|
-
|
60
|
+
export declare let ActionBar: React.ForwardRefExoticComponent<ActionBarProps & React.RefAttributes<HTMLDivElement>>;
|
61
|
+
export {};
|
@@ -20,7 +20,6 @@ import { ActionBarOverflowItems } from './ActionBarOverflowItems.js';
|
|
20
20
|
var _excluded = ["actions", "className", "maxVisible", "menuOptionsClass", "onWidthChange", "overflowAriaLabel", "rightAlign"],
|
21
21
|
_excluded2 = ["key", "id"],
|
22
22
|
_excluded3 = ["key"];
|
23
|
-
|
24
23
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
25
24
|
var blockClass = "".concat(pkg.prefix, "--action-bar");
|
26
25
|
var componentName = 'ActionBar';
|
@@ -29,7 +28,6 @@ var componentName = 'ActionBar';
|
|
29
28
|
var defaults = {
|
30
29
|
actions: Object.freeze([])
|
31
30
|
};
|
32
|
-
|
33
31
|
// NOTE: the component SCSS is not imported here: it is rolled up separately.
|
34
32
|
|
35
33
|
/**
|
@@ -53,7 +51,7 @@ var ActionBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
53
51
|
_useState4 = _slicedToArray(_useState3, 2),
|
54
52
|
displayedItems = _useState4[0],
|
55
53
|
setDisplayedItems = _useState4[1];
|
56
|
-
var _useState5 = useState(
|
54
|
+
var _useState5 = useState(null),
|
57
55
|
_useState6 = _slicedToArray(_useState5, 2),
|
58
56
|
hiddenSizingItems = _useState6[0],
|
59
57
|
setHiddenSizingItems = _useState6[1];
|
@@ -61,7 +59,7 @@ var ActionBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
61
59
|
var refDisplayedItems = useRef(null);
|
62
60
|
var sizingRef = useRef(null);
|
63
61
|
var sizes = useRef({});
|
64
|
-
var backupRef = useRef();
|
62
|
+
var backupRef = useRef(null);
|
65
63
|
var localRef = ref || backupRef;
|
66
64
|
|
67
65
|
// create hidden sizing items
|
@@ -121,24 +119,25 @@ var ActionBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
121
119
|
var checkFullyVisibleItems = function checkFullyVisibleItems() {
|
122
120
|
/* istanbul ignore if */
|
123
121
|
if (sizingRef.current) {
|
122
|
+
var _refDisplayedItems$cu;
|
124
123
|
var sizingItems = Array.from(sizingRef.current.querySelectorAll(".".concat(blockClass, "__hidden-sizing-item")));
|
125
124
|
|
126
125
|
// first item is always the overflow even if nothing else is rendered
|
127
126
|
var overflowItem = sizingItems.shift();
|
128
127
|
|
129
128
|
// determine how many will fit
|
130
|
-
var spaceAvailable = refDisplayedItems.current.offsetWidth;
|
129
|
+
var spaceAvailable = (_refDisplayedItems$cu = refDisplayedItems.current) === null || _refDisplayedItems$cu === void 0 ? void 0 : _refDisplayedItems$cu.offsetWidth;
|
131
130
|
var willFit = 0;
|
132
131
|
var maxVisibleWidth = 0;
|
133
132
|
var fitLimit = maxVisible ? Math.min(maxVisible, sizingItems.length) : sizingItems.length;
|
134
133
|
|
135
134
|
// loop checking the space available
|
136
135
|
for (var i = 0; i < fitLimit; i++) {
|
137
|
-
var newSpaceAvailable = spaceAvailable - sizingItems[i].offsetWidth;
|
136
|
+
var newSpaceAvailable = spaceAvailable && spaceAvailable - sizingItems[i].offsetWidth;
|
138
137
|
|
139
138
|
// update maxVisibleWidth for later use by onWidthChange
|
140
139
|
maxVisibleWidth += sizingItems[i].offsetWidth;
|
141
|
-
if (newSpaceAvailable >= 0) {
|
140
|
+
if (newSpaceAvailable && newSpaceAvailable >= 0) {
|
142
141
|
spaceAvailable = newSpaceAvailable;
|
143
142
|
willFit += 1;
|
144
143
|
}
|
@@ -148,7 +147,7 @@ var ActionBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
148
147
|
var overflowWidth = overflowItem.offsetWidth;
|
149
148
|
if (willFit < sizingItems.length) {
|
150
149
|
// Check space for overflow
|
151
|
-
while (willFit > 0 && spaceAvailable < overflowWidth) {
|
150
|
+
while (willFit > 0 && spaceAvailable && spaceAvailable < overflowWidth) {
|
152
151
|
willFit -= 1;
|
153
152
|
|
154
153
|
// Highly unlikely that any action bar item is narrower than the overflow item
|
@@ -161,7 +160,10 @@ var ActionBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
161
160
|
sizes.current.minWidth = overflowWidth;
|
162
161
|
sizes.current.maxWidth = maxVisibleWidth;
|
163
162
|
// emit onWidthChange
|
164
|
-
onWidthChange(
|
163
|
+
onWidthChange({
|
164
|
+
minWidth: overflowWidth,
|
165
|
+
maxWidth: maxVisibleWidth
|
166
|
+
});
|
165
167
|
}
|
166
168
|
if (willFit < 1) {
|
167
169
|
setDisplayCount(0);
|
@@ -212,14 +214,17 @@ ActionBar.propTypes = {
|
|
212
214
|
*
|
213
215
|
* Carbon Button API https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
|
214
216
|
*/
|
217
|
+
/**@ts-ignore */
|
215
218
|
actions: PropTypes.arrayOf(PropTypes.shape(_objectSpread2(_objectSpread2({}, prepareProps(Button.propTypes, [
|
216
219
|
// props not desired from Button.propTypes
|
217
220
|
'kind', 'size', 'tooltipPosition', 'tooltipAlignment'])), {}, {
|
221
|
+
id: PropTypes.string,
|
218
222
|
// Additional props
|
219
223
|
key: PropTypes.string.isRequired,
|
220
224
|
// Redefine as form different to Button and a key prop used by ActionBarItems
|
221
225
|
iconDescription: PropTypes.string.isRequired,
|
222
226
|
label: PropTypes.string.isRequired,
|
227
|
+
/**@ts-ignore */
|
223
228
|
renderIcon: Button.propTypes.renderIcon.isRequired,
|
224
229
|
// We duplicate onClick here to improve DocGen in Storybook
|
225
230
|
onClick: PropTypes.func
|
@@ -1,5 +1,39 @@
|
|
1
|
+
import React, { PropsWithChildren } from 'react';
|
2
|
+
import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
|
3
|
+
interface ActionBarItemProps extends PropsWithChildren {
|
4
|
+
/**
|
5
|
+
* Specify an optional className to be added to your Button
|
6
|
+
*
|
7
|
+
* (inherited from Carbon Button)
|
8
|
+
*/
|
9
|
+
className?: string;
|
10
|
+
/**
|
11
|
+
* If specifying the `renderIcon` prop, provide a description for that icon that can
|
12
|
+
* be read by screen readers
|
13
|
+
*
|
14
|
+
* (inherited from Carbon Button)
|
15
|
+
*/
|
16
|
+
label?: string;
|
17
|
+
/**
|
18
|
+
* Optional click handler
|
19
|
+
*
|
20
|
+
* (inherited from Carbon Button)
|
21
|
+
*/
|
22
|
+
onClick?: () => void;
|
23
|
+
/**
|
24
|
+
* Optional prop to allow overriding the icon rendering.
|
25
|
+
* Can be a React component class
|
26
|
+
*
|
27
|
+
* (inherited from Carbon Button)
|
28
|
+
*/
|
29
|
+
renderIcon?: CarbonIconType;
|
30
|
+
/**
|
31
|
+
* Optional tab index
|
32
|
+
*/
|
33
|
+
tabIndex?: number;
|
34
|
+
}
|
1
35
|
/**
|
2
36
|
* The ActionBarItem is used in the page header to populate the action bar
|
3
37
|
*/
|
4
|
-
export let ActionBarItem: React.ForwardRefExoticComponent<React.RefAttributes<
|
5
|
-
|
38
|
+
export declare let ActionBarItem: React.ForwardRefExoticComponent<ActionBarItemProps & React.RefAttributes<HTMLDivElement>>;
|
39
|
+
export {};
|
@@ -5,7 +5,7 @@
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
6
6
|
*/
|
7
7
|
|
8
|
-
import {
|
8
|
+
import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
9
9
|
import React__default from 'react';
|
10
10
|
import PropTypes from '../../node_modules/prop-types/index.js';
|
11
11
|
import cx from 'classnames';
|
@@ -13,11 +13,9 @@ import { pkg } from '../../settings.js';
|
|
13
13
|
import { IconButton } from '@carbon/react';
|
14
14
|
|
15
15
|
var _excluded = ["label", "className", "renderIcon"];
|
16
|
-
|
17
16
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
18
17
|
var componentName = 'ActionBarItem';
|
19
18
|
var blockClass = "".concat(pkg.prefix, "--action-bar-item");
|
20
|
-
|
21
19
|
// NOTE: the component SCSS is not imported here: it is rolled up separately.
|
22
20
|
|
23
21
|
/**
|
@@ -85,7 +83,12 @@ ActionBarItem.propTypes = _objectSpread2(_objectSpread2({}, propTypes), {}, {
|
|
85
83
|
*
|
86
84
|
* (inherited from Carbon Button)
|
87
85
|
*/
|
88
|
-
|
86
|
+
/**@ts-ignore */
|
87
|
+
renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
88
|
+
/**
|
89
|
+
* Optional tab index
|
90
|
+
*/
|
91
|
+
tabIndex: PropTypes.number
|
89
92
|
});
|
90
93
|
|
91
94
|
export { ActionBarItem };
|
@@ -1,18 +1,57 @@
|
|
1
|
-
|
2
|
-
className: any;
|
3
|
-
menuOptionsClass: any;
|
4
|
-
overflowItems: any;
|
5
|
-
overflowAriaLabel: any;
|
6
|
-
}): import("react/jsx-runtime").JSX.Element;
|
7
|
-
export namespace ActionBarOverflowItems {
|
8
|
-
export { componentName as displayName };
|
9
|
-
export namespace propTypes {
|
10
|
-
let className: PropTypes.Requireable<string>;
|
11
|
-
let menuOptionsClass: PropTypes.Requireable<string>;
|
12
|
-
let overflowAriaLabel: PropTypes.Requireable<string>;
|
13
|
-
let overflowItems: PropTypes.Requireable<(PropTypes.ReactElementLike | null | undefined)[]>;
|
14
|
-
}
|
15
|
-
}
|
16
|
-
declare const componentName: "ActionBar";
|
1
|
+
import { PropsWithChildren, ReactElement } from 'react';
|
17
2
|
import PropTypes from 'prop-types';
|
3
|
+
import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
|
4
|
+
type OverflowItem = {
|
5
|
+
label: string;
|
6
|
+
onClick: () => void;
|
7
|
+
renderIcon: CarbonIconType;
|
8
|
+
};
|
9
|
+
interface ActionBarOverflowItemProps extends PropsWithChildren {
|
10
|
+
/**
|
11
|
+
* className
|
12
|
+
*/
|
13
|
+
className?: string;
|
14
|
+
/**
|
15
|
+
* class name applied to the overflow options
|
16
|
+
*/
|
17
|
+
menuOptionsClass?: string;
|
18
|
+
/**
|
19
|
+
* overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
|
20
|
+
*/
|
21
|
+
overflowAriaLabel?: string;
|
22
|
+
/**
|
23
|
+
* overflowItems: items to bre shown in the ActionBar overflow menu
|
24
|
+
*/
|
25
|
+
overflowItems?: ReactElement<OverflowItem>[];
|
26
|
+
/**
|
27
|
+
* Optional tab index
|
28
|
+
*/
|
29
|
+
tabIndex?: number;
|
30
|
+
}
|
31
|
+
export declare const ActionBarOverflowItems: {
|
32
|
+
({ className, menuOptionsClass, overflowItems, overflowAriaLabel, }: ActionBarOverflowItemProps): import("react/jsx-runtime").JSX.Element;
|
33
|
+
displayName: string;
|
34
|
+
propTypes: {
|
35
|
+
/**
|
36
|
+
* className
|
37
|
+
*/
|
38
|
+
className: PropTypes.Requireable<string>;
|
39
|
+
/**
|
40
|
+
* class name applied to the overflow options
|
41
|
+
*/
|
42
|
+
menuOptionsClass: PropTypes.Requireable<string>;
|
43
|
+
/**
|
44
|
+
* overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
|
45
|
+
*/
|
46
|
+
overflowAriaLabel: PropTypes.Requireable<string>;
|
47
|
+
/**
|
48
|
+
* overflowItems: items to bre shown in the ActionBar overflow menu
|
49
|
+
*/
|
50
|
+
overflowItems: PropTypes.Requireable<(PropTypes.ReactElementLike | null | undefined)[]>;
|
51
|
+
/**
|
52
|
+
* Optional tab index
|
53
|
+
*/
|
54
|
+
tabIndex: PropTypes.Requireable<number>;
|
55
|
+
};
|
56
|
+
};
|
18
57
|
export {};
|
@@ -33,17 +33,17 @@ var ActionBarOverflowItems = function ActionBarOverflowItems(_ref) {
|
|
33
33
|
// This uses a copy of a menu item option
|
34
34
|
// NOTE: Cannot use a real Tooltip icon below as it uses a <button /> the
|
35
35
|
// div equivalent below is based on Carbon 10.25.0
|
36
|
-
var ItemIcon = item.props.renderIcon;
|
36
|
+
var ItemIcon = item === null || item === void 0 ? void 0 : item.props.renderIcon;
|
37
37
|
return /*#__PURE__*/React__default.createElement(OverflowMenuItem, {
|
38
38
|
className: "".concat(blockClass, "__item"),
|
39
|
-
onClick: item.props.onClick,
|
39
|
+
onClick: item === null || item === void 0 ? void 0 : item.props.onClick,
|
40
40
|
itemText: /*#__PURE__*/React__default.createElement("div", {
|
41
41
|
className: "".concat(blockClass, "__item-content"),
|
42
42
|
"aria-describedby": "".concat(internalId.current, "-").concat(index, "--item-label")
|
43
43
|
}, /*#__PURE__*/React__default.createElement("span", {
|
44
44
|
className: "".concat(blockClass, "__item-label"),
|
45
45
|
id: "".concat(internalId.current, "-").concat(index, "--item-label")
|
46
|
-
}, item.props.label), typeof item.props.renderIcon === 'function' ? /*#__PURE__*/React__default.createElement(ItemIcon, null) : item.props.renderIcon)
|
46
|
+
}, item === null || item === void 0 ? void 0 : item.props.label), typeof (item === null || item === void 0 ? void 0 : item.props.renderIcon) === 'function' ? /*#__PURE__*/React__default.createElement(ItemIcon, null) : item === null || item === void 0 ? void 0 : item.props.renderIcon)
|
47
47
|
});
|
48
48
|
}));
|
49
49
|
};
|
@@ -65,7 +65,11 @@ ActionBarOverflowItems.propTypes = {
|
|
65
65
|
/**
|
66
66
|
* overflowItems: items to bre shown in the ActionBar overflow menu
|
67
67
|
*/
|
68
|
-
overflowItems: PropTypes.arrayOf(PropTypes.element)
|
68
|
+
overflowItems: PropTypes.arrayOf(PropTypes.element),
|
69
|
+
/**
|
70
|
+
* Optional tab index
|
71
|
+
*/
|
72
|
+
tabIndex: PropTypes.number
|
69
73
|
};
|
70
74
|
|
71
75
|
export { ActionBarOverflowItems };
|
@@ -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,5 +1,61 @@
|
|
1
|
+
import React, { PropsWithChildren } from 'react';
|
2
|
+
import { ButtonProps } from '@carbon/type';
|
3
|
+
import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
|
4
|
+
interface Action extends ButtonProps {
|
5
|
+
id?: string;
|
6
|
+
key: string;
|
7
|
+
iconDescription: string;
|
8
|
+
label: string;
|
9
|
+
onClick?: () => void;
|
10
|
+
renderIcon: CarbonIconType;
|
11
|
+
}
|
12
|
+
interface ActionBarProps extends PropsWithChildren {
|
13
|
+
/**
|
14
|
+
* Specifies the action bar items. Each item is specified as an object
|
15
|
+
* with required fields: key for array rendering, renderIcon, iconDescription and
|
16
|
+
* label to provide the icon to display,
|
17
|
+
* and optional 'onClick' to receive notifications when the button is clicked.
|
18
|
+
* Additional fields in the object will be passed to the
|
19
|
+
* Button component, and these can include 'disabled', 'ref', 'className',
|
20
|
+
* and any other Button props.
|
21
|
+
*
|
22
|
+
* Note that the Button props 'kind', 'size',
|
23
|
+
* 'tooltipPosition', 'tooltipAlignment' and 'type' are ignored, as these
|
24
|
+
* cannot be used for an action bar item.
|
25
|
+
*
|
26
|
+
* Carbon Button API https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
|
27
|
+
*/
|
28
|
+
actions?: readonly Action[];
|
29
|
+
/**
|
30
|
+
* className
|
31
|
+
*/
|
32
|
+
className?: string;
|
33
|
+
/**
|
34
|
+
* maxVisible : Maximum action bar items visible before going into the overflow menu
|
35
|
+
*/
|
36
|
+
maxVisible?: number;
|
37
|
+
/**
|
38
|
+
* class name applied to the overflow options
|
39
|
+
*/
|
40
|
+
menuOptionsClass?: string;
|
41
|
+
/**
|
42
|
+
* onItemCountChange - event reporting maxWidth
|
43
|
+
*/
|
44
|
+
onWidthChange?: (sizes: {
|
45
|
+
minWidth: number;
|
46
|
+
maxWidth: number;
|
47
|
+
}) => void;
|
48
|
+
/**
|
49
|
+
* overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
|
50
|
+
*/
|
51
|
+
overflowAriaLabel: string;
|
52
|
+
/**
|
53
|
+
* align tags to right of available space
|
54
|
+
*/
|
55
|
+
rightAlign?: boolean;
|
56
|
+
}
|
1
57
|
/**
|
2
58
|
* The ActionBar is used internally by the PageHeader to wrap ActionBarItems.
|
3
59
|
*/
|
4
|
-
export let ActionBar: React.ForwardRefExoticComponent<React.RefAttributes<
|
5
|
-
|
60
|
+
export declare let ActionBar: React.ForwardRefExoticComponent<ActionBarProps & React.RefAttributes<HTMLDivElement>>;
|
61
|
+
export {};
|
@@ -29,7 +29,6 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
29
29
|
var _excluded = ["actions", "className", "maxVisible", "menuOptionsClass", "onWidthChange", "overflowAriaLabel", "rightAlign"],
|
30
30
|
_excluded2 = ["key", "id"],
|
31
31
|
_excluded3 = ["key"];
|
32
|
-
|
33
32
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
34
33
|
var blockClass = "".concat(settings.pkg.prefix, "--action-bar");
|
35
34
|
var componentName = 'ActionBar';
|
@@ -38,7 +37,6 @@ var componentName = 'ActionBar';
|
|
38
37
|
var defaults = {
|
39
38
|
actions: Object.freeze([])
|
40
39
|
};
|
41
|
-
|
42
40
|
// NOTE: the component SCSS is not imported here: it is rolled up separately.
|
43
41
|
|
44
42
|
/**
|
@@ -62,7 +60,7 @@ exports.ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
62
60
|
_useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
|
63
61
|
displayedItems = _useState4[0],
|
64
62
|
setDisplayedItems = _useState4[1];
|
65
|
-
var _useState5 = React.useState(
|
63
|
+
var _useState5 = React.useState(null),
|
66
64
|
_useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
|
67
65
|
hiddenSizingItems = _useState6[0],
|
68
66
|
setHiddenSizingItems = _useState6[1];
|
@@ -70,7 +68,7 @@ exports.ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
70
68
|
var refDisplayedItems = React.useRef(null);
|
71
69
|
var sizingRef = React.useRef(null);
|
72
70
|
var sizes = React.useRef({});
|
73
|
-
var backupRef = React.useRef();
|
71
|
+
var backupRef = React.useRef(null);
|
74
72
|
var localRef = ref || backupRef;
|
75
73
|
|
76
74
|
// create hidden sizing items
|
@@ -130,24 +128,25 @@ exports.ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
130
128
|
var checkFullyVisibleItems = function checkFullyVisibleItems() {
|
131
129
|
/* istanbul ignore if */
|
132
130
|
if (sizingRef.current) {
|
131
|
+
var _refDisplayedItems$cu;
|
133
132
|
var sizingItems = Array.from(sizingRef.current.querySelectorAll(".".concat(blockClass, "__hidden-sizing-item")));
|
134
133
|
|
135
134
|
// first item is always the overflow even if nothing else is rendered
|
136
135
|
var overflowItem = sizingItems.shift();
|
137
136
|
|
138
137
|
// determine how many will fit
|
139
|
-
var spaceAvailable = refDisplayedItems.current.offsetWidth;
|
138
|
+
var spaceAvailable = (_refDisplayedItems$cu = refDisplayedItems.current) === null || _refDisplayedItems$cu === void 0 ? void 0 : _refDisplayedItems$cu.offsetWidth;
|
140
139
|
var willFit = 0;
|
141
140
|
var maxVisibleWidth = 0;
|
142
141
|
var fitLimit = maxVisible ? Math.min(maxVisible, sizingItems.length) : sizingItems.length;
|
143
142
|
|
144
143
|
// loop checking the space available
|
145
144
|
for (var i = 0; i < fitLimit; i++) {
|
146
|
-
var newSpaceAvailable = spaceAvailable - sizingItems[i].offsetWidth;
|
145
|
+
var newSpaceAvailable = spaceAvailable && spaceAvailable - sizingItems[i].offsetWidth;
|
147
146
|
|
148
147
|
// update maxVisibleWidth for later use by onWidthChange
|
149
148
|
maxVisibleWidth += sizingItems[i].offsetWidth;
|
150
|
-
if (newSpaceAvailable >= 0) {
|
149
|
+
if (newSpaceAvailable && newSpaceAvailable >= 0) {
|
151
150
|
spaceAvailable = newSpaceAvailable;
|
152
151
|
willFit += 1;
|
153
152
|
}
|
@@ -157,7 +156,7 @@ exports.ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
157
156
|
var overflowWidth = overflowItem.offsetWidth;
|
158
157
|
if (willFit < sizingItems.length) {
|
159
158
|
// Check space for overflow
|
160
|
-
while (willFit > 0 && spaceAvailable < overflowWidth) {
|
159
|
+
while (willFit > 0 && spaceAvailable && spaceAvailable < overflowWidth) {
|
161
160
|
willFit -= 1;
|
162
161
|
|
163
162
|
// Highly unlikely that any action bar item is narrower than the overflow item
|
@@ -170,7 +169,10 @@ exports.ActionBar = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
170
169
|
sizes.current.minWidth = overflowWidth;
|
171
170
|
sizes.current.maxWidth = maxVisibleWidth;
|
172
171
|
// emit onWidthChange
|
173
|
-
onWidthChange(
|
172
|
+
onWidthChange({
|
173
|
+
minWidth: overflowWidth,
|
174
|
+
maxWidth: maxVisibleWidth
|
175
|
+
});
|
174
176
|
}
|
175
177
|
if (willFit < 1) {
|
176
178
|
setDisplayCount(0);
|
@@ -221,14 +223,17 @@ exports.ActionBar.propTypes = {
|
|
221
223
|
*
|
222
224
|
* Carbon Button API https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
|
223
225
|
*/
|
226
|
+
/**@ts-ignore */
|
224
227
|
actions: index["default"].arrayOf(index["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, propsHelper.prepareProps(react.Button.propTypes, [
|
225
228
|
// props not desired from Button.propTypes
|
226
229
|
'kind', 'size', 'tooltipPosition', 'tooltipAlignment'])), {}, {
|
230
|
+
id: index["default"].string,
|
227
231
|
// Additional props
|
228
232
|
key: index["default"].string.isRequired,
|
229
233
|
// Redefine as form different to Button and a key prop used by ActionBarItems
|
230
234
|
iconDescription: index["default"].string.isRequired,
|
231
235
|
label: index["default"].string.isRequired,
|
236
|
+
/**@ts-ignore */
|
232
237
|
renderIcon: react.Button.propTypes.renderIcon.isRequired,
|
233
238
|
// We duplicate onClick here to improve DocGen in Storybook
|
234
239
|
onClick: index["default"].func
|
@@ -1,5 +1,39 @@
|
|
1
|
+
import React, { PropsWithChildren } from 'react';
|
2
|
+
import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
|
3
|
+
interface ActionBarItemProps extends PropsWithChildren {
|
4
|
+
/**
|
5
|
+
* Specify an optional className to be added to your Button
|
6
|
+
*
|
7
|
+
* (inherited from Carbon Button)
|
8
|
+
*/
|
9
|
+
className?: string;
|
10
|
+
/**
|
11
|
+
* If specifying the `renderIcon` prop, provide a description for that icon that can
|
12
|
+
* be read by screen readers
|
13
|
+
*
|
14
|
+
* (inherited from Carbon Button)
|
15
|
+
*/
|
16
|
+
label?: string;
|
17
|
+
/**
|
18
|
+
* Optional click handler
|
19
|
+
*
|
20
|
+
* (inherited from Carbon Button)
|
21
|
+
*/
|
22
|
+
onClick?: () => void;
|
23
|
+
/**
|
24
|
+
* Optional prop to allow overriding the icon rendering.
|
25
|
+
* Can be a React component class
|
26
|
+
*
|
27
|
+
* (inherited from Carbon Button)
|
28
|
+
*/
|
29
|
+
renderIcon?: CarbonIconType;
|
30
|
+
/**
|
31
|
+
* Optional tab index
|
32
|
+
*/
|
33
|
+
tabIndex?: number;
|
34
|
+
}
|
1
35
|
/**
|
2
36
|
* The ActionBarItem is used in the page header to populate the action bar
|
3
37
|
*/
|
4
|
-
export let ActionBarItem: React.ForwardRefExoticComponent<React.RefAttributes<
|
5
|
-
|
38
|
+
export declare let ActionBarItem: React.ForwardRefExoticComponent<ActionBarItemProps & React.RefAttributes<HTMLDivElement>>;
|
39
|
+
export {};
|
@@ -22,11 +22,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
22
22
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
23
23
|
|
24
24
|
var _excluded = ["label", "className", "renderIcon"];
|
25
|
-
|
26
25
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
27
26
|
var componentName = 'ActionBarItem';
|
28
27
|
var blockClass = "".concat(settings.pkg.prefix, "--action-bar-item");
|
29
|
-
|
30
28
|
// NOTE: the component SCSS is not imported here: it is rolled up separately.
|
31
29
|
|
32
30
|
/**
|
@@ -94,5 +92,10 @@ exports.ActionBarItem.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollu
|
|
94
92
|
*
|
95
93
|
* (inherited from Carbon Button)
|
96
94
|
*/
|
97
|
-
|
95
|
+
/**@ts-ignore */
|
96
|
+
renderIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
|
97
|
+
/**
|
98
|
+
* Optional tab index
|
99
|
+
*/
|
100
|
+
tabIndex: index["default"].number
|
98
101
|
});
|
@@ -1,18 +1,57 @@
|
|
1
|
-
|
2
|
-
className: any;
|
3
|
-
menuOptionsClass: any;
|
4
|
-
overflowItems: any;
|
5
|
-
overflowAriaLabel: any;
|
6
|
-
}): import("react/jsx-runtime").JSX.Element;
|
7
|
-
export namespace ActionBarOverflowItems {
|
8
|
-
export { componentName as displayName };
|
9
|
-
export namespace propTypes {
|
10
|
-
let className: PropTypes.Requireable<string>;
|
11
|
-
let menuOptionsClass: PropTypes.Requireable<string>;
|
12
|
-
let overflowAriaLabel: PropTypes.Requireable<string>;
|
13
|
-
let overflowItems: PropTypes.Requireable<(PropTypes.ReactElementLike | null | undefined)[]>;
|
14
|
-
}
|
15
|
-
}
|
16
|
-
declare const componentName: "ActionBar";
|
1
|
+
import { PropsWithChildren, ReactElement } from 'react';
|
17
2
|
import PropTypes from 'prop-types';
|
3
|
+
import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
|
4
|
+
type OverflowItem = {
|
5
|
+
label: string;
|
6
|
+
onClick: () => void;
|
7
|
+
renderIcon: CarbonIconType;
|
8
|
+
};
|
9
|
+
interface ActionBarOverflowItemProps extends PropsWithChildren {
|
10
|
+
/**
|
11
|
+
* className
|
12
|
+
*/
|
13
|
+
className?: string;
|
14
|
+
/**
|
15
|
+
* class name applied to the overflow options
|
16
|
+
*/
|
17
|
+
menuOptionsClass?: string;
|
18
|
+
/**
|
19
|
+
* overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
|
20
|
+
*/
|
21
|
+
overflowAriaLabel?: string;
|
22
|
+
/**
|
23
|
+
* overflowItems: items to bre shown in the ActionBar overflow menu
|
24
|
+
*/
|
25
|
+
overflowItems?: ReactElement<OverflowItem>[];
|
26
|
+
/**
|
27
|
+
* Optional tab index
|
28
|
+
*/
|
29
|
+
tabIndex?: number;
|
30
|
+
}
|
31
|
+
export declare const ActionBarOverflowItems: {
|
32
|
+
({ className, menuOptionsClass, overflowItems, overflowAriaLabel, }: ActionBarOverflowItemProps): import("react/jsx-runtime").JSX.Element;
|
33
|
+
displayName: string;
|
34
|
+
propTypes: {
|
35
|
+
/**
|
36
|
+
* className
|
37
|
+
*/
|
38
|
+
className: PropTypes.Requireable<string>;
|
39
|
+
/**
|
40
|
+
* class name applied to the overflow options
|
41
|
+
*/
|
42
|
+
menuOptionsClass: PropTypes.Requireable<string>;
|
43
|
+
/**
|
44
|
+
* overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
|
45
|
+
*/
|
46
|
+
overflowAriaLabel: PropTypes.Requireable<string>;
|
47
|
+
/**
|
48
|
+
* overflowItems: items to bre shown in the ActionBar overflow menu
|
49
|
+
*/
|
50
|
+
overflowItems: PropTypes.Requireable<(PropTypes.ReactElementLike | null | undefined)[]>;
|
51
|
+
/**
|
52
|
+
* Optional tab index
|
53
|
+
*/
|
54
|
+
tabIndex: PropTypes.Requireable<number>;
|
55
|
+
};
|
56
|
+
};
|
18
57
|
export {};
|
@@ -42,17 +42,17 @@ var ActionBarOverflowItems = function ActionBarOverflowItems(_ref) {
|
|
42
42
|
// This uses a copy of a menu item option
|
43
43
|
// NOTE: Cannot use a real Tooltip icon below as it uses a <button /> the
|
44
44
|
// div equivalent below is based on Carbon 10.25.0
|
45
|
-
var ItemIcon = item.props.renderIcon;
|
45
|
+
var ItemIcon = item === null || item === void 0 ? void 0 : item.props.renderIcon;
|
46
46
|
return /*#__PURE__*/React__default["default"].createElement(react.OverflowMenuItem, {
|
47
47
|
className: "".concat(blockClass, "__item"),
|
48
|
-
onClick: item.props.onClick,
|
48
|
+
onClick: item === null || item === void 0 ? void 0 : item.props.onClick,
|
49
49
|
itemText: /*#__PURE__*/React__default["default"].createElement("div", {
|
50
50
|
className: "".concat(blockClass, "__item-content"),
|
51
51
|
"aria-describedby": "".concat(internalId.current, "-").concat(index, "--item-label")
|
52
52
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
53
53
|
className: "".concat(blockClass, "__item-label"),
|
54
54
|
id: "".concat(internalId.current, "-").concat(index, "--item-label")
|
55
|
-
}, item.props.label), typeof item.props.renderIcon === 'function' ? /*#__PURE__*/React__default["default"].createElement(ItemIcon, null) : item.props.renderIcon)
|
55
|
+
}, item === null || item === void 0 ? void 0 : item.props.label), typeof (item === null || item === void 0 ? void 0 : item.props.renderIcon) === 'function' ? /*#__PURE__*/React__default["default"].createElement(ItemIcon, null) : item === null || item === void 0 ? void 0 : item.props.renderIcon)
|
56
56
|
});
|
57
57
|
}));
|
58
58
|
};
|
@@ -74,7 +74,11 @@ ActionBarOverflowItems.propTypes = {
|
|
74
74
|
/**
|
75
75
|
* overflowItems: items to bre shown in the ActionBar overflow menu
|
76
76
|
*/
|
77
|
-
overflowItems: index["default"].arrayOf(index["default"].element)
|
77
|
+
overflowItems: index["default"].arrayOf(index["default"].element),
|
78
|
+
/**
|
79
|
+
* Optional tab index
|
80
|
+
*/
|
81
|
+
tabIndex: index["default"].number
|
78
82
|
};
|
79
83
|
|
80
84
|
exports.ActionBarOverflowItems = ActionBarOverflowItems;
|
@@ -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",
|
@@ -96,7 +96,7 @@
|
|
96
96
|
"dependencies": {
|
97
97
|
"@babel/runtime": "^7.23.9",
|
98
98
|
"@carbon/feature-flags": "^0.20.0",
|
99
|
-
"@carbon/ibm-products-styles": "^2.
|
99
|
+
"@carbon/ibm-products-styles": "^2.42.0-rc.0",
|
100
100
|
"@carbon/telemetry": "^0.1.0",
|
101
101
|
"@dnd-kit/core": "^6.0.8",
|
102
102
|
"@dnd-kit/modifiers": "^7.0.0",
|
@@ -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
|
}
|