@carbon/ibm-products 2.25.0 → 2.27.0

package/es/components/InterstitialScreen/InterstitialScreen.js

@@ -12,10 +12,10 @@ import cx from '../../node_modules/classnames/index.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { clamp } from 'lodash';
+import { ArrowRight } from '@carbon/react/icons';
 import { ComposedModal, ModalHeader, ProgressIndicator, ProgressStep, ModalBody, ModalFooter, FlexGrid, Row, Column, Button } from '@carbon/react';
 import { Carousel } from '../Carousel/Carousel.js';
 import { SteppedAnimatedMedia } from '../SteppedAnimatedMedia/SteppedAnimatedMedia.js';
-import { ArrowRight } from '../../node_modules/@carbon/icons-react/es/generated/bucket-0.js';
 
 var _excluded = ["children", "className", "closeIconDescription", "domainName", "hideProgressIndicator", "interstitialAriaLabel", "isFullScreen", "isOpen", "media", "nextButtonLabel", "onClose", "previousButtonLabel", "productName", "headerClassName", "headerTitle", "startButtonLabel", "skipButtonLabel"];
 

package/es/components/SidePanel/SidePanel.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useRef, useEffect, useCallback } from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
+import { motion, useReducedMotion, AnimatePresence } from 'framer-motion';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import cx from '../../node_modules/classnames/index.js';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
@@ -19,10 +19,10 @@ import { pkg } from '../../settings.js';
 import { SIDE_PANEL_SIZES } from './constants.js';
 import { Button } from '@carbon/react';
 import { ArrowLeft, Close } from '@carbon/react/icons';
-import { overlayVariants, panelVariants } from './motion/variants.js';
+import { actionSetVariants, overlayVariants, panelVariants } from './motion/variants.js';
 import pconsole from '../../global/js/utils/pconsole.js';
-import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { ActionSet } from '../ActionSet/ActionSet.js';
+import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 
 var _excluded = ["actionToolbarButtons", "actions", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "id", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "slug", "subtitle", "title"],
   _excluded2 = ["label", "kind", "icon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
@@ -40,6 +40,7 @@ var defaults = {
   placement: 'right',
   size: 'md'
 };
+var MotionActionSet = motion(ActionSet);
 
 /**
  * Side panels keep users in-context of a page while performing tasks like navigating, editing, viewing details, or configuring something new.
@@ -107,6 +108,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     doAnimateTitle = _useState6[0],
     setDoAnimateTitle = _useState6[1];
+  var shouldReduceMotion = useReducedMotion();
   useEffect(function () {
     setDoAnimateTitle(animateTitle);
   }, [animateTitle]);
@@ -429,7 +431,10 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     initial: "hidden",
     animate: "visible",
     exit: "exit",
-    custom: placement
+    custom: {
+      placement: placement,
+      shouldReduceMotion: shouldReduceMotion
+    }
   }), /*#__PURE__*/React__default.createElement("span", {
     ref: startTrapRef,
     tabIndex: "0",
@@ -438,10 +443,12 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }, "Focus sentinel"), doAnimateTitle ? /*#__PURE__*/React__default.createElement("div", {
     ref: animatedScrollRef,
     className: "".concat(blockClass, "__animated-scroll-wrapper ").concat(blockClass, "--scrolls")
-  }, renderHeader(), renderMain()) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default.createElement(ActionSet, {
+  }, renderHeader(), renderMain()) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default.createElement(MotionActionSet, {
     actions: actions,
     className: primaryActionContainerClassNames,
-    size: size === 'xs' ? 'sm' : size
+    size: size === 'xs' ? 'sm' : size,
+    custom: shouldReduceMotion,
+    variants: actionSetVariants
   }), /*#__PURE__*/React__default.createElement("span", {
     ref: endTrapRef,
     tabIndex: "0",

package/es/components/SidePanel/motion/variants.d.ts

@@ -16,27 +16,54 @@ export namespace overlayVariants {
     }
 }
 export namespace panelVariants {
-    export namespace visible_1 {
-        export let x: number;
-        export namespace transition_1 {
-            let duration_1: number;
-            export { duration_1 as duration };
-            let ease_1: number[];
-            export { ease_1 as ease };
-        }
-        export { transition_1 as transition };
-    }
+    export function visible_1({ shouldReduceMotion }: {
+        shouldReduceMotion: any;
+    }): {
+        x: number;
+        transition: {
+            duration: number;
+            ease: number[];
+        };
+        opacity: any;
+    };
     export { visible_1 as visible };
-    export function hidden_1(placement: any): {
+    export function hidden_1({ placement, shouldReduceMotion }: {
+        placement: any;
+        shouldReduceMotion: any;
+    }): {
         x: string | number;
+        opacity: any;
     };
     export { hidden_1 as hidden };
-    export function exit_1(placement: any): {
+    export function exit_1({ placement, shouldReduceMotion }: {
+        placement: any;
+        shouldReduceMotion: any;
+    }): {
         x: string | number;
         transition: {
             duration: number;
             ease: number[];
         };
+        opacity: any;
     };
     export { exit_1 as exit };
 }
+export namespace actionSetVariants {
+    export function hidden_2(shouldReduceMotion: any): {
+        opacity: number;
+        transition: {
+            duration: number;
+            ease: number | number[];
+        };
+    };
+    export { hidden_2 as hidden };
+    export function visible_2(shouldReduceMotion: any): {
+        opacity: number;
+        transition: {
+            duration: number;
+            ease: number | number[];
+            delay: number;
+        };
+    };
+    export { visible_2 as visible };
+}

package/es/components/SidePanel/motion/variants.js

@@ -23,27 +23,58 @@ var overlayVariants = {
   }
 };
 var panelVariants = {
-  visible: {
-    x: 0,
-    transition: {
-      duration: DURATIONS.moderate02,
-      ease: EASINGS.productive.standard
-    }
+  visible: function visible(_ref) {
+    var shouldReduceMotion = _ref.shouldReduceMotion;
+    return {
+      x: 0,
+      transition: {
+        duration: DURATIONS.moderate02,
+        ease: EASINGS.productive.standard
+      },
+      opacity: shouldReduceMotion && 1
+    };
   },
-  hidden: function hidden(placement) {
+  hidden: function hidden(_ref2) {
+    var placement = _ref2.placement,
+      shouldReduceMotion = _ref2.shouldReduceMotion;
     return {
-      x: placement === 'right' ? '100%' : -320
+      x: placement === 'right' ? shouldReduceMotion ? 0 : '100%' : shouldReduceMotion ? 0 : -320,
+      opacity: shouldReduceMotion && 0
     };
   },
-  exit: function exit(placement) {
+  exit: function exit(_ref3) {
+    var placement = _ref3.placement,
+      shouldReduceMotion = _ref3.shouldReduceMotion;
     return {
-      x: placement === 'right' ? '100%' : -320,
+      x: placement === 'right' ? shouldReduceMotion ? 0 : '100%' : shouldReduceMotion ? 0 : -320,
       transition: {
         duration: DURATIONS.moderate01,
         ease: EASINGS.productive.exit
+      },
+      opacity: shouldReduceMotion && 0
+    };
+  }
+};
+var actionSetVariants = {
+  hidden: function hidden(shouldReduceMotion) {
+    return {
+      opacity: shouldReduceMotion ? 0 : 1,
+      transition: {
+        duration: shouldReduceMotion ? DURATIONS.moderate01 : DURATIONS.fast01,
+        ease: shouldReduceMotion ? 0 : EASINGS.productive.exit
+      }
+    };
+  },
+  visible: function visible(shouldReduceMotion) {
+    return {
+      opacity: 1,
+      transition: {
+        duration: shouldReduceMotion ? DURATIONS.moderate01 : DURATIONS.fast02,
+        ease: shouldReduceMotion ? 0 : EASINGS.productive.entrance,
+        delay: shouldReduceMotion ? 0.075 : 0
       }
     };
   }
 };
 
-export { overlayVariants, panelVariants };
+export { actionSetVariants, overlayVariants, panelVariants };

package/es/components/StringFormatter/StringFormatter.d.ts

@@ -0,0 +1,6 @@
+/**
+ * StringFormatter allows for truncating text while displaying a tooltip
+ * overlay on hover or focus with the entirety of the provided copy.
+ */
+export let StringFormatter: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/es/components/StringFormatter/StringFormatter.js

@@ -0,0 +1,79 @@
+/**
+ * Copyright IBM Corp. 2020, 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 { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import PropTypes from '../../node_modules/prop-types/index.js';
+import cx from '../../node_modules/classnames/index.js';
+import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
+import { pkg } from '../../settings.js';
+import { DefinitionTooltip } from '@carbon/react';
+import { StringFormatterAlignment } from './utils/enums.js';
+
+var _excluded = ["className", "lines", "tooltipDirection", "truncate", "width", "value"];
+var blockClass = "".concat(pkg.prefix, "--string-formatter");
+var componentName = 'StringFormatter';
+var defaults = {
+  lines: 1,
+  tooltipDirection: StringFormatterAlignment.BOTTOM_LEFT,
+  truncate: false,
+  width: null
+};
+
+/**
+ * StringFormatter allows for truncating text while displaying a tooltip
+ * overlay on hover or focus with the entirety of the provided copy.
+ */
+var StringFormatter = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$lines = _ref.lines,
+    lines = _ref$lines === void 0 ? defaults.lines : _ref$lines,
+    _ref$tooltipDirection = _ref.tooltipDirection,
+    tooltipDirection = _ref$tooltipDirection === void 0 ? defaults.tooltipDirection : _ref$tooltipDirection,
+    _ref$truncate = _ref.truncate,
+    truncate = _ref$truncate === void 0 ? defaults.truncate : _ref$truncate,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? defaults.width : _ref$width,
+    value = _ref.value,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var stringFormatterContent = /*#__PURE__*/React__default.createElement("span", {
+    className: cx("".concat(blockClass, "--content"), _defineProperty({}, "".concat(blockClass, "--truncate"), truncate)),
+    style: {
+      maxWidth: width,
+      WebkitLineClamp: lines
+    }
+  }, value);
+  return /*#__PURE__*/React__default.createElement("span", _extends({}, rest, {
+    className: cx(blockClass, className),
+    ref: ref
+  }, getDevtoolsProps(componentName)), truncate ? /*#__PURE__*/React__default.createElement(DefinitionTooltip, {
+    className: "".concat(blockClass, "__tooltip"),
+    align: tooltipDirection,
+    definition: value,
+    openOnHover: true
+  }, stringFormatterContent) : stringFormatterContent);
+});
+StringFormatter = pkg.checkComponentEnabled(StringFormatter, componentName);
+StringFormatter.displayName = componentName;
+StringFormatter.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /** Number of lines to clamp value. */
+  lines: PropTypes.number,
+  /** Specify the direction of the tooltip. Can be either top or bottom. */
+  tooltipDirection: PropTypes.oneOf(Object.values(StringFormatterAlignment)),
+  /** Whether or not the value should be truncated. */
+  truncate: PropTypes.bool,
+  /** Value to format. */
+  value: PropTypes.string.isRequired,
+  /** Maximum width of value which should include */
+  width: PropTypes.string
+};
+
+export { StringFormatter };

package/es/components/StringFormatter/index.d.ts

@@ -0,0 +1 @@
+export { StringFormatter } from "./StringFormatter";

package/es/components/StringFormatter/utils/enums.d.ts

@@ -0,0 +1,14 @@
+export namespace StringFormatterAlignment {
+    let TOP: string;
+    let TOP_LEFT: string;
+    let TOP_RIGHT: string;
+    let BOTTOM: string;
+    let BOTTOM_LEFT: string;
+    let BOTTOM_RIGHT: string;
+    let LEFT: string;
+    let LEFT_BOTTOM: string;
+    let LEFT_TOP: string;
+    let RIGHT: string;
+    let RIGHT_BOTTOM: string;
+    let RIGHT_TOP: string;
+}

package/es/components/StringFormatter/utils/enums.js

@@ -0,0 +1,23 @@
+/**
+ * Copyright IBM Corp. 2020, 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 StringFormatterAlignment = {
+  TOP: 'top',
+  TOP_LEFT: 'top-left',
+  TOP_RIGHT: 'top-right',
+  BOTTOM: 'bottom',
+  BOTTOM_LEFT: 'bottom-left',
+  BOTTOM_RIGHT: 'bottom-right',
+  LEFT: 'left',
+  LEFT_BOTTOM: 'left-bottom',
+  LEFT_TOP: 'left-top',
+  RIGHT: 'right',
+  RIGHT_BOTTOM: 'right-bottom',
+  RIGHT_TOP: 'right-top'
+};
+
+export { StringFormatterAlignment };

package/es/components/Tearsheet/TearsheetShell.js

@@ -16,9 +16,10 @@ import { getNodeTextContent } from '../../global/js/utils/getNodeTextContent.js'
 import { usePrefix, ComposedModal, ModalHeader, Layer, ModalBody, Button } from '@carbon/react';
 import { Wrap } from '../../global/js/utils/Wrap.js';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
+import { useFocus } from '../../global/js/hooks/useFocus.js';
 import { ActionSet } from '../ActionSet/ActionSet.js';
 
-var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "selectorPrimaryFocus", "size", "portalTarget", "title", "verticalPosition"];
+var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "size", "slug", "title", "verticalPosition"];
 
 // The block part of our conventional BEM class names (bc__E--M).
 var bc = "".concat(pkg.prefix, "--tearsheet");
@@ -70,9 +71,10 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     navigation = _ref.navigation,
     onClose = _ref.onClose,
     open = _ref.open,
+    portalTargetIn = _ref.portalTarget,
     selectorPrimaryFocus = _ref.selectorPrimaryFocus,
     size = _ref.size,
-    portalTargetIn = _ref.portalTarget,
+    slug = _ref.slug,
     title = _ref.title,
     verticalPosition = _ref.verticalPosition,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -81,9 +83,13 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   var renderPortalUse = usePortalTarget(portalTargetIn);
   var localRef = useRef();
   var resizer = useRef(null);
+  var modalBodyRef = useRef(null);
   var modalRef = ref || localRef;
   var _useResizeObserver = useResizeObserver(resizer),
     width = _useResizeObserver.width;
+  var _useFocus = useFocus(modalRef),
+    firstElement = _useFocus.firstElement,
+    keyDownListener = _useFocus.keyDownListener;
   var wide = size === 'wide';
 
   // Keep track of the stack depth and our position in it (1-based, 0=closed)
@@ -121,11 +127,16 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
 
   // Callback to give the tearsheet the opportunity to claim focus
   handleStackChange.claimFocus = function () {
-    var element = selectorPrimaryFocus ? modalRef.current.querySelector(selectorPrimaryFocus) : modalRef.current;
-    setTimeout(function () {
-      return element.focus();
-    }, 1);
+    firstElement === null || firstElement === void 0 || firstElement.focus();
   };
+  useEffect(function () {
+    if (open) {
+      // Focusing the first element
+      setTimeout(function () {
+        firstElement === null || firstElement === void 0 || firstElement.focus();
+      }, 0);
+    }
+  }, [open, firstElement]);
   useEffect(function () {
     var notify = function notify() {
       return stack.all.forEach(function (handler) {
@@ -180,15 +191,17 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     var includeActions = actions && (actions === null || actions === void 0 ? void 0 : actions.length) > 0;
     return renderPortalUse( /*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, {
       "aria-label": ariaLabel || getNodeTextContent(title),
-      className: cx(bc, className, _defineProperty(_defineProperty(_defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
+      className: cx(bc, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
       // Don't apply this on the initial open of a single tearsheet.
-      depth > 1 || depth === 1 && prevDepth.current > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide)),
+      depth > 1 || depth === 1 && prevDepth.current > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide), "".concat(bc, "--has-slug"), slug), "".concat(bc, "--has-close"), effectiveHasCloseIcon)),
+      slug: slug,
       style: _defineProperty(_defineProperty({}, "--".concat(bc, "--stacking-scale-factor-single"), (width - 32) / width), "--".concat(bc, "--stacking-scale-factor-double"), (width - 64) / width),
       containerClassName: cx("".concat(bc, "__container"), _defineProperty({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower')),
       onClose: onClose,
       open: open,
       selectorPrimaryFocus: selectorPrimaryFocus,
       onFocus: handleFocus,
+      onKeyDown: keyDownListener,
       preventCloseOnClickOutside: !isPassive,
       ref: modalRef,
       selectorsFloatingMenus: [".".concat(carbonPrefix, "--overflow-menu-options"), ".".concat(carbonPrefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")],
@@ -216,6 +229,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     }, headerActions)), /*#__PURE__*/React__default.createElement(Wrap, {
       className: "".concat(bc, "__header-navigation")
     }, navigation)), /*#__PURE__*/React__default.createElement(Wrap, {
+      ref: modalBodyRef,
       element: ModalBody,
       className: "".concat(bc, "__body")
     }, /*#__PURE__*/React__default.createElement(Wrap, {
@@ -382,6 +396,10 @@ TearsheetShell.propTypes = _objectSpread2({
    * Specifies the width of the tearsheet, 'narrow' or 'wide'.
    */
   size: PropTypes.oneOf(['narrow', 'wide']).isRequired,
+  /**
+   *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
+   */
+  slug: PropTypes.node,
   /**
    * The main title of the tearsheet, displayed in the header area.
    */

package/es/components/UserAvatar/UserAvatar.js

@@ -11,12 +11,11 @@ import PropTypes from '../../node_modules/prop-types/index.js';
 import cx from '../../node_modules/classnames/index.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
-import { User, Group } from '@carbon/react/icons';
 import { usePrefix, Tooltip } from '@carbon/react';
+import { User } from '@carbon/react/icons';
 import { TooltipTrigger } from '../TooltipTrigger/TooltipTrigger.js';
 
-var _excluded = ["backgroundColor", "className", "renderIcon", "tooltipText", "tooltipAlignment"];
-var _User, _User2, _Group;
+var _excluded = ["backgroundColor", "className", "name", "renderIcon", "size", "tooltipText", "tooltipAlignment"];
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 
@@ -45,69 +44,77 @@ var componentName = 'UserAvatar';
  */
 
 var defaults = {
-  renderIcon: function renderIcon() {
-    return _User || (_User = /*#__PURE__*/React__default.createElement(User, {
-      size: 32
-    }));
-  },
-  tooltipAlignment: 'bottom',
-  tooltipText: 'Thomas J. Watson'
+  size: 'md',
+  tooltipAlignment: 'bottom'
 };
 var UserAvatar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var _SetItem;
   var backgroundColor = _ref.backgroundColor,
     className = _ref.className,
-    _ref$renderIcon = _ref.renderIcon,
-    renderIcon = _ref$renderIcon === void 0 ? defaults.renderIcon : _ref$renderIcon,
-    _ref$tooltipText = _ref.tooltipText,
-    tooltipText = _ref$tooltipText === void 0 ? defaults.tooltipText : _ref$tooltipText,
+    name = _ref.name,
+    RenderIcon = _ref.renderIcon,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? defaults.size : _ref$size,
+    tooltipText = _ref.tooltipText,
     _ref$tooltipAlignment = _ref.tooltipAlignment,
     tooltipAlignment = _ref$tooltipAlignment === void 0 ? defaults.tooltipAlignment : _ref$tooltipAlignment,
     rest = _objectWithoutProperties(_ref, _excluded);
   var carbonPrefix = usePrefix();
-  var icons = {
-    user: {
-      md: _User2 || (_User2 = /*#__PURE__*/React__default.createElement(User, {
-        size: 32
-      }))
-    },
-    group: {
-      md: _Group || (_Group = /*#__PURE__*/React__default.createElement(Group, {
-        size: 32
-      }))
+  var iconSize = {
+    sm: 16,
+    md: 20,
+    lg: 24,
+    xl: 32
+  };
+  var formatInitials = function formatInitials() {
+    var _ref2;
+    var parts = name.split(' ');
+    var firstChar = parts[0].charAt(0).toUpperCase();
+    var secondChar = parts[0].charAt(1).toUpperCase();
+    if (parts.length === 1) {
+      return firstChar + secondChar;
+    }
+    var lastChar = parts[parts.length - 1].charAt(0).toUpperCase();
+    var initials = [firstChar];
+    if (lastChar) {
+      initials.push(lastChar);
     }
+    return (_ref2 = '').concat.apply(_ref2, initials);
   };
-  var getItem = function getItem(renderIcon) {
-    if (renderIcon === User) {
-      return icons.user['md'];
-    } else if (renderIcon === Group) {
-      return icons.group['md'];
-    } else {
-      return renderIcon;
+  var getItem = function getItem() {
+    var iconProps = {
+      size: iconSize[size]
+    };
+    if (RenderIcon) {
+      return /*#__PURE__*/React__default.createElement(RenderIcon, iconProps);
     }
+    if (name) {
+      return formatInitials();
+    }
+    return /*#__PURE__*/React__default.createElement(User, iconProps);
   };
-  var SetItem = getItem(renderIcon);
-  var renderUserAvatar = function renderUserAvatar() {
+  var Avatar = function Avatar() {
     return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
-      tabIndex: 0,
       className: cx(blockClass,
       // Apply the block class to the main HTML element
       className, // Apply any supplied class names to the main HTML element.
-      "".concat(blockClass, "--").concat(backgroundColor),
+      "".concat(blockClass, "--").concat(backgroundColor), "".concat(blockClass, "--").concat(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,
-      role: "button"
-    }, getDevtoolsProps(componentName)), _SetItem || (_SetItem = /*#__PURE__*/React__default.createElement(SetItem, null)));
+      role: "img"
+    }, getDevtoolsProps(componentName)), getItem());
   };
-  return SetItem && (tooltipText ? /*#__PURE__*/React__default.createElement(Tooltip, {
-    align: tooltipAlignment,
-    label: tooltipText,
-    className: "".concat(blockClass, "__tooltip ").concat(carbonPrefix, "--icon-tooltip")
-  }, /*#__PURE__*/React__default.createElement(TooltipTrigger, null, renderUserAvatar())) : renderUserAvatar());
+  if (tooltipText) {
+    return /*#__PURE__*/React__default.createElement(Tooltip, {
+      align: tooltipAlignment,
+      label: tooltipText,
+      className: "".concat(blockClass, "__tooltip ").concat(carbonPrefix, "--icon-tooltip")
+    }, /*#__PURE__*/React__default.createElement(TooltipTrigger, null, /*#__PURE__*/React__default.createElement(Avatar, null)));
+  }
+  return /*#__PURE__*/React__default.createElement(Avatar, null);
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -129,10 +136,18 @@ UserAvatar.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: 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,
   /**
    * Provide a custom icon to use if you need to use an icon other than the default one
    */
-  renderIcon: PropTypes.func,
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * Set the size of the avatar circle
+   */
+  size: PropTypes.oneOf(['xl', 'lg', 'md', 'sm']),
   /**
    * Specify how the trigger should align with the tooltip
    */

package/es/components/index.d.ts

@@ -34,6 +34,7 @@ export { CoachmarkOverlayElement } from "./CoachmarkOverlayElement";
 export { CoachmarkOverlayElements } from "./CoachmarkOverlayElements";
 export { CoachmarkStack } from "./CoachmarkStack";
 export { NonLinearReading } from "./NonLinearReading";
+export { BigNumbers } from "./BigNumbers";
 export { TruncatedList } from "./TruncatedList";
 export { InterstitialScreen } from "./InterstitialScreen";
 export { InterstitialScreenView } from "./InterstitialScreenView";
@@ -41,6 +42,7 @@ export { InterstitialScreenViewModule } from "./InterstitialScreenViewModule";
 export { DelimitedList } from "./DelimitedList";
 export { FullPageError } from "./FullPageError";
 export { SearchBar } from "./SearchBar";
+export { StringFormatter } from "./StringFormatter";
 export { UserAvatar } from "./UserAvatar";
 export { ComboButton, ComboButtonItem } from "./ComboButton";
 export { CreateFullPage, CreateFullPageStep } from "./CreateFullPage";

package/es/global/js/hooks/index.d.ts

@@ -9,4 +9,6 @@ export { useRetrieveStepData } from "./useRetrieveStepData";
 export { useValidCreateStepCount } from "./useValidCreateStepCount";
 export { useControllableState } from "./useControllableState";
 export { usePrefix } from "./usePrefix";
+export { useFocus } from "./useFocus";
+export { useIsomorphicEffect } from "./useIsomorphicEffect";
 export { useNearestScroll, useWindowScroll } from "./useWindowScroll";

package/es/global/js/hooks/useFocus.d.ts

@@ -0,0 +1,11 @@
+export function useFocus(modalRef: any): {
+    firstElement: any;
+    lastElement: any;
+    allElements: any;
+    keyDownListener: (event: any) => void;
+    getFocusable: () => {
+        first: any;
+        last: any;
+        all: any;
+    };
+};