@carbon-labs/react-ui-shell 0.50.0 → 0.52.0

package/README.md

@@ -35,6 +35,7 @@ components are provided by `@carbon-labs/react-ui-shell`:
 - `HeaderPopoverActions`
 - `HeaderPopoverButton`
 - `HeaderPopoverContent`
+- `Profile`
 - `SideNav`
 - `SideNavItems`
 - `SideNavLink`

package/es/components/Profile.d.ts

@@ -0,0 +1,68 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+interface ProfileProps {
+    /**
+     * Provide an optional class to be applied to the containing node
+     */
+    className?: string;
+    /**
+     * Custom children to be rendered within the popover of the Profile menu
+     */
+    children?: React.ReactNode;
+    /**
+     * Provide the Profile's label
+     */
+    label?: string;
+    /**
+     * Provide an optional icon to render in Profile.
+     */
+    renderIcon?: React.ReactNode;
+}
+declare const Profile: React.ForwardRefExoticComponent<ProfileProps & React.RefAttributes<HTMLDivElement>>;
+interface ProfileUserInfoProps {
+    /**
+     * Provide an optional class to be applied to the containing node
+     */
+    className?: string;
+    /**
+     * Provide the user's email
+     */
+    email?: string;
+    /**
+     * 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.
+     */
+    name: string;
+}
+declare const ProfileUserInfo: React.ForwardRefExoticComponent<ProfileUserInfoProps & React.RefAttributes<HTMLDivElement>>;
+interface ProfileReadOnlyItem {
+    label: string;
+    title: string;
+}
+interface ProfileReadOnlyProps {
+    /**
+     * Provide an optional class to be applied to the containing node
+     */
+    className?: string;
+    /**
+     * List of read-only profile items
+     */
+    items?: ProfileReadOnlyItem[];
+}
+declare const ProfileReadOnly: React.ForwardRefExoticComponent<ProfileReadOnlyProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * -------
+ * Exports
+ * -------
+ */
+declare const Root: React.ForwardRefExoticComponent<ProfileProps & React.RefAttributes<HTMLDivElement>>;
+declare const UserInfo: React.ForwardRefExoticComponent<ProfileUserInfoProps & React.RefAttributes<HTMLDivElement>>;
+declare const ReadOnly: React.ForwardRefExoticComponent<ProfileReadOnlyProps & React.RefAttributes<HTMLDivElement>>;
+export { Profile, ProfileUserInfo, ProfileReadOnly, Root, UserInfo, ReadOnly, };
+export type { ProfileProps, ProfileUserInfoProps };

package/es/components/Profile.js

@@ -0,0 +1,141 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
+import cx from '../_virtual/index.js';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { usePrefix } from '../internal/usePrefix.js';
+import { HeaderPopover, HeaderPopoverButton, HeaderPopoverContent } from './HeaderPopover.js';
+import { UserAvatar } from '../node_modules/@carbon/ibm-products/es/components/UserAvatar/UserAvatar.js';
+
+const Profile = /*#__PURE__*/React.forwardRef(function Profile(_ref) {
+  let {
+    className: customClassName,
+    label,
+    children,
+    renderIcon: IconElement
+  } = _ref;
+  const prefix = usePrefix();
+  const className = cx({
+    [`${prefix}-profile`]: true,
+    [customClassName]: !!customClassName
+  });
+  return /*#__PURE__*/React.createElement(HeaderPopover, {
+    align: "bottom-right",
+    className: className
+  }, /*#__PURE__*/React.createElement(HeaderPopoverButton, {
+    align: "bottom",
+    label: label
+  }, IconElement), /*#__PURE__*/React.createElement(HeaderPopoverContent, null, children));
+});
+Profile.displayName = 'Profile';
+Profile.propTypes = {
+  /**
+   * Custom children to be rendered within the popover of the Profile menu
+   */
+  children: PropTypes.any,
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className: PropTypes.string,
+  /**
+   * Provide the Profile's label
+   */
+  label: PropTypes.string,
+  /**
+   * Provide an optional icon to render in Profile.
+   */
+  // @ts-expect-error - PropTypes are unable to cover this case.
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+};
+const ProfileUserInfo = /*#__PURE__*/React.forwardRef(function ProfileUserInfo(_ref2) {
+  let {
+    className: customClassName,
+    name,
+    email,
+    ...rest
+  } = _ref2;
+  const prefix = usePrefix();
+  const className = cx({
+    [`${prefix}--profile-user-info`]: true,
+    [customClassName]: !!customClassName
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: className
+  }, /*#__PURE__*/React.createElement(UserAvatar, _extends({
+    size: "lg",
+    name: name
+  }, rest)), /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--profile-user-info__text-wrapper`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--profile-user-info__name`
+  }, name), /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--profile-user-info__email`
+  }, email)));
+});
+ProfileUserInfo.displayName = 'ProfileUserInfo';
+ProfileUserInfo.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className: PropTypes.string,
+  /**
+   * Provide the user's email
+   */
+  email: PropTypes.string,
+  /**
+   * 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.
+   */
+  name: PropTypes.string.isRequired
+};
+const ProfileReadOnly = /*#__PURE__*/React.forwardRef(function ProfileReadOnly(_ref3) {
+  let {
+    className: customClassName,
+    items
+  } = _ref3;
+  const prefix = usePrefix();
+  const className = cx({
+    [`${prefix}--profile-read-only`]: true,
+    [customClassName]: !!customClassName
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: className
+  }, items?.map((item, index) => /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--profile-read-only__items`,
+    key: index
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--profile-read-only__label`
+  }, item.label), /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--profile-read-only__title`
+  }, item.title))));
+});
+ProfileReadOnly.displayName = 'ProfileReadOnly';
+ProfileReadOnly.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className: PropTypes.string,
+  /**
+   * List of read-only profile items
+   */
+  items: PropTypes.array
+};
+
+/**
+ * -------
+ * Exports
+ * -------
+ */
+const Root = Profile;
+Root.displayName = 'Profile.Root';
+const UserInfo = ProfileUserInfo;
+UserInfo.displayName = 'ProfileUserInfo';
+const ReadOnly = ProfileReadOnly;
+ReadOnly.displayName = 'ProfileReadOnly';
+
+export { Profile, ProfileReadOnly, ProfileUserInfo, ReadOnly, Root, UserInfo };

package/es/components/SideNavLinkPopover.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -62,7 +62,7 @@ interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
     /**
      * Specify the size of the Button. Defaults to `md`.
      */
-    size?: ButtonSize;
+    size?: Extract<ButtonSize, 'sm' | 'md' | 'lg'>;
     /**
      * Specify an optional className to be added to your Tooltip wrapper
      */

package/es/index.d.ts

@@ -6,16 +6,17 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export { SideNav, SIDE_NAV_TYPE } from './components/SideNav.js';
-export { SideNavItems } from './components/SideNavItems.js';
-export { SideNavLink } from './components/SideNavLink.js';
-export { SideNavLinkPopover } from './components/SideNavLinkPopover.js';
-export { SideNavMenu } from './components/SideNavMenu.js';
-export { SideNavMenuItem } from './components/SideNavMenuItem.js';
+export { SideNav, SIDE_NAV_TYPE } from './components/SideNav';
+export { SideNavItems } from './components/SideNavItems';
+export { SideNavLink } from './components/SideNavLink';
+export { SideNavLinkPopover } from './components/SideNavLinkPopover';
+export { SideNavMenu } from './components/SideNavMenu';
+export { SideNavMenuItem } from './components/SideNavMenuItem';
 export { HeaderContainer } from './components/HeaderContainer';
 export { HeaderPopover, HeaderPopoverActions, HeaderPopoverButton, HeaderPopoverContent, } from './components/HeaderPopover';
 export { HeaderPanel } from './components/HeaderPanel';
 export { SharkFinIcon } from './components/SharkFinIcon';
 export { HeaderDivider } from './components/HeaderDivider';
 export { TrialCountdown } from './components/TrialCountdown';
+export * as Profile from './components/Profile';
 export { SideNavSlot } from './components/SideNavSlot';

package/es/index.js

@@ -17,4 +17,6 @@ export { HeaderPanel } from './components/HeaderPanel.js';
 export { SharkFinIcon } from './components/SharkFinIcon.js';
 export { HeaderDivider } from './components/HeaderDivider.js';
 export { TrialCountdown } from './components/TrialCountdown.js';
+import * as Profile from './components/Profile.js';
+export { Profile };
 export { SideNavSlot } from './components/SideNavSlot.js';

package/es/node_modules/@carbon/ibm-products/es/_virtual/_commonjsHelpers.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+export { getDefaultExportFromCjs };

package/es/node_modules/@carbon/ibm-products/es/_virtual/_rollupPluginBabelHelpers.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+
+export { _extends as extends };

package/es/node_modules/@carbon/ibm-products/es/_virtual/index.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
+import { __require as requirePropTypes } from '../node_modules/prop-types/index.js';
+
+var propTypesExports = /*@__PURE__*/requirePropTypes();
+var PropTypes = /*@__PURE__*/getDefaultExportFromCjs(propTypesExports);
+
+export { PropTypes as default, propTypesExports as p };

package/es/node_modules/@carbon/ibm-products/es/_virtual/index2.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var propTypes = {
+  exports: {}
+};
+
+export { propTypes as __module };

package/es/node_modules/@carbon/ibm-products/es/components/TooltipTrigger/TooltipTrigger.js

@@ -0,0 +1,63 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import PropTypes from '../../_virtual/index.js';
+import cx from '../../../../../../_virtual/index.js';
+import { pkg } from '../../settings.js';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+const blockClass = `${pkg.prefix}--tooltip-trigger`;
+const componentName = 'TooltipTrigger';
+
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
+
+/**
+ * This is an tooltip trigger as Carbon Tooltip requires an active element to work but provides
+ * no blanked button.
+ */
+let TooltipTrigger = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/React.createElement("button", _extends({
+    type: "button",
+    ref: ref
+  }, rest, {
+    className: cx(blockClass,
+    // Apply the block class to the main HTML element
+    className // Apply any supplied class names to the main HTML element.
+    )
+  }), children);
+});
+
+// Return a placeholder if not released and not enabled by feature flag.
+TooltipTrigger = pkg.checkComponentEnabled(TooltipTrigger, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+TooltipTrigger.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+TooltipTrigger.propTypes = {
+  /**
+   * Child content of tooltip trigger
+   */
+  children: PropTypes.node,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string
+};
+
+export { TooltipTrigger };

package/es/node_modules/@carbon/ibm-products/es/components/UserAvatar/UserAvatar.js

@@ -0,0 +1,170 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import PropTypes from '../../_virtual/index.js';
+import cx from '../../../../../../_virtual/index.js';
+import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
+import { pkg } from '../../settings.js';
+import { usePrefix, Tooltip } from '@carbon/react';
+import { User } from '@carbon/react/icons';
+import '../../global/js/utils/props-helper.js';
+import { TooltipTrigger } from '../TooltipTrigger/TooltipTrigger.js';
+
+// Carbon and package components we use.
+/* TODO: @import(s) of carbon components and other package components. */
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+const blockClass = `${pkg.prefix}--user-avatar`;
+const componentName = 'UserAvatar';
+
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
+
+/**
+ * TODO: A description of the component.
+ */
+
+let UserAvatar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    // The component props, in alphabetical order (for consistency).
+    backgroundColor = 'order-1-cyan',
+    className,
+    image,
+    imageDescription,
+    name,
+    /* TODO: add other props for UserAvatar, with default values if needed */
+    renderIcon: RenderIcon,
+    size = 'md',
+    tooltipText,
+    tooltipAlignment = 'bottom',
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  const carbonPrefix = usePrefix();
+  const iconSize = {
+    sm: 16,
+    md: 20,
+    lg: 24,
+    xl: 32
+  };
+  const formatInitials = () => {
+    const parts = name?.split(' ') || [];
+    const firstChar = parts[0].charAt(0).toUpperCase();
+    const secondChar = parts[0].charAt(1).toUpperCase();
+    if (parts.length === 1) {
+      return firstChar + secondChar;
+    }
+    const lastChar = parts[parts.length - 1].charAt(0).toUpperCase();
+    const initials = [firstChar];
+    if (lastChar) {
+      initials.push(lastChar);
+    }
+    return ''.concat(...initials);
+  };
+  const getItem = () => {
+    const iconProps = {
+      size: iconSize[size]
+    };
+    if (image) {
+      return /*#__PURE__*/React.createElement("img", {
+        alt: imageDescription,
+        src: image,
+        className: `${blockClass}__photo ${blockClass}__photo--${size}`
+      });
+    }
+    if (RenderIcon) {
+      return /*#__PURE__*/React.createElement(RenderIcon, iconProps);
+    }
+    if (name) {
+      return formatInitials();
+    }
+    return /*#__PURE__*/React.createElement(User, iconProps);
+  };
+  const Avatar = () => /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: cx(blockClass,
+    // Apply the block class to the main HTML element
+    className,
+    // Apply any supplied class names to the main HTML element.
+    `${blockClass}--${backgroundColor}`, `${blockClass}--${size}`,
+    // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
+    {
+      // switched classes dependant on props or state
+      // example: [`${blockClass}__here-if-small`]: size === 'sm',
+    }),
+    ref: ref
+  }, getDevtoolsProps(componentName)), getItem());
+  if (tooltipText) {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      align: tooltipAlignment,
+      label: tooltipText,
+      className: `${blockClass}__tooltip ${carbonPrefix}--icon-tooltip`
+    }, /*#__PURE__*/React.createElement(TooltipTrigger, null, /*#__PURE__*/React.createElement(Avatar, null)));
+  }
+  return /*#__PURE__*/React.createElement(Avatar, null);
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+UserAvatar = pkg.checkComponentEnabled(UserAvatar, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+UserAvatar.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+UserAvatar.propTypes = {
+  /**
+   * Provide the background color need to be set for UserAvatar. Background color will be set based on lighter or darker theme.
+   * For example: if you select order-5-purple, it will take $purple-60 for lighter theme and $purple-50 for darker theme.
+   */
+  backgroundColor: PropTypes.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']),
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * When passing the image prop, supply a full path to the image to be displayed.
+   */
+  /**@ts-ignore */
+  image: PropTypes.string,
+  /**
+   * When passing the image prop use the imageDescription prop to describe the image for screen reader.
+   */
+  /**@ts-ignore */
+  imageDescription: PropTypes.string.isRequired.if(_ref2 => {
+    let {
+      image
+    } = _ref2;
+    return !!image;
+  }),
+  /**
+   * 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.
+   */
+  name: PropTypes.string,
+  /**
+   * Provide a custom icon to use if you need to use an icon other than the default one
+   */
+  /**@ts-ignore */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.string]),
+  /**
+   * Set the size of the avatar circle
+   */
+  size: PropTypes.oneOf(['xl', 'lg', 'md', 'sm']),
+  /**
+   * Specify how the trigger should align with the tooltip
+   */
+  tooltipAlignment: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
+  /**
+   * Pass in the display name to have it shown on hover
+   */
+  tooltipText: PropTypes.string
+  /* TODO: add types and DocGen for all props. */
+};
+
+export { UserAvatar };

package/es/node_modules/@carbon/ibm-products/es/components/_Canary/Canary.js

@@ -0,0 +1,49 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import PropTypes from '../../_virtual/index.js';
+import cx from '../../../../../../_virtual/index.js';
+import pkg from '../../global/js/package-settings.js';
+import { CodeSnippet } from '@carbon/react';
+
+var _p, _br, _p2, _br2, _p3;
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+const blockClass = `${pkg.prefix}--canary`;
+
+/**
+ *  Canary component used when the component requested is not yet production
+ */
+const Canary = (_ref /*, originalArgs*/) => {
+  let {
+    className,
+    componentName,
+    ...rest
+  } = _ref;
+  const instructions = `
+import { pkg } from '@carbon/ibm-products';
+// NOTE: must happen before component is first used
+pkg.component.${componentName} = true;
+`;
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: cx(blockClass, className)
+  }), /*#__PURE__*/React.createElement("h2", null, "This component ", /*#__PURE__*/React.createElement("strong", null, componentName), " is not ready yet."), _p || (_p = /*#__PURE__*/React.createElement("p", null, "To enable it, initialize package flags before the component is first used.")), _br || (_br = /*#__PURE__*/React.createElement("br", null)), _p2 || (_p2 = /*#__PURE__*/React.createElement("p", null, "e.g. in main.js")), /*#__PURE__*/React.createElement(CodeSnippet, {
+    type: "multi"
+  }, instructions), _br2 || (_br2 = /*#__PURE__*/React.createElement("br", null)), _p3 || (_p3 = /*#__PURE__*/React.createElement("p", null, "View a live example on", ' ', /*#__PURE__*/React.createElement("a", {
+    href: "https://codesandbox.io/s/example-component-olif5?file=/src/config.js"
+  }, "codesandbox"), ".")));
+};
+Canary.propTypes = {
+  /** Provide an optional class to be applied to the containing node */
+  className: PropTypes.string,
+  /** Name of the component that is not ready yet */
+  componentName: PropTypes.string.isRequired
+};
+
+export { Canary };