@carbon-labs/react-ui-shell 0.50.0 → 0.51.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.
- package/README.md +1 -0
- package/es/components/Profile.d.ts +68 -0
- package/es/components/Profile.js +141 -0
- package/es/components/SideNavLinkPopover.d.ts +2 -2
- package/es/index.d.ts +7 -6
- package/es/index.js +2 -0
- package/es/node_modules/@carbon/ibm-products/es/_virtual/_commonjsHelpers.js +12 -0
- package/es/node_modules/@carbon/ibm-products/es/_virtual/_rollupPluginBabelHelpers.js +18 -0
- package/es/node_modules/@carbon/ibm-products/es/_virtual/index.js +14 -0
- package/es/node_modules/@carbon/ibm-products/es/_virtual/index2.js +12 -0
- package/es/node_modules/@carbon/ibm-products/es/components/TooltipTrigger/TooltipTrigger.js +63 -0
- package/es/node_modules/@carbon/ibm-products/es/components/UserAvatar/UserAvatar.js +170 -0
- package/es/node_modules/@carbon/ibm-products/es/components/_Canary/Canary.js +49 -0
- package/es/node_modules/@carbon/ibm-products/es/global/js/package-settings.js +245 -0
- package/es/node_modules/@carbon/ibm-products/es/global/js/utils/devtools.js +16 -0
- package/es/node_modules/@carbon/ibm-products/es/global/js/utils/pconsole.js +35 -0
- package/es/node_modules/@carbon/ibm-products/es/global/js/utils/props-helper.js +46 -0
- package/es/node_modules/@carbon/ibm-products/es/node_modules/object-assign/index.js +89 -0
- package/es/node_modules/@carbon/ibm-products/es/node_modules/prop-types/checkPropTypes.js +95 -0
- package/es/node_modules/@carbon/ibm-products/es/node_modules/prop-types/factoryWithThrowingShims.js +64 -0
- package/es/node_modules/@carbon/ibm-products/es/node_modules/prop-types/factoryWithTypeCheckers.js +561 -0
- package/es/node_modules/@carbon/ibm-products/es/node_modules/prop-types/index.js +32 -0
- package/es/node_modules/@carbon/ibm-products/es/node_modules/prop-types/lib/ReactPropTypesSecret.js +18 -0
- package/es/node_modules/@carbon/ibm-products/es/node_modules/prop-types/lib/has.js +17 -0
- package/es/node_modules/@carbon/ibm-products/es/settings.js +84 -0
- package/lib/components/Profile.d.ts +68 -0
- package/lib/components/Profile.js +148 -0
- package/lib/components/SideNavLinkPopover.d.ts +2 -2
- package/lib/index.d.ts +7 -6
- package/lib/index.js +2 -0
- package/lib/node_modules/@carbon/ibm-products/es/_virtual/_commonjsHelpers.js +14 -0
- package/lib/node_modules/@carbon/ibm-products/es/_virtual/_rollupPluginBabelHelpers.js +20 -0
- package/lib/node_modules/@carbon/ibm-products/es/_virtual/index.js +19 -0
- package/lib/node_modules/@carbon/ibm-products/es/_virtual/index2.js +14 -0
- package/lib/node_modules/@carbon/ibm-products/es/components/TooltipTrigger/TooltipTrigger.js +63 -0
- package/lib/node_modules/@carbon/ibm-products/es/components/UserAvatar/UserAvatar.js +170 -0
- package/lib/node_modules/@carbon/ibm-products/es/components/_Canary/Canary.js +51 -0
- package/lib/node_modules/@carbon/ibm-products/es/global/js/package-settings.js +251 -0
- package/lib/node_modules/@carbon/ibm-products/es/global/js/utils/devtools.js +20 -0
- package/lib/node_modules/@carbon/ibm-products/es/global/js/utils/pconsole.js +45 -0
- package/lib/node_modules/@carbon/ibm-products/es/global/js/utils/props-helper.js +48 -0
- package/lib/node_modules/@carbon/ibm-products/es/node_modules/object-assign/index.js +91 -0
- package/lib/node_modules/@carbon/ibm-products/es/node_modules/prop-types/checkPropTypes.js +97 -0
- package/lib/node_modules/@carbon/ibm-products/es/node_modules/prop-types/factoryWithThrowingShims.js +66 -0
- package/lib/node_modules/@carbon/ibm-products/es/node_modules/prop-types/factoryWithTypeCheckers.js +563 -0
- package/lib/node_modules/@carbon/ibm-products/es/node_modules/prop-types/index.js +34 -0
- package/lib/node_modules/@carbon/ibm-products/es/node_modules/prop-types/lib/ReactPropTypesSecret.js +20 -0
- package/lib/node_modules/@carbon/ibm-products/es/node_modules/prop-types/lib/has.js +19 -0
- package/lib/node_modules/@carbon/ibm-products/es/settings.js +86 -0
- package/package.json +4 -3
- package/scss/styles/_header.scss +7 -0
- package/scss/styles/_profile.scss +63 -0
- package/scss/ui-shell.scss +1 -0
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 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
|
+
*/
|
|
7
|
+
|
|
8
|
+
import pkg$1 from './global/js/package-settings.js';
|
|
9
|
+
import React from 'react';
|
|
10
|
+
import pconsole from './global/js/utils/pconsole.js';
|
|
11
|
+
import { Canary } from './components/_Canary/Canary.js';
|
|
12
|
+
|
|
13
|
+
const componentDeprecatedWarning = (name, details) => `Carbon for IBM Products (WARNING): Component "${name}" is deprecated. ${details}`;
|
|
14
|
+
pkg$1.logDeprecated = (component, name) => {
|
|
15
|
+
if (component?.deprecated) {
|
|
16
|
+
const {
|
|
17
|
+
level,
|
|
18
|
+
details
|
|
19
|
+
} = component.deprecated;
|
|
20
|
+
const logUsing = pconsole?.[level] ?? pconsole.error;
|
|
21
|
+
logUsing(componentDeprecatedWarning(name || component.displayName, details));
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
// Check that a component is enabled. This function returns a stub which checks
|
|
26
|
+
// the component status on first use and then renders as the component or as
|
|
27
|
+
// a Canary placeholder initialized with the name of the replaced component.
|
|
28
|
+
// Note that the returned stub carries any other properties which had already
|
|
29
|
+
// been assigned (eg propTypes, displayName, etc).
|
|
30
|
+
pkg$1.checkComponentEnabled = (component, name) => {
|
|
31
|
+
if (component.render) {
|
|
32
|
+
// The component is a forward-ref, so make a stub forward-ref.
|
|
33
|
+
const forward = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
34
|
+
pkg$1.logDeprecated(component, name); // may log don't care about result
|
|
35
|
+
// Replace the stub's render fn so this test only happens once.
|
|
36
|
+
return (forward.render = pkg$1.isComponentEnabled(name) || !pkg$1.isComponentPublic(name) ?
|
|
37
|
+
// If the component is enabled, or if it's not a public component,
|
|
38
|
+
// replace the stub's render fn with the component's render fn.
|
|
39
|
+
component.render :
|
|
40
|
+
// Note that Canary is a direct render fn (not a forward-ref) and
|
|
41
|
+
// will ignore the passed props and ref (if any)
|
|
42
|
+
Canary.bind(undefined, {
|
|
43
|
+
componentName: name
|
|
44
|
+
}))(
|
|
45
|
+
// Call it now (after this it will be directly called).
|
|
46
|
+
props, ref);
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
// Transfer object properties already assigned (eg propTypes, displayName)
|
|
50
|
+
// then merge in the stub forward-ref which checks the component status
|
|
51
|
+
// when first used.
|
|
52
|
+
// NOTE: React 18 = displayName not iterable on render function
|
|
53
|
+
return Object.assign({}, component, {
|
|
54
|
+
displayName: component.displayName
|
|
55
|
+
}, forward);
|
|
56
|
+
} else {
|
|
57
|
+
// The component is a direct render fn, so make a stub render fn.
|
|
58
|
+
let render = props => {
|
|
59
|
+
pkg$1.logDeprecated(component, name); // may log don't care about result
|
|
60
|
+
// Replace the stub render fn so this test only happens once.
|
|
61
|
+
return (render = pkg$1.isComponentEnabled(name) || !pkg$1.isComponentPublic(name) ?
|
|
62
|
+
// If the component is enabled, or if it's not a public component,
|
|
63
|
+
// replace the stub render fn with the component render fn.
|
|
64
|
+
component :
|
|
65
|
+
// Replace the stub render fn with the Canary render fn, which will
|
|
66
|
+
// ignore the passed props.
|
|
67
|
+
Canary.bind(undefined, {
|
|
68
|
+
componentName: name
|
|
69
|
+
}))(
|
|
70
|
+
// Call it now (after this it will be directly called).
|
|
71
|
+
props);
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
// Transfer object properties already assigned (eg propTypes, displayName)
|
|
75
|
+
// to a function which calls the stub render fn which checks the component
|
|
76
|
+
// status when first used.
|
|
77
|
+
return Object.assign(props => render(props), component, {
|
|
78
|
+
displayName: component.displayName
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
const pkg = pkg$1;
|
|
83
|
+
|
|
84
|
+
export { pkg };
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*
|
|
4
|
+
* Copyright IBM Corp. 2025
|
|
5
|
+
*
|
|
6
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
7
|
+
* LICENSE file in the root directory of this source tree.
|
|
8
|
+
*/
|
|
9
|
+
import React from 'react';
|
|
10
|
+
interface ProfileProps {
|
|
11
|
+
/**
|
|
12
|
+
* Provide an optional class to be applied to the containing node
|
|
13
|
+
*/
|
|
14
|
+
className?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Custom children to be rendered within the popover of the Profile menu
|
|
17
|
+
*/
|
|
18
|
+
children?: React.ReactNode;
|
|
19
|
+
/**
|
|
20
|
+
* Provide the Profile's label
|
|
21
|
+
*/
|
|
22
|
+
label?: string;
|
|
23
|
+
/**
|
|
24
|
+
* Provide an optional icon to render in Profile.
|
|
25
|
+
*/
|
|
26
|
+
renderIcon?: React.ReactNode;
|
|
27
|
+
}
|
|
28
|
+
declare const Profile: React.ForwardRefExoticComponent<ProfileProps & React.RefAttributes<HTMLDivElement>>;
|
|
29
|
+
interface ProfileUserInfoProps {
|
|
30
|
+
/**
|
|
31
|
+
* Provide an optional class to be applied to the containing node
|
|
32
|
+
*/
|
|
33
|
+
className?: string;
|
|
34
|
+
/**
|
|
35
|
+
* Provide the user's email
|
|
36
|
+
*/
|
|
37
|
+
email?: string;
|
|
38
|
+
/**
|
|
39
|
+
* 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.
|
|
40
|
+
*/
|
|
41
|
+
name: string;
|
|
42
|
+
}
|
|
43
|
+
declare const ProfileUserInfo: React.ForwardRefExoticComponent<ProfileUserInfoProps & React.RefAttributes<HTMLDivElement>>;
|
|
44
|
+
interface ProfileReadOnlyItem {
|
|
45
|
+
label: string;
|
|
46
|
+
title: string;
|
|
47
|
+
}
|
|
48
|
+
interface ProfileReadOnlyProps {
|
|
49
|
+
/**
|
|
50
|
+
* Provide an optional class to be applied to the containing node
|
|
51
|
+
*/
|
|
52
|
+
className?: string;
|
|
53
|
+
/**
|
|
54
|
+
* List of read-only profile items
|
|
55
|
+
*/
|
|
56
|
+
items?: ProfileReadOnlyItem[];
|
|
57
|
+
}
|
|
58
|
+
declare const ProfileReadOnly: React.ForwardRefExoticComponent<ProfileReadOnlyProps & React.RefAttributes<HTMLDivElement>>;
|
|
59
|
+
/**
|
|
60
|
+
* -------
|
|
61
|
+
* Exports
|
|
62
|
+
* -------
|
|
63
|
+
*/
|
|
64
|
+
declare const Root: React.ForwardRefExoticComponent<ProfileProps & React.RefAttributes<HTMLDivElement>>;
|
|
65
|
+
declare const UserInfo: React.ForwardRefExoticComponent<ProfileUserInfoProps & React.RefAttributes<HTMLDivElement>>;
|
|
66
|
+
declare const ReadOnly: React.ForwardRefExoticComponent<ProfileReadOnlyProps & React.RefAttributes<HTMLDivElement>>;
|
|
67
|
+
export { Profile, ProfileUserInfo, ProfileReadOnly, Root, UserInfo, ReadOnly, };
|
|
68
|
+
export type { ProfileProps, ProfileUserInfoProps };
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 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
|
+
*/
|
|
7
|
+
|
|
8
|
+
'use strict';
|
|
9
|
+
|
|
10
|
+
var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
|
|
11
|
+
var index = require('../_virtual/index.js');
|
|
12
|
+
var PropTypes = require('prop-types');
|
|
13
|
+
var React = require('react');
|
|
14
|
+
var usePrefix = require('../internal/usePrefix.js');
|
|
15
|
+
var HeaderPopover = require('./HeaderPopover.js');
|
|
16
|
+
var UserAvatar = require('../node_modules/@carbon/ibm-products/es/components/UserAvatar/UserAvatar.js');
|
|
17
|
+
|
|
18
|
+
const Profile = /*#__PURE__*/React.forwardRef(function Profile(_ref) {
|
|
19
|
+
let {
|
|
20
|
+
className: customClassName,
|
|
21
|
+
label,
|
|
22
|
+
children,
|
|
23
|
+
renderIcon: IconElement
|
|
24
|
+
} = _ref;
|
|
25
|
+
const prefix = usePrefix.usePrefix();
|
|
26
|
+
const className = index.default({
|
|
27
|
+
[`${prefix}-profile`]: true,
|
|
28
|
+
[customClassName]: !!customClassName
|
|
29
|
+
});
|
|
30
|
+
return /*#__PURE__*/React.createElement(HeaderPopover.HeaderPopover, {
|
|
31
|
+
align: "bottom-right",
|
|
32
|
+
className: className
|
|
33
|
+
}, /*#__PURE__*/React.createElement(HeaderPopover.HeaderPopoverButton, {
|
|
34
|
+
align: "bottom",
|
|
35
|
+
label: label
|
|
36
|
+
}, IconElement), /*#__PURE__*/React.createElement(HeaderPopover.HeaderPopoverContent, null, children));
|
|
37
|
+
});
|
|
38
|
+
Profile.displayName = 'Profile';
|
|
39
|
+
Profile.propTypes = {
|
|
40
|
+
/**
|
|
41
|
+
* Custom children to be rendered within the popover of the Profile menu
|
|
42
|
+
*/
|
|
43
|
+
children: PropTypes.any,
|
|
44
|
+
/**
|
|
45
|
+
* Provide an optional class to be applied to the containing node
|
|
46
|
+
*/
|
|
47
|
+
className: PropTypes.string,
|
|
48
|
+
/**
|
|
49
|
+
* Provide the Profile's label
|
|
50
|
+
*/
|
|
51
|
+
label: PropTypes.string,
|
|
52
|
+
/**
|
|
53
|
+
* Provide an optional icon to render in Profile.
|
|
54
|
+
*/
|
|
55
|
+
// @ts-expect-error - PropTypes are unable to cover this case.
|
|
56
|
+
renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
|
|
57
|
+
};
|
|
58
|
+
const ProfileUserInfo = /*#__PURE__*/React.forwardRef(function ProfileUserInfo(_ref2) {
|
|
59
|
+
let {
|
|
60
|
+
className: customClassName,
|
|
61
|
+
name,
|
|
62
|
+
email,
|
|
63
|
+
...rest
|
|
64
|
+
} = _ref2;
|
|
65
|
+
const prefix = usePrefix.usePrefix();
|
|
66
|
+
const className = index.default({
|
|
67
|
+
[`${prefix}--profile-user-info`]: true,
|
|
68
|
+
[customClassName]: !!customClassName
|
|
69
|
+
});
|
|
70
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
71
|
+
className: className
|
|
72
|
+
}, /*#__PURE__*/React.createElement(UserAvatar.UserAvatar, _rollupPluginBabelHelpers.extends({
|
|
73
|
+
size: "lg",
|
|
74
|
+
name: name
|
|
75
|
+
}, rest)), /*#__PURE__*/React.createElement("div", {
|
|
76
|
+
className: `${prefix}--profile-user-info__text-wrapper`
|
|
77
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
78
|
+
className: `${prefix}--profile-user-info__name`
|
|
79
|
+
}, name), /*#__PURE__*/React.createElement("div", {
|
|
80
|
+
className: `${prefix}--profile-user-info__email`
|
|
81
|
+
}, email)));
|
|
82
|
+
});
|
|
83
|
+
ProfileUserInfo.displayName = 'ProfileUserInfo';
|
|
84
|
+
ProfileUserInfo.propTypes = {
|
|
85
|
+
/**
|
|
86
|
+
* Provide an optional class to be applied to the containing node
|
|
87
|
+
*/
|
|
88
|
+
className: PropTypes.string,
|
|
89
|
+
/**
|
|
90
|
+
* Provide the user's email
|
|
91
|
+
*/
|
|
92
|
+
email: PropTypes.string,
|
|
93
|
+
/**
|
|
94
|
+
* 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.
|
|
95
|
+
*/
|
|
96
|
+
name: PropTypes.string.isRequired
|
|
97
|
+
};
|
|
98
|
+
const ProfileReadOnly = /*#__PURE__*/React.forwardRef(function ProfileReadOnly(_ref3) {
|
|
99
|
+
let {
|
|
100
|
+
className: customClassName,
|
|
101
|
+
items
|
|
102
|
+
} = _ref3;
|
|
103
|
+
const prefix = usePrefix.usePrefix();
|
|
104
|
+
const className = index.default({
|
|
105
|
+
[`${prefix}--profile-read-only`]: true,
|
|
106
|
+
[customClassName]: !!customClassName
|
|
107
|
+
});
|
|
108
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
109
|
+
className: className
|
|
110
|
+
}, items?.map((item, index) => /*#__PURE__*/React.createElement("div", {
|
|
111
|
+
className: `${prefix}--profile-read-only__items`,
|
|
112
|
+
key: index
|
|
113
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
114
|
+
className: `${prefix}--profile-read-only__label`
|
|
115
|
+
}, item.label), /*#__PURE__*/React.createElement("div", {
|
|
116
|
+
className: `${prefix}--profile-read-only__title`
|
|
117
|
+
}, item.title))));
|
|
118
|
+
});
|
|
119
|
+
ProfileReadOnly.displayName = 'ProfileReadOnly';
|
|
120
|
+
ProfileReadOnly.propTypes = {
|
|
121
|
+
/**
|
|
122
|
+
* Provide an optional class to be applied to the containing node
|
|
123
|
+
*/
|
|
124
|
+
className: PropTypes.string,
|
|
125
|
+
/**
|
|
126
|
+
* List of read-only profile items
|
|
127
|
+
*/
|
|
128
|
+
items: PropTypes.array
|
|
129
|
+
};
|
|
130
|
+
|
|
131
|
+
/**
|
|
132
|
+
* -------
|
|
133
|
+
* Exports
|
|
134
|
+
* -------
|
|
135
|
+
*/
|
|
136
|
+
const Root = Profile;
|
|
137
|
+
Root.displayName = 'Profile.Root';
|
|
138
|
+
const UserInfo = ProfileUserInfo;
|
|
139
|
+
UserInfo.displayName = 'ProfileUserInfo';
|
|
140
|
+
const ReadOnly = ProfileReadOnly;
|
|
141
|
+
ReadOnly.displayName = 'ProfileReadOnly';
|
|
142
|
+
|
|
143
|
+
exports.Profile = Profile;
|
|
144
|
+
exports.ProfileReadOnly = ProfileReadOnly;
|
|
145
|
+
exports.ProfileUserInfo = ProfileUserInfo;
|
|
146
|
+
exports.ReadOnly = ReadOnly;
|
|
147
|
+
exports.Root = Root;
|
|
148
|
+
exports.UserInfo = UserInfo;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Copyright IBM Corp. 2016,
|
|
2
|
+
* Copyright IBM Corp. 2016, 2025
|
|
3
3
|
*
|
|
4
4
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -62,7 +62,7 @@ interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
|
|
|
62
62
|
/**
|
|
63
63
|
* Specify the size of the Button. Defaults to `md`.
|
|
64
64
|
*/
|
|
65
|
-
size?: ButtonSize
|
|
65
|
+
size?: Extract<ButtonSize, 'sm' | 'md' | 'lg'>;
|
|
66
66
|
/**
|
|
67
67
|
* Specify an optional className to be added to your Tooltip wrapper
|
|
68
68
|
*/
|
package/lib/index.d.ts
CHANGED
|
@@ -6,16 +6,17 @@
|
|
|
6
6
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
7
7
|
* LICENSE file in the root directory of this source tree.
|
|
8
8
|
*/
|
|
9
|
-
export { SideNav, SIDE_NAV_TYPE } from './components/SideNav
|
|
10
|
-
export { SideNavItems } from './components/SideNavItems
|
|
11
|
-
export { SideNavLink } from './components/SideNavLink
|
|
12
|
-
export { SideNavLinkPopover } from './components/SideNavLinkPopover
|
|
13
|
-
export { SideNavMenu } from './components/SideNavMenu
|
|
14
|
-
export { SideNavMenuItem } from './components/SideNavMenuItem
|
|
9
|
+
export { SideNav, SIDE_NAV_TYPE } from './components/SideNav';
|
|
10
|
+
export { SideNavItems } from './components/SideNavItems';
|
|
11
|
+
export { SideNavLink } from './components/SideNavLink';
|
|
12
|
+
export { SideNavLinkPopover } from './components/SideNavLinkPopover';
|
|
13
|
+
export { SideNavMenu } from './components/SideNavMenu';
|
|
14
|
+
export { SideNavMenuItem } from './components/SideNavMenuItem';
|
|
15
15
|
export { HeaderContainer } from './components/HeaderContainer';
|
|
16
16
|
export { HeaderPopover, HeaderPopoverActions, HeaderPopoverButton, HeaderPopoverContent, } from './components/HeaderPopover';
|
|
17
17
|
export { HeaderPanel } from './components/HeaderPanel';
|
|
18
18
|
export { SharkFinIcon } from './components/SharkFinIcon';
|
|
19
19
|
export { HeaderDivider } from './components/HeaderDivider';
|
|
20
20
|
export { TrialCountdown } from './components/TrialCountdown';
|
|
21
|
+
export * as Profile from './components/Profile';
|
|
21
22
|
export { SideNavSlot } from './components/SideNavSlot';
|
package/lib/index.js
CHANGED
|
@@ -19,6 +19,7 @@ var HeaderPanel = require('./components/HeaderPanel.js');
|
|
|
19
19
|
var SharkFinIcon = require('./components/SharkFinIcon.js');
|
|
20
20
|
var HeaderDivider = require('./components/HeaderDivider.js');
|
|
21
21
|
var TrialCountdown = require('./components/TrialCountdown.js');
|
|
22
|
+
var Profile = require('./components/Profile.js');
|
|
22
23
|
var SideNavSlot = require('./components/SideNavSlot.js');
|
|
23
24
|
|
|
24
25
|
|
|
@@ -39,4 +40,5 @@ exports.HeaderPanel = HeaderPanel.HeaderPanel;
|
|
|
39
40
|
exports.SharkFinIcon = SharkFinIcon.SharkFinIcon;
|
|
40
41
|
exports.HeaderDivider = HeaderDivider.HeaderDivider;
|
|
41
42
|
exports.TrialCountdown = TrialCountdown.TrialCountdown;
|
|
43
|
+
exports.Profile = Profile;
|
|
42
44
|
exports.SideNavSlot = SideNavSlot.SideNavSlot;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 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
|
+
*/
|
|
7
|
+
|
|
8
|
+
'use strict';
|
|
9
|
+
|
|
10
|
+
function getDefaultExportFromCjs(x) {
|
|
11
|
+
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 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
|
+
*/
|
|
7
|
+
|
|
8
|
+
'use strict';
|
|
9
|
+
|
|
10
|
+
function _extends() {
|
|
11
|
+
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
12
|
+
for (var e = 1; e < arguments.length; e++) {
|
|
13
|
+
var t = arguments[e];
|
|
14
|
+
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
15
|
+
}
|
|
16
|
+
return n;
|
|
17
|
+
}, _extends.apply(null, arguments);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
exports.extends = _extends;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 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
|
+
*/
|
|
7
|
+
|
|
8
|
+
'use strict';
|
|
9
|
+
|
|
10
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
|
+
|
|
12
|
+
var _commonjsHelpers = require('./_commonjsHelpers.js');
|
|
13
|
+
var index = require('../node_modules/prop-types/index.js');
|
|
14
|
+
|
|
15
|
+
var propTypesExports = /*@__PURE__*/index.__require();
|
|
16
|
+
var PropTypes = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(propTypesExports);
|
|
17
|
+
|
|
18
|
+
exports.default = PropTypes;
|
|
19
|
+
exports.p = propTypesExports;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 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
|
+
*/
|
|
7
|
+
|
|
8
|
+
'use strict';
|
|
9
|
+
|
|
10
|
+
var propTypes = {
|
|
11
|
+
exports: {}
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
exports.__module = propTypes;
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 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
|
+
*/
|
|
7
|
+
|
|
8
|
+
'use strict';
|
|
9
|
+
|
|
10
|
+
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
|
|
11
|
+
var React = require('react');
|
|
12
|
+
var index$1 = require('../../_virtual/index.js');
|
|
13
|
+
var index = require('../../../../../../_virtual/index.js');
|
|
14
|
+
var settings = require('../../settings.js');
|
|
15
|
+
|
|
16
|
+
// The block part of our conventional BEM class names (blockClass__E--M).
|
|
17
|
+
const blockClass = `${settings.pkg.prefix}--tooltip-trigger`;
|
|
18
|
+
const componentName = 'TooltipTrigger';
|
|
19
|
+
|
|
20
|
+
// NOTE: the component SCSS is not imported here: it is rolled up separately.
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* This is an tooltip trigger as Carbon Tooltip requires an active element to work but provides
|
|
24
|
+
* no blanked button.
|
|
25
|
+
*/
|
|
26
|
+
exports.TooltipTrigger = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
27
|
+
let {
|
|
28
|
+
children,
|
|
29
|
+
className,
|
|
30
|
+
// Collect any other property values passed in.
|
|
31
|
+
...rest
|
|
32
|
+
} = _ref;
|
|
33
|
+
return /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({
|
|
34
|
+
type: "button",
|
|
35
|
+
ref: ref
|
|
36
|
+
}, rest, {
|
|
37
|
+
className: index.default(blockClass,
|
|
38
|
+
// Apply the block class to the main HTML element
|
|
39
|
+
className // Apply any supplied class names to the main HTML element.
|
|
40
|
+
)
|
|
41
|
+
}), children);
|
|
42
|
+
});
|
|
43
|
+
|
|
44
|
+
// Return a placeholder if not released and not enabled by feature flag.
|
|
45
|
+
exports.TooltipTrigger = settings.pkg.checkComponentEnabled(exports.TooltipTrigger, componentName);
|
|
46
|
+
|
|
47
|
+
// The display name of the component, used by React. Note that displayName
|
|
48
|
+
// is used in preference to relying on function.name.
|
|
49
|
+
exports.TooltipTrigger.displayName = componentName;
|
|
50
|
+
|
|
51
|
+
// The types and DocGen commentary for the component props,
|
|
52
|
+
// in alphabetical order (for consistency).
|
|
53
|
+
// See https://www.npmjs.com/package/prop-types#usage.
|
|
54
|
+
exports.TooltipTrigger.propTypes = {
|
|
55
|
+
/**
|
|
56
|
+
* Child content of tooltip trigger
|
|
57
|
+
*/
|
|
58
|
+
children: index$1.default.node,
|
|
59
|
+
/**
|
|
60
|
+
* Provide an optional class to be applied to the containing node.
|
|
61
|
+
*/
|
|
62
|
+
className: index$1.default.string
|
|
63
|
+
};
|
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 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
|
+
*/
|
|
7
|
+
|
|
8
|
+
'use strict';
|
|
9
|
+
|
|
10
|
+
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
|
|
11
|
+
var React = require('react');
|
|
12
|
+
var index = require('../../_virtual/index.js');
|
|
13
|
+
var index$1 = require('../../../../../../_virtual/index.js');
|
|
14
|
+
var devtools = require('../../global/js/utils/devtools.js');
|
|
15
|
+
var settings = require('../../settings.js');
|
|
16
|
+
var react = require('@carbon/react');
|
|
17
|
+
var icons = require('@carbon/react/icons');
|
|
18
|
+
require('../../global/js/utils/props-helper.js');
|
|
19
|
+
var TooltipTrigger = require('../TooltipTrigger/TooltipTrigger.js');
|
|
20
|
+
|
|
21
|
+
// Carbon and package components we use.
|
|
22
|
+
/* TODO: @import(s) of carbon components and other package components. */
|
|
23
|
+
|
|
24
|
+
// The block part of our conventional BEM class names (blockClass__E--M).
|
|
25
|
+
const blockClass = `${settings.pkg.prefix}--user-avatar`;
|
|
26
|
+
const componentName = 'UserAvatar';
|
|
27
|
+
|
|
28
|
+
// NOTE: the component SCSS is not imported here: it is rolled up separately.
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* TODO: A description of the component.
|
|
32
|
+
*/
|
|
33
|
+
|
|
34
|
+
exports.UserAvatar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
35
|
+
let {
|
|
36
|
+
// The component props, in alphabetical order (for consistency).
|
|
37
|
+
backgroundColor = 'order-1-cyan',
|
|
38
|
+
className,
|
|
39
|
+
image,
|
|
40
|
+
imageDescription,
|
|
41
|
+
name,
|
|
42
|
+
/* TODO: add other props for UserAvatar, with default values if needed */
|
|
43
|
+
renderIcon: RenderIcon,
|
|
44
|
+
size = 'md',
|
|
45
|
+
tooltipText,
|
|
46
|
+
tooltipAlignment = 'bottom',
|
|
47
|
+
// Collect any other property values passed in.
|
|
48
|
+
...rest
|
|
49
|
+
} = _ref;
|
|
50
|
+
const carbonPrefix = react.usePrefix();
|
|
51
|
+
const iconSize = {
|
|
52
|
+
sm: 16,
|
|
53
|
+
md: 20,
|
|
54
|
+
lg: 24,
|
|
55
|
+
xl: 32
|
|
56
|
+
};
|
|
57
|
+
const formatInitials = () => {
|
|
58
|
+
const parts = name?.split(' ') || [];
|
|
59
|
+
const firstChar = parts[0].charAt(0).toUpperCase();
|
|
60
|
+
const secondChar = parts[0].charAt(1).toUpperCase();
|
|
61
|
+
if (parts.length === 1) {
|
|
62
|
+
return firstChar + secondChar;
|
|
63
|
+
}
|
|
64
|
+
const lastChar = parts[parts.length - 1].charAt(0).toUpperCase();
|
|
65
|
+
const initials = [firstChar];
|
|
66
|
+
if (lastChar) {
|
|
67
|
+
initials.push(lastChar);
|
|
68
|
+
}
|
|
69
|
+
return ''.concat(...initials);
|
|
70
|
+
};
|
|
71
|
+
const getItem = () => {
|
|
72
|
+
const iconProps = {
|
|
73
|
+
size: iconSize[size]
|
|
74
|
+
};
|
|
75
|
+
if (image) {
|
|
76
|
+
return /*#__PURE__*/React.createElement("img", {
|
|
77
|
+
alt: imageDescription,
|
|
78
|
+
src: image,
|
|
79
|
+
className: `${blockClass}__photo ${blockClass}__photo--${size}`
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
if (RenderIcon) {
|
|
83
|
+
return /*#__PURE__*/React.createElement(RenderIcon, iconProps);
|
|
84
|
+
}
|
|
85
|
+
if (name) {
|
|
86
|
+
return formatInitials();
|
|
87
|
+
}
|
|
88
|
+
return /*#__PURE__*/React.createElement(icons.User, iconProps);
|
|
89
|
+
};
|
|
90
|
+
const Avatar = () => /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
|
|
91
|
+
className: index$1.default(blockClass,
|
|
92
|
+
// Apply the block class to the main HTML element
|
|
93
|
+
className,
|
|
94
|
+
// Apply any supplied class names to the main HTML element.
|
|
95
|
+
`${blockClass}--${backgroundColor}`, `${blockClass}--${size}`,
|
|
96
|
+
// example: `${blockClass}__template-string-class-${kind}-n-${size}`,
|
|
97
|
+
{
|
|
98
|
+
// switched classes dependant on props or state
|
|
99
|
+
// example: [`${blockClass}__here-if-small`]: size === 'sm',
|
|
100
|
+
}),
|
|
101
|
+
ref: ref
|
|
102
|
+
}, devtools.getDevtoolsProps(componentName)), getItem());
|
|
103
|
+
if (tooltipText) {
|
|
104
|
+
return /*#__PURE__*/React.createElement(react.Tooltip, {
|
|
105
|
+
align: tooltipAlignment,
|
|
106
|
+
label: tooltipText,
|
|
107
|
+
className: `${blockClass}__tooltip ${carbonPrefix}--icon-tooltip`
|
|
108
|
+
}, /*#__PURE__*/React.createElement(TooltipTrigger.TooltipTrigger, null, /*#__PURE__*/React.createElement(Avatar, null)));
|
|
109
|
+
}
|
|
110
|
+
return /*#__PURE__*/React.createElement(Avatar, null);
|
|
111
|
+
});
|
|
112
|
+
|
|
113
|
+
// Return a placeholder if not released and not enabled by feature flag
|
|
114
|
+
exports.UserAvatar = settings.pkg.checkComponentEnabled(exports.UserAvatar, componentName);
|
|
115
|
+
|
|
116
|
+
// The display name of the component, used by React. Note that displayName
|
|
117
|
+
// is used in preference to relying on function.name.
|
|
118
|
+
exports.UserAvatar.displayName = componentName;
|
|
119
|
+
|
|
120
|
+
// The types and DocGen commentary for the component props,
|
|
121
|
+
// in alphabetical order (for consistency).
|
|
122
|
+
// See https://www.npmjs.com/package/prop-types#usage.
|
|
123
|
+
exports.UserAvatar.propTypes = {
|
|
124
|
+
/**
|
|
125
|
+
* Provide the background color need to be set for UserAvatar. Background color will be set based on lighter or darker theme.
|
|
126
|
+
* For example: if you select order-5-purple, it will take $purple-60 for lighter theme and $purple-50 for darker theme.
|
|
127
|
+
*/
|
|
128
|
+
backgroundColor: index.default.oneOf(['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']),
|
|
129
|
+
/**
|
|
130
|
+
* Provide an optional class to be applied to the containing node.
|
|
131
|
+
*/
|
|
132
|
+
className: index.default.string,
|
|
133
|
+
/**
|
|
134
|
+
* When passing the image prop, supply a full path to the image to be displayed.
|
|
135
|
+
*/
|
|
136
|
+
/**@ts-ignore */
|
|
137
|
+
image: index.default.string,
|
|
138
|
+
/**
|
|
139
|
+
* When passing the image prop use the imageDescription prop to describe the image for screen reader.
|
|
140
|
+
*/
|
|
141
|
+
/**@ts-ignore */
|
|
142
|
+
imageDescription: index.default.string.isRequired.if(_ref2 => {
|
|
143
|
+
let {
|
|
144
|
+
image
|
|
145
|
+
} = _ref2;
|
|
146
|
+
return !!image;
|
|
147
|
+
}),
|
|
148
|
+
/**
|
|
149
|
+
* 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.
|
|
150
|
+
*/
|
|
151
|
+
name: index.default.string,
|
|
152
|
+
/**
|
|
153
|
+
* Provide a custom icon to use if you need to use an icon other than the default one
|
|
154
|
+
*/
|
|
155
|
+
/**@ts-ignore */
|
|
156
|
+
renderIcon: index.default.oneOfType([index.default.func, index.default.object, index.default.string]),
|
|
157
|
+
/**
|
|
158
|
+
* Set the size of the avatar circle
|
|
159
|
+
*/
|
|
160
|
+
size: index.default.oneOf(['xl', 'lg', 'md', 'sm']),
|
|
161
|
+
/**
|
|
162
|
+
* Specify how the trigger should align with the tooltip
|
|
163
|
+
*/
|
|
164
|
+
tooltipAlignment: index.default.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
|
|
165
|
+
/**
|
|
166
|
+
* Pass in the display name to have it shown on hover
|
|
167
|
+
*/
|
|
168
|
+
tooltipText: index.default.string
|
|
169
|
+
/* TODO: add types and DocGen for all props. */
|
|
170
|
+
};
|