@carbon/ibm-products 2.43.2-canary.20 → 2.43.2-canary.200

package/lib/components/Tearsheet/Tearsheet.d.ts

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference path="../../../src/custom-typings/index.d.ts" />
+import { ButtonProps } from '@carbon/react';
 import React, { PropsWithChildren, ReactNode } from 'react';
 import PropTypes from 'prop-types';
-import { ButtonProps } from '@carbon/react';
 /**
  * The accessibility title for the close icon (if shown).
  *
@@ -21,7 +21,7 @@ export type CloseIconDescriptionTypes = {
     hasCloseIcon: true;
     closeIconDescription: string;
 };
-interface TearsheetProps extends PropsWithChildren {
+export interface TearsheetProps extends PropsWithChildren {
     /**
      * The navigation actions to be shown as buttons in the action area at the
      * bottom of the tearsheet. Each action is specified as an object with
@@ -35,7 +35,7 @@ interface TearsheetProps extends PropsWithChildren {
      *
      * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
      */
-    actions: ButtonProps[];
+    actions: ButtonProps<'button'>[];
     /**
      * The aria-label for the tearsheet, which is optional.
      * if it is not passed, the title will be used as the aria-label.
@@ -97,7 +97,7 @@ interface TearsheetProps extends PropsWithChildren {
     /**
      * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
      */
-    portalTarget: ReactNode;
+    portalTarget?: ReactNode;
     /**
      * Specify a CSS selector that matches the DOM element that should be
      * focused when the Modal opens.
@@ -148,4 +148,3 @@ export declare const deprecatedProps: {
      */
     verticalPosition: PropTypes.Requireable<string>;
 };
-export {};

package/lib/components/Tearsheet/Tearsheet.js

@@ -10,14 +10,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var react = require('@carbon/react');
 var React = require('react');
+var TearsheetShell = require('./TearsheetShell.js');
+var ActionSet = require('../ActionSet/ActionSet.js');
 var index = require('../../node_modules/prop-types/index.js');
-var devtools = require('../../global/js/utils/devtools.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
+var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
-var react = require('@carbon/react');
-var TearsheetShell = require('./TearsheetShell.js');
-var ActionSet = require('../ActionSet/ActionSet.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/lib/components/Tearsheet/TearsheetNarrow.d.ts

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference path="../../../src/custom-typings/index.d.ts" />
-import React, { ReactNode, PropsWithChildren } from 'react';
-import PropTypes from 'prop-types';
 import { ButtonProps } from '@carbon/react';
 import { CloseIconDescriptionTypes } from './TearsheetShell';
+import React, { PropsWithChildren, ReactNode } from 'react';
+import PropTypes from 'prop-types';
 interface TearsheetNarrowBaseProps extends PropsWithChildren {
     /**
      * The navigation actions to be shown as buttons in the action area at the
@@ -90,7 +90,7 @@ interface TearsheetNarrowBaseProps extends PropsWithChildren {
      */
     verticalPosition?: 'normal' | 'lower';
 }
-type TearsheetNarrowProps = TearsheetNarrowBaseProps & CloseIconDescriptionTypes;
+export type TearsheetNarrowProps = TearsheetNarrowBaseProps & CloseIconDescriptionTypes;
 /**
  * A narrow tearsheet is a slimmer variant of the tearsheet, providing a dialog
  * that keeps users in-context and focused by bringing actionable content front

package/lib/components/Tearsheet/TearsheetNarrow.js

@@ -10,14 +10,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var react = require('@carbon/react');
+var TearsheetShell = require('./TearsheetShell.js');
 var React = require('react');
+var propsHelper = require('../../global/js/utils/props-helper.js');
+var ActionSet = require('../ActionSet/ActionSet.js');
 var index = require('../../node_modules/prop-types/index.js');
 var devtools = require('../../global/js/utils/devtools.js');
-var propsHelper = require('../../global/js/utils/props-helper.js');
 var settings = require('../../settings.js');
-var react = require('@carbon/react');
-var TearsheetShell = require('./TearsheetShell.js');
-var ActionSet = require('../ActionSet/ActionSet.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/lib/components/Tearsheet/TearsheetShell.d.ts

@@ -9,7 +9,7 @@ import React, { PropsWithChildren, ReactNode, RefObject } from 'react';
 import PropTypes from 'prop-types';
 import { type ButtonProps } from '@carbon/react';
 interface TearsheetShellProps extends PropsWithChildren {
-    actions?: ButtonProps[];
+    actions?: ButtonProps<any>[];
     ariaLabel?: string;
     /**
      * An optional class or classes to be added to the outermost element.

package/lib/components/Tearsheet/TearsheetShell.js

@@ -18,11 +18,11 @@ var settings = require('../../settings.js');
 var pconsole = require('../../global/js/utils/pconsole.js');
 var getNodeTextContent = require('../../global/js/utils/getNodeTextContent.js');
 var react = require('@carbon/react');
+var ActionSet = require('../ActionSet/ActionSet.js');
 var Wrap = require('../../global/js/utils/Wrap.js');
 var usePortalTarget = require('../../global/js/hooks/usePortalTarget.js');
 var useFocus = require('../../global/js/hooks/useFocus.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
-var ActionSet = require('../ActionSet/ActionSet.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -148,10 +148,16 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
 
   // Callback to give the tearsheet the opportunity to claim focus
   handleStackChange.claimFocus = function () {
-    if (selectorPrimaryFocus) {
-      return specifiedElement === null || specifiedElement === void 0 ? void 0 : specifiedElement.focus();
+    if (selectorPrimaryFocus && useFocus.getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus)) {
+      var _window;
+      var specifiedEl = useFocus.getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
+      if (specifiedEl && ((_window = window) === null || _window === void 0 || (_window = _window.getComputedStyle(specifiedEl)) === null || _window === void 0 ? void 0 : _window.display) !== 'none') {
+        return specifiedEl.focus();
+      }
     }
-    firstElement === null || firstElement === void 0 || firstElement.focus();
+    setTimeout(function () {
+      return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
+    }, 0);
   };
   React.useEffect(function () {
     if (open) {
@@ -175,10 +181,13 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
   React.useEffect(function () {
     if (open && position !== depth) {
       setTimeout(function () {
+        if (selectorPrimaryFocus) {
+          return specifiedElement === null || specifiedElement === void 0 ? void 0 : specifiedElement.focus();
+        }
         firstElement === null || firstElement === void 0 || firstElement.focus();
       }, 0);
     }
-  }, [position, depth, firstElement, open]);
+  }, [position, depth, firstElement, open, specifiedElement, selectorPrimaryFocus]);
   React.useEffect(function () {
     var notify = function notify() {
       return stack.all.forEach(function (handler) {
@@ -245,7 +254,11 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
       }
       return _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "--".concat(bc, "--stacking-scale-factor-single"), (width - 32) / width), "--".concat(bc, "--stacking-scale-factor-double"), (width - 64) / width);
     };
-    return renderPortalUse( /*#__PURE__*/React__default["default"].createElement(react.ComposedModal, _rollupPluginBabelHelpers["extends"]({}, rest, {
+    return renderPortalUse( /*#__PURE__*/React__default["default"].createElement(react.unstable_FeatureFlags, {
+      flags: {
+        'enable-experimental-focus-wrap-without-sentinels': true
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(react.ComposedModal, _rollupPluginBabelHelpers["extends"]({}, rest, {
       "aria-label": ariaLabel || getNodeTextContent.getNodeTextContent(title),
       className: cx__default["default"](bc, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
       // Don't apply this on the initial open of a single tearsheet.
@@ -312,7 +325,7 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
     })))), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "".concat(bc, "__resize-detector"),
       ref: resizer
-    })));
+    }))));
   } else {
     pconsole["default"].warn('Tearsheet not rendered: maximum stacking depth exceeded.');
     return null;
@@ -322,7 +335,9 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
 // The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.
 TearsheetShell.displayName = componentName;
-var portalType = typeof Element === 'undefined' ? index["default"].object : index["default"].instanceOf(Element);
+var portalType = typeof Element === 'undefined' ? index["default"].object :
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+index["default"].instanceOf(Element);
 var deprecatedProps = {
   /**
    * **Deprecated**
@@ -365,6 +380,7 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
     label: index["default"].string,
     loading: index["default"].bool,
     // we duplicate this Button prop to improve the DocGen here
+    /**@ts-ignore*/
     onClick: react.Button.propTypes.onClick
   }))),
   /**

package/lib/components/Tearsheet/index.d.ts

@@ -1,2 +1,10 @@
-export { Tearsheet } from "./Tearsheet";
-export { TearsheetNarrow } from "./TearsheetNarrow";
+/**
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * 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 { Tearsheet } from './Tearsheet';
+export { TearsheetNarrow } from './TearsheetNarrow';
+export type { TearsheetProps } from './Tearsheet';
+export type { TearsheetNarrowProps } from './TearsheetNarrow';

package/lib/components/Toolbar/Toolbar.d.ts

@@ -6,7 +6,7 @@
  */
 import React from 'react';
 declare const blockClass: string;
-interface ToolbarProps {
+export interface ToolbarProps {
     /** Provide an optional class to be applied to the containing node */
     className?: string;
     /** Determines whether the `Toolbar` is rendered vertically */

package/lib/components/Toolbar/Toolbar.js

@@ -10,17 +10,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var cx = require('classnames');
-var index = require('../../node_modules/prop-types/index.js');
 var React = require('react');
-var devtools = require('../../global/js/utils/devtools.js');
+var index = require('../../node_modules/prop-types/index.js');
 var getFocusableElements = require('../../global/js/utils/getFocusableElements.js');
+var cx = require('classnames');
+var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["children", "className", "vertical"];
 var checkComponentEnabled = settings.pkg.checkComponentEnabled,

package/lib/components/Toolbar/ToolbarButton.d.ts

@@ -5,16 +5,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference path="../../../src/custom-typings/index.d.ts" />
-import { IconButton } from '@carbon/react';
 import React from 'react';
+import { IconButton } from '@carbon/react';
 export declare const blockClass: string;
-interface ToolbarButtonProps extends React.ComponentProps<typeof IconButton> {
+export interface ToolbarButtonProps extends React.ComponentProps<typeof IconButton> {
     /** Determines whether the caret is rendered */
     caret?: boolean;
     /** Provide an optional class to be applied to the containing node */
     className?: string;
+    /**
+     * @deprecated use `label` instead
+     * Specifies the label for the icon button */
+    iconDescription?: string;
     /** Specifies the label for the icon button */
-    iconDescription: string;
+    label: string;
     /** Specifies the icon to be used by the ToolbarButton component */
     renderIcon: React.ElementType;
 }
@@ -22,4 +26,10 @@ interface ToolbarButtonProps extends React.ComponentProps<typeof IconButton> {
 export declare let ToolbarButton: React.ForwardRefExoticComponent<ToolbarButtonProps & {
     children?: React.ReactNode;
 } & React.RefAttributes<unknown>>;
-export {};
+export declare const deprecatedProps: {
+    /**
+     * **Deprecated**
+     * Specifies the label for the icon button
+     *  */
+    iconDescription: import("prop-types").Requireable<string>;
+};

package/lib/components/Toolbar/ToolbarButton.js

@@ -10,19 +10,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var Toolbar = require('./Toolbar.js');
+var index = require('../../node_modules/prop-types/index.js');
 var react = require('@carbon/react');
 var cx = require('classnames');
-var index = require('../../node_modules/prop-types/index.js');
-var React = require('react');
 var settings = require('../../settings.js');
-var Toolbar = require('./Toolbar.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["caret", "children", "className", "renderIcon", "iconDescription"];
+var _excluded = ["caret", "children", "className", "renderIcon", "iconDescription", "label"];
 var blockClass = "".concat(Toolbar.blockClass, "__button");
 /** Toolbar buttons are common functions performed as part of a products interface or an open window.  */
 exports.ToolbarButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -33,13 +33,14 @@ exports.ToolbarButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className = _ref.className,
     renderIcon = _ref.renderIcon,
     _ref$iconDescription = _ref.iconDescription,
-    iconDescription = _ref$iconDescription === void 0 ? '' : _ref$iconDescription,
+    deprecated_iconDescription = _ref$iconDescription === void 0 ? '' : _ref$iconDescription,
+    label = _ref.label,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var Icon = renderIcon;
   return /*#__PURE__*/React__default["default"].createElement(react.IconButton, _rollupPluginBabelHelpers["extends"]({
-    align: ((_useContext = React.useContext(Toolbar.ToolbarContext)) === null || _useContext === void 0 ? void 0 : _useContext.vertical) && 'right'
+    align: (_useContext = React.useContext(Toolbar.ToolbarContext)) !== null && _useContext !== void 0 && _useContext.vertical ? 'right' : 'top'
   }, rest, {
-    label: iconDescription,
+    label: label !== null && label !== void 0 ? label : deprecated_iconDescription,
     ref: ref,
     className: cx__default["default"](className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--caret"), caret)),
     kind: "ghost",
@@ -50,7 +51,14 @@ exports.ToolbarButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 var componentName = 'ToolbarButton';
 exports.ToolbarButton.displayName = componentName;
-exports.ToolbarButton.propTypes = {
+var deprecatedProps = {
+  /**
+   * **Deprecated**
+   * Specifies the label for the icon button
+   *  */
+  iconDescription: index.propTypesExports.string
+};
+exports.ToolbarButton.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /** Determines whether the caret is rendered */
   caret: index.propTypesExports.bool,
   /** Provide the content of the `ToolbarButton` */
@@ -58,10 +66,11 @@ exports.ToolbarButton.propTypes = {
   /** Provide an optional class to be applied to the containing node */
   className: index.propTypesExports.string,
   /** Specifies the label for the icon button */
-  iconDescription: index.propTypesExports.string.isRequired,
+  label: index.propTypesExports.string.isRequired,
   /** Specifies the icon to be used by the ToolbarButton component */
   renderIcon: index.propTypesExports.func.isRequired
-};
+}, deprecatedProps);
 exports.ToolbarButton = settings.pkg.checkComponentEnabled(exports.ToolbarButton, componentName);
 
 exports.blockClass = blockClass;
+exports.deprecatedProps = deprecatedProps;

package/lib/components/Toolbar/ToolbarGroup.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
-interface ToolbarGroupProps {
+export interface ToolbarGroupProps {
     /** Provide the content of the `ToolbarGroup` */
     children?: ReactNode;
     /** Provide an optional class to be applied to the containing node */
@@ -15,4 +15,3 @@ interface ToolbarGroupProps {
 export declare let ToolbarGroup: React.ForwardRefExoticComponent<ToolbarGroupProps & {
     children?: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
-export {};

package/lib/components/Toolbar/ToolbarGroup.js

@@ -10,16 +10,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var cx = require('classnames');
-var index = require('../../node_modules/prop-types/index.js');
 var React = require('react');
-var settings = require('../../settings.js');
+var index = require('../../node_modules/prop-types/index.js');
 var Toolbar = require('./Toolbar.js');
+var cx = require('classnames');
+var settings = require('../../settings.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["className", "children"];
 /** Toolbar groups organize the commands within a toolbar into related groups. */

package/lib/components/Toolbar/index.d.ts

@@ -1,3 +1,12 @@
-export { Toolbar } from "./Toolbar";
-export { ToolbarButton } from "./ToolbarButton";
-export { ToolbarGroup } from "./ToolbarGroup";
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * 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 { Toolbar } from './Toolbar';
+export { ToolbarButton } from './ToolbarButton';
+export { ToolbarGroup } from './ToolbarGroup';
+export type { ToolbarProps } from './Toolbar';
+export type { ToolbarButtonProps } from './ToolbarButton';
+export type { ToolbarGroupProps } from './ToolbarGroup';

package/lib/components/TruncatedList/TruncatedList.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { PropsWithChildren, ReactNode } from 'react';
-interface TruncatedListProps extends PropsWithChildren {
+export interface TruncatedListProps extends PropsWithChildren {
     as?: React.ElementType | string;
     /**
      * Optional class name for expand/collapse button.
@@ -49,4 +49,3 @@ interface TruncatedListProps extends PropsWithChildren {
  * and see the entire list.
  */
 export declare let TruncatedList: React.ForwardRefExoticComponent<TruncatedListProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/lib/components/TruncatedList/TruncatedList.js

@@ -11,11 +11,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
+var settings = require('../../settings.js');
+var react = require('@carbon/react');
 var index = require('../../node_modules/prop-types/index.js');
 var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
-var settings = require('../../settings.js');
-var react = require('@carbon/react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/lib/components/TruncatedList/index.d.ts

@@ -1 +1,8 @@
-export { TruncatedList } from "./TruncatedList";
+/**
+ * Copyright IBM Corp. 2024, 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.
+ */
+export { TruncatedList } from './TruncatedList';
+export type { TruncatedListProps } from './TruncatedList';

package/lib/components/UserAvatar/UserAvatar.d.ts

@@ -1,2 +1,60 @@
-export let UserAvatar: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/**
+ * Copyright IBM Corp. 2024, 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 React from 'react';
+import '../../global/js/utils/props-helper';
+/**
+ * TODO: A description of the component.
+ */
+type BackgroundColor = 'order-1-cyan' | 'order-2-gray' | 'order-3-green' | 'order-4-magenta' | 'order-5-purple' | 'order-6-teal' | 'order-7-cyan' | 'order-8-gray' | 'order-9-green' | 'order-10-magenta' | 'order-11-purple' | 'order-12-teal';
+type Size = 'xl' | 'lg' | 'md' | 'sm';
+type TooltipAlignment = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+type ImageProps = {
+    /**
+     * When passing the image prop, supply a full path to the image to be displayed.
+     */
+    image: string;
+    /**
+     * When passing the image prop use the imageDescription prop to describe the image for screen reader.
+     */
+    imageDescription: string;
+} | {
+    image?: never;
+    imageDescription?: never;
+};
+type UserAvatarBaseProps = {
+    /**
+     * Provide the background color need to be set for UserAvatar.
+     */
+    backgroundColor?: BackgroundColor;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: 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;
+    /**
+     * Provide a custom icon to use if you need to use an icon other than the default one
+     */
+    renderIcon?: React.ElementType;
+    /**
+     * Set the size of the avatar circle
+     */
+    size?: Size;
+    /**
+     * Specify how the trigger should align with the tooltip
+     */
+    tooltipAlignment?: TooltipAlignment;
+    /**
+     * Pass in the display name to have it shown on hover
+     */
+    tooltipText?: string;
+};
+type UserAvatarProps = UserAvatarBaseProps & ImageProps;
+export declare let UserAvatar: React.ForwardRefExoticComponent<UserAvatarProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/UserAvatar/UserAvatar.js

@@ -35,42 +35,23 @@ var componentName = 'UserAvatar';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
-// Default values can be included here and then assigned to the prop params,
-// e.g. prop = defaults.prop,
-// This gathers default values together neatly and ensures non-primitive
-// values are initialized early to avoid react making unnecessary re-renders.
-// Note that default values are not required for props that are 'required',
-// nor for props where the component can apply undefined values reasonably.
-// Default values should be provided when the component needs to make a choice
-// or assumption when a prop is not supplied.
-
-// Default values for props
-// const defaults = {
-//   /* TODO: add defaults for relevant props if needed */
-// };
-
 /**
  * TODO: A description of the component.
  */
 
-var defaults = {
-  size: 'md',
-  tooltipAlignment: 'bottom',
-  backgroundColor: 'order-1-cyan'
-};
 exports.UserAvatar = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var _ref$backgroundColor = _ref.backgroundColor,
-    backgroundColor = _ref$backgroundColor === void 0 ? defaults.backgroundColor : _ref$backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? 'order-1-cyan' : _ref$backgroundColor,
     className = _ref.className,
     image = _ref.image,
     imageDescription = _ref.imageDescription,
     name = _ref.name,
     RenderIcon = _ref.renderIcon,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? defaults.size : _ref$size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
     tooltipText = _ref.tooltipText,
     _ref$tooltipAlignment = _ref.tooltipAlignment,
-    tooltipAlignment = _ref$tooltipAlignment === void 0 ? defaults.tooltipAlignment : _ref$tooltipAlignment,
+    tooltipAlignment = _ref$tooltipAlignment === void 0 ? 'bottom' : _ref$tooltipAlignment,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var carbonPrefix = react.usePrefix();
   var iconSize = {
@@ -81,7 +62,7 @@ exports.UserAvatar = /*#__PURE__*/React__default["default"].forwardRef(function
   };
   var formatInitials = function formatInitials() {
     var _ref2;
-    var parts = name.split(' ');
+    var parts = (name === null || name === void 0 ? void 0 : name.split(' ')) || [];
     var firstChar = parts[0].charAt(0).toUpperCase();
     var secondChar = parts[0].charAt(1).toUpperCase();
     if (parts.length === 1) {
@@ -161,10 +142,12 @@ exports.UserAvatar.propTypes = {
   /**
    * When passing the image prop, supply a full path to the image to be displayed.
    */
+  /**@ts-ignore */
   image: index["default"].string,
   /**
    * When passing the image prop use the imageDescription prop to describe the image for screen reader.
    */
+  /**@ts-ignore */
   imageDescription: index["default"].string.isRequired.if(function (_ref3) {
     var image = _ref3.image;
     return !!image;
@@ -176,6 +159,7 @@ exports.UserAvatar.propTypes = {
   /**
    * Provide a custom icon to use if you need to use an icon other than the default one
    */
+  /**@ts-ignore */
   renderIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
   /**
    * Set the size of the avatar circle

package/lib/components/UserProfileImage/UserProfileImage.d.ts

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference path="../../../src/custom-typings/index.d.ts" />
-import React from 'react';
-import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
 import '../../global/js/utils/props-helper';
+import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
 import { IconButton } from '@carbon/react';
+import React from 'react';
 type imageProps = {
     /**
      * When passing the image prop, supply a full path to the image to be displayed.
@@ -61,7 +61,7 @@ type UserProfileImageBaseProps = {
      */
     tooltipText?: string;
 };
-type UserProfileImageProps = UserProfileImageBaseProps & imageProps;
+export type UserProfileImageProps = UserProfileImageBaseProps & imageProps;
 /**
  * The user profile avatar allows for an image of the user to be displayed by passing in the image prop. By default the component will display a user icon on a blue background.
  */

package/lib/components/UserProfileImage/UserProfileImage.js

@@ -10,14 +10,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var React = require('react');
+require('../../global/js/utils/props-helper.js');
+var icons = require('@carbon/react/icons');
+var react = require('@carbon/react');
 var index = require('../../node_modules/prop-types/index.js');
+var React = require('react');
 var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
-require('../../global/js/utils/props-helper.js');
 var settings = require('../../settings.js');
-var icons = require('@carbon/react/icons');
-var react = require('@carbon/react');
 var TooltipTrigger = require('../TooltipTrigger/TooltipTrigger.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -26,6 +26,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText", "tooltipAlignment"];
+
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--user-profile-image");
 var componentName = 'UserProfileImage';

package/lib/components/UserProfileImage/index.d.ts

@@ -1 +1,2 @@
-export { UserProfileImage } from "./UserProfileImage";
+export { UserProfileImage } from './UserProfileImage';
+export type { UserProfileImageProps } from './UserProfileImage';