@carbon-labs/react-ui-shell 0.49.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.
Files changed (53) hide show
  1. package/README.md +1 -0
  2. package/es/components/Profile.d.ts +68 -0
  3. package/es/components/Profile.js +141 -0
  4. package/es/components/SideNavLinkPopover.d.ts +2 -2
  5. package/es/index.d.ts +7 -6
  6. package/es/index.js +2 -0
  7. package/es/node_modules/@carbon/ibm-products/es/_virtual/_commonjsHelpers.js +12 -0
  8. package/es/node_modules/@carbon/ibm-products/es/_virtual/_rollupPluginBabelHelpers.js +18 -0
  9. package/es/node_modules/@carbon/ibm-products/es/_virtual/index.js +14 -0
  10. package/es/node_modules/@carbon/ibm-products/es/_virtual/index2.js +12 -0
  11. package/es/node_modules/@carbon/ibm-products/es/components/TooltipTrigger/TooltipTrigger.js +63 -0
  12. package/es/node_modules/@carbon/ibm-products/es/components/UserAvatar/UserAvatar.js +170 -0
  13. package/es/node_modules/@carbon/ibm-products/es/components/_Canary/Canary.js +49 -0
  14. package/es/node_modules/@carbon/ibm-products/es/global/js/package-settings.js +245 -0
  15. package/es/node_modules/@carbon/ibm-products/es/global/js/utils/devtools.js +16 -0
  16. package/es/node_modules/@carbon/ibm-products/es/global/js/utils/pconsole.js +35 -0
  17. package/es/node_modules/@carbon/ibm-products/es/global/js/utils/props-helper.js +46 -0
  18. package/es/node_modules/@carbon/ibm-products/es/node_modules/object-assign/index.js +89 -0
  19. package/es/node_modules/@carbon/ibm-products/es/node_modules/prop-types/checkPropTypes.js +95 -0
  20. package/es/node_modules/@carbon/ibm-products/es/node_modules/prop-types/factoryWithThrowingShims.js +64 -0
  21. package/es/node_modules/@carbon/ibm-products/es/node_modules/prop-types/factoryWithTypeCheckers.js +561 -0
  22. package/es/node_modules/@carbon/ibm-products/es/node_modules/prop-types/index.js +32 -0
  23. package/es/node_modules/@carbon/ibm-products/es/node_modules/prop-types/lib/ReactPropTypesSecret.js +18 -0
  24. package/es/node_modules/@carbon/ibm-products/es/node_modules/prop-types/lib/has.js +17 -0
  25. package/es/node_modules/@carbon/ibm-products/es/settings.js +84 -0
  26. package/lib/components/Profile.d.ts +68 -0
  27. package/lib/components/Profile.js +148 -0
  28. package/lib/components/SideNavLinkPopover.d.ts +2 -2
  29. package/lib/index.d.ts +7 -6
  30. package/lib/index.js +2 -0
  31. package/lib/node_modules/@carbon/ibm-products/es/_virtual/_commonjsHelpers.js +14 -0
  32. package/lib/node_modules/@carbon/ibm-products/es/_virtual/_rollupPluginBabelHelpers.js +20 -0
  33. package/lib/node_modules/@carbon/ibm-products/es/_virtual/index.js +19 -0
  34. package/lib/node_modules/@carbon/ibm-products/es/_virtual/index2.js +14 -0
  35. package/lib/node_modules/@carbon/ibm-products/es/components/TooltipTrigger/TooltipTrigger.js +63 -0
  36. package/lib/node_modules/@carbon/ibm-products/es/components/UserAvatar/UserAvatar.js +170 -0
  37. package/lib/node_modules/@carbon/ibm-products/es/components/_Canary/Canary.js +51 -0
  38. package/lib/node_modules/@carbon/ibm-products/es/global/js/package-settings.js +251 -0
  39. package/lib/node_modules/@carbon/ibm-products/es/global/js/utils/devtools.js +20 -0
  40. package/lib/node_modules/@carbon/ibm-products/es/global/js/utils/pconsole.js +45 -0
  41. package/lib/node_modules/@carbon/ibm-products/es/global/js/utils/props-helper.js +48 -0
  42. package/lib/node_modules/@carbon/ibm-products/es/node_modules/object-assign/index.js +91 -0
  43. package/lib/node_modules/@carbon/ibm-products/es/node_modules/prop-types/checkPropTypes.js +97 -0
  44. package/lib/node_modules/@carbon/ibm-products/es/node_modules/prop-types/factoryWithThrowingShims.js +66 -0
  45. package/lib/node_modules/@carbon/ibm-products/es/node_modules/prop-types/factoryWithTypeCheckers.js +563 -0
  46. package/lib/node_modules/@carbon/ibm-products/es/node_modules/prop-types/index.js +34 -0
  47. package/lib/node_modules/@carbon/ibm-products/es/node_modules/prop-types/lib/ReactPropTypesSecret.js +20 -0
  48. package/lib/node_modules/@carbon/ibm-products/es/node_modules/prop-types/lib/has.js +19 -0
  49. package/lib/node_modules/@carbon/ibm-products/es/settings.js +86 -0
  50. package/package.json +4 -3
  51. package/scss/styles/_header.scss +7 -0
  52. package/scss/styles/_profile.scss +63 -0
  53. 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, 2023
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.js';
10
- export { SideNavItems } from './components/SideNavItems.js';
11
- export { SideNavLink } from './components/SideNavLink.js';
12
- export { SideNavLinkPopover } from './components/SideNavLinkPopover.js';
13
- export { SideNavMenu } from './components/SideNavMenu.js';
14
- export { SideNavMenuItem } from './components/SideNavMenuItem.js';
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
+ };